/* ============================================================
   FORTUN ∞ WISHDOM — WISHU Kickstarter
   Visual system
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ---- Tokens ---- */
:root{
  /* palette sampled from source */
  --bg:        #090b11;   /* near-black deep navy base (lifted a hair) */
  --bg-2:      #0d1018;   /* lifted panel navy */
  --bg-3:      #11141e;
  --gold:      #f0c574;   /* myth / infinity (slightly brighter) */
  --gold-soft: #dfaa49;
  --gold-deep: #9c7430;
  --orange:    #ec7430;   /* WISHU product + single primary CTA */
  --orange-hi: #f5894a;
  --paper:     #f3ecdf;   /* warm off-white body (brighter) */
  --paper-dim: #c6bcaa;
  --paper-fade:#988f7e;
  --line:      rgba(237,190,99,.2);

  /* 3-font system: Cinzel (mythic titles) · Inter (body) · Space Grotesk (UI/labels).
     Cormorant kept only for soft poetic italic lines, per client's 'or your current serif style'. */
  --font-display:'Cinzel', Georgia, serif;
  --font-serif:'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-ui:   'Space Grotesk', system-ui, -apple-system, sans-serif;

  /* type scale — one of each */
  --fs-display: clamp(3.4rem, 8.5vw, 7.5rem);
  --fs-h1:      clamp(2.4rem, 5.2vw, 4.6rem);
  --fs-h2:      clamp(1.7rem, 3.4vw, 2.9rem);
  --fs-body:    clamp(1.06rem, 1.25vw, 1.27rem);
  --fs-cap:     0.78rem;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 60px);
  --rhythm: clamp(96px, 14vh, 180px);
  --rhythm-bleed: clamp(40px, 6.5vh, 92px);
  /* single unified seam between sections — every boundary uses this so gaps are identical */
  --seam: clamp(72px, 10vh, 140px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
/* responsive media safety net — nothing overflows its column */
img,svg,video{max-width:100%}
img{height:auto}
body{
  background:var(--bg);
  color:var(--paper);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{overflow:hidden;height:100vh}

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 100% at 50% 46%, #100a16 0%, #08070f 54%, #04040a 100%);
  transition:opacity .8s ease, visibility .8s ease}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none}
#preloader .pl-inf{width:clamp(64px,7vw,88px);height:auto;overflow:visible}
#preloader .pl-track{stroke-width:1.4}
#preloader .pl-draw{stroke-width:1.4;stroke-dasharray:48;stroke-dashoffset:48;
  filter:drop-shadow(0 0 4px rgba(237,190,99,.45));transition:stroke-dashoffset .3s ease}
#preloader.done .pl-draw{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){#preloader .pl-draw{transition:none}}

/* nebula glow behind the animated starfield canvas (#starfield, z-index:-2) */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(1100px 760px at 50% -8%, rgba(240,197,116,.1), transparent 62%),
    radial-gradient(900px 680px at 84% 16%, rgba(120,150,220,.08), transparent 66%),
    radial-gradient(820px 620px at 12% 82%, rgba(240,197,116,.06), transparent 68%),
    var(--bg);
  z-index:-3;
  pointer-events:none;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background:radial-gradient(125% 105% at 50% 50%, transparent 60%, rgba(2,3,6,.6) 100%);
  z-index:-1; pointer-events:none;
}

img{display:block;max-width:100%}

/* ---- type helpers ---- */
.serif{font-family:var(--font-serif)}
.eyebrow{
  font-family:var(--font-ui);
  font-weight:500;
  font-size:var(--fs-cap);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
}
.eyebrow.orange{color:var(--gold)}
.myth{
  font-family:var(--font-serif);
  font-weight:500;
  line-height:1.12;
  letter-spacing:.01em;
  color:var(--paper);
  text-wrap:balance;
}
.muted{color:var(--paper-dim)}

.wordmark{
  font-family:var(--font-serif);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper);
  display:inline-flex; align-items:center; gap:.5em;
  white-space:nowrap;
}
.wordmark .inf{color:var(--gold);font-size:1.15em;font-weight:400}

/* infinity divider */
.inf-rule{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  color:var(--gold);opacity:.7;
}
.inf-rule::before,.inf-rule::after{
  content:"";height:1px;width:min(90px,16vw);
  background:linear-gradient(90deg,transparent,var(--gold-soft));
}
.inf-rule::after{background:linear-gradient(270deg,transparent,var(--gold-soft))}
.inf-rule .glyph{font-size:1.3rem}

/* ---- buttons ---- */
.btn{
  font-family:var(--font-ui);font-weight:600;
  font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1rem 1.9rem;min-height:48px;border-radius:100px;
  cursor:pointer;border:1px solid transparent;white-space:nowrap;
  text-decoration:none;transition:transform .25s ease,background .25s ease,box-shadow .25s ease,color .25s ease;
}
.btn-primary{
  background:linear-gradient(180deg,var(--gold),var(--gold-soft));color:#1c1306;
  box-shadow:0 0 0 0 rgba(237,190,99,.5);
}
.btn-primary:hover{background:linear-gradient(180deg,#f3cf86,var(--gold));transform:translateY(-2px);
  box-shadow:0 14px 40px -10px rgba(237,190,99,.55)}
.btn-ghost{
  background:transparent;color:var(--paper);
  border-color:rgba(237,190,99,.4);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
/* refined outline button (header) */
.btn-line{background:transparent;color:var(--paper);border:1px solid rgba(237,190,99,.42);font-weight:600;letter-spacing:.14em;border-radius:100px;position:relative;overflow:hidden}
.btn-line::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--gold),var(--gold-soft));opacity:0;transition:opacity .3s ease;z-index:-1}
.btn-line:hover{border-color:var(--gold);color:#1c1306;transform:translateY(-1px)}
.btn-line:hover::before{opacity:1}
.btn .arrow{transition:transform .25s ease}
.btn:hover .arrow{transform:translateX(4px)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
*:focus:not(:focus-visible){outline:none}

/* ============================================================
   INTRO GATE
   ============================================================ */
#gate{
  position:fixed; top:0; left:0; right:0; bottom:auto; z-index:1000;
  height:100svh; height:100dvh; min-height:520px;
  overflow:hidden; background:#05060b;
  transform-origin:50% 42%;
  will-change:transform,opacity;
}

/* ---- full-bleed cinematic scene ---- */
#gate .gate-scene{position:absolute;inset:0;z-index:1;overflow:hidden;background:#05060b}
#gate .cmg-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 44%;
  transform:scale(1.36) translateZ(0);transform-origin:52% 46%;backface-visibility:hidden}
/* cinematic grade: build a clean dark text-stage on the left, keep the boy clear on the right,
   melt every edge into the page bg so there is no rectangle */
#gate .gate-grade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg, #05060b 0%, rgba(5,6,11,.96) 28%, rgba(5,6,11,.72) 46%, rgba(5,6,11,.16) 66%, transparent 82%),
    linear-gradient(180deg, rgba(5,6,11,.5) 0%, transparent 18%, transparent 66%, rgba(5,6,11,.8) 92%, #05060b 100%),
    radial-gradient(120% 100% at 70% 44%, transparent 44%, rgba(5,6,11,.42) 100%)}

/* ---- header logo, top-left ---- */
#gate .gate-head{
  position:absolute; top:0; left:0; right:0; z-index:6;
  display:flex; align-items:center; justify-content:flex-start;
  padding:clamp(18px,2.4vw,28px) clamp(28px,6vw,84px);
}
.gate-logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none}
.gate-logo .gl-inf-mark{width:clamp(40px,4vw,50px);height:auto;filter:drop-shadow(0 0 12px rgba(237,190,99,.45))}
.gate-logo .gate-wordmark{width:clamp(180px,16.5vw,250px);height:auto;display:block;filter:brightness(1.5) contrast(1.12) saturate(1.12) drop-shadow(0 1px 5px rgba(0,0,0,.6))}
.gate-logo:hover .gate-wordmark{filter:drop-shadow(0 2px 14px rgba(237,190,99,.4))}
.gate-logo:hover .gl-inf-mark{filter:drop-shadow(0 0 18px rgba(237,190,99,.7))}

/* ---- copy block, anchored on the dark left stage ---- */
#gate .gate-title{
  position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:6;
  width:min(56%,720px); padding-left:clamp(28px,6vw,84px); padding-right:clamp(20px,2vw,32px);
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
}
#gate .gate-kicker{font-family:var(--font-ui);font-weight:500;font-size:clamp(.66rem,.84vw,.78rem);
  letter-spacing:.44em;text-transform:uppercase;color:var(--gold);margin:0 0 clamp(1.8rem,3.4vh,2.6rem);
  display:inline-flex;align-items:center;gap:.9em;opacity:.92}
#gate .gate-kicker::before{content:"";width:clamp(26px,3vw,42px);height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
#gate .gate-line{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(2.6rem,min(4.8vw,9.6vh),5rem);line-height:1.04;letter-spacing:.004em;
  color:#f7f1e6;margin:0;
  text-shadow:0 2px 40px rgba(0,0,0,.7),0 1px 4px rgba(0,0,0,.5);
}
#gate .gate-line .gl-1,#gate .gate-line .gl-2{display:block;white-space:nowrap}
#gate .gate-line .gl-1{color:#efe7d8;font-weight:400}
#gate .gate-line .gl-2{margin-top:.14em;font-weight:700;
  color:#f1c97d;
  -webkit-text-fill-color:#f1c97d;
  text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 22px rgba(240,197,116,.28);
}
@keyframes goldShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){#gate .gate-line .gl-2{animation:none}}
#gate .gate-line em{font-style:italic;color:#ffdc92}
#gate .gate-sub{font-family:var(--font-sans);font-weight:400;font-size:clamp(1.02rem,1.18vw,1.18rem);
  color:#cfc6b5;margin:clamp(1.9rem,3.4vh,2.7rem) 0 0;max-width:34ch;line-height:1.7;letter-spacing:.005em;
  text-shadow:0 1px 16px rgba(0,0,0,.6)}

#gate .gate-btn{margin-top:clamp(2.8rem,5.8vh,4.2rem);display:inline-flex;align-items:center;justify-content:center;gap:.8em;
  font-family:var(--font-ui);font-weight:600;font-size:clamp(.82rem,.95vw,.92rem);letter-spacing:.18em;text-transform:uppercase;
  color:#160f02;padding:clamp(1rem,1.9vh,1.25rem) clamp(2.4rem,4vw,3.1rem);border:1px solid var(--gold);border-radius:100px;
  background:linear-gradient(180deg,#f4d289,#e8bb68);cursor:pointer;position:relative;overflow:hidden;
  box-shadow:0 14px 40px -16px rgba(237,190,99,.5);
  transition:color .4s ease,transform .4s cubic-bezier(.16,.7,.3,1),box-shadow .45s ease,border-color .4s ease}
#gate .gate-btn .gb-label{position:relative;z-index:3;white-space:nowrap;text-shadow:0 1px 0 rgba(255,247,224,.45)}
#gate .gate-btn{white-space:nowrap}
#gate .gate-btn::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:linear-gradient(180deg,#f3d289,#e7bd6f);opacity:0;transition:opacity .5s cubic-bezier(.16,.7,.3,1)}
/* one-time shimmer on reveal (client request: subtle, single pass, no permanent glitter) */
#gate .gate-btn::after{content:"";position:absolute;top:0;left:0;width:60%;height:100%;z-index:2;pointer-events:none;
  transform:translateX(-180%) skewX(-18deg);opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
#gate.gate-cta .gate-btn::after{animation:gbShimmer 1.15s cubic-bezier(.22,.7,.3,1) 2s 1 both}
@keyframes gbShimmer{0%{opacity:0;transform:translateX(-180%) skewX(-18deg)}
  18%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateX(320%) skewX(-18deg)}}
#gate .gate-btn:hover{color:#1c1306;transform:translateY(-2px);
  box-shadow:0 20px 50px -16px rgba(237,190,99,.7)}
#gate .gate-btn:hover::before{opacity:1}
#gate .gate-btn:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
/* magic sparkles flying out of the button */
#gate .gate-btn .gb-spark{display:none}
#gate .gate-btn .gb-spark.s1{top:-14px;left:16%;--tx:-8px;--ty:-16px}
#gate .gate-btn .gb-spark.s2{top:-20px;left:48%;width:16px;height:16px;--tx:0px;--ty:-22px}
#gate .gate-btn .gb-spark.s3{top:6%;right:-14px;--tx:20px;--ty:-10px}
#gate .gate-btn .gb-spark.s4{bottom:-14px;right:24%;width:14px;height:14px;--tx:10px;--ty:20px}
#gate .gate-btn .gb-spark.s5{bottom:-10px;left:24%;width:10px;height:10px;--tx:-10px;--ty:18px}
#gate .gate-btn .gb-spark.s6{top:24%;left:-14px;width:11px;height:11px;--tx:-22px;--ty:-2px}
#gate .gate-btn .gb-spark.s7{top:-12px;left:66%;width:10px;height:10px;--tx:8px;--ty:-16px}
#gate .gate-btn .gb-spark.s8{top:42%;right:-13px;width:11px;height:11px;--tx:22px;--ty:4px}
#gate.gate-cta .gate-btn .gb-spark{animation:gbSparkFly 2.6s ease-out infinite}
#gate.gate-cta .gate-btn .gb-spark.s2{animation-delay:.34s}
#gate.gate-cta .gate-btn .gb-spark.s3{animation-delay:.7s}
#gate.gate-cta .gate-btn .gb-spark.s4{animation-delay:1.05s}
#gate.gate-cta .gate-btn .gb-spark.s5{animation-delay:1.4s}
#gate.gate-cta .gate-btn .gb-spark.s6{animation-delay:1.75s}
#gate.gate-cta .gate-btn .gb-spark.s7{animation-delay:2.05s}
#gate.gate-cta .gate-btn .gb-spark.s8{animation-delay:.95s}
@keyframes gbSparkFly{
  0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0deg)}
  40%{opacity:1;transform:translate(calc(var(--tx)*.5),calc(var(--ty)*.5)) scale(1) rotate(30deg)}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.4) rotate(72deg)}}
@media(prefers-reduced-motion:reduce){#gate .gate-btn,#gate .gate-btn::after,#gate.gate-cta .gate-btn::after{animation:none}#gate .gate-btn .gb-spark{display:none}}

/* ---- entrance choreography (once only): logo .1s · kicker .25s · title .4s · subtitle .9s · button 1.4s ---- */
.anim #gate .gate-logo{opacity:0;transform:translateY(-8px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,.7,.3,1)}
.anim #gate.gate-ready .gate-logo{opacity:1;transform:none;transition-delay:.1s}
.anim #gate .gate-kicker,.anim #gate .gate-line{opacity:0;transform:translateY(16px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,.7,.3,1)}
.anim #gate.gate-ready .gate-kicker{opacity:1;transform:none;transition-delay:.25s}
.anim #gate.gate-ready .gate-line{opacity:1;transform:none;transition-delay:.4s}
#gate .gate-sub{opacity:0;translate:0 12px;transition:opacity 1s ease .9s,translate 1s cubic-bezier(.16,.7,.3,1) .9s}
#gate .gate-btn{opacity:0;translate:0 10px;
  transition:opacity .8s ease 1.4s,translate .8s cubic-bezier(.16,.7,.3,1) 1.4s,color .4s ease,transform .4s cubic-bezier(.16,.7,.3,1),box-shadow .45s ease,border-color .4s ease}
#gate.gate-cta .gate-sub{opacity:1;translate:0 0}
#gate.gate-cta .gate-btn{opacity:1;translate:0 0}

/* ---- responsive ---- */

/* Tablet & phone portrait: boy lives in the upper band, copy on a solid stage below */
@media(max-width:900px){
  #gate .cmg-vid{object-position:52% 24%;transform:scale(1.12)}
  #gate .gate-grade{background:
    linear-gradient(180deg, rgba(5,6,11,.5) 0%, transparent 14%, transparent 38%, rgba(5,6,11,.86) 58%, #05060b 76%)}
  #gate .gate-title{position:absolute;left:0;right:0;top:auto;bottom:0;transform:none;
    width:100%;max-width:none;align-items:center;text-align:center;
    padding:0 clamp(22px,7vw,48px) clamp(28px,8vh,72px)}
  #gate .gate-kicker{margin-bottom:clamp(.8rem,2vh,1.4rem)}
  #gate .gate-kicker::before{display:none}
  #gate .gate-line{font-size:clamp(2rem,6.4vw,3rem)}
  #gate .gate-line .gl-1,#gate .gate-line .gl-2{white-space:normal}
  #gate .gate-sub{margin-inline:auto;max-width:38ch}
  #gate .gate-btn{margin-top:clamp(1.4rem,3vh,2.4rem)}
}

/* Phone portrait fine-tune */
@media(max-width:480px){
  #gate .cmg-vid{object-position:52% 22%;transform:scale(1.08)}
  #gate .gate-title{padding-bottom:clamp(26px,7vh,56px)}
  #gate .gate-kicker{font-size:.62rem;letter-spacing:.3em}
  #gate .gate-line{font-size:clamp(1.85rem,7.8vw,2.5rem)}
  #gate .gate-sub{font-size:.95rem;max-width:30ch;margin-top:1rem}
  #gate .gate-btn{padding:.95rem 2.2rem;font-size:.7rem;letter-spacing:.2em}
}

/* Short viewports (landscape phones, small laptops, split screens):
   compact, vertically-centered, full scrim so EVERY element including the CTA fits */
@media(max-height:620px){
  #gate .cmg-vid{object-position:60% 36%;transform:scale(1.22)}
  #gate .gate-grade{background:
    linear-gradient(90deg, #05060b 0%, rgba(5,6,11,.92) 26%, rgba(5,6,11,.6) 48%, rgba(5,6,11,.12) 70%, transparent 86%),
    linear-gradient(180deg, rgba(5,6,11,.6) 0%, transparent 30%, transparent 64%, rgba(5,6,11,.7) 100%)}
  #gate .gate-title{top:50%;bottom:auto;transform:translateY(-50%);
    width:min(60%,560px);align-items:flex-start;text-align:left;
    padding:0 clamp(20px,3vw,40px) 0 clamp(24px,5vw,64px)}
  #gate .gate-kicker{margin-bottom:.7rem;font-size:.6rem}
  #gate .gate-kicker::before{display:inline-block}
  #gate .gate-line{font-size:clamp(1.5rem,4.6vh,2.4rem);line-height:1.08}
  #gate .gate-line .gl-1,#gate .gate-line .gl-2{white-space:nowrap}
  #gate .gate-sub{font-size:clamp(.82rem,1.7vh,.98rem);margin-top:.7rem;max-width:34ch;line-height:1.45}
  #gate .gate-btn{margin-top:clamp(1rem,2.6vh,1.7rem);padding:.8rem 2.2rem;font-size:.68rem}
}

/* Short AND narrow (landscape phones like 844x390): center everything, no overflow */
@media(max-height:620px) and (max-width:900px){
  #gate .cmg-vid{object-position:58% 32%;transform:scale(1.16)}
  #gate .gate-grade{background:
    linear-gradient(180deg, rgba(5,6,11,.55) 0%, rgba(5,6,11,.32) 40%, rgba(5,6,11,.62) 78%, #05060b 100%),
    radial-gradient(120% 120% at 50% 46%, transparent 40%, rgba(5,6,11,.5) 100%)}
  #gate .gate-title{left:0;right:0;top:50%;transform:translateY(-50%);
    width:100%;align-items:center;text-align:center;padding-inline:clamp(20px,6vw,48px)}
  #gate .gate-kicker::before{display:none}
  #gate .gate-line{font-size:clamp(1.5rem,5.4vw,2.2rem)}
  #gate .gate-line .gl-1,#gate .gate-line .gl-2{white-space:normal}
  #gate .gate-sub{margin-inline:auto;max-width:40ch}
}

/* Very short (≤440px tall): trim the sub-line so headline + CTA always survive */
@media(max-height:440px){
  #gate .gate-kicker{display:none}
  #gate .gate-sub{display:none}
  #gate .gate-line{font-size:clamp(1.4rem,5vw,2rem)}
  #gate .gate-btn{margin-top:1.1rem;padding:.7rem 1.9rem}
}

/* threshold flash — blooms from the dome the boy holds */
#gate .gate-flash{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(42% 48% at 74% 47%, rgba(255,239,206,.98), rgba(245,170,90,.6) 38%, transparent 72%);
  opacity:0;
}

/* entering animation: dive through the glowing dome into the page */
#gate{transform-origin:74% 47%}
#gate.opening{
  animation:gateZoom 1.6s cubic-bezier(.66,0,.34,1) forwards;
}
@keyframes gateZoom{
  0%{transform:scale(1);opacity:1;filter:brightness(1)}
  40%{transform:scale(1.6);opacity:1;filter:brightness(1.2)}
  100%{transform:scale(9);opacity:0;filter:brightness(2.4)}
}
#gate.opening .gate-flash{animation:flash 1.6s ease-in forwards}
@keyframes flash{0%{opacity:0}45%{opacity:.6}78%{opacity:1}100%{opacity:0}}
#gate.opening .gate-title,#gate.opening .gate-head{opacity:0;transition:opacity .35s ease}
#gate.hidden{display:none}

/* ============================================================
   STICKY BAR
   ============================================================ */
#sticky{
  position:fixed; top:0; left:0; right:0; z-index:600;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(20px,5vw,60px);
  transform:translateY(-100%); transition:transform .5s ease, background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  pointer-events:none; border-bottom:1px solid transparent;
}
#sticky.scrolled{background:linear-gradient(180deg,rgba(6,7,11,.84),rgba(6,7,11,.62));backdrop-filter:blur(14px);border-bottom-color:var(--line)}
#sticky>*{pointer-events:auto}
#sticky .wordmark{text-shadow:0 1px 14px rgba(0,0,0,.7)}
/* sticky brand wordmark — same image as the waiting page, revealed on scroll only */
.sticky-logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.sticky-logo .gate-wordmark{
  width:clamp(180px,16.5vw,250px); height:auto; display:block;
  opacity:0; transform:translateY(-7px);
  transition:opacity .65s ease, transform .65s cubic-bezier(.16,.7,.3,1);
  filter:brightness(1.5) contrast(1.12) saturate(1.12) drop-shadow(0 1px 5px rgba(0,0,0,.6));
}
#sticky.scrolled .sticky-logo .gate-wordmark{opacity:1; transform:none}
body.entered #sticky{transform:translateY(0)}
#sticky .wordmark .inf{color:var(--gold);font-size:1.7em;font-weight:400}
#sticky .wordmark{font-size:clamp(13px,1.4vw,16px);letter-spacing:.2em}
#sticky .sticky-right{display:flex;align-items:center;gap:1.4rem}
.fund-mini{display:flex;align-items:center;gap:.6rem;font-size:.74rem;letter-spacing:.04em;color:var(--paper-dim)}
.fund-mini b{color:var(--gold);font-weight:700}
.fund-mini .bar{width:84px;height:4px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.fund-mini .bar i{display:block;height:100%;width:71%;background:linear-gradient(90deg,var(--gold-soft),var(--gold))}
#sticky .btn{padding:.72rem 1.4rem;font-size:.74rem}
@media(max-width:680px){.fund-mini{display:none}}

/* ============================================================
   PAGE LAYOUT
   ============================================================ */
main{position:relative;z-index:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
section{position:relative}
/* anchor targets (in-page CTAs) clear the fixed sticky header when jumped to */
section[id],#newsletter,#signal{scroll-margin-top:clamp(74px,9vh,96px)}

/* full-bleed cinematic scene with faded top/bottom edges */
.scene-img{
  width:100%;display:block;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 84%,transparent 100%);
}

/* ---- Act 1: Hero (animated video lockup) ---- */
.s-hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;padding:18vh var(--gutter) clamp(48px,9vh,96px);
  overflow:hidden;
}
.s-hero .hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  object-position:center 12%;
  -webkit-mask-image:radial-gradient(140% 104% at 50% 52%,#000 64%,transparent 99%),linear-gradient(180deg,#000 0%,#000 84%,transparent 100%);
  mask-image:radial-gradient(140% 104% at 50% 52%,#000 64%,transparent 99%),linear-gradient(180deg,#000 0%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.s-hero .hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 42% at 50% 90%, rgba(6,7,11,.5), transparent 72%),
            linear-gradient(180deg,rgba(6,7,11,.42) 0%,transparent 26%,transparent 100%);
}
.s-hero .hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.s-hero .hero-eyebrow{
  font-family:var(--font-ui);font-weight:500;font-size:.8rem;
  letter-spacing:.42em;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.85),0 0 36px rgba(0,0,0,.6);
}
.s-hero .scroll-cue{margin-top:2.6rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-dim);text-decoration:none;
  cursor:pointer;transition:color .3s ease}
.s-hero a.scroll-cue:hover{color:var(--gold)}
.s-hero .scroll-cue .chev{width:18px;height:18px;animation:bob 2.4s ease-in-out infinite}
/* Hero video — mobile focal point so the lockup stays centered on phones */
@media(max-width:760px){
  .s-hero{min-height:90svh}
  .s-hero .hero-video{object-position:center 26%}
  .s-hero .hero-eyebrow{font-size:.7rem;letter-spacing:.34em}
}

/* ---- generic myth scene (image + centered poetic line) ---- */
.s-scene{padding-block:var(--rhythm)}
.scene-stack{position:relative;display:flex;flex-direction:column;align-items:center}
.scene-frame{position:relative;width:min(1180px,100%)}
.scene-frame .scene-img{border-radius:3px}
.scene-caption{
  text-align:center;max-width:30ch;margin-inline:auto;
}
.scene-caption .myth{font-size:var(--fs-h1)}

/* boy / forgotten heart — text beside subject */
.s-heart .pair{
  display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(48px,8vw,128px);align-items:center;
}
.s-heart .htext .myth{font-size:clamp(2.4rem,4.6vw,4.2rem)}
.s-heart .htext .myth .dim{display:block;color:var(--paper-dim)}
.s-heart .himg{
  aspect-ratio:4/5;overflow:visible;
  -webkit-mask-image:radial-gradient(58% 80% at 50% 46%,#000 24%,rgba(0,0,0,0) 76%);
  mask-image:radial-gradient(58% 80% at 50% 46%,#000 24%,rgba(0,0,0,0) 76%);
}
.s-heart .himg .scene-img{width:100%;height:100%;object-fit:cover;object-position:72% 40%;filter:brightness(1.16) saturate(1.05)}
@media(max-width:820px){
  .s-heart .pair{grid-template-columns:1fr;text-align:center}
  .s-heart .htext{order:2}
  .s-heart .himg{order:1;max-width:380px;margin-inline:auto;aspect-ratio:4/5}
}

/* the pattern — WISHU rising, title set in the negative space below */
.s-pattern{padding-block:clamp(56px,9vh,120px)}
.s-pattern .frame{position:relative;width:min(1000px,100%);margin:0 auto}
.s-pattern .frame .scene-img{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 66%,transparent 99%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 66%,transparent 99%);
}
.s-pattern .pattern-cap{
  position:relative;z-index:2;text-align:center;margin-top:clamp(-5rem,-7vw,-3rem);
  display:flex;flex-direction:column;align-items:center;gap:1rem;
}
.s-pattern .pattern-cap .ptitle{
  font-family:var(--font-serif);font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;font-size:clamp(2rem,4.8vw,3.8rem);line-height:1;
  text-shadow:0 4px 50px rgba(0,0,0,.85);
}

/* statement beat — sits over the global animated starfield */
.s-beat{
  min-height:62vh;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:var(--seam) var(--gutter);margin-top:0;
}
.s-beat .myth{font-size:var(--fs-display);font-style:italic;font-weight:400}
.s-beat .myth .line2{font-style:normal;color:var(--gold)}
/* every breathing beat shares ONE rhythm now (client: standardize to the "It happens within you" section, ~62vh) */
.s-beat.beat-tight{min-height:62vh;padding-top:var(--seam);padding-bottom:var(--seam);margin-bottom:0}

/* ---- temporary footer-lite for first pass ---- */
.footer-lite{
  text-align:center;padding:var(--rhythm) var(--gutter) 8vh;
}
.footer-lite .next{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--paper-fade);margin-top:1.4rem}

/* ---- reveal-on-scroll (hiding only active when html.anim is set — see head script) ---- */
.reveal{transition:opacity 1.1s cubic-bezier(.16,.7,.3,1),transform 1.1s cubic-bezier(.16,.7,.3,1)}
.anim .reveal{opacity:0;transform:translateY(34px)}
.anim .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}

/* ============================================================
   WAITLIST SUCCESS — the "Fortun moment" (success state of the footer signup)
   ============================================================ */
body.ws-locked{overflow:hidden}
#waitlistSuccess{
  position:fixed;inset:0;z-index:3000;display:flex;flex-direction:column;
  background:radial-gradient(125% 105% at 50% 26%, #100a16 0%, #08070f 52%, #04040a 100%);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s ease, visibility .55s ease;
}
#waitlistSuccess.open{opacity:1;visibility:visible;pointer-events:auto}
#waitlistSuccess .ws-scene{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1100px 760px at 50% 6%, rgba(240,197,116,.13), transparent 60%),
    radial-gradient(900px 680px at 84% 30%, rgba(120,150,220,.08), transparent 66%),
    radial-gradient(820px 620px at 12% 78%, rgba(240,197,116,.07), transparent 68%),
    radial-gradient(2px 2px at 18% 26%, rgba(255,224,168,.85), transparent),
    radial-gradient(1.6px 1.6px at 72% 20%, rgba(255,208,144,.75), transparent),
    radial-gradient(1.8px 1.8px at 38% 60%, rgba(255,228,184,.8), transparent),
    radial-gradient(1.5px 1.5px at 82% 66%, rgba(255,200,132,.7), transparent),
    radial-gradient(2px 2px at 60% 82%, rgba(255,216,160,.78), transparent),
    radial-gradient(1.4px 1.4px at 28% 82%, rgba(255,220,170,.72), transparent);
}
#waitlistSuccess .ws-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(16px,2.4vw,26px) clamp(20px,5vw,60px)}
#waitlistSuccess .ws-logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
#waitlistSuccess .ws-logo img{width:clamp(168px,15vw,230px);height:auto;display:block;
  filter:brightness(1.5) contrast(1.12) saturate(1.12) drop-shadow(0 1px 5px rgba(0,0,0,.6))}
#waitlistSuccess .ws-close{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:transparent;
  border:1px solid rgba(237,190,99,.4);color:var(--paper);font-size:1.4rem;line-height:1;cursor:pointer;transition:.25s}
#waitlistSuccess .ws-close:hover{border-color:var(--gold);color:var(--gold)}
#waitlistSuccess .ws-inner{position:relative;z-index:2;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:0 clamp(20px,6vw,48px) clamp(24px,5vh,48px)}
#waitlistSuccess .ws-star{color:var(--gold);font-size:clamp(1.1rem,1.6vw,1.4rem);
  filter:drop-shadow(0 0 12px rgba(240,197,116,.7));margin-bottom:.5rem}
#waitlistSuccess .ws-inf{width:clamp(48px,6vw,72px);height:auto;
  filter:drop-shadow(0 0 18px rgba(237,190,99,.5));margin-bottom:clamp(1.4rem,3.2vh,2.4rem)}
#waitlistSuccess .ws-title{font-family:var(--font-display);font-weight:600;line-height:1.02;letter-spacing:.02em;
  font-size:clamp(2.4rem,6.4vw,4.8rem);margin:0}
#waitlistSuccess .ws-title .ws-1{display:block;color:#f7f1e6}
#waitlistSuccess .ws-title .ws-2{display:block;color:var(--gold);text-shadow:0 1px 24px rgba(240,197,116,.32)}
#waitlistSuccess .ws-rule{width:min(320px,62%);height:1px;margin:clamp(1.4rem,3.2vh,2.3rem) auto;
  background:linear-gradient(90deg,transparent,rgba(237,190,99,.65),transparent)}
#waitlistSuccess .ws-sub{font-family:var(--font-display);font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(1.1rem,2.4vw,1.8rem);margin:0}
#waitlistSuccess .ws-sub .ws-sub-1{color:#f3ecdf}
#waitlistSuccess .ws-sub .ws-sub-2{color:var(--gold)}
#waitlistSuccess .ws-note{color:var(--paper-dim);font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.65;
  margin:clamp(.9rem,1.8vh,1.2rem) auto 0;max-width:34ch}
#waitlistSuccess .ws-btn{margin-top:clamp(1.8rem,4vh,2.8rem)}
/* eyebrow above the headline, so each backend state announces itself */
#waitlistSuccess .ws-eyebrow{font-family:var(--font-ui);font-weight:500;font-size:var(--fs-cap);
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin:0 0 .7rem}
/* secondary action: resend the confirmation email (only shown when relevant) */
#waitlistSuccess .ws-resend{display:none;margin-top:1.1rem;background:transparent;border:0;cursor:pointer;
  font-family:var(--font-ui);font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-dim);border-bottom:1px solid rgba(237,190,99,.42);padding:.35rem .1rem;transition:.25s ease}
#waitlistSuccess .ws-resend:hover:not(:disabled){color:var(--gold);border-bottom-color:var(--gold)}
#waitlistSuccess .ws-resend:disabled{opacity:.55;cursor:default}
#waitlistSuccess .ws-msg{min-height:1.2em;margin-top:.9rem;font-size:.92rem;color:var(--gold);letter-spacing:.02em}

/* honeypot: must be reachable to a bot but invisible and unreachable to a human.
   display:none is avoided on purpose, some bots skip those fields. */
.fw-hp{position:absolute !important;left:-9999px !important;top:auto;width:1px;height:1px;
  opacity:0;overflow:hidden;pointer-events:none}
#waitlistSuccess .ws-foot{position:relative;z-index:2;text-align:center;
  padding:0 clamp(20px,6vw,48px) clamp(28px,5vh,54px);
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.22em;color:var(--gold);opacity:.9;
  font-size:clamp(.68rem,1.05vw,.8rem);
  display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
#waitlistSuccess .ws-foot-star{font-size:.82em;opacity:.9}
@media(max-height:640px){
  #waitlistSuccess .ws-inf{margin-bottom:1rem;width:clamp(40px,5vw,56px)}
  #waitlistSuccess .ws-rule{margin:1rem auto}
  #waitlistSuccess .ws-note{margin-top:.7rem}
  #waitlistSuccess .ws-btn{margin-top:1.2rem}
}
@media(prefers-reduced-motion:reduce){#waitlistSuccess{transition:none}}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important}
  .anim .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  #gate.opening{animation:none;opacity:0;display:none}
  html{scroll-behavior:auto}
}