/* Homepage composition. Scoped to the opening section. */
.update-hero{min-height:100svh;padding:100px 80px 30px;overflow:hidden}
.update-hero__content{position:relative;top:auto;width:min(100%,1000px);padding:0;text-align:center}
.update-hero__official-bg{object-position:center;filter:saturate(.94) brightness(.82) contrast(1.03);transform:none}
.update-hero:after{background:linear-gradient(90deg,rgba(4,6,5,.48),rgba(4,6,5,.08) 32%,rgba(4,6,5,.08) 68%,rgba(4,6,5,.48)),linear-gradient(0deg,#080907 0,rgba(5,7,6,.52) 17%,rgba(5,7,6,.08) 65%)}
.update-hero__content:before{background:radial-gradient(ellipse,rgba(2,3,2,.32),transparent 72%)}
.update-hero__mist{opacity:.25;bottom:-20%;height:60%}
.update-hero__particles{opacity:.2}
.update-hero__light{opacity:.35}
.update-hero__content .update-overline{display:flex;margin:0;color:#d8c49d;font-size:9px;font-weight:600;letter-spacing:.24em;line-height:1.7}
.update-hero__content .update-overline span{width:30px;height:1px;padding:0;background:linear-gradient(90deg,transparent,#ac8b51)}
.update-hero__content .update-overline span:last-child{transform:rotate(180deg)}
.update-hero .update-logo-stage{width:min(520px,55vw);margin:-14px auto -22px}
.update-hero .update-logo-stage .update-hero__logo{height:auto;aspect-ratio:1000/565;animation:none;filter:brightness(1.18) drop-shadow(0 6px 20px rgba(0,0,0,.5))}
.update-hero .update-logo-stage:after{display:none}
.update-hero .update-logo-stage__flare{opacity:.5;animation:none}
.update-hero .update-logo-stage__aura{opacity:.6}
.update-hero h1{margin:0;font-size:clamp(38px,3.65vw,64px);line-height:1.08;letter-spacing:-.045em;font-weight:500;text-wrap:balance}
.update-hero h1 em{animation:none;background:linear-gradient(110deg,#ac8240,#f2dfae 48%,#b58a42);background-clip:text;-webkit-background-clip:text;color:transparent}
.update-hero__lead{width:min(600px,100%);margin:20px auto 0;font-size:13px;line-height:1.85;color:#bebdb4;text-wrap:pretty}
.update-hero__lead b{display:block;margin-top:4px;color:#e0d9ca;font-weight:500}
.update-hero__buttons{margin:24px auto 0;gap:12px}
.update-hero .update-button{min-width:205px;height:50px;cursor:pointer}
.update-hero .update-button--gold{background:linear-gradient(120deg,#b18d4a,#77582b);border-color:#d5b875;animation:none;color:#fff7e5}
.update-hero .update-play{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;letter-spacing:.17em;font-size:10px;background:rgba(9,12,10,.55);border-color:rgba(217,201,167,.32)}
.update-hero .update-play i{position:static;display:block;flex-shrink:0;margin:0;transform:none}
.update-hero .update-button:focus-visible{outline:2px solid #f5dc9d;outline-offset:5px;clip-path:none}
.update-hero .update-hero__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;width:min(790px,100%);margin:32px auto 0;padding:20px 0;border-top:1px solid rgba(204,174,116,.25);border-bottom:1px solid rgba(204,174,116,.12);background:linear-gradient(90deg,transparent,rgba(191,153,85,.035),transparent)}
.update-hero .hero-feature{min-width:0;padding:0 18px;border-right:1px solid rgba(204,174,116,.18)}
.update-hero .hero-feature:last-child{border:0}
.update-hero .hero-feature__label{display:block;padding:0;border:0;color:#ab9b7c;font-size:9px;line-height:1.5;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.update-hero .hero-feature strong{display:block;margin:8px 0 7px;color:#eee3cc;font:500 24px/1.1 Cinzel,Georgia,serif;letter-spacing:-.025em;text-transform:none}
.update-hero .hero-feature strong i{font:400 18px Georgia,serif;color:#ad8b4e;margin:0 4px}
.update-hero .hero-feature p{margin:0;font-size:10px;line-height:1.65;color:#aaa99f;letter-spacing:0;text-transform:none}
.update-hero__content .update-scroll{margin:17px auto 0;width:280px;font-size:8px;letter-spacing:.2em}
@media(min-width:701px) and (max-height:800px){
 .update-hero{padding-top:86px;padding-bottom:18px}
 .update-hero .update-logo-stage{width:390px;margin:-18px auto -28px}
 .update-hero h1{font-size:clamp(36px,3.25vw,50px)}
 .update-hero__lead{margin-top:14px;font-size:12px}
 .update-hero__buttons{margin-top:18px}
 .update-hero .update-hero__facts{margin-top:24px;padding:15px 0}
 .update-hero__content .update-scroll{margin-top:10px}
}
@media(max-width:1000px){.update-hero{padding-right:32px;padding-left:32px}}
@media(max-width:700px){
 .update-hero{padding:96px 22px 40px;min-height:100svh}
 .update-hero__content{width:100%;padding:0}
 .update-hero__content .update-overline{font-size:7px;letter-spacing:.14em;gap:10px}
 .update-hero__content .update-overline span{width:15px;flex-shrink:0}
 .update-hero .update-logo-stage{width:min(390px,100%);margin:-4px auto -10px}
 .update-hero h1{font-size:clamp(30px,7.7vw,48px);line-height:1.12}
 .update-hero__lead{font-size:12px;margin-top:18px}
 .update-hero__buttons{flex-direction:row;gap:8px;margin-top:22px}
 .update-hero .update-button{width:50%;min-width:0;padding:0 12px;height:48px;font-size:9px;letter-spacing:.1em}
 .update-hero .update-hero__facts{grid-template-columns:1fr;margin-top:28px;padding:0 16px}
 .update-hero .hero-feature{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:center;padding:15px 0;text-align:left;border-right:0;border-bottom:1px solid rgba(204,174,116,.15)}
 .update-hero .hero-feature strong{grid-column:2;grid-row:1/3;margin:0;font-size:21px}
 .update-hero .hero-feature p{grid-column:1;grid-row:2;font-size:10px;max-width:185px}
 .update-hero .hero-feature__label{font-size:8px;letter-spacing:.1em}
 .update-hero__content .update-scroll{display:none}
}
@media(prefers-reduced-motion:reduce){.update-hero *,.update-hero *:before,.update-hero *:after{animation:none!important;transition:none!important}}

/* Reveal the opening copy in time with the first seconds of the cinematic. */
.update-hero.is-intro-pending .update-hero__content > :is(.update-overline,.update-logo-stage,h1,.update-hero__lead,.update-hero__buttons,.hero-launch,.update-hero__facts,.update-scroll){opacity:0;visibility:hidden}
.update-hero.is-intro-playing .update-hero__content > :is(.update-overline,.update-logo-stage,h1,.update-hero__lead,.update-hero__buttons,.hero-launch,.update-hero__facts,.update-scroll){opacity:0;animation:heroIntroReveal .9s cubic-bezier(.2,.7,.2,1) forwards}
.update-hero.is-intro-playing .update-overline{animation-delay:.15s!important}
.update-hero.is-intro-playing .update-logo-stage{animation-delay:.6s!important}
.update-hero.is-intro-playing h1{animation-delay:1.25s!important}
.update-hero.is-intro-playing .update-hero__lead{animation-delay:1.9s!important}
.update-hero.is-intro-playing .update-hero__buttons{animation-delay:2.35s!important}
.update-hero.is-intro-playing .hero-launch{animation-delay:2.7s!important}
.update-hero.is-intro-playing .update-hero__facts{animation-delay:3.05s!important}
.update-hero.is-intro-playing .update-scroll{animation-delay:3.45s!important}
@keyframes heroIntroReveal{from{opacity:0;filter:blur(7px);transform:translateY(20px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.update-hero.is-intro-pending .update-hero__content > :is(.update-overline,.update-logo-stage,h1,.update-hero__lead,.update-hero__buttons,.hero-launch,.update-hero__facts,.update-scroll){opacity:1;visibility:visible}.update-hero.is-intro-playing .update-hero__content > :is(.update-overline,.update-logo-stage,h1,.update-hero__lead,.update-hero__buttons,.hero-launch,.update-hero__facts,.update-scroll){opacity:1;animation:none!important}}

/* After the one-time intro, keep the final harbor scene moving in its own loop. */
.update-hero__cinematic--loop{opacity:0;transition:opacity .65s ease}
.update-hero.is-looping .update-hero__cinematic--loop{opacity:1}

@media(max-width:700px){
 .update-hero{padding:88px 16px 92px;align-items:start}
 .update-hero__content{max-width:460px;margin-inline:auto}
 .update-hero .update-logo-stage{width:min(76vw,310px);margin:-8px auto -18px}
 .update-hero h1{font-size:clamp(29px,8vw,41px);line-height:1.13}
 .update-hero .update-hero__lead{width:100%;max-width:390px;margin-top:15px;font-size:13px;line-height:1.65}
 .update-hero__buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:19px}
 .update-hero .update-hero__buttons .update-button,.update-hero .update-hero__buttons .update-play{width:100%;height:auto;min-height:48px;min-width:0;padding:9px 8px;font-size:9px;line-height:1.25;letter-spacing:.06em}
 .update-hero .update-button--gold{grid-column:1/-1}
 .update-hero .hero-launch{justify-content:center;gap:7px 14px;margin-top:17px;font-size:10px;text-align:center}
 .update-hero .update-hero__facts{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-top:19px;padding:13px 0}
 .update-hero .hero-feature{display:block;min-width:0;padding:0 7px;text-align:center;border-bottom:0;border-right:1px solid rgba(204,174,116,.18)}
 .update-hero .hero-feature:last-child{border-right:0}
 .update-hero .hero-feature strong{margin:6px 0;font-size:clamp(15px,4.4vw,20px);overflow-wrap:anywhere}
 .update-hero .hero-feature strong i{font-size:14px;margin-inline:1px}
 .update-hero .update-hero__facts .hero-feature__label{font-size:8px;line-height:1.3;letter-spacing:.04em}
 .update-hero .update-hero__facts .hero-feature p{max-width:none;font-size:9px;line-height:1.4}
}
@media(max-width:360px){
 .update-hero{padding-inline:12px}
 .update-hero__content .update-overline{font-size:6px;letter-spacing:.08em}
 .update-hero .hero-feature{padding-inline:4px}
 .update-hero .update-hero__facts .hero-feature p{font-size:8px}
}