:root{
      --gold:#d7b56d;
      --soft-gold:#f1d48a;
      --green:#1ed760;
      --white:#f6f4ee;
      --muted:rgba(246,244,238,.76);
      --dim:rgba(246,244,238,.56);
    }
    *{box-sizing:border-box}
    html,body{height:100%; margin:0; background:#030407; color:var(--white); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x:hidden;}
    body{min-height:100svh;}
    .stage{position:relative; min-height:100svh; isolation:isolate; display:grid; place-items:center; padding:72px 28px 88px; overflow:hidden;}
    .brand{position:absolute; top:42px; left:clamp(28px,5vw,72px); z-index:4; color:#fff; font-size:13px; font-weight:750; letter-spacing:.50em; text-transform:uppercase; opacity:0; animation:fadeIn 1.1s ease .25s forwards;}
    .mark{position:absolute; top:42px; right:clamp(28px,5vw,72px); z-index:4; color:var(--gold); font-size:22px; letter-spacing:.08em; opacity:0; animation:fadeIn 1.1s ease .4s forwards;}
    .bg,.bg2{position:absolute; inset:-10%; background:url('level-up-artwork.jpg') center/cover no-repeat; z-index:-5; filter:blur(30px) grayscale(100%) saturate(0); opacity:.24; transform:scale(1.06); animation:slowDrift 30s ease-in-out infinite alternate;}
    .bg2{filter:blur(8px) grayscale(100%) saturate(0); opacity:.075; mix-blend-mode:screen; animation-duration:44s; animation-direction:alternate-reverse;}
    .shade{position:absolute; inset:0; z-index:-4; background:radial-gradient(circle at 32% 33%, rgba(255,255,255,.09), transparent 24%), radial-gradient(circle at 71% 61%, rgba(30,215,96,.08), transparent 28%), linear-gradient(112deg, rgba(0,0,0,.54), rgba(0,0,0,.82) 52%, rgba(0,0,0,.66));}
    .vignette{position:absolute; inset:0; z-index:-3; box-shadow:inset 0 0 190px rgba(0,0,0,.92); pointer-events:none;}
    .stars{position:absolute; inset:0; z-index:-2; pointer-events:none;}
    .star{position:absolute; width:2px; height:2px; border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 0 10px rgba(255,255,255,.9); animation:twinkle var(--t) ease-in-out infinite alternate, drift var(--d) linear infinite; opacity:.25;}
    .moon-glow{position:absolute; left:22%; top:18%; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.24), rgba(255,255,255,.09) 38%, transparent 68%); filter:blur(6px); z-index:-1; animation:moonPulse 12s ease-in-out infinite; pointer-events:none;}
    .door-glow{position:absolute; left:31%; top:42%; width:90px; height:90px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,.10) 42%, transparent 72%); filter:blur(8px); z-index:-1; animation:doorPulse 7s ease-in-out infinite; pointer-events:none;}
    .wrap{width:min(1120px,100%); display:grid; grid-template-columns:minmax(270px,.95fr) minmax(310px,1.05fr); gap:clamp(34px,6vw,76px); align-items:center;}
    .cover-shell{position:relative; justify-self:center; width:min(455px,82vw); opacity:0; transform:translateY(18px) scale(.985); animation:enterCover 1.2s ease .22s forwards, float 7.8s ease-in-out 1.3s infinite;}
    .cover-shell::before{content:""; position:absolute; inset:-24px; border-radius:34px; background:radial-gradient(circle at 50% 18%, rgba(255,255,255,.16), transparent 48%), radial-gradient(circle at 56% 80%, rgba(30,215,96,.13), transparent 55%); filter:blur(24px); z-index:-1; opacity:.84; animation:softAura 9s ease-in-out infinite;}
    .cover{display:block; width:100%; border-radius:24px; box-shadow:0 30px 90px rgba(0,0,0,.66), 0 0 0 1px rgba(255,255,255,.16);}
    .content{position:relative; max-width:540px;}
    .eyebrow{letter-spacing:.38em; text-transform:uppercase; color:var(--soft-gold); font-size:clamp(12px,1.35vw,14px); font-weight:760; margin:0 0 18px; opacity:0; animation:fadeUp .8s ease .45s forwards;}
    .descriptor{letter-spacing:.16em; text-transform:uppercase; color:var(--dim); font-size:11px; font-weight:700; margin:0 0 26px; opacity:0; animation:fadeUp .8s ease .66s forwards;}
    h1{font-size:clamp(58px,8vw,116px); line-height:.82; margin:0 0 26px; letter-spacing:-.07em; white-space:nowrap; font-weight:880; opacity:0; animation:fadeUp .9s ease .9s forwards; text-shadow:0 0 38px rgba(255,255,255,.10);}
    .rule{position:relative; height:1px; width:min(430px,100%); margin:0 0 28px; background:linear-gradient(90deg, rgba(215,181,109,.06), rgba(215,181,109,.52), rgba(215,181,109,.06)); opacity:0; animation:fadeUp .9s ease 1.05s forwards;}
    .rule::after{content:""; position:absolute; left:49%; top:50%; width:7px; height:7px; transform:translate(-50%,-50%); border-radius:50%; background:var(--gold); box-shadow:0 0 18px rgba(215,181,109,.55);}
    .headline{font-family:Georgia, 'Times New Roman', serif; color:var(--soft-gold); font-size:clamp(28px,3.8vw,43px); line-height:1.06; letter-spacing:-.03em; margin:0 0 20px; font-weight:700; opacity:0; animation:fadeUp .9s ease 1.18s forwards;}
    .copy{font-size:clamp(15px,1.55vw,18px); line-height:1.68; color:var(--muted); max-width:530px; margin:0 0 28px; opacity:0; animation:fadeUp .9s ease 1.42s forwards;}
    .cta-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center; opacity:0; animation:fadeUp .9s ease 1.68s forwards;}
    .cta{display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:62px; padding:0 34px; border-radius:999px; color:#fff; border:1.5px solid var(--green); background:rgba(8,18,12,.38); text-decoration:none; font-weight:850; letter-spacing:.18em; text-transform:uppercase; box-shadow:0 18px 45px rgba(30,215,96,.12), 0 0 34px rgba(30,215,96,.13), inset 0 0 28px rgba(30,215,96,.08); transition:transform .25s ease, box-shadow .25s ease, filter .25s ease, background .25s ease; animation:buttonBreath 4.8s ease-in-out 2.6s infinite;}
    .spotify-dot{width:32px; height:32px; display:inline-grid; place-items:center; border-radius:50%; color:#031208; background:var(--green); margin-left:-10px;}
    .spotify-dot svg{width:20px; height:20px; fill:currentColor;}
    .arrow{font-size:30px; line-height:1; margin-left:6px;}
    .cta:hover{transform:translateY(-2px); filter:saturate(1.08) brightness(1.05); background:rgba(8,24,14,.52); box-shadow:0 22px 55px rgba(30,215,96,.24), 0 0 46px rgba(30,215,96,.24), inset 0 0 32px rgba(30,215,96,.10);}
    .hub{margin-top:36px; opacity:0; animation:fadeUp .9s ease 1.92s forwards;}
    .hub-title{display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.33em; text-transform:uppercase; color:rgba(246,244,238,.72); margin:0 0 22px; font-weight:760; white-space:nowrap;}
    .hub-title::before,.hub-title::after{content:""; height:1px; width:95px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.48));}
    .hub-title::after{background:linear-gradient(90deg, rgba(255,255,255,.48), transparent);}
    .socials{display:flex; gap:22px; flex-wrap:wrap; align-items:center;}
    .social{width:28px; height:28px; display:grid; place-items:center; color:rgba(255,255,255,.86); transition:color .24s ease, transform .24s ease, filter .24s ease; text-decoration:none;}
    .social:hover{color:var(--soft-gold); transform:translateY(-2px); filter:drop-shadow(0 0 16px rgba(215,181,109,.22));}
    .social svg{width:24px; height:24px; fill:currentColor;}
    .bottom-note{position:absolute; left:50%; bottom:30px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--gold); white-space:nowrap; opacity:0; animation:fadeIn 1.4s ease 2.25s forwards;}
    .bottom-mark{font-size:24px; letter-spacing:.08em; line-height:1;}
    .bottom-text{font-size:11px; letter-spacing:.48em; text-transform:uppercase; font-weight:700;}
    .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
    @keyframes slowDrift{from{transform:scale(1.06) translate3d(-8px,-4px,0)}to{transform:scale(1.09) translate3d(10px,8px,0)}}
    @keyframes twinkle{0%{opacity:.13; transform:scale(.85)}45%{opacity:.88; transform:scale(1.18)}100%{opacity:.28; transform:scale(.95)}}
    @keyframes drift{from{margin-top:0}to{margin-top:18px}}
    @keyframes moonPulse{0%,100%{opacity:.35; transform:scale(.96)}50%{opacity:.74; transform:scale(1.06)}}
    @keyframes doorPulse{0%,100%{opacity:.22; transform:scale(.92)}50%{opacity:.58; transform:scale(1.18)}}
    @keyframes enterCover{to{opacity:1; transform:translateY(0) scale(1)}}
    @keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}
    @keyframes softAura{0%,100%{opacity:.50; transform:scale(.96)}50%{opacity:.88; transform:scale(1.03)}}
    @keyframes fadeUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:translateY(0)}}
    @keyframes fadeIn{to{opacity:1}}
    @keyframes buttonBreath{0%,100%{box-shadow:0 18px 45px rgba(30,215,96,.12), 0 0 34px rgba(30,215,96,.13), inset 0 0 28px rgba(30,215,96,.08)}50%{box-shadow:0 18px 55px rgba(30,215,96,.24), 0 0 48px rgba(30,215,96,.25), inset 0 0 36px rgba(30,215,96,.11)}}
    @media (max-width:860px){.stage{padding:92px 18px 88px}.brand{top:28px; left:22px; font-size:11px; letter-spacing:.36em}.mark{top:26px; right:22px}.wrap{grid-template-columns:1fr; gap:28px}.cover-shell{width:min(350px,78vw)}.content{text-align:center; margin:0 auto}.rule{margin-left:auto; margin-right:auto}.cta-row,.socials,.hub-title{justify-content:center}.hub-title::before,.hub-title::after{width:55px}.moon-glow{left:44%; top:6%;}.door-glow{left:47%; top:33%;}.bottom-note{bottom:22px; width:100%; padding:0 10px}.bottom-text{font-size:9px; letter-spacing:.24em; white-space:normal; text-align:center}.cta{letter-spacing:.08em; padding:0 22px}.spotify-dot{margin-left:-4px}}
    @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}.cover-shell,.brand,.mark,.eyebrow,.descriptor,h1,.rule,.headline,.copy,.cta-row,.hub,.bottom-note{opacity:1; transform:none}}

/* Chapter One final polish: cinematic entrance + door-open micro interaction */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:#000;
  z-index:999;
  pointer-events:none;
  opacity:0;
  animation:chapterOpen 1.05s ease forwards;
}
body.is-exiting::after{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.34);
  z-index:998;
  pointer-events:none;
  animation:doorDim .18s ease forwards;
}
.cta .arrow{display:inline-block; transition:transform .22s ease;}
.cta:hover .arrow{transform:translateX(5px);}
.cta.is-opening{transform:translateY(1px) scale(.985); box-shadow:0 24px 70px rgba(30,215,96,.30),0 0 60px rgba(30,215,96,.34),inset 0 0 42px rgba(30,215,96,.14);}
.cta.is-opening .arrow{transform:translateX(9px);}
@keyframes chapterOpen{0%{opacity:1}55%{opacity:.98}100%{opacity:0; visibility:hidden}}
@keyframes doorDim{from{opacity:0}to{opacity:1}}