/* 0) Poquito for buttons only */
@font-face {
  font-family: "Poquito";
  src: url("../fonts/Poquito-Regular.otf") format("opentype");
  font-display: swap;
}

/* 1) Reset & Vars */
:root {
  --welcome-bg: url("../welcome-bg.jpg") center/cover no-repeat;
  --txt: #fff;    --txt-muted: #ccc;
  --btn1: #f1c40f; /* Copy IP */
  --btn2: #7289da; /* Discord */
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body {
  height:100%;
  overflow-x:hidden;
  font-family:"Inter",sans-serif;
}

/* 2) Hero layers */
#hero { position:relative; height:100vh; }
.layer {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  background-size:cover;
  transition: opacity .4s ease;
}
#layer1 { background: var(--welcome-bg); }
#layer2 { background: url("../server-bg.jpg") center/cover no-repeat; opacity:0; }

/* — replace your old “#layer1 h1” block with this — */
#layer1 h1 {
  position: absolute;
  top: 35px;               /* 35px down from the top of #layer1 */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;

  font-size: 5rem;
  color: var(--txt);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);

  /* textured box */
  background-color: #333;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05) 0,
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 4px
  );
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  z-index: 10;             /* sit above the layers */
}


/* Server-hero */
.server-hero {
  position:relative; height:100%;
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:2rem;
}
.server-hero img {
  width:35%; max-width:300px;
  border-radius:1rem;
  box-shadow:0 8px 24px rgba(0,0,0,0.6);
}
.hero-buttons {
  display:flex; flex-direction:column; gap:1rem;
  margin-left:2rem;
}

/* 3) Buttons in Poquito */
.copy-btn, .discord-btn {
  padding:1rem 2rem; border:none; border-radius:2rem;
  font-size:1.2rem; cursor:pointer; position:relative;
  overflow:hidden; transition:transform .2s;
  font-family:"Poquito","Inter",sans-serif;
}
.copy-btn { background:var(--btn1); color:#000; }
.discord-btn {
  background:var(--btn2); color:var(--txt);
  text-decoration:none; display:inline-flex; align-items:center;
}
.copy-btn:hover, .discord-btn:hover { transform:translateY(-3px) }
.copy-btn::before, .discord-btn::before {
  content:""; position:absolute; top:0; left:-100%;
  width:50%; height:100%;
  background:rgba(255,255,255,0.3);
  transform:skewX(-25deg);
  transition:left .6s;
}
.copy-btn:hover::before, .discord-btn:hover::before {
  left:200%;
}

/* 4) Features: bottom-left nav + dynamic bg */
#features {
  position:relative;
  min-height:100vh;
  background: url("../performance-bg.jpg") center/cover no-repeat;
  background-size:cover;
  transition: background .5s ease;
}
.features-nav {
  position:absolute; bottom:2rem; left:2rem;
  display:flex; flex-direction:column; gap:1rem;
}
.feature-item {
  background:rgba(0,0,0,0.3);
  padding:.8rem 1.2rem;
  border-radius:.75rem;
  color:var(--txt);
  cursor:pointer;
  transition: background .3s;
}
.feature-item.active,
.feature-item:hover {
  background:rgba(0,0,0,0.5);
}

/* bottom-right description */
.features-content {
  position:absolute; bottom:2rem; right:2rem;
  max-width:40vw;
}
.feature-detail {
  display:none;
  padding:1.5rem;
  border-radius:.75rem;
  color:var(--txt);
  position:relative;
  transition: background .3s;
}
.feature-detail.active { display:block; }
.feature-detail:hover {
  background:rgba(0,0,0,0.5);
}
/* shimmer on hover */
.feature-detail::before {
  content:""; position:absolute; top:0; left:-100%;
  width:50%; height:100%;
  background:rgba(255,255,255,0.2);
  transform:skewX(-25deg);
  transition:left .6s ease;
}
.feature-detail:hover::before {
  left:200%;
}
.feature-text h3 { margin-bottom:.5rem; color:var(--btn1); }
.feature-text p  { margin:0; color:var(--txt-muted); line-height:1.4; }

/* === Server Card (left image, right large buttons) === */

/* 0) Ensure Poquito is already loaded earlier in the file */

/* === Server Card (left image, right joint CTA box) === */

/* full-viewport height + darker gradient */
#server-card {
  height: 100vh;
  background: linear-gradient(135deg, #111111 0%, #333333 100%);
}

/* container split */
.server-container {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%; /* adjust side padding as you like */
}

/* image wrapper */
.server-image-box {
  background: #000;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.server-image-box img {
  display: block;
  max-height: 80vh;
  width: auto;
  border-radius: 0.5rem;
}

/* joint button box */
.server-cta-box {
  background: rgba(0, 0, 0, 0.6);
  padding: 2rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* enlarge & style buttons (Poquito font already loaded) */
.server-cta-box .copy-btn,
.server-cta-box .discord-btn {
  font-family: 'Poquito','Inter',sans-serif;
  font-size: 1.5rem;
  padding: 1.2rem 2.5rem;
  border-radius: 2rem;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .2s;
}

/* Copy / Discord colors */
.server-cta-box .copy-btn {
  background: #f1c40f;
  color: #111;
}
.server-cta-box .discord-btn {
  background: #fff;
  color: #2563eb;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* hover lift */
.server-cta-box .copy-btn:hover,
.server-cta-box .discord-btn:hover {
  transform: translateY(-4px);
}

/* shimmer effect */
.server-cta-box .copy-btn::before,
.server-cta-box .discord-btn::before {
  content: "";
  position: absolute; top: 0; left: -100%;
  width: 50%; height: 100%;
  background: rgba(255,255,255,0.5);
  transform: skewX(-25deg);
  transition: left .6s ease;
}
.server-cta-box .copy-btn:hover::before,
.server-cta-box .discord-btn:hover::before {
  left: 200%;
}

/* 8) Footer – black background, white text */
footer {
  background: #000;       /* solid black */
  color: #fff;            /* white text */
  text-align: center;
  padding: 1rem;
  font-size: 0.85rem;
}

/* 8) Section Dividers – textured, overlapping the next section */
/* make sure parent sections are positioned */
#features,
#server-card {
  position: relative;
}

/* the divider stripe */
#features::after,
#server-card::after {
  content: "";
  position: absolute;
  bottom: -6px;       /* half of the divider’s height so it overlaps both sections */
  left: 0;
  width: 100%;
  height: 12px;       /* total thickness */
  background-color: #333;  /* dark gray base */
  /* subtle diagonal noise-ish pattern */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05) 0,
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 4px
  );
  background-size: cover;
  z-index: 5;         /* on top of both sections */
  pointer-events: none;
}

/* make sure parent sections are positioned */
#features,
#server-card {
  position: relative;
}

/* the top divider stripe */
#features::before,
#server-card::before {
  content: "";
  position: absolute;
  top: -6px;         /* half of the divider’s height so it overlaps both sections */
  left: 0;
  width: 100%;
  height: 12px;      /* total thickness */
  background-color: #333;  /* dark gray base */
  /* subtle diagonal noise-ish pattern */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05) 0,
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 4px
  );
  background-size: cover;
  z-index: 5;        /* on top of both sections */
  pointer-events: none;
}

/* make sure the root is positioned */
html {
  position: relative;
}

/* the top‐of‐page divider stripe */
html::before {
  content: "";
  position: absolute;
  top: 0;              /* sticks to the very top of the viewport */
  left: 0;
  width: 100%;
  height: 12px;        /* same thickness as your other dividers */
  background-color: #333;  
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05) 0,
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 4px
  );
  background-size: cover;
  z-index: 999;        /* high enough to sit above everything */
  pointer-events: none;
}

/* bottom‐of‐page divider stripe */
html::after {
  content: "";
  position: fixed;
  bottom: 0;           /* sticks to the very bottom of the viewport */
  left: 0;
  width: 100%;
  height: 12px;        /* same thickness */
  background-color: #333;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05) 0,
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 4px
  );
  background-size: cover;
  z-index: 999;        /* above everything else */
  pointer-events: none;
}

footer .footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

footer .email-link {
  color: var(--btn1);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background: rgba(241,196,15,0.1);
  transition: background .2s;
}
footer .email-link:hover {
  background: rgba(241,196,15,0.2);
}