:root{--navy:#050d24;--navy2:#0b1a3a;--gold:#d4af37;--gold2:#f3d77a;--white:#fff;
--display:"Anton",Impact,"Arial Narrow Bold",sans-serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box;margin:0}
html,body{min-height:100%}
body{font-family:var(--body);color:var(--white);background:var(--navy);overflow-x:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* stage */
.stage{position:fixed;inset:0;z-index:-1;overflow:hidden;
 background:radial-gradient(120% 80% at 50% 0%,#16306b 0%,var(--navy2) 45%,var(--navy) 100%)}
.stage-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;
 filter:saturate(1.05) contrast(1.05);transform:scale(1.04);animation:drift 24s ease-in-out infinite alternate}
.stage-photo.is-broken{display:none}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,13,36,.55),rgba(5,13,36,.78) 60%,rgba(5,13,36,.95))}
.spot{position:absolute;top:-20%;width:42vmax;height:120vmax;filter:blur(18px);opacity:.55;
 background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0) 70%);
 clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);transform-origin:50% 0}
.spot-l{left:-8vmax;transform:rotate(-24deg)}
.spot-r{right:-8vmax;transform:rotate(24deg)}
.spot-c{left:50%;margin-left:-21vmax;opacity:.4}
.pitch{position:absolute;left:-10%;right:-10%;bottom:0;height:28%;
 background:repeating-linear-gradient(90deg,#0d3b2a 0 80px,#0f4a33 80px 160px);
 transform:perspective(500px) rotateX(55deg);transform-origin:bottom;opacity:.7}

/* buttons */
.btn{display:inline-block;font:700 1.1rem/1 var(--body);letter-spacing:.04em;text-decoration:none;cursor:pointer;
 padding:1rem 1.8rem;border-radius:999px;border:2px solid transparent;color:var(--white);background:none;
 transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px) scale(1.03)}
.btn:focus-visible{outline:3px solid var(--white);outline-offset:4px}
.btn-gold{color:var(--navy);background:linear-gradient(135deg,var(--gold2),var(--gold));border-color:var(--gold2)}
.btn-ghost{border-color:rgba(255,255,255,.55);background:rgba(5,13,36,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.15)}

/* page 1 */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
 text-align:center;padding:2rem 1.25rem;gap:1.2rem}
.crest{width:clamp(70px,11vw,110px);filter:drop-shadow(0 6px 18px rgba(212,175,55,.45));animation:rise 1s .1s both}
.headline{font-family:var(--display);font-weight:400;line-height:1.02;text-transform:uppercase;
 text-shadow:0 4px 30px rgba(0,0,0,.6);animation:rise 1s .3s both}
.h-top{display:block;font-size:clamp(1.4rem,4vw,2.6rem);color:var(--gold2);letter-spacing:.12em}
.h-main{display:block;font-size:clamp(2.6rem,9vw,7rem);max-width:14ch;margin:.2em auto 0;letter-spacing:.01em}
.tagline{font-size:clamp(1.05rem,2.4vw,1.5rem);color:#e8ecf7;animation:rise 1s .5s both}
.cta-wrap{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-top:1rem;animation:rise 1s .7s both}
.arrow{width:clamp(56px,9vw,84px);filter:drop-shadow(0 0 14px rgba(212,175,55,.8));animation:bounce 1.1s ease-in-out infinite}
.cta-wrap .btn{font-size:clamp(1.3rem,3.4vw,1.9rem);padding:1.2rem 3rem}
.pulse{animation:pulse 1.8s ease-out infinite}

/* page 2 */
.goat{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
 text-align:center;padding:2rem 1.25rem 1.5rem;gap:1rem}
.g-headline{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.95;
 text-shadow:0 6px 36px rgba(0,0,0,.7);animation:slam .8s cubic-bezier(.2,1.4,.4,1) both}
.g-line{display:block;font-size:clamp(2rem,7vw,4.5rem)}
.g-big{display:block;font-size:clamp(3.6rem,17vw,13rem);letter-spacing:.01em;
 background:linear-gradient(180deg,#fff6c9,var(--gold) 60%,#8a6a10);-webkit-background-clip:text;background-clip:text;
 color:transparent;filter:drop-shadow(0 0 28px rgba(212,175,55,.55))}
.g-emoji{display:block;font-size:clamp(2rem,6vw,4rem);margin-top:.15em}
.portrait{width:min(78vw,340px);aspect-ratio:4/5;border-radius:18px;overflow:hidden;position:relative;
 border:4px solid var(--gold);box-shadow:0 0 0 6px rgba(212,175,55,.2),0 25px 70px rgba(0,0,0,.7);
 background:var(--navy2);animation:photo 1s .35s cubic-bezier(.2,1,.3,1) both}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.portrait img.is-broken{display:none}
.portrait-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
 background:radial-gradient(circle at 50% 30%,#1d3a82,var(--navy2) 70%)}
.portrait-fallback[hidden]{display:none}
.portrait-fallback span{font-family:var(--display);font-size:9rem;color:var(--gold);line-height:1}
.portrait-fallback small{color:#cbd3ea;padding:0 1rem}
.g-sub{font-size:clamp(1.05rem,2.6vw,1.5rem);max-width:30ch;animation:rise 1s .8s both}
.siuuu{min-height:2.2em;font-family:var(--display);font-size:clamp(1.5rem,5vw,2.6rem);color:var(--gold2);text-shadow:0 0 20px rgba(212,175,55,.6)}
.siuuu.pop{animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}
.credit{font-size:.8rem;opacity:.6}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

/* motion */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes bounce{0%,100%{transform:translateY(-6px)}50%{transform:translateY(16px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(243,215,122,.7),0 0 30px rgba(212,175,55,.5)}
 100%{box-shadow:0 0 0 28px rgba(243,215,122,0),0 0 30px rgba(212,175,55,.5)}}
@keyframes drift{to{transform:scale(1.12) translateX(-1.5%)}}
@keyframes slam{from{opacity:0;transform:scale(1.5)}to{opacity:1;transform:none}}
@keyframes photo{from{opacity:0;transform:translateY(40px) rotate(-4deg) scale(.85)}to{opacity:1;transform:none}}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
}

.credit{font-size:.75rem;opacity:.7;max-width:60ch}
.credit a{color:var(--gold2)}
.hero .credit{position:absolute;bottom:.8rem;left:0;right:0;margin:0 auto;padding:0 1rem;text-align:center}