/* ============================================================
   THE GREAT SWINGALI — HORROR THEATER
   Room foundation. Supplied artwork is never modified.
   ============================================================ */

html,body{
  margin:0;
  width:100%;
  min-height:100%;
  background:#050505;
}

body.horror-theater-page{
  overflow:hidden;
}

/* Usable room canvas sits beneath the permanent Portal shell. */
.theater-stage{
  position:fixed;
  left:0;
  right:0;
  top:var(--portal-shell-height,92px);
  bottom:0;
  overflow:hidden;
  background:#050505;
  isolation:isolate;
}

.theater-background{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  user-select:none;
  pointer-events:none;
  z-index:1;
}

/* ------------------------------------------------------------
   MODULAR POSTER CONTENT LAYERS
   Coordinates follow the 1640 × 900 supplied background.
   Perspective is retained with clip-path quadrilaterals.
   They are initially visually suppressed because the exact same
   supplied posters already exist in the background artwork.
   Turning a slot on later will not require editing the background.
   ------------------------------------------------------------ */
.poster-slot{
  position:absolute;
  z-index:4;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
}

.poster-slot img{
  width:100%;
  height:100%;
  object-fit:fill;
  display:block;
}

.poster-slot.is-active{
  opacity:1;
}

/* Foreground frame */
.poster-slot-1{
  left:7.55%;
  top:11.8%;
  width:18.85%;
  height:65.8%;
  clip-path:polygon(7% 0,100% 6%,95% 100%,0 94%);
}

/* Middle frame */
.poster-slot-2{
  left:29.1%;
  top:17.4%;
  width:11.1%;
  height:48.4%;
  clip-path:polygon(5% 0,100% 6%,94% 100%,0 94%);
}

/* Rear frame */
.poster-slot-3{
  left:42.1%;
  top:21.1%;
  width:6.45%;
  height:37.2%;
  clip-path:polygon(4% 0,100% 8%,91% 100%,0 93%);
}

/* ------------------------------------------------------------
   BACK NAVIGATION
   Kept clear of the poster wall, concession stand and future
   environmental hotspots. Permanent lower-left room navigation.
   ------------------------------------------------------------ */
.theater-back{
  position:absolute;
  left:clamp(16px,1.8vw,28px);
  bottom:clamp(18px,2.5vh,28px);
  z-index:60;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 13px;

  border:1px solid rgba(210,177,116,.78);
  border-radius:4px;
  background:linear-gradient(180deg,rgba(45,31,24,.94),rgba(13,10,11,.97));

  color:#efd4a0;
  text-decoration:none;
  white-space:nowrap;
  font:700 clamp(.66rem,.78vw,.82rem)/1 Georgia,"Times New Roman",serif;
  letter-spacing:.045em;

  box-shadow:
    inset 0 0 0 1px rgba(255,226,175,.07),
    0 5px 15px rgba(0,0,0,.60);
}

.theater-back:hover,
.theater-back:focus-visible{
  color:#fff0c9;
  border-color:rgba(222,172,249,.94);
  box-shadow:
    0 0 9px rgba(210,147,246,.54),
    0 0 18px rgba(137,51,185,.30),
    0 5px 15px rgba(0,0,0,.62);
  outline:none;
}

@media(max-width:800px){
  .theater-back{
    left:10px;
    bottom:14px;
    padding:8px 10px;
    font-size:.62rem;
  }
}


/* ============================================================
   HORROR THEATER — FIRST APPROVED INTERACTIVE HOTSPOTS
   Coordinates are measured against the supplied 1640 × 900 room artwork.
   No artwork is altered.
   ============================================================ */

.theater-hotspot{
  position:absolute;
  z-index:24;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  appearance:none;
  cursor:pointer;
  outline:none;
}

/* ------------------------------------------------------------
   1) FIRST MOVIE POSTER
   Covers the actual foreground marquee/poster frame.
   ------------------------------------------------------------ */
.poster-hit-1{
  left:3.0%;
  top:2.7%;
  width:24.3%;
  height:85.0%;
  clip-path:polygon(2% 0,100% 4%,96% 100%,0 96%);
}

/* Label stays outside the artwork until hover/focus. */
.hotspot-label{
  position:absolute;
  left:50%;
  bottom:4%;
  transform:translate(-50%,8px);
  z-index:8;

  display:block;
  max-width:90%;
  padding:7px 11px;

  color:#f1ddbd;
  background:rgba(12,7,15,.92);
  border:1px solid rgba(207,143,239,.68);
  border-radius:4px;

  font:700 clamp(.62rem,.72vw,.78rem)/1 Georgia,"Times New Roman",serif;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;

  opacity:0;
  pointer-events:none;

  box-shadow:
    0 4px 14px rgba(0,0,0,.64),
    0 0 12px rgba(176,82,224,.28);

  transition:opacity .16s ease,transform .16s ease;
}

.theater-hotspot:hover .hotspot-label,
.theater-hotspot:focus-visible .hotspot-label{
  opacity:1;
  transform:translate(-50%,0);
}

/* Circular-running marquee-light effect.
   The glow is built entirely in CSS and follows the existing poster frame. */
.poster-marquee-lights{
  position:absolute;
  inset:0;
  z-index:4;
  border-radius:8px;
  pointer-events:none;
  opacity:.40;

  /* Four moving highlight bands around the perimeter, giving the
     impression that the old bulbs are lighting sequentially. */
  background:
    radial-gradient(circle at 4% 4%,rgba(255,245,255,1) 0 2px,rgba(211,128,255,.95) 3px 5px,transparent 6px),
    radial-gradient(circle at 96% 4%,rgba(255,245,255,1) 0 2px,rgba(211,128,255,.95) 3px 5px,transparent 6px),
    radial-gradient(circle at 96% 96%,rgba(255,245,255,1) 0 2px,rgba(211,128,255,.95) 3px 5px,transparent 6px),
    radial-gradient(circle at 4% 96%,rgba(255,245,255,1) 0 2px,rgba(211,128,255,.95) 3px 5px,transparent 6px);

  box-shadow:
    inset 0 0 0 2px rgba(187,84,238,.28),
    0 0 8px rgba(194,91,243,.34);
}

.poster-hit-1:hover .poster-marquee-lights,
.poster-hit-1:focus-visible .poster-marquee-lights{
  opacity:1;
  animation:
    theaterMarqueeOrbit 1.55s linear infinite,
    theaterProjectorFlicker .16s steps(2,end) infinite;
  box-shadow:
    inset 0 0 0 2px rgba(233,183,255,.86),
    inset 0 0 18px rgba(179,73,229,.38),
    0 0 11px rgba(233,183,255,.92),
    0 0 30px rgba(175,70,225,.70),
    0 0 52px rgba(111,34,153,.48);
}

@keyframes theaterMarqueeOrbit{
  0%{
    filter:
      drop-shadow(0 -14px 7px rgba(238,196,255,.98))
      drop-shadow(14px 0 9px rgba(175,67,231,.42));
  }
  25%{
    filter:
      drop-shadow(14px 0 7px rgba(238,196,255,.98))
      drop-shadow(0 14px 9px rgba(175,67,231,.42));
  }
  50%{
    filter:
      drop-shadow(0 14px 7px rgba(238,196,255,.98))
      drop-shadow(-14px 0 9px rgba(175,67,231,.42));
  }
  75%{
    filter:
      drop-shadow(-14px 0 7px rgba(238,196,255,.98))
      drop-shadow(0 -14px 9px rgba(175,67,231,.42));
  }
  100%{
    filter:
      drop-shadow(0 -14px 7px rgba(238,196,255,.98))
      drop-shadow(14px 0 9px rgba(175,67,231,.42));
  }
}

@keyframes theaterProjectorFlicker{
  0%,100%{filter:brightness(1) contrast(1)}
  25%{filter:brightness(1.28) contrast(1.05)}
  52%{filter:brightness(.82) contrast(1.08)}
  77%{filter:brightness(1.15) contrast(1)}
}

/* ------------------------------------------------------------
   2) BACK MOVIE PROJECTOR
   Precise compact target around the actual projector body/light.
   ------------------------------------------------------------ */
.projector-hit{
  left:61.9%;
  top:34.8%;
  width:6.6%;
  height:16.8%;
  border-radius:48%;
}

/* ------------------------------------------------------------
   3) POPCORN MACHINE
   Target covers the machine itself, not the entire concession stand.
   ------------------------------------------------------------ */
.popcorn-hit{
  left:67.8%;
  top:25.6%;
  width:9.8%;
  height:28.5%;
  border-radius:12px;
}

/* Universal-style ethereal swirl for projector + popcorn.
   Marker is centered on the represented object and blooms on hover. */
.ethereal-marker{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  width:clamp(22px,1.65vw,30px);
  height:clamp(22px,1.65vw,30px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;

  border:1px solid rgba(241,218,255,.94);
  background:
    radial-gradient(circle at 38% 34%,
      #fff 0 7%,
      #edc9ff 9% 20%,
      #c16cf0 38%,
      #681b8b 66%,
      rgba(83,20,110,.24) 75%,
      transparent 78%);

  box-shadow:
    0 0 8px rgba(241,218,255,.90),
    0 0 19px rgba(205,102,250,.86),
    0 0 34px rgba(130,43,182,.64);

  animation:theaterMarkerIdle 2.3s ease-in-out infinite;
}

.projector-hit:hover .ethereal-marker,
.projector-hit:focus-visible .ethereal-marker,
.popcorn-hit:hover .ethereal-marker,
.popcorn-hit:focus-visible .ethereal-marker{
  animation:
    theaterGhostSwirl 1.25s linear infinite,
    theaterMarkerPulse 1.1s ease-in-out infinite;
}

.projector-hit:hover,
.projector-hit:focus-visible,
.popcorn-hit:hover,
.popcorn-hit:focus-visible{
  background:
    radial-gradient(ellipse at center,
      rgba(205,126,249,.22),
      rgba(114,43,157,.09) 58%,
      transparent 76%);
  box-shadow:
    0 0 18px rgba(207,126,249,.52),
    inset 0 0 17px rgba(221,171,255,.14);
}

@keyframes theaterMarkerIdle{
  0%,100%{scale:.88;opacity:.78}
  50%{scale:1.04;opacity:1}
}

@keyframes theaterGhostSwirl{
  from{rotate:0deg;filter:drop-shadow(0 -7px 5px rgba(237,196,255,.9))}
  25%{filter:drop-shadow(7px 0 7px rgba(191,92,238,.82))}
  50%{filter:drop-shadow(0 7px 7px rgba(237,196,255,.9))}
  75%{filter:drop-shadow(-7px 0 7px rgba(191,92,238,.82))}
  to{rotate:360deg;filter:drop-shadow(0 -7px 5px rgba(237,196,255,.9))}
}

@keyframes theaterMarkerPulse{
  0%,100%{scale:.92;opacity:.84}
  50%{scale:1.22;opacity:1}
}

/* The poster label belongs near the lower edge. The compact object labels
   sit just beneath their targets where they do not cover the objects. */
.projector-hit .hotspot-label,
.popcorn-hit .hotspot-label{
  bottom:-24%;
}

@media(prefers-reduced-motion:reduce){
  .poster-hit-1:hover .poster-marquee-lights,
  .poster-hit-1:focus-visible .poster-marquee-lights,
  .projector-hit:hover .ethereal-marker,
  .projector-hit:focus-visible .ethereal-marker,
  .popcorn-hit:hover .ethereal-marker,
  .popcorn-hit:focus-visible .ethereal-marker,
  .ethereal-marker{
    animation:none !important;
  }
}


/* ============================================================
   HORROR THEATER — AUTHORITATIVE HOTSPOT / MARKER REPAIR
   This block intentionally overrides the first-pass hotspot rules.
   ============================================================ */

/* All three approved hotspots must actually sit above the room artwork,
   receive pointer interaction, and show the hand cursor. */
.poster-hit-1,
.projector-hit,
.popcorn-hit{
  position:absolute !important;
  z-index:120 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  background:transparent;
  border:0;
  outline:0;
}

/* PRECISE OBJECT AREAS — based on the supplied 1640x900 background */

/* First / foreground poster INCLUDING its illuminated frame */
.poster-hit-1{
  left:2.75% !important;
  top:2.2% !important;
  width:24.9% !important;
  height:85.8% !important;
  clip-path:polygon(2% 0,100% 4%,96% 100%,0 96%) !important;
}

/* Rear projector: cabinet + projector body/light, not the light beam */
.projector-hit{
  left:60.85% !important;
  top:32.4% !important;
  width:7.35% !important;
  height:18.7% !important;
  border-radius:42% !important;
}

/* Popcorn machine only, not usher or concession display */
.popcorn-hit{
  left:67.45% !important;
  top:24.5% !important;
  width:10.25% !important;
  height:30.4% !important;
  border-radius:9px !important;
}

/* ------------------------------------------------------------
   TRUE UNIVERSAL PURPLE MARKER
   Always visible on ALL THREE approved hotspots.
   ------------------------------------------------------------ */
.poster-hit-1::after,
.projector-hit::after,
.popcorn-hit::after{
  content:"" !important;
  position:absolute !important;
  z-index:135 !important;

  width:clamp(18px,1.35vw,24px) !important;
  height:clamp(18px,1.35vw,24px) !important;
  border-radius:50% !important;

  border:1px solid rgba(248,229,255,.98) !important;

  background:
    radial-gradient(circle at 37% 32%,
      #ffffff 0 7%,
      #f0d2ff 9% 20%,
      #cc79f7 37%,
      #7e2aa5 60%,
      #4a0f67 73%,
      rgba(74,15,103,.18) 78%,
      transparent 80%) !important;

  box-shadow:
    0 0 6px rgba(250,233,255,.98),
    0 0 15px rgba(214,119,255,.98),
    0 0 28px rgba(157,54,215,.86),
    0 0 42px rgba(95,25,139,.48) !important;

  pointer-events:none !important;
  transform-origin:center !important;

  animation:
    theaterUniversalSpin 3.3s linear infinite,
    theaterUniversalPulse 1.7s ease-in-out infinite !important;
}

/* Marker locations are placed near the object edge so they do not hide detail. */
.poster-hit-1::after{
  right:4.5% !important;
  top:47% !important;
}
.projector-hit::after{
  right:-5% !important;
  top:38% !important;
}
.popcorn-hit::after{
  right:-4% !important;
  top:43% !important;
}

@keyframes theaterUniversalSpin{
  from{rotate:0deg}
  to{rotate:360deg}
}
@keyframes theaterUniversalPulse{
  0%,100%{scale:.86;opacity:.82}
  50%{scale:1.16;opacity:1}
}

/* ------------------------------------------------------------
   POSTER — OLD MARQUEE / PROJECTOR FLICKER
   The existing bulbs appear to chase clockwise around the frame.
   ------------------------------------------------------------ */
.poster-hit-1 .poster-marquee-lights{
  position:absolute !important;
  inset:0 !important;
  z-index:124 !important;
  display:block !important;
  opacity:0 !important;
  pointer-events:none !important;

  border:3px solid rgba(188,80,239,.16) !important;
  border-radius:8px !important;

  /* dotted bulb pattern along all four edges */
  background:
    radial-gradient(circle,rgba(251,235,255,1) 0 2px,rgba(205,104,249,.95) 3px 5px,transparent 6px)
      left top/28px 12px repeat-x,
    radial-gradient(circle,rgba(251,235,255,1) 0 2px,rgba(205,104,249,.95) 3px 5px,transparent 6px)
      right top/12px 28px repeat-y,
    radial-gradient(circle,rgba(251,235,255,1) 0 2px,rgba(205,104,249,.95) 3px 5px,transparent 6px)
      right bottom/28px 12px repeat-x,
    radial-gradient(circle,rgba(251,235,255,1) 0 2px,rgba(205,104,249,.95) 3px 5px,transparent 6px)
      left bottom/12px 28px repeat-y !important;

  background-position:
    0 0,
    100% 0,
    100% 100%,
    0 100% !important;

  box-shadow:
    inset 0 0 15px rgba(192,76,239,.20),
    0 0 16px rgba(189,75,237,.22) !important;
}

.poster-hit-1:hover .poster-marquee-lights,
.poster-hit-1:focus-visible .poster-marquee-lights{
  opacity:1 !important;
  animation:
    theaterBulbChase .72s linear infinite,
    theaterFilmFlicker .14s steps(2,end) infinite !important;

  box-shadow:
    inset 0 0 16px rgba(222,151,255,.40),
    0 0 12px rgba(240,203,255,.95),
    0 0 28px rgba(189,74,242,.78),
    0 0 48px rgba(118,35,165,.48) !important;
}

@keyframes theaterBulbChase{
  0%{
    background-position:0 0,100% 0,100% 100%,0 100%;
  }
  25%{
    background-position:28px 0,100% 28px,calc(100% - 28px) 100%,0 calc(100% - 28px);
  }
  50%{
    background-position:56px 0,100% 56px,calc(100% - 56px) 100%,0 calc(100% - 56px);
  }
  75%{
    background-position:84px 0,100% 84px,calc(100% - 84px) 100%,0 calc(100% - 84px);
  }
  100%{
    background-position:112px 0,100% 112px,calc(100% - 112px) 100%,0 calc(100% - 112px);
  }
}

@keyframes theaterFilmFlicker{
  0%,100%{filter:brightness(1)}
  24%{filter:brightness(1.30)}
  48%{filter:brightness(.80)}
  72%{filter:brightness(1.18)}
}

/* ------------------------------------------------------------
   PROJECTOR + POPCORN — ETHEREAL GHOSTLY SWIRL
   ------------------------------------------------------------ */
.projector-hit::before,
.popcorn-hit::before{
  content:"" !important;
  position:absolute !important;
  inset:-10% !important;
  z-index:122 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  opacity:0 !important;

  background:
    conic-gradient(from 0deg,
      transparent 0 12%,
      rgba(222,162,255,.56) 18%,
      rgba(151,65,205,.20) 27%,
      transparent 36% 56%,
      rgba(238,201,255,.45) 66%,
      rgba(139,47,192,.18) 76%,
      transparent 86% 100%) !important;

  filter:blur(5px) !important;
}

.projector-hit:hover::before,
.projector-hit:focus-visible::before,
.popcorn-hit:hover::before,
.popcorn-hit:focus-visible::before{
  opacity:1 !important;
  animation:
    theaterEtherealOrbit 1.7s linear infinite,
    theaterEtherealBreath 1.25s ease-in-out infinite !important;
}

.projector-hit:hover,
.projector-hit:focus-visible,
.popcorn-hit:hover,
.popcorn-hit:focus-visible{
  box-shadow:
    0 0 12px rgba(234,195,255,.64),
    0 0 30px rgba(181,82,229,.54),
    inset 0 0 18px rgba(202,121,245,.20) !important;
}

@keyframes theaterEtherealOrbit{
  from{rotate:0deg}
  to{rotate:360deg}
}
@keyframes theaterEtherealBreath{
  0%,100%{scale:.94;filter:blur(5px);opacity:.58}
  50%{scale:1.08;filter:blur(7px);opacity:1}
}

/* The old nested marker spans are no longer needed visually;
   the authoritative universal markers are now the pseudo-elements above. */
.projector-hit .ethereal-marker,
.popcorn-hit .ethereal-marker{
  display:none !important;
}

/* Labels remain optional hover feedback but never block the object. */
.poster-hit-1 .hotspot-label,
.projector-hit .hotspot-label,
.popcorn-hit .hotspot-label{
  pointer-events:none !important;
  z-index:140 !important;
}

@media(prefers-reduced-motion:reduce){
  .poster-hit-1::after,
  .projector-hit::after,
  .popcorn-hit::after,
  .poster-hit-1:hover .poster-marquee-lights,
  .poster-hit-1:focus-visible .poster-marquee-lights,
  .projector-hit:hover::before,
  .projector-hit:focus-visible::before,
  .popcorn-hit:hover::before,
  .popcorn-hit:focus-visible::before{
    animation:none !important;
  }
}


/* ============================================================
   HORROR THEATER — PROJECTOR / POPCORN MARKER FINAL POSITION FIX
   Use the existing real marker <span> elements for these two close objects.
   This avoids pseudo-element stacking conflicts and gives each marker its
   own unmistakable position on the represented object.
   ============================================================ */

/* Disable the pseudo markers ONLY for projector and popcorn so there cannot
   be hidden/duplicate marker layers fighting with the real marker spans. */
.projector-hit::after,
.popcorn-hit::after{
  content:none !important;
  display:none !important;
}

/* Restore and force the actual marker span visible. */
.projector-hit .ethereal-marker,
.popcorn-hit .ethereal-marker{
  display:block !important;
  position:absolute !important;
  z-index:155 !important;

  width:clamp(20px,1.45vw,27px) !important;
  height:clamp(20px,1.45vw,27px) !important;
  border-radius:50% !important;

  border:1px solid rgba(248,229,255,.98) !important;
  background:
    radial-gradient(circle at 37% 32%,
      #ffffff 0 7%,
      #f0d2ff 9% 20%,
      #cc79f7 37%,
      #7e2aa5 60%,
      #4a0f67 73%,
      rgba(74,15,103,.18) 78%,
      transparent 80%) !important;

  box-shadow:
    0 0 6px rgba(250,233,255,.98),
    0 0 15px rgba(214,119,255,.98),
    0 0 28px rgba(157,54,215,.86),
    0 0 42px rgba(95,25,139,.48) !important;

  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none !important;

  transform:translate(-50%,-50%) !important;
  transform-origin:center !important;

  animation:
    theaterRealMarkerSpin 3.2s linear infinite,
    theaterRealMarkerPulse 1.65s ease-in-out infinite !important;
}

/* PROJECTOR MARKER
   Put it on the LEFT/UPPER portion of the projector body.
   This keeps it visually far away from the popcorn-machine marker. */
.projector-hit .ethereal-marker{
  left:12% !important;
  top:26% !important;
}

/* POPCORN MARKER
   Put it on the RIGHT/UPPER portion of the popcorn machine.
   This creates clear separation from the nearby projector marker. */
.popcorn-hit .ethereal-marker{
  left:88% !important;
  top:24% !important;
}

@keyframes theaterRealMarkerSpin{
  from{rotate:0deg}
  to{rotate:360deg}
}

@keyframes theaterRealMarkerPulse{
  0%,100%{
    scale:.88;
    opacity:.82;
    filter:drop-shadow(0 0 2px rgba(255,238,255,.72));
  }
  50%{
    scale:1.17;
    opacity:1;
    filter:drop-shadow(0 0 8px rgba(216,126,255,.96));
  }
}

/* Strengthen the actual object hover zones without moving them. */
.projector-hit:hover .ethereal-marker,
.projector-hit:focus-visible .ethereal-marker,
.popcorn-hit:hover .ethereal-marker,
.popcorn-hit:focus-visible .ethereal-marker{
  box-shadow:
    0 0 8px rgba(255,240,255,1),
    0 0 20px rgba(224,139,255,1),
    0 0 38px rgba(161,61,220,.96),
    0 0 58px rgba(102,28,151,.60) !important;
}

/* Make sure neither nearby hotspot can sit above the other's marker. */
.projector-hit,
.popcorn-hit{
  overflow:visible !important;
}

@media(prefers-reduced-motion:reduce){
  .projector-hit .ethereal-marker,
  .popcorn-hit .ethereal-marker{
    animation:none !important;
  }
}


/* ============================================================
   HORROR THEATER — FIXED 1640x900 ARTBOARD COORDINATE SYSTEM
   The supplied room artwork and ALL object hotspots now share one
   coordinate plane. This corrects object-fit:cover drift/cropping.
   ============================================================ */

.theater-stage{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  top:var(--portal-shell-height,92px) !important;
  bottom:0 !important;
  overflow:hidden !important;
  background:#050505 !important;
  isolation:isolate !important;
}

/* This artboard reproduces CSS object-fit:cover mathematically:
   it always fills the room while preserving the supplied image's
   native 1640:900 ratio. Hotspots are children of this same box. */
.theater-artboard{
  position:absolute !important;
  z-index:1 !important;
  left:50% !important;
  top:50% !important;

  width:max(100%, calc(100vh * 1640 / 900)) !important;
  height:max(100%, calc(100vw * 900 / 1640)) !important;
  aspect-ratio:1640 / 900 !important;

  transform:translate(-50%,-50%) !important;
  overflow:visible !important;
}

.theater-background{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  object-position:center !important;
  pointer-events:none !important;
  user-select:none !important;
}

/* Poster replacement layers remain in the exact same art coordinate system. */
.poster-slot{
  z-index:4 !important;
}

/* All three approved hotspots must be interactive and visible. */
.poster-hit-1,
.projector-hit,
.popcorn-hit{
  z-index:120 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  overflow:visible !important;
}

/* ------------------------------------------------------------
   PRECISE SOURCE-IMAGE COORDINATES
   Based directly on the supplied 1640×900 background.
   ------------------------------------------------------------ */

/* Foreground movie-poster frame:
   approx source bounds x 47–450, y 17–792 */
.poster-hit-1{
  left:2.87% !important;
  top:1.89% !important;
  width:24.57% !important;
  height:86.11% !important;
  clip-path:polygon(1% 0,100% 4%,96% 100%,0 96%) !important;
}

/* Rear movie projector:
   approx source bounds x 1002–1111, y 304–467 */
.projector-hit{
  left:61.10% !important;
  top:33.78% !important;
  width:6.65% !important;
  height:18.11% !important;
  border-radius:22% !important;
}

/* Popcorn machine:
   approx source bounds x 1114–1269, y 229–500 */
.popcorn-hit{
  left:67.93% !important;
  top:25.44% !important;
  width:9.45% !important;
  height:30.11% !important;
  border-radius:8px !important;
}

/* ------------------------------------------------------------
   UNIVERSAL PURPLE MARKERS — REAL DOM SPANS FOR ALL 3
   No pseudo-element dependency.
   ------------------------------------------------------------ */

/* Hide the old pseudo-element marker on the poster too. */
.poster-hit-1::after,
.projector-hit::after,
.popcorn-hit::after{
  content:none !important;
  display:none !important;
}

/* Poster gets a real marker using its existing marquee span's sibling
   geometry via an added child marker inserted by JS. */
.theater-universal-marker,
.projector-hit .ethereal-marker,
.popcorn-hit .ethereal-marker{
  position:absolute !important;
  z-index:160 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;

  width:clamp(20px,1.45vw,27px) !important;
  height:clamp(20px,1.45vw,27px) !important;
  border-radius:50% !important;

  border:1px solid rgba(248,229,255,.98) !important;
  background:
    radial-gradient(circle at 37% 32%,
      #fff 0 7%,
      #f0d2ff 9% 20%,
      #cc79f7 37%,
      #7e2aa5 60%,
      #4a0f67 73%,
      rgba(74,15,103,.18) 78%,
      transparent 80%) !important;

  box-shadow:
    0 0 6px rgba(250,233,255,.98),
    0 0 15px rgba(214,119,255,.98),
    0 0 28px rgba(157,54,215,.86),
    0 0 42px rgba(95,25,139,.48) !important;

  pointer-events:none !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center !important;
  animation:
    theaterTrueMarkerSpin 3.2s linear infinite,
    theaterTrueMarkerPulse 1.65s ease-in-out infinite !important;
}

/* Keep each nearby object unmistakably separate:
   - poster marker: right edge, about mid-height
   - projector marker: left side of projector
   - popcorn marker: right side of popcorn machine */
.poster-hit-1 .theater-universal-marker{
  left:96% !important;
  top:49% !important;
}

.projector-hit .ethereal-marker{
  left:10% !important;
  top:25% !important;
}

.popcorn-hit .ethereal-marker{
  left:91% !important;
  top:23% !important;
}

@keyframes theaterTrueMarkerSpin{
  from{rotate:0deg}
  to{rotate:360deg}
}

@keyframes theaterTrueMarkerPulse{
  0%,100%{scale:.88;opacity:.83}
  50%{scale:1.18;opacity:1}
}

/* ------------------------------------------------------------
   ACTUAL HOVER EFFECTS
   ------------------------------------------------------------ */

/* Foreground poster: bulbs visibly chase around the poster perimeter. */
.poster-hit-1 .poster-marquee-lights{
  position:absolute !important;
  inset:0 !important;
  z-index:130 !important;
  display:block !important;
  opacity:0 !important;
  pointer-events:none !important;

  border:3px dotted rgba(221,151,255,.55) !important;
  border-radius:8px !important;

  box-shadow:
    inset 0 0 11px rgba(190,71,239,.22),
    0 0 9px rgba(199,91,246,.26) !important;
}

.poster-hit-1:hover .poster-marquee-lights,
.poster-hit-1:focus-visible .poster-marquee-lights{
  opacity:1 !important;

  border-color:rgba(244,210,255,.96) !important;

  box-shadow:
    inset 0 0 18px rgba(215,126,255,.40),
    0 0 12px rgba(246,216,255,.95),
    0 0 30px rgba(191,79,244,.82),
    0 0 52px rgba(116,31,165,.52) !important;

  animation:
    theaterVisibleBulbOrbit .75s linear infinite,
    theaterVisibleFilmFlicker .15s steps(2,end) infinite !important;
}

@keyframes theaterVisibleBulbOrbit{
  0%{
    filter:
      drop-shadow(0 -10px 7px rgba(252,231,255,1))
      drop-shadow(10px 0 7px rgba(186,76,239,.4));
  }
  25%{
    filter:
      drop-shadow(10px 0 7px rgba(252,231,255,1))
      drop-shadow(0 10px 7px rgba(186,76,239,.4));
  }
  50%{
    filter:
      drop-shadow(0 10px 7px rgba(252,231,255,1))
      drop-shadow(-10px 0 7px rgba(186,76,239,.4));
  }
  75%{
    filter:
      drop-shadow(-10px 0 7px rgba(252,231,255,1))
      drop-shadow(0 -10px 7px rgba(186,76,239,.4));
  }
  100%{
    filter:
      drop-shadow(0 -10px 7px rgba(252,231,255,1))
      drop-shadow(10px 0 7px rgba(186,76,239,.4));
  }
}

@keyframes theaterVisibleFilmFlicker{
  0%,100%{opacity:1}
  22%{opacity:.70}
  39%{opacity:1}
  61%{opacity:.80}
  82%{opacity:1}
}

/* Projector + popcorn: clearly visible ethereal animated aura. */
.projector-hit::before,
.popcorn-hit::before{
  content:"" !important;
  position:absolute !important;
  inset:-15% !important;
  z-index:125 !important;
  border-radius:inherit !important;
  pointer-events:none !important;

  opacity:0 !important;
  background:
    conic-gradient(
      from 0deg,
      transparent 0 9%,
      rgba(244,216,255,.85) 15%,
      rgba(186,82,236,.48) 24%,
      transparent 34% 52%,
      rgba(226,166,255,.72) 61%,
      rgba(130,43,183,.38) 73%,
      transparent 84% 100%
    ) !important;

  filter:blur(6px) !important;
}

.projector-hit:hover::before,
.projector-hit:focus-visible::before,
.popcorn-hit:hover::before,
.popcorn-hit:focus-visible::before{
  opacity:1 !important;
  animation:
    theaterTrueEtherealSpin 1.45s linear infinite,
    theaterTrueEtherealPulse 1.05s ease-in-out infinite !important;
}

@keyframes theaterTrueEtherealSpin{
  from{rotate:0deg}
  to{rotate:360deg}
}

@keyframes theaterTrueEtherealPulse{
  0%,100%{scale:.92;opacity:.62}
  50%{scale:1.10;opacity:1}
}

/* Hover labels visible but never consume pointer events. */
.theater-hotspot .hotspot-label{
  z-index:170 !important;
  pointer-events:none !important;
}

@media(prefers-reduced-motion:reduce){
  .theater-universal-marker,
  .projector-hit .ethereal-marker,
  .popcorn-hit .ethereal-marker,
  .poster-hit-1:hover .poster-marquee-lights,
  .poster-hit-1:focus-visible .poster-marquee-lights,
  .projector-hit:hover::before,
  .projector-hit:focus-visible::before,
  .popcorn-hit:hover::before,
  .popcorn-hit:focus-visible::before{
    animation:none !important;
  }
}


/* ============================================================
   HORROR THEATER — HOTSPOT VISUAL REFINEMENT
   Poster marker relocation + tighter poster hotspot + fog effects.
   ============================================================ */

/* ------------------------------------------------------------
   FIRST MOVIE POSTER — tighter fit to the actual foreground frame.
   Reduce the active/glow area so it hugs the visible marquee frame.
   ------------------------------------------------------------ */
.poster-hit-1{
  left:3.55% !important;
  top:5.25% !important;
  width:22.55% !important;
  height:80.2% !important;
  clip-path:polygon(2% 0,100% 4%,96% 100%,0 96%) !important;
}

/* Put the poster marker BESIDE the frame in the upper-left area,
   rather than on the frame where it can visually drift behind poster #2. */
.poster-hit-1 .theater-universal-marker{
  left:-5.5% !important;
  top:8.5% !important;
  z-index:190 !important;
}

/* Tighten the marquee animation to the actual frame boundary. */
.poster-hit-1 .poster-marquee-lights{
  inset:1.5% 1.7% 1.8% 1.3% !important;
  border-width:2px !important;
}

/* ------------------------------------------------------------
   PROJECTOR + POPCORN — random drifting fog instead of fan/conic spin.
   ------------------------------------------------------------ */

/* Replace the previous conic-gradient "fan" with layered blurred fog clouds. */
.projector-hit::before,
.popcorn-hit::before{
  content:"" !important;
  position:absolute !important;
  z-index:125 !important;
  inset:-24% !important;

  opacity:0 !important;
  pointer-events:none !important;
  border-radius:42% !important;

  background:
    radial-gradient(ellipse at 28% 42%,
      rgba(235,202,255,.72) 0 10%,
      rgba(187,104,229,.34) 22%,
      rgba(117,50,158,.12) 37%,
      transparent 58%),
    radial-gradient(ellipse at 72% 34%,
      rgba(216,163,247,.54) 0 12%,
      rgba(151,72,195,.26) 25%,
      transparent 55%),
    radial-gradient(ellipse at 52% 73%,
      rgba(239,211,255,.46) 0 9%,
      rgba(163,82,207,.22) 23%,
      transparent 52%) !important;

  filter:blur(10px) !important;
  transform:translate3d(0,0,0) scale(.96) !important;
}

/* Add a second independent fog layer with different drift timing. */
.projector-hit .ethereal-marker::before,
.popcorn-hit .ethereal-marker::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:50%;
  width:260%;
  height:260%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;

  background:
    radial-gradient(ellipse at 35% 55%,
      rgba(224,181,250,.48) 0 12%,
      rgba(152,76,198,.22) 26%,
      transparent 58%),
    radial-gradient(ellipse at 70% 42%,
      rgba(245,219,255,.36) 0 10%,
      rgba(169,93,211,.18) 24%,
      transparent 56%);

  filter:blur(9px);
  opacity:0;
}

/* Hover: fog drifts and reshapes instead of rotating like a fan. */
.projector-hit:hover::before,
.projector-hit:focus-visible::before,
.popcorn-hit:hover::before,
.popcorn-hit:focus-visible::before{
  opacity:.95 !important;
  animation:
    theaterFogDriftA 4.8s ease-in-out infinite alternate,
    theaterFogBreathe 3.1s ease-in-out infinite !important;
}

.projector-hit:hover .ethereal-marker::before,
.projector-hit:focus-visible .ethereal-marker::before,
.popcorn-hit:hover .ethereal-marker::before,
.popcorn-hit:focus-visible .ethereal-marker::before{
  opacity:.72;
  animation:theaterFogDriftB 5.9s ease-in-out infinite alternate;
}

/* The universal marker itself still pulses, but no longer reads like a propeller. */
.projector-hit .ethereal-marker,
.popcorn-hit .ethereal-marker{
  animation:theaterFogMarkerPulse 2.05s ease-in-out infinite !important;
}

@keyframes theaterFogDriftA{
  0%{
    transform:translate(-5%,-1%) scale(.92);
    filter:blur(9px);
  }
  28%{
    transform:translate(4%,-7%) scale(1.04);
    filter:blur(12px);
  }
  57%{
    transform:translate(8%,4%) scale(.98);
    filter:blur(11px);
  }
  81%{
    transform:translate(-4%,7%) scale(1.08);
    filter:blur(13px);
  }
  100%{
    transform:translate(2%,-3%) scale(1.00);
    filter:blur(10px);
  }
}

@keyframes theaterFogDriftB{
  0%{
    transform:translate(-54%,-48%) scale(.88);
  }
  33%{
    transform:translate(-45%,-58%) scale(1.05);
  }
  66%{
    transform:translate(-58%,-43%) scale(.96);
  }
  100%{
    transform:translate(-47%,-51%) scale(1.10);
  }
}

@keyframes theaterFogBreathe{
  0%,100%{opacity:.58}
  50%{opacity:1}
}

@keyframes theaterFogMarkerPulse{
  0%,100%{
    scale:.90;
    opacity:.84;
    filter:drop-shadow(0 0 3px rgba(244,225,255,.66));
  }
  50%{
    scale:1.12;
    opacity:1;
    filter:drop-shadow(0 0 10px rgba(205,112,249,.95));
  }
}

/* Disable any older spin animations that may still be inherited. */
.projector-hit .ethereal-marker,
.popcorn-hit .ethereal-marker{
  rotate:0deg !important;
}

@media(prefers-reduced-motion:reduce){
  .projector-hit:hover::before,
  .projector-hit:focus-visible::before,
  .popcorn-hit:hover::before,
  .popcorn-hit:focus-visible::before,
  .projector-hit:hover .ethereal-marker::before,
  .projector-hit:focus-visible .ethereal-marker::before,
  .popcorn-hit:hover .ethereal-marker::before,
  .popcorn-hit:focus-visible .ethereal-marker::before,
  .projector-hit .ethereal-marker,
  .popcorn-hit .ethereal-marker{
    animation:none !important;
  }
}


/* ============================================================
   HORROR THEATER — FIRST POSTER PRECISE FIT + MARKER LAYER FIX
   ============================================================ */

/* Tighten the actual first-poster interaction zone to the visible frame.
   This deliberately reduces both width and height from the prior pass. */
.poster-hit-1{
  left:4.15% !important;
  top:6.15% !important;
  width:20.95% !important;
  height:76.9% !important;

  clip-path:polygon(
    2% 0,
    100% 4.5%,
    96% 100%,
    0 95.5%
  ) !important;

  overflow:visible !important;
  z-index:150 !important;
}

/* Marquee light effect follows the reduced frame exactly. */
.poster-hit-1 .poster-marquee-lights{
  inset:0.8% 0.9% 1.0% 0.7% !important;
  z-index:165 !important;
}

/* Critical layering fix:
   keep the universal marker ABOVE BOTH the background artwork and
   the independent poster image layer at all times. */
.poster-hit-1 .theater-universal-marker{
  left:-5.5% !important;
  top:8.5% !important;

  z-index:260 !important;

  /* prevent it from being clipped by the poster polygon or its own parent */
  clip-path:none !important;
  overflow:visible !important;
  isolation:isolate !important;

  /* marker stays in the same visual position but never dips behind artwork */
  transform:translate(-50%,-50%) !important;
}

/* The poster hotspot itself must never clip the marker. */
.poster-hit-1{
  clip-path:polygon(
    2% 0,
    100% 4.5%,
    96% 100%,
    0 95.5%
  ) !important;
}

/* Move the visible marker outside the clipped poster geometry by rendering
   a non-clipped proxy ring above the hotspot. */
.poster-hit-1::before{
  content:"" !important;
  position:absolute !important;

  left:-5.5% !important;
  top:8.5% !important;

  width:clamp(20px,1.45vw,27px) !important;
  height:clamp(20px,1.45vw,27px) !important;

  transform:translate(-50%,-50%) !important;
  transform-origin:center !important;

  z-index:275 !important;
  pointer-events:none !important;

  border-radius:50% !important;
  border:1px solid rgba(248,229,255,.98) !important;

  background:
    radial-gradient(circle at 37% 32%,
      #fff 0 7%,
      #f0d2ff 9% 20%,
      #cc79f7 37%,
      #7e2aa5 60%,
      #4a0f67 73%,
      rgba(74,15,103,.18) 78%,
      transparent 80%) !important;

  box-shadow:
    0 0 6px rgba(250,233,255,.98),
    0 0 15px rgba(214,119,255,.98),
    0 0 28px rgba(157,54,215,.86),
    0 0 42px rgba(95,25,139,.48) !important;

  animation:
    theaterTrueMarkerSpin 3.2s linear infinite,
    theaterTrueMarkerPulse 1.65s ease-in-out infinite !important;
}

/* Hide the old nested poster marker so only the unclipped top-layer marker shows. */
.poster-hit-1 .theater-universal-marker{
  opacity:0 !important;
}

/* Keep poster replacement artwork beneath the marker/hotspot layers. */
.poster-slot-1{
  z-index:20 !important;
}

/* Background remains at the lowest room-art level. */
.theater-background{
  z-index:1 !important;
}


/* ============================================================
   HORROR THEATER — FIRST POSTER CLEAN FINAL FIX
   Independent marker + precise frame geometry + no dotted square.
   ============================================================ */

/* The interactive area is now limited to the visible LIGHTED poster frame,
   not the surrounding wall or adjacent second poster.
   Coordinates are based on the supplied theater background artwork. */
.poster-hit-1{
  left:4.45% !important;
  top:7.0% !important;
  width:20.65% !important;
  height:74.7% !important;

  /* Perspective of the actual foreground frame. */
  clip-path:polygon(
    1.5% 0,
    100% 4.2%,
    96.2% 100%,
    0 95.5%
  ) !important;

  overflow:hidden !important;
  z-index:150 !important;
}

/* Remove ALL earlier marker implementations from inside the clipped hotspot.
   They were the source of the disappearing/reappearing layer behavior. */
.poster-hit-1 .theater-universal-marker,
.poster-hit-1::before,
.poster-hit-1::after{
  display:none !important;
  content:none !important;
}

/* The marker is now a completely independent sibling of the hotspot and
   poster image, so the poster's clip-path cannot ever hide it. */
.poster-one-fixed-marker{
  position:absolute !important;
  z-index:500 !important;

  /* Approved upper-left placement beside the first frame. */
  left:3.35% !important;
  top:9.0% !important;

  width:clamp(20px,1.45vw,27px) !important;
  height:clamp(20px,1.45vw,27px) !important;
  border-radius:50% !important;

  border:1px solid rgba(248,229,255,.98) !important;
  background:
    radial-gradient(circle at 37% 32%,
      #fff 0 7%,
      #f0d2ff 9% 20%,
      #cc79f7 37%,
      #7e2aa5 60%,
      #4a0f67 73%,
      rgba(74,15,103,.18) 78%,
      transparent 80%) !important;

  box-shadow:
    0 0 6px rgba(250,233,255,.98),
    0 0 15px rgba(214,119,255,.98),
    0 0 28px rgba(157,54,215,.86),
    0 0 42px rgba(95,25,139,.48) !important;

  pointer-events:none !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center !important;

  animation:
    theaterPosterMarkerGlow 1.65s ease-in-out infinite,
    theaterPosterMarkerTurn 3.4s linear infinite !important;
}

@keyframes theaterPosterMarkerTurn{
  from{rotate:0deg}
  to{rotate:360deg}
}
@keyframes theaterPosterMarkerGlow{
  0%,100%{scale:.88;opacity:.84}
  50%{scale:1.16;opacity:1}
}

/* ------------------------------------------------------------
   POSTER MARQUEE LIGHTS
   No CSS border of any kind: this removes the white dotted square.
   Only the animated bulb/glow pattern remains.
   ------------------------------------------------------------ */
.poster-hit-1 .poster-marquee-lights{
  position:absolute !important;
  z-index:165 !important;

  /* inset slightly so the effect traces the lit frame itself */
  inset:1.2% 1.4% 1.6% 1.0% !important;

  display:block !important;
  opacity:0 !important;
  pointer-events:none !important;

  border:none !important;
  outline:none !important;
  border-radius:4px !important;

  background:
    radial-gradient(circle,
      rgba(255,243,255,1) 0 2px,
      rgba(211,124,255,.92) 3px 5px,
      transparent 6px)
      left top/27px 12px repeat-x,
    radial-gradient(circle,
      rgba(255,243,255,1) 0 2px,
      rgba(211,124,255,.92) 3px 5px,
      transparent 6px)
      right top/12px 27px repeat-y,
    radial-gradient(circle,
      rgba(255,243,255,1) 0 2px,
      rgba(211,124,255,.92) 3px 5px,
      transparent 6px)
      right bottom/27px 12px repeat-x,
    radial-gradient(circle,
      rgba(255,243,255,1) 0 2px,
      rgba(211,124,255,.92) 3px 5px,
      transparent 6px)
      left bottom/12px 27px repeat-y !important;

  box-shadow:none !important;
}

.poster-hit-1:hover .poster-marquee-lights,
.poster-hit-1:focus-visible .poster-marquee-lights{
  opacity:1 !important;

  animation:
    theaterPosterBulbRun .78s linear infinite,
    theaterPosterFilmFlicker .16s steps(2,end) infinite !important;

  filter:
    drop-shadow(0 0 5px rgba(244,212,255,.98))
    drop-shadow(0 0 11px rgba(184,73,237,.76)) !important;
}

@keyframes theaterPosterBulbRun{
  0%{
    background-position:0 0,100% 0,100% 100%,0 100%;
  }
  25%{
    background-position:27px 0,100% 27px,calc(100% - 27px) 100%,0 calc(100% - 27px);
  }
  50%{
    background-position:54px 0,100% 54px,calc(100% - 54px) 100%,0 calc(100% - 54px);
  }
  75%{
    background-position:81px 0,100% 81px,calc(100% - 81px) 100%,0 calc(100% - 81px);
  }
  100%{
    background-position:108px 0,100% 108px,calc(100% - 108px) 100%,0 calc(100% - 108px);
  }
}

@keyframes theaterPosterFilmFlicker{
  0%,100%{opacity:1}
  20%{opacity:.76}
  43%{opacity:1}
  66%{opacity:.82}
  84%{opacity:1}
}

/* Keep poster replacement artwork well below the independent marker. */
.poster-slot-1{
  z-index:20 !important;
}

.theater-background{
  z-index:1 !important;
}

@media(prefers-reduced-motion:reduce){
  .poster-one-fixed-marker,
  .poster-hit-1:hover .poster-marquee-lights,
  .poster-hit-1:focus-visible .poster-marquee-lights{
    animation:none !important;
  }
}


/* ============================================================
   HORROR THEATER — MARKER UNIFICATION + POSTER FRAME FIT
   One marker implementation for all three objects.
   ============================================================ */

/* Correct native artwork ratio. The supplied background is 2048 × 1117. */
.theater-artboard{
  width:max(100%, calc(100vh * 2048 / 1117)) !important;
  height:max(100%, calc(100vw * 1117 / 2048)) !important;
  aspect-ratio:2048 / 1117 !important;
}

/* ------------------------------------------------------------
   REMOVE ALL EARLIER MARKER IMPLEMENTATIONS
   ------------------------------------------------------------ */
.poster-one-fixed-marker,
.poster-hit-1 .theater-universal-marker,
.poster-hit-1::before,
.poster-hit-1::after,
.projector-hit .ethereal-marker,
.popcorn-hit .ethereal-marker,
.projector-hit::after,
.popcorn-hit::after{
  display:none !important;
  content:none !important;
}

/* ------------------------------------------------------------
   ONE CANONICAL MARKER FOR ALL THREE
   Same DOM level, same appearance, same motion, same z-index.
   ------------------------------------------------------------ */
.theater-global-marker{
  position:absolute !important;
  z-index:600 !important;
  display:block !important;
  visibility:visible !important;

  width:clamp(18px,1.35vw,24px) !important;
  height:clamp(18px,1.35vw,24px) !important;
  border-radius:50% !important;

  border:1px solid rgba(247,226,255,.98) !important;
  background:
    radial-gradient(circle at 38% 34%,
      #fff 0 7%,
      #efc9ff 9% 22%,
      #c36df2 42%,
      #681b8c 72%,
      rgba(77,10,107,.28) 78%,
      transparent 80%) !important;

  box-shadow:
    0 0 7px rgba(246,223,255,.98),
    0 0 17px rgba(205,105,255,.98),
    0 0 31px rgba(142,43,205,.82) !important;

  pointer-events:none !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center !important;

  animation:
    theaterCanonicalPulse 1.8s ease-in-out infinite,
    theaterCanonicalTurn 4.6s linear infinite !important;
}

@keyframes theaterCanonicalPulse{
  0%,100%{scale:.88;opacity:.82}
  50%{scale:1.14;opacity:1}
}
@keyframes theaterCanonicalTurn{
  from{rotate:0deg}
  to{rotate:360deg}
}

/* Approved / clearly separated marker positions, based on 2048×1117 artwork. */
.marker-poster{
  /* upper-left, immediately beside the foreground frame */
  left:3.15% !important;
  top:8.2% !important;
}
.marker-projector{
  /* left side of projector body */
  left:61.15% !important;
  top:36.8% !important;
}
.marker-popcorn{
  /* right upper side of popcorn machine, well away from projector marker */
  left:77.4% !important;
  top:29.2% !important;
}

/* ------------------------------------------------------------
   FIRST POSTER — EXACT LIGHTED FRAME TARGET
   This is intentionally smaller than all previous versions.
   It follows the inner bulb/marquee frame, NOT the outer wall frame.
   Approx source bounds:
   left 92px, top 88px, right 540px, bottom 905px on 2048×1117 artwork.
   ------------------------------------------------------------ */
.poster-hit-1{
  left:4.49% !important;
  top:7.88% !important;
  width:21.88% !important;
  height:73.14% !important;

  clip-path:polygon(
    1% 0,
    100% 4.2%,
    96.2% 100%,
    0 95.8%
  ) !important;

  z-index:150 !important;
  overflow:hidden !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

/* ------------------------------------------------------------
   FIRST POSTER HOVER — animate ONLY the frame perimeter.
   No square border, no dotted outline, no full-box glow.
   ------------------------------------------------------------ */
.poster-hit-1 .poster-marquee-lights{
  position:absolute !important;
  inset:0 !important;
  z-index:165 !important;

  display:block !important;
  opacity:0 !important;
  pointer-events:none !important;

  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;

  background:
    radial-gradient(circle,
      rgba(255,247,255,1) 0 2px,
      rgba(211,126,255,.95) 3px 4px,
      transparent 5px)
      left top/22px 9px repeat-x,
    radial-gradient(circle,
      rgba(255,247,255,1) 0 2px,
      rgba(211,126,255,.95) 3px 4px,
      transparent 5px)
      right top/9px 22px repeat-y,
    radial-gradient(circle,
      rgba(255,247,255,1) 0 2px,
      rgba(211,126,255,.95) 3px 4px,
      transparent 5px)
      right bottom/22px 9px repeat-x,
    radial-gradient(circle,
      rgba(255,247,255,1) 0 2px,
      rgba(211,126,255,.95) 3px 4px,
      transparent 5px)
      left bottom/9px 22px repeat-y !important;
}

.poster-hit-1:hover .poster-marquee-lights,
.poster-hit-1:focus-visible .poster-marquee-lights{
  opacity:1 !important;
  animation:
    theaterPosterChaseExact .9s linear infinite,
    theaterPosterFlickerExact .19s steps(2,end) infinite !important;

  filter:
    drop-shadow(0 0 4px rgba(247,220,255,.96))
    drop-shadow(0 0 9px rgba(189,80,239,.78)) !important;
}

@keyframes theaterPosterChaseExact{
  0%{
    background-position:0 0,100% 0,100% 100%,0 100%;
  }
  25%{
    background-position:22px 0,100% 22px,calc(100% - 22px) 100%,0 calc(100% - 22px);
  }
  50%{
    background-position:44px 0,100% 44px,calc(100% - 44px) 100%,0 calc(100% - 44px);
  }
  75%{
    background-position:66px 0,100% 66px,calc(100% - 66px) 100%,0 calc(100% - 66px);
  }
  100%{
    background-position:88px 0,100% 88px,calc(100% - 88px) 100%,0 calc(100% - 88px);
  }
}

@keyframes theaterPosterFlickerExact{
  0%,100%{opacity:1}
  23%{opacity:.70}
  42%{opacity:1}
  67%{opacity:.82}
  84%{opacity:1}
}

/* ------------------------------------------------------------
   PROJECTOR + POPCORN FOG
   Keep their approved random drifting fog; markers are now separate
   and therefore cannot inherit any different motion.
   ------------------------------------------------------------ */
.projector-hit::before,
.popcorn-hit::before{
  z-index:125 !important;
}

/* Nothing may render over the canonical markers. */
.theater-background{z-index:1 !important}
.poster-slot{z-index:20 !important}
.poster-hit-1,.projector-hit,.popcorn-hit{z-index:150 !important}

@media(prefers-reduced-motion:reduce){
  .theater-global-marker,
  .poster-hit-1:hover .poster-marquee-lights,
  .poster-hit-1:focus-visible .poster-marquee-lights{
    animation:none !important;
  }
}


/* ============================================================
   REVIEWS POSTER — INTERACTION OWNERSHIP NOTE
   ------------------------------------------------------------
   The visual poster remains an independent replaceable layer.
   The clickable hotspot remains a separate sibling overlay because the
   poster-slot container is intentionally pointer-events:none.
   This preserves:
   - cursor interaction
   - marquee animation
   - universal poster marker
   - exact frame alignment
   without coupling pointer-event behavior to the replaceable artwork.
   ============================================================ */