/* A viewport-sized desktop stage, with the original poster as the only artwork. */
.hero{background:#030807;--hero-copy-x:0px;--hero-copy-y:0px;--rift-x:0px;--rift-y:0px}
.hero-backdrop{display:none}
.haunt-wash{inset:-10%;background:radial-gradient(ellipse at 78% 45%,#78dbb81b,transparent 43%),radial-gradient(ellipse at 99% 75%,#ed554e13,transparent 40%);mix-blend-mode:normal;animation:stage-drift 16s ease-in-out infinite alternate}
.fog{opacity:.1;filter:blur(18px)}
.scanlines{opacity:.1}
.grid-field{opacity:.4;mask-image:linear-gradient(transparent 30%,#0009);background-size:90px 90px}
.hero-copy{min-width:0;transform:translate3d(var(--hero-copy-x),var(--hero-copy-y),0)}
.hero h1 .year{letter-spacing:.06em;color:var(--accent);text-shadow:none;animation:none}
.hero h1 .purge{color:#edece2;text-shadow:0 3px 0 #a8b7ad20;line-height:.96}
.hero h1 .hero-letter{display:inline-block;animation:hero-letter-rise .8s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(.08s + var(--letter-index)*.045s)}
.hero h1 .purge .hero-letter{animation-delay:calc(.18s + var(--letter-index)*.055s)}
.hero-title-rule{position:relative;height:2px;width:min(100%,440px);margin:16px 0 0;background:#78dbb828;overflow:hidden}
.hero-title-rule:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:hero-line-charge 5s ease-in-out infinite;transform:translateX(-100%)}
.poster-stage{position:relative;isolation:isolate;min-width:0;justify-self:center;perspective:1100px}
.poster-stage .poster{width:100%;max-width:none;margin:0;transform:rotate(-1.5deg)}
.poster-stage .poster-label{padding:0 0 8px;border:0;color:#b5c9be;font-size:10px;letter-spacing:1px}
.poster-stage figcaption{padding:0;margin:12px 0 0;font-size:10px;letter-spacing:1px;color:#bdd0c5}
.poster-stage .poster-art{border:0;box-shadow:0 25px 50px #0008;animation:hero-poster-float 7s ease-in-out infinite;will-change:transform}
.poster-stage .poster-glare{opacity:.5;animation-duration:9s}
.poster-orbits{position:absolute;inset:-7% -17%;z-index:-1;pointer-events:none;transform:translate3d(var(--rift-x),var(--rift-y),0);transition:transform .3s ease-out}
.poster-orbits i{position:absolute;inset:0;border:1px solid #78dbb832;border-top-color:#78dbb881;border-right-color:#78dbb858;border-radius:50%;animation:hero-orbit 22s linear infinite}
.poster-orbits i:after{content:'';position:absolute;top:4%;left:68%;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px #78dbb899}
.poster-orbits i:nth-child(2){inset:9% 5%;border-color:#ed554e25;border-bottom-color:#ed554e6b;animation-duration:31s;animation-direction:reverse}
.poster-orbits i:nth-child(2):after{background:var(--red);box-shadow:0 0 13px #ed554e77;width:4px;height:4px}
.poster-orbits i:nth-child(3){inset:18% -4%;border-style:dashed;border-color:#78dbb827;animation-duration:45s;opacity:.6}
.poster-orbits i:nth-child(3):after{display:none}
.hero-actions .button{min-width:220px;min-height:56px;gap:40px}
.hero-actions .text-link{color:#bccbc2;border-color:#78dbb85c}
.hero-top>span:first-child:before{content:'';display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%;margin:0 10px 2px 0;box-shadow:0 0 9px #78dbb866}
.hero-controls .purge-switch{border-color:#78dbb837;background:transparent}
.hero-controls .motion-control{border-color:#a8d1bd24;background:transparent;color:#a5b6ae}

@media(min-width:901px){
  :root{--purge-header-height:76px}
  header{height:var(--purge-header-height);min-height:var(--purge-header-height);padding-block:7px}
  header .logo-window{width:208px;height:60px}
  .hero{height:calc(100svh - var(--purge-header-height));min-height:0;display:flex;flex-direction:column;gap:18px;padding:18px 5% 16px}
  .hero-top,.hero-layout,.hero-bottom{width:100%;max-width:1440px;margin-inline:auto;flex-shrink:0}
  .hero-top{font-size:10px;letter-spacing:1.4px;padding-bottom:12px;line-height:1.8}
  .hero-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr);gap:6%;margin-block:0;flex:1;min-height:0;align-items:center}
  .hero-copy{padding:0}
  .hero-copy>.eyebrow{font-size:11px;line-height:1.7;letter-spacing:1.2px;margin:0 0 clamp(12px,2svh,20px)}
  .hero h1 .year{font-size:clamp(38px,6.5svh,76px);line-height:1.02}
  .hero h1 .purge{font-size:min(12.3vw,18svh,190px);letter-spacing:-.025em;margin-top:3px;white-space:nowrap}
  .hero-title-rule{margin-top:clamp(10px,1.7svh,17px);width:86%}
  .hero .versus{font-size:clamp(23px,3.2svh,34px);letter-spacing:2px;gap:18px;margin:clamp(12px,2svh,20px) 0 0}
  .hero .versus i{font-size:16px}
  .hero-tagline{font-size:clamp(19px,2.7svh,27px);line-height:1.2;letter-spacing:.5px;margin:clamp(14px,2.4svh,24px) 0 0}
  .hero-copy .intro{font-size:14px;line-height:1.6;margin:12px 0 20px;max-width:440px}
  .hero-copy .intro br{display:none}
  .hero-actions{gap:23px;flex-wrap:nowrap}
  .hero-actions .button{font-size:13px;padding:15px 22px}
  .hero-actions .text-link{font-size:11px;white-space:nowrap}
  .poster-stage{width:min(100%,calc((100svh - 290px)*.8),500px)}
  .hero-bottom{padding-top:12px;min-height:57px;gap:18px;flex-wrap:nowrap}
  .countdown{gap:12px}
  .countdown>span{font-size:9px;letter-spacing:1px}
  .countdown strong{font-size:14px;letter-spacing:.6px}
  .hero-controls{gap:10px;flex-wrap:nowrap}
  .hero-controls button{font-size:10px;min-height:40px;padding:10px 13px}
}
@media(min-width:901px) and (max-height:740px){
  :root{--purge-header-height:68px}
  header .logo-window{width:190px;height:54px}
  .hero{gap:12px;padding-top:12px;padding-bottom:12px}
  .hero-top{padding-bottom:9px;font-size:9px}
  .hero-copy>.eyebrow{font-size:10px;line-height:1.55;margin-bottom:11px}
  .hero h1 .year{font-size:clamp(31px,5.8svh,43px)}
  .hero h1 .purge{font-size:min(11.7vw,16.5svh)}
  .hero-title-rule{margin-top:10px}
  .hero .versus{font-size:23px;margin-top:11px}
  .hero-tagline{font-size:19px;line-height:1.15;margin-top:13px}
  .hero-copy .intro{font-size:12px;margin:9px 0 14px}
  .hero-actions .button{min-height:48px;min-width:194px;padding:12px 20px;font-size:12px}
  .hero-actions{gap:20px}
  .hero-bottom{min-height:49px;padding-top:9px}
  .hero-controls button{min-height:36px;font-size:9px;padding:9px 12px}
  .poster-stage{width:min(100%,calc((100svh - 254px)*.8),410px)}
  .poster-stage .poster-label,.poster-stage figcaption{font-size:9px;letter-spacing:.6px}
  .poster-stage figcaption{margin-top:10px}
}
@media(min-width:901px) and (max-width:1150px){
  .hero-layout{gap:5%;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
  .hero-actions{gap:17px;flex-wrap:wrap}
  .hero-actions .button{min-width:190px}
  .hero-copy .eyebrow{font-size:10px;letter-spacing:.7px}
  .countdown{gap:8px;flex-direction:column;align-items:flex-start}
}
@media(min-width:901px) and (max-height:560px){
  .hero{height:auto;min-height:492px}
  .hero-layout{padding-block:12px}
  .poster-stage{width:min(100%,235px)}
}
@media(min-width:701px) and (max-width:900px){
  .poster-stage{width:100%;max-width:380px}
  .poster-stage .poster-label{font-size:9px;letter-spacing:.3px}
  .hero-actions .button{min-width:190px;gap:25px}
  .hero-controls{width:auto}
}
@media(max-width:700px){
  .hero-title-rule{margin-top:13px;width:85%}
  .poster-stage{width:95%;max-width:520px;margin:5px auto 0}
  .poster-stage .poster{width:100%;transform:rotate(1.5deg)}
  .poster-orbits{inset:-5% -10%;opacity:.7}
  .poster-orbits i:nth-child(3){display:none}
  .poster-stage .poster-label{font-size:9px;letter-spacing:.4px}
  .poster-stage figcaption{font-size:10px;letter-spacing:.3px}
  .poster-stage .poster-art{will-change:auto}
  .hero-actions .button{min-width:190px;gap:26px}
  .haunt-wash{background:radial-gradient(ellipse at 65% 60%,#78dbb81b,transparent 65%),radial-gradient(ellipse at 100% 70%,#ed554e13,transparent 45%)}
}
.motion-paused .hero-copy{transform:none}
.motion-paused .poster-orbits{transform:none}
@keyframes hero-letter-rise{from{opacity:.1;transform:translate3d(0,22px,0) rotateX(25deg)}to{opacity:1;transform:none}}
@keyframes hero-line-charge{0%,12%{transform:translateX(-100%)}75%,100%{transform:translateX(100%)}}
@keyframes hero-orbit{to{transform:rotate(360deg)}}
@keyframes hero-poster-float{0%,100%{transform:translate3d(0,0,0) rotate(.25deg)}50%{transform:translate3d(0,-8px,0) rotate(-.25deg)}}
@keyframes stage-drift{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(3%,3%,0)}}
@media(prefers-reduced-motion:reduce){
  .hero h1 .hero-letter,.hero-title-rule:after,.poster-orbits i,.poster-stage .poster-art,.haunt-wash{animation:none}
  .hero h1 .hero-letter{opacity:1;transform:none}
  .hero-title-rule:after{display:none}
  .hero-copy,.poster-orbits{transform:none}
  .poster-stage .poster-art{will-change:auto}
}
@media(forced-colors:active){.poster-orbits,.haunt-wash,.hero-title-rule{display:none}.hero h1 .year,.hero h1 .purge{color:CanvasText;text-shadow:none}}

/* Richer motion stays inside the hero and never changes its layout. */
.hero #halloween-embers{position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:.9;pointer-events:none;contain:strict}
.hero-siren-beams{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict;opacity:.6}
.hero-siren-beams i{position:absolute;inset:-60% -45%;background:linear-gradient(116deg,transparent 43%,#78dbb808 47%,#78dbb817 49%,transparent 53%);animation:hero-beam-pass 14s ease-in-out infinite}
.hero-siren-beams i:nth-child(2){background:linear-gradient(72deg,transparent 44%,#ed554e13 49%,transparent 54%);animation-duration:19s;animation-delay:-8s;animation-direction:reverse}
.hero-copy .intro strong{color:var(--accent);font-weight:900}
.poster-orbits i{animation-duration:17s}
.poster-orbits i:nth-child(2){animation-duration:25s}
.poster-orbits i:nth-child(3){animation-duration:34s}
.hero-title-rule:after{animation-duration:4s}
@keyframes hero-beam-pass{0%,100%{transform:translate3d(-14%,0,0) rotate(-7deg);opacity:.25}50%{transform:translate3d(14%,3%,0) rotate(7deg);opacity:.85}}
@media(max-width:700px){.hero #halloween-embers{opacity:.8}.hero-siren-beams{opacity:.4}.hero-siren-beams i:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){.hero-siren-beams,.hero #halloween-embers{display:none}}