/* WYLDHEART landing — cleaned structure, overlap-proof hero */

/* -------------------------
   Design tokens
-------------------------- */
:root{
  --bg-0:#0f1512;
  --text:#F1EFE8;
  --accent:burlywood;
  --accentText:#141c18;

  --line:rgba(180,173,156,0.22);

  --max:1120px;
  --tap:44px;

  --shadow:0 18px 48px rgba(0,0,0,0.35);

  --btn-bg:rgba(255,255,255,0.06);
  --btn-border:rgba(255,255,255,0.16);
  --btn-text:rgba(255,255,255,0.92);

  --btn-spamprotect-bg:rgba(0, 236, 130, 0.95);
  --btn-spamprotect--text:rgba(0 ,0,0,0.92);


  /* Hero layout tuning */
  --hero-maxw: 1100px;
  --hero-pad: clamp(16px, 3vw, 44px);
  --hero-top-pad: clamp(28px, 6vh, 96px);
  --hero-bottom-pad: clamp(18px, 4vh, 56px);
  --hero-gap: clamp(12px, 2.2vh, 28px);

  --pills-bg: rgba(15,21,18,0.35);
  --pills-border: rgba(255,255,255,0.08);
}

/* -------------------------
   Base
-------------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  overflow-x:hidden;
  color:var(--text);
  background:var(--bg-0);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.2px;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:4px; }
img{ max-width:100%; display:block; height:auto; }

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

.container{
  width:min(var(--max), calc(100% - 48px));
  margin:0 auto;
}

@media (max-width: 520px){
  .container{ width:min(var(--max), calc(100% - 28px)); }
}

/* -------------------------
   Divider
-------------------------- */
.divider{
  height:1px;
  border:0;
  margin:0;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}

/* -------------------------
   Buttons
-------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:12px 16px;
  min-height:var(--tap);

  border-radius:999px;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--btn-text);

  font-weight:600;
  font-size:14px;

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;

  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}

button:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

.spam-protection{
  background: var(--btn-spamprotect-bg);
  color: var(--btn-spamprotect--text);
}

.btn:hover{
  transform:none;                 /* avoids triggering backdrop repaint */
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.24);
  text-decoration:none;
}

.btn.primary{
  background:var(--accent);
  color:var(--accentText);
  border-color:transparent;
}

.btn.primary:hover{ background:rgba(180,173,156,0.92); }

.btn-lg{
  padding: clamp(12px, 1.4vw, 18px) clamp(18px, 2vw, 28px);
  font-size: clamp(16px, 1.6vw, 22px);
}

/* -------------------------
   Social Icons
-------------------------- */

.social-bar{
display:flex;
gap:16px;
font-size:24px;
}

.social-bar a{
color:white;
transition:0.2s;
}

.social-bar a:hover{
opacity:0.7;
}

/* -------------------------
   Top bar (kept, but hidden on this page)
-------------------------- */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:rgba(10,14,12,0.22);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:650;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size:13px;
  color:rgba(255,255,255,0.85);
}

.studio-logo img{
  height:30px;
  width:auto;
  opacity:0.9;
  filter:
    brightness(0) invert(1)
    sepia(0.15)
    saturate(0.6)
    hue-rotate(-5deg)
    brightness(0.92);
}

.studio-logo a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.navlinks{
  display:flex;
  gap:18px;
  align-items:center;
  color:rgba(255,255,255,0.75);
  font-size:13px;
}

.back-to-top{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.back-to-top[hidden]{ display:none !important; }

/* Coming soon page: remove it for all (as per your original intent) */
.topbar{ display:none !important; }
.navlinks{ display:none; }

/* -------------------------
   COOKIES
-------------------------- */

.cookie-banner{
  position: fixed;
  left: 50%;
  top: max(16px, env(safe-area-inset-top));
  transform: translateX(-50%);
  z-index: 99999;

  width: min(720px, calc(100% - 28px));
  padding: 14px 14px 14px 16px;

  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  color: var(--text);
  background: rgba(15,21,18,0.82);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

.cookie-banner p{
  margin: 0;
  color: rgba(255,255,255,0.86);
  font-size: 14px;
  line-height: 1.45;
}

.cookie-banner a{
  color: var(--accent);
  text-underline-offset: 3px;
}

.cookie-buttons{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-buttons button{
  appearance: none;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);

  min-height: var(--tap);
  padding: 12px 16px;
  border-radius: 999px;

  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;

  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.cookie-buttons button:hover{
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.24);
}

.cookie-buttons #accept-cookies{
  background: var(--accent);
  color: var(--accentText);
  border-color: transparent;
}

.cookie-buttons #accept-cookies:hover{
  background: rgba(180,173,156,0.92);
}

@media (max-width: 720px){
  .cookie-banner{
    width: min(100% - 20px, 560px);
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    transform: none;

    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }

  .cookie-buttons{
    width: 100%;
    flex-direction: column;
  }

  .cookie-buttons button{
    width: 100%;
  }
}

/* -------------------------
   HERO (structured: top / mid / bottom)
-------------------------- */
.hero{
  position:relative;
  overflow:hidden;

  min-height:100svh;
  display:flex;
  justify-content:center;
  align-items:stretch;

  padding: var(--hero-pad);
}

@supports (min-height: 100dvh){
  .hero{ min-height:100dvh; }
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-image: url("/assets/wyldheart-scene.webp");
  background-position: center 60%;
  background-size: cover;
  background-repeat: no-repeat;
  /* filter:saturate(1.05) contrast(1.02); */
  filter: contrast(1.08) saturate(1.1) brightness(0.96);
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 35%, rgba(15,21,18,0.10), rgba(15,21,18,0.86)),
    linear-gradient(180deg, rgba(15,21,18,0.08), rgba(15,21,18,0.92));
}

.hero-inner{
  width:min(var(--hero-maxw), 100%);
  margin-inline:auto;

  position:relative;
  z-index:2;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

  /* Use padding to create “air” */
  padding-top: var(--hero-top-pad);
  padding-bottom: var(--hero-bottom-pad);

  /* Let bottom region hug bottom */
  min-height: calc(100svh - (2 * var(--hero-pad)));
  gap: var(--hero-gap);
}

@supports (min-height: 100dvh){
  .hero-inner{
    min-height: calc(100dvh - (2 * var(--hero-pad)));
  }
}

/* TOP */
.hero-top{
  pointer-events:none;
}

.hero-logo{
  width: min(1220px, 92vw);
  height:auto;
  object-fit:contain;
}

/* MID */
.hero-mid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(10px, 1.8vh, 18px);
  max-width: 100%;
}

.hero-event{
  margin:0;
  max-width: 95ch;
  font-family: "Cormorant Garamond", system-ui, -apple-system, sans-serif;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.35;
  letter-spacing: 0.3px;
  text-wrap: balance;
}

.hero-countdown{
  font-family: "Cinzel Decorative", serif;
  text-align:center;
}

.hero-countdown:hover{
  cursor: grabbing;
}


.cd-days{
  margin:0;
  font-size: clamp(42px, 5.3vw, 92px);
  font-weight:700;
  letter-spacing:0.08em;
  line-height: 1.0;
}

.cd-time{
  margin:0;
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing:0.15em;
  opacity:0.85;
}

/* BOTTOM */
.hero-bottom{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(12px, 2vh, 18px);

  /* pushes the whole bottom region down */
  margin-top:auto;
}

.hero-cta{
  max-width: 92vw;
}

.cta-lead{
  margin:0;
  font-size:15px;
  opacity:0.8;
  font-family: "Cormorant Garamond", system-ui, -apple-system, sans-serif;
}

.hero-keywords{
  width:100%;
  display:flex;
  justify-content:center;
  padding: 10px 12px;
  position:relative;
  margin-bottom: clamp(10px, 3vh, 36px);
}

.hero-keywords::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background: var(--pills-bg);
  backdrop-filter: blur(8px);
  z-index:-1;
  border:1px solid var(--pills-border);
}

.meta-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  color:rgba(255,255,255,0.74);
  font-size:13px;
}

.chip{
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  padding:6px 10px;
  border-radius:999px;
  opacity:0.9;
  white-space:nowrap;
}

/* -------------------------
   Footer
-------------------------- */
footer{
  padding:36px 0 54px;
  color:rgba(255,255,255,0.70);
  font-size:13px;
}

.footer-row{
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
}

.footer-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  color:#b4ad9c;
}

.footer-links span{ opacity:.5; }

/* -------------------------
   Responsive guards (small, principled)
-------------------------- */

/* Mobile: slightly smaller base type and tighter hero padding */
@media (max-width: 900px){
  body{
    font:12px/1.20 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  }

  .hero-inner{
    padding-top: clamp(22px, 5vh, 56px);
    padding-bottom: clamp(14px, 4vh, 36px);
    min-height: auto; /* flow naturally on mobile */
  }

  .hero-logo{
    width: min(760px, 92vw);
  }

  .hero-bottom{
    margin-top: 0; /* don’t force “bottom anchoring” on very small viewports */
  }

  .hero-keywords{
    margin-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

/* iPad Air-ish: prevent tightness + keep logo/text separation */
@media (min-width: 768px) and (max-width: 1024px){
  :root{
    --hero-top-pad: clamp(24px, 5vh, 72px);
    --hero-gap: clamp(12px, 1.8vh, 22px);
  }
}

/* Tall phones like OnePlus 9 Pro (20:9): reduce vertical pressure */
@media (max-aspect-ratio: 10/19){
  .cd-days{ font-size: clamp(36px, 7vw, 66px); }
  :root{
    --hero-top-pad: clamp(18px, 4vh, 48px);
    --hero-bottom-pad: clamp(12px, 3vh, 30px);
    --hero-gap: clamp(10px, 1.6vh, 18px);
  }
}

/* Very short heights (landscape / small windows) */
@media (max-height: 700px){
  :root{
    --hero-top-pad: 18px;
    --hero-bottom-pad: 16px;
  }
  .cd-days{ font-size: clamp(32px, 6vw, 56px); }
}

.hero-bottom{
  gap: clamp(32px, 4.2vh, 38px);   /* space between CTA and chips */
}

/* Mobile (phones): larger logo */
@media (max-width: 600px){
  img.hero-logo{
    max-width: none;                 /* override global img cap */
    width: min(1200px, 120vw);       /* makes it visibly larger */
    height: auto;
  }
}
.privacy-text{
  font-size: 9pt;
  text-align: left;
}

.privacy-text strong{
  font-size: 19pt;
  display: block;
}

.veil-awakened .hero-bg{
  filter: contrast(1.22) saturate(1.3) brightness(1.15) hue-rotate(-8deg);
  transition: filter 0.4s ease;
}

.vindsvept{
  position: fixed;
  left: 50%;
  top: 28px;
  transform: translateX(-50%);
  z-index: 9999;

  padding: 18px 22px;
  border-radius: 16px;

  background: rgba(15,21,18,0.92);
  border: 1px solid rgba(255,255,255,0.14);

  color: var(--text);
  text-align: center;

  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);

  animation: eggFade 0.4s ease;
}

/* .vindsvept a{
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 20px;

  padding: 10px 16px;
  border-radius: 999px;

  font-weight: 600;
  font-size: 14px;

  color: #141c18;
  background: burlywood;

  border: 0;
  text-decoration: none;

  transition: transform .15s ease, box-shadow .15s ease;
}

.vindsvept a:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
} */

#vindsvept {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
}

#vindsvept[hidden] {
  display: none;
}

.egg-panel {
  position: relative;
  width: min(820px, 100%);
  padding: 34px 42px 30px;
  border-radius: 28px;
  text-align: center;

  background:
    linear-gradient(180deg, rgba(12,19,17,0.96), rgba(8,12,11,0.94)),
    radial-gradient(circle at top, rgba(200,170,110,0.08), transparent 45%);
  border: 1px solid rgba(214,184,129,0.18);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 0 30px rgba(183,145,78,0.08);
  backdrop-filter: blur(14px);

  animation: eggReveal 220ms ease-out;
}

@keyframes eggReveal {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.egg-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 16px 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #dfbf8b, #d2ae72);
  color: #142018;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.28);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.egg-link:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.32);
}

.egg-player-frame {
  margin-top: 22px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.egg-player-frame iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 14px;
}

.egg-runes {
  margin-bottom: 18px;
  color: rgba(255,245,220,0.85);
  font-size: 1.8rem;
  letter-spacing: 0.2em;
  text-align: center;
  opacity: 0.9;
}

.egg-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.egg-close:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
  transform: scale(1.04);
}

.egg-subtitle {
  margin: 0 0 22px;
  color: rgba(220,214,194,0.72);
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes eggFade{
  from{
    opacity:0;
    transform: translate(-50%, 10px);
  }
  to{
    opacity:1;
    transform: translate(-50%, 0);
  }
}

#countdown, .hero-top {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}


.hero-cta{
  opacity:0;
  transform: translateY(24px);
  animation: heroReveal 1.2s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes heroReveal{
  to{
    opacity:1;
    transform: translateY(0);
  }
}

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}