/* POWER SHIFTER · After Dark (Halloween 2026)
   Seasonal layer for the homepage. Additive only.
   Everything here is gated by html.after-dark, which halloween.js adds.
   To switch off: remove the <link> and <script> for these two files from index.html. */

/* ---------- keyframes ---------- */
@keyframes ad-rise{
  0%  {transform:translateY(0) scale(.9);opacity:0}
  18% {opacity:var(--o)}
  70% {opacity:calc(var(--o)*.8)}
  100%{transform:translateY(calc(-1*var(--d))) scale(1.08);opacity:0}
}
@keyframes ad-waft{
  0%,100%{transform:translateX(-18px) rotate(-5deg) scaleX(var(--fl))}
  50%    {transform:translateX(18px) rotate(5deg) scaleX(var(--fl))}
}
@keyframes ad-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.05)}}
@keyframes ad-fade{from{opacity:0}to{opacity:1}}

/* ---------- host sections ---------- */
html.after-dark .hero,
html.after-dark .work,
html.after-dark .closer{position:relative;overflow:hidden}
html.after-dark .hero-inner{z-index:3}
/* the dashed 'Hero reel — Studios to supply' placeholder tag stays hidden while After Dark is on */
html.after-dark .hero .slot-tag{display:none}

/* ---------- 1. hero flashlight ---------- */
.ad-hero-fx{--fx:70%;--fy:40%}
.ad-hidden{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  pointer-events:none;animation:ad-fade .8s ease-out both}
.ad-hidden-title{font-family:var(--display);font-weight:900;font-size:clamp(120px,19vw,320px);line-height:.82;
  letter-spacing:-.04em;text-transform:uppercase;text-align:center;color:transparent;
  -webkit-text-stroke:2px var(--magenta)}
.ad-note{position:absolute;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ad-note.n1{top:18%;left:8%;color:var(--magenta)}
.ad-note.n2{top:30%;right:9%;color:var(--paper)}
.ad-note.n3{bottom:42%;left:46%;color:var(--paper)}
.ad-dark{position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(5,5,6,.965);
  -webkit-mask-image:radial-gradient(circle clamp(150px,18vw,260px) at var(--fx) var(--fy),transparent 0,transparent 30%,#000 100%);
          mask-image:radial-gradient(circle clamp(150px,18vw,260px) at var(--fx) var(--fy),transparent 0,transparent 30%,#000 100%);
  animation:ad-fade .8s ease-out both}
.ad-glow{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle 120px at var(--fx) var(--fy),rgba(253,46,144,.16),transparent 70%);
  animation:ad-fade .8s ease-out both}
@media(max-width:700px){
  .ad-note{font-size:10px}
  .ad-note.n2{right:6%}
  .ad-note.n3{left:8%;bottom:46%}
}
.ad-eyebrow{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--magenta);margin-bottom:22px}

/* ---------- 2. rising ghosts ---------- */
.ad-ghosts{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.ad-ghost{position:absolute;top:100%;pointer-events:none;will-change:transform,opacity;
  animation:ad-rise var(--dur) cubic-bezier(.45,.05,.55,.95) forwards}
.ad-ghost-in{animation:ad-waft var(--waft) ease-in-out infinite}
.ad-ghost canvas,.ad-ghost img{display:block;width:100%;height:auto}
.ad-ghost img{filter:invert(1) contrast(1.15);mix-blend-mode:screen}
.ad-keyer-video{position:fixed;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}

/* ---------- 3. Studios door eyes ---------- */
html.after-dark .door.studios{position:relative;overflow:hidden}
html.after-dark .door.studios > *:not(.ad-eyes){position:relative;z-index:2}
.ad-eyes{position:absolute;inset:0;z-index:1;pointer-events:none}
.ad-pair{position:absolute;display:flex;gap:calc(14px*var(--s));animation:ad-blink var(--bd) var(--bl) infinite}
.ad-eye{position:relative;width:calc(34px*var(--s));height:calc(16px*var(--s));background:var(--paper);
  border-radius:50% 50% 50% 50% / 70% 70% 30% 30%;box-shadow:0 0 18px rgba(253,46,144,.35);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.ad-eye:first-child{transform:rotate(-6deg)}
.ad-eye:last-child{transform:rotate(6deg)}
.ad-pupil{width:calc(12px*var(--s));height:calc(12px*var(--s));border-radius:50%;background:var(--magenta);
  box-shadow:inset 0 0 0 calc(3px*var(--s)) var(--ink);transition:transform .12s linear}

/* ---------- 4. copy: closer ---------- */
.ad-haunt{font-family:var(--display);font-weight:900;font-size:clamp(44px,6.6vw,104px);line-height:1;letter-spacing:-.02em;
  text-transform:uppercase;margin-top:.12em;max-width:16ch;color:transparent;-webkit-text-stroke:1.5px var(--magenta);
  transition:color .5s cubic-bezier(.76,0,.24,1);pointer-events:auto}
.ad-haunt:hover{color:var(--magenta)}

/* ---------- phones and small touch screens: no spotlight, reel runs clean ---------- */
@media (max-width:700px), (hover:none) and (pointer:coarse) and (max-width:1000px){
  .ad-hidden,.ad-dark,.ad-glow,.ad-eyebrow{display:none!important}
}

/* ---------- reduced motion: no ghosts, no darkness, static eyes ---------- */
@media (prefers-reduced-motion:reduce){
  .ad-hidden,.ad-dark,.ad-glow,.ad-ghosts,.ad-eyebrow{display:none!important}
  .ad-pair{animation:none}
  .ad-pupil{transition:none}
}