body,
.attractions-page {
  transition: none !important;
}

/* =========================================================
   CAMERA WINDOW PRIMITIVE (Safari-safe)
   Single source of truth for viewport-bounded height.
   Uses 100vh fallback, prefers 100svh when supported.
   ========================================================= */
:root {
  --camera-height: calc(100svh - var(--header-height, 0px) - var(--footer-height, 0px));
  --camera-height: calc(100dvh - var(--header-height, 0px) - var(--footer-height, 0px));
  --camera-height: calc(100vh - var(--header-height, 0px) - var(--footer-height, 0px));
  --sec2to3: 0;
}


/* =========================================================
   SECTION 2 — BASELINE BACKGROUND (LAYER 0)
   Scoped to attractions only
   ========================================================= */
/* =========================================================
   SECTION 2 — POV-ANCHORED LAYER STACK (SCAFFOLD ONLY)
   No transforms, no motion. Safety-net remains the only active layer.
   ========================================================= */

#arcade-living-lights {
  position: fixed;
  top: var(--header-height, 0px);
  left: 0;
  right: 0;
  width: 100%;
  height: var(--camera-height);
  overflow: hidden;
  z-index: 1;
  display: flex;
  justify-content: center; /* horizontal only */
  align-items: stretch;    /* vertical locked to camera */
}

 #arcade-living-lights .sec2-layer-stack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* =========================================================
   SECTION 2 — LAYER VISIBILITY CONTRACT (NO MOTION)
   All layers default to opacity: 0. When .is-visible is set on the stack,
   all .sec2-layer elements fade in. No transforms or motion.
   ========================================================= */


#arcade-living-lights .sec2-layer:not([data-layer$="_spill"]) {
  position: absolute;
  inset: -3%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  max-width: none !important;

  /* TRUE default: invisible */
  opacity: 0;
  visibility: hidden;

  transition: opacity 1.2s cubic-bezier(.77, 0, .18, 1);
}

#arcade-living-lights
  .sec2-layer-stack.is-visible
  .sec2-layer:not([data-layer$="_spill"]) {
  visibility: visible;
  opacity: calc(var(--layer-base-opacity, 1) * (1 - var(--sec2to3)));
}
#arcade-living-lights .sec2-layer[data-layer="sec2_z10_floor_fg"] {
  --exit-opacity-falloff: 0.65;
}
#arcade-living-lights .sec2-layer-stack.is-visible .sec2-layer[data-layer="sec2_z10_floor_fg"] {
  opacity: calc(var(--layer-base-opacity, 1) * (1 - (var(--sec2to3) * var(--exit-opacity-falloff, 1))));
}

#arcade-living-lights .sec2-layer[data-layer$="_spill"] {
  position: absolute;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  will-change: transform;
}

.sec2-arcade-group {
  position: absolute;
  inset: -3%;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Compositing hints to reduce flicker during pointer parallax */
  will-change: transform;
  backface-visibility: hidden;
}

.sec2-arcade-group .sec2-arcade-img,
.sec2-arcade-group .sec2-arcade-spill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  backface-visibility: hidden;
}

.sec2-arcade-group .sec2-arcade-spill { z-index: 1; }
.sec2-arcade-group .sec2-arcade-img { z-index: 2; }

#arcade-living-lights .sec2-layer-stack.is-visible .sec2-layer {
  visibility: visible;
  transition-delay: 0s;
}

/* ===============================
  SECTION 2 — CANONICAL Z-ORDER
  Back → Front (matches definitive spec)
  =============================== */

#arcade-living-lights .sec2-layer[data-layer="sec2_z01_ceiling"] { z-index: 1; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z02_wall_left"] { z-index: 2; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z03_neon_left"] { z-index: 3; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z04_wall_back"] { z-index: 4; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z05_neon_back"] { z-index: 5; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z06_wall_right"] { z-index: 6; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z07_neon_right"] { z-index: 7; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z08_floor_bg"] { z-index: 8; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z09_floor_mg"] { z-index: 9; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z09_people_mg"] { z-index: 10; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z10_floor_fg"] { z-index: 11; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z11_arcade_left_spill"] { z-index: 12; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z11_arcades_left"] { z-index: 13; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z12_arcade_right_spill"] { z-index: 14; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z12_arcades_right"] { z-index: 15; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z12_people_right"] { z-index: 16; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z13_bike"] { z-index: 17; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z14_hyperdeck"] { z-index: 18; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z15_honeycomb_lights"] { z-index: 19; }
#arcade-living-lights .sec2-layer[data-layer="sec2_z16_honeycomb_lights_mask"] { z-index: 20; }



/* LEGACY — breathing animation disabled for baseline
.living-lights-bg {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 1.2s cubic-bezier(.77,0,.18,1);
  will-change: opacity;
}
.living-lights-bg.active {
  opacity: 1 !important;
}

#living-lights-b.breathing {
  animation: living-breathe 6s ease-in-out infinite alternate;
}

@keyframes living-breathe {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .living-lights-bg {
    transition: none !important;
    opacity: 1 !important;
  }
}
*/
/* ============================================================
   ATTRACTIONS PAGE MODULE | CONSOLIDATED FINAL VERSION
   ============================================================

100000 Preloader
 12000 Header
  9001 Attraction content (text)
  9000 Scroll container
     4 Hero text / overlays
     3 Feather vignette
     3 Freeze frame layer (active)
     2 Freeze frame base (active)
     1 Video (while playing) / background
     0 Video (after fade-out)

Z-INDEX LAYER MAP
----------------------------------------------
100000 Preloader
 12000 Header
  9001 Attraction content (text)
  9000 Scroll container
    4 Hero text / overlays
    3 Feather vignette
    1 Video (while playing) / background
    0 Video (after fade-out)
---------------------------------------------- */

/* --- PRELOADER --- */
#attractions-preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  opacity: 1;
  transition: opacity 0.6s ease-out;
  pointer-events: none;
}

#attractions-preloader.fade-out { opacity: 0; }

@keyframes preloader-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}
/* --- Root / Page-level setup --- */
body[data-scroll-mode="app"] {
  overflow: hidden;
}
body[data-scroll-mode="app"].attractions-lock {
  overflow: hidden;
  height: 100svh;
  height: 100dvh;
  height: 100vh;
}

/* background: url("/assets/images/attractions/layer0-south.webp") center / cover no-repeat;
   IMMUTABLE LAW — POST-HYPERDECK VISIBILITY GATE (CSS-FIRST)
   Default state: hide all content after the Hyperdeck hero.
   Release state: html.hyperdeck-complete (set explicitly by JS on video completion).
   One-way: hidden → visible only.
   ========================================================= */
html:not(.hyperdeck-complete) #attractions-main > :not(.attractions-hero) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#attractions-main {
  /* Hero is now in normal document flow — no margin offset needed */
  overflow-x: hidden;
  color: #f2f2f2;
  background: #0d0d0d;
}

#attractions-main p {
  font-size: var(--fs-lg);
}

/* =========================================================
   SECTION 2 — HONEYCOMB GLOW (ARCHITECTURAL LIGHTING)
   Subtle drop-shadow glow on the mask layer (z16 inheritor).
   No blend mode, no animation — reads as installed fixture.
   ========================================================= */

/* z16 — DATA-ONLY MASK (NO VISUAL RENDERING) */

/* z15 — HONEYCOMB ARCHITECTURAL GLOW (CANONICAL EMITTER) */
[data-layer="sec2_z15_honeycomb_lights"] {
  position: absolute;
}


/* Honeycomb glow emitter wrapper for z15 */
.sec2-honeycomb-emitter {
  /* Match the same containment + headroom contract as .sec2-layer */
  inset: -3%;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Ensure the wrapped z15 image follows the same sizing rules as other layers */
.sec2-honeycomb-emitter > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  display: block;
  max-width: none !important;
}

/* z16 — HONEYCOMB GLOW OPACITY ANIMATION */
.sec2-layer[data-layer="sec2_z16_honeycomb_lights_mask"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  filter: none !important;
}
[data-layer="sec2_z15_honeycomb_lights"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/images/attractions/sec2_z16_honeycomb_lights_mask-south.webp") center / contain no-repeat;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: calc(0.32 + (var(--honey-brightness, 1) - 1) * 2.2);
  transform: none;
  filter:
    drop-shadow(
      0 0 calc(22px * var(--honey-spread, 1) * var(--honey-glow-scale, 1) * 1.6)
      rgba(255, 255, 255, 0.28)
    )
    drop-shadow(
      0 0 calc(48px * var(--honey-spread, 1) * var(--honey-glow-scale, 1) * 1.6)
      rgba(170, 210, 255, 0.23)
    );
  transition: none;
  will-change: opacity, filter;
  backface-visibility: hidden;
}

/* Neon glow base filters driven by --neon-glow var (set in JS per layer) */
[data-layer="sec2_z03_neon_left"],
[data-layer="sec2_z05_neon_back"],
[data-layer="sec2_z07_neon_right"] {
  --neon-glow: 1;
  transition: filter 0.25s ease;
}

[data-layer="sec2_z05_neon_back"] {
  --layer-base-opacity: 0.08;
}

[data-layer="sec2_z03_neon_left"] {
  filter: brightness(var(--neon-glow, 1)) drop-shadow(0 0 6px rgba(255, 90, 200, 0.30));
}

[data-layer="sec2_z05_neon_back"] {
  filter: brightness(var(--neon-glow, 1)) drop-shadow(0 0 5px rgba(255, 120, 220, 0.24));
}

[data-layer="sec2_z07_neon_right"] {
  filter: brightness(var(--neon-glow, 1)) drop-shadow(0 0 6px rgba(120, 200, 255, 0.30));
}

/* --- HERO VIDEO SECTION (desktop default) --- */
/* RESTORED: Normal document flow, contained stacking context */

.attractions-hero {
  position: relative;
  width: 100%;
  margin-top: var(--header-height, 175px);
  overflow: hidden;
  z-index: 0;
  background: #0d0d0d;
  /* Contained stacking context — children cannot escape upward */
  isolation: isolate;
}

/* =========================================================
   HYPERDECK HERO STAGE (RATIO-AUTHORITATIVE)
   - Prevents Safari cropping by allowing side void space.
   - Width clamps to the max 16:9 stage that fits in --camera-height.
   ========================================================= */
.attractions-stage {
  width: 100%;
  max-width: calc(var(--camera-height) * 16 / 9);
  aspect-ratio: 16 / 9;
  max-height: var(--camera-height);
  height: var(--camera-height);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.video-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* No independent z-index — inherits from hero */
}

#hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #0d0d0d;
}

/* LEGACY — full-bleed cover behavior commented to enforce 16:9 contain
#hero-video,
.video-container video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  background-color: transparent;
  will-change: opacity;
}
*/

/* Ensure hero video always fills container and resizes responsively */


.video-container::before,

/* Top and bottom gradient fades for seamless video integration */
.video-container::before,
.video-container::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 10;
  display: none; /* disabled to let global vignette own edge softening */
}
.video-container::before {
  top: 0;
  height: 50px;
  background: linear-gradient(to bottom, #0d0d0d 0%, rgba(13,13,13,0) 100%);
}
.video-container::after {
  bottom: 0;
  height: 12vh;
  background: linear-gradient(to top, #0d0d0d 0%, rgba(13,13,13,0) 100%);
}

/* LEGACY — sizing/cover overrides commented to allow 16:9 containment
#hero-video,
.video-container video {
  position: absolute;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: 100vh !important;
  object-fit: cover !important;
  object-position: center center !important;
}
*/

/* --- HERO TEXT --- */
.hero-text {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  z-index: 4;
}
.hero-text h1 {
  font-size: var(--fs-xl);
  letter-spacing: 1px;
  color: var(--pink, #E899F2);
}
.hero-text p {
  font-size: var(--fs-base);
  color: #9BE2F2;
  margin-top: 0.5em;
}

/* --- INTERNAL SCROLL ZONE --- */
.scroll-zone {
  position: fixed;
  top: var(--header-height, 0px);
  left: 0;
  width: 100%;
  height: var(--camera-height);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  z-index: 9000;
  padding-top: 10vh;
  padding-bottom: 10vh;
  overscroll-behavior: contain;
  pointer-events: auto;
}

body[data-scroll-mode="app"] .scroll-zone {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.scroll-zone::before,
.scroll-zone::after {
  content: "";
  position: fixed;
  left: 0;
  width: 100%;
  height: 10vh;
  pointer-events: none;
  z-index: 6;
}
.scroll-zone::before {
  top: var(--header-height, 0px);
  background: linear-gradient(to bottom, #0d0d0d 0%, rgba(13,13,13,0) 100%);
}
.scroll-zone::after {
  bottom: var(--footer-height, 0px);
  background: linear-gradient(to top, #0d0d0d 0%, rgba(13,13,13,0) 100%);
}

/* --- ATTRACTION CONTENT --- */
.attraction-info {
  position: relative;
  z-index: 9001; /* text above media */
  padding: 75vh 10% 35vh 10%;
  min-height: 160vh;
  background: transparent;
}

.attraction-item {
  /* opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.6s ease, transform 0.6s ease; */
  margin: calc(50vh + 6rem) auto;
  max-width: 700px;
}
/* .attraction-item.visible { opacity: 1; transform: translateY(0); } */

/* ============================================================
   MOBILE OVERRIDES (<=767px)
   ============================================================ */
@media (max-width: 767px) {
  .attraction-info {
    padding: 0 6% 36px 6%;
    margin-top: calc(100dvh - var(--footer-height, 10px));
    min-height: auto;
  }
  .attraction-item {
    margin: 3rem auto;
    max-width: 92%;
    /* transform: translateY(60px);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
    opacity: 0.85; */
  }
  /* .attraction-item.visible { transform: translateY(0) scale(0.98); opacity: 1; } */
  .hero-text h1 { font-size: var(--fs-xl); }
  .hero-text p  { font-size: var(--fs-base); }
  /* RESTORED: Mobile hero uses normal flow with 100svh, not fixed positioning */
  .attractions-hero {
    position: relative !important;
    width: 100% !important;
    height: 100svh !important;
    height: 100dvh !important;
    height: 100vh !important;
    overflow: hidden !important;
    z-index: 0 !important;
    isolation: isolate !important;
  }
  .video-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  #hero-video,
  .video-container video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    pointer-events: none !important;
  }
  .video-container::before,
  .video-container::after,
  .scroll-zone::before,
  .scroll-zone::after {
    display: none !important;
    background: transparent !important;
    height: 0 !important;
    content: none !important;
  }
  .scroll-zone,
  .attraction-info,
  .site-footer {
    padding-bottom: env(safe-area-inset-bottom);
    padding-top: env(safe-area-inset-top);
  }
}



/* ==========================================
   DESKTOP: Header reveal behavior
   ========================================== */
@media (min-width: 993px) {
  .site-header.attractions-header .header-icons,
  .site-header.attractions-header .main-nav,
  .site-header.attractions-header .app-download-header {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }
  .site-header.attractions-header:hover .header-icons,
  .site-header.attractions-header:hover .main-nav,
  .site-header.attractions-header:hover .app-download-header {
    opacity: 1;
    pointer-events: auto;
  }
  .site-header.attractions-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 12000;
    background: transparent;
  }
  .site-header.attractions-header .header-icons {
    position: absolute;
    top: 0; right: 0;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .site-header.attractions-header .app-download-header {
    margin-left: 15px !important;
    transition: opacity 0.35s ease, margin-left 0.2s;
  }
}

/* =========================================================
   MOBILE ENFORCEMENT (<=768px)
   ========================================================= */
@media (max-width: 768px) {
  /* MOBILE ENFORCEMENT
     Reason: viewport height instability
     Scope: max-width 768px only
     Desktop: unaffected
  */
  :root {
    /* keep camera math valid on mobile; avoid vh toolbar jitter by preferring svh */
    --camera-height: 100svh;
  }

  /* MOBILE ENFORCEMENT
     Reason: viewport height instability
     Scope: max-width 768px only
     Desktop: unaffected
  */
  body[data-scroll-mode="app"].attractions-lock {
    height: auto;
    min-height: unset;
  }

  /* MOBILE ENFORCEMENT
     Reason: viewport height instability
     Scope: max-width 768px only
     Desktop: unaffected
  */
  .attractions-hero {
    height: auto;
    min-height: unset;
    margin-top: 0;
  }

  /* MOBILE ENFORCEMENT
     Reason: viewport height instability
     Scope: max-width 768px only
     Desktop: unaffected
  */
  .attraction-info {
    margin-top: 0;
    min-height: unset;
  }

  /* MOBILE ENFORCEMENT
     Reason: fixed-layer stability
     Scope: max-width 768px only
     Desktop: unaffected
  */
  #arcade-living-lights {
    position: absolute;
    inset: 0; /* anchor to .attractions-stage */
    height: 100%;
    min-height: 100%;
  }

  /* MOBILE ENFORCEMENT
     Reason: fixed-layer stability
     Scope: max-width 768px only
     Desktop: unaffected
  */
  #mini-golf-world {
    position: absolute;
    inset: 0; /* anchor to .attractions-stage */
    height: 100%;
    min-height: 100%;
  }

  /* MOBILE ENFORCEMENT
     Reason: fixed-layer stability
     Scope: max-width 768px only
     Desktop: unaffected
  */
  #attractions-preloader {
    position: absolute;
    inset: 0; /* remain viewport-covering but container-safe */
  }

    /* =========================================================
      MOBILE ENFORCEMENT — SCROLL AUTHORITY (AUTHORITATIVE)
      ========================================================= */
    /* MOBILE ENFORCEMENT
      Reason: resolve dual scroll authority on mobile
      Scope: max-width 768px only
      Desktop: unaffected
    */
    .scroll-zone {
     /* enforce single source of scroll truth */
     position: relative;
     height: 100svh;
     max-height: 100svh;
     overflow-y: auto;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
     touch-action: pan-y;
    }

  /* MOBILE ENFORCEMENT
     Reason: hero text overlap prevention
     Scope: max-width 768px only
     Desktop: unaffected
  */
  .hero-text {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
  }

    /* MOBILE ENFORCEMENT
      Reason: stage sizing + anchoring for mobile
      Scope: max-width 768px only
      Desktop: unaffected
    */
    .attractions-stage {
     width: 100%;
     max-width: 100%;
     max-height: none;
     /* preserve authored camera ratio to avoid layer misalignment */
     aspect-ratio: 16 / 9;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  /* MOBILE ENFORCEMENT
     Reason: reduced motion accessibility
     Scope: max-width 768px only
     Desktop: unaffected
  */
  #attractions-preloader,
  .sec2-layer,
  .sec3-layer,
  .sec3-ceiling {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   MOBILE — RESTORE CINEMATIC SCROLL MODEL
   ========================================================= */
@media (max-width: 992px) {
  /* 1️⃣ Kill native document scrolling */
  html, body {
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: pan-x pan-y;
  }

  /* 2️⃣ The experience is a fixed camera, not a document */
  #attractions-main,
  .attractions-stage,
  #arcade-living-lights,
  #mini-golf-world {
    position: fixed !important;
    inset: 0;
    width: 100vw;
    height: 100svh; /* stable mobile viewport */
    overflow: hidden !important;
  }

}

/* =========================================================
   SECTION 2 — TRANSFORM ORIGINS (PHYSICAL ANCHORS)
   Grounds each layer's motion to its perceived center of rotation.
   Eliminates perceived width inflation and floating artifacts.
   ========================================================= */

/* Attractions-only footer text size */
#attractions-main + .site-footer {
  font-size: 0.7rem !important;
}
#attractions-main + .site-footer .footer-copyright {
  font-size: 0.7rem !important;
}
#attractions-main + .site-footer .footer-copyright span {
  font-size: 0.7rem !important;
}
#attractions-main + .site-footer .footer-links,
#attractions-main + .site-footer .footer-links a,
#attractions-main + .site-footer .footer-links span {
  font-size: 0.5rem !important;
}
#attractions-main + .site-footer .footer-links {
  display: none !important;
}

/* =========================================================
   MOBILE — HEADER & FOOTER RE-ANCHOR (CINEMATIC MODE)
   ========================================================= */
@media (max-width: 992px) {

  /* --- HEADER: lock to top, above stage --- */
  .site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;

    /* Respect dynamic header height variable */
    height: var(--header-height);
    max-height: var(--header-height);

    justify-content: flex-start; /* undo centering */
    align-items: stretch;

    z-index: 11000; /* above cinematic layers */
  }

  /* Prevent header children from vertical centering */
  .site-header * {
    align-self: stretch;
  }

  /* --- FOOTER: lock to bottom, outside stage --- */
  .site-footer {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;

    height: var(--footer-height);
    max-height: var(--footer-height);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 11000; /* above cinematic layers */
    pointer-events: auto;
  }

  /* --- Ensure cinematic stage respects header/footer --- */
  #attractions-main,
  .attractions-stage,
  #arcade-living-lights,
  #mini-golf-world {
    top: var(--header-height);
    bottom: var(--footer-height);
    height: calc(100svh - var(--header-height) - var(--footer-height));
  }
}

@media (max-width: 992px) {
  #attractions-main,
  .attractions-stage,
  #arcade-living-lights,
  #mini-golf-world {
    inset: auto !important;
    bottom: auto !important;
  }
}

@media (max-width: 992px) {
  #arcade-living-lights,
  #mini-golf-world {
    position: fixed !important;
    top: var(--header-height);
    height: var(--camera-height);
  }
}

@media (max-width: 992px) {
  .attractions-stage {
    height: 100%;
    max-height: 100%;
    margin: 0 !important;
  }
}

/* Left arcade wall — pivots from left edge */
[data-layer="sec2_z11_arcades_left"] {
  transform-origin: 0% 65%;
}

/* Right arcade wall — pivots from right edge */
[data-layer="sec2_z12_arcades_right"] {
  transform-origin: 100% 65%;
}

/* Foreground bike — pivots from right-bottom */
[data-layer="sec2_z13_bike"] {
  transform-origin: 75% 90%;
}

/* Hyperdeck — pivots from center mass */
[data-layer="sec2_z14_hyperdeck"] {
  transform-origin: 50% 70%;
}


/*
  These layers share a physical pivot
  This enforces grounded perspective
  Changing origin breaks perceived depth and adhesion
*/
/* Floors — all pivot from bottom center */

[data-layer="sec2_z10_floor_fg"],
[data-layer="sec2_z09_floor_mg"],
[data-layer="sec2_z08_floor_bg"],
[data-layer="sec2_z09_people_mg"],
[data-layer="sec2_z12_people_right"] {
  transform-origin: 50% 100%;
}

/* =========================================================
   SECTION 3 — MINI GOLF (STRUCTURAL ONLY)
   No motion, no scroll math, no parallax
   ========================================================= */

#mini-golf-world {
  position: fixed;
  top: var(--header-height, 0px);
  left: 0;
  right: 0;
  height: var(--camera-height);
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
}

/* ONLY this state allows Section 3 to exist visually */
body.sec3-active #mini-golf-world {
  opacity: 1 !important;
  visibility: visible !important;
}

body.sec2-active #mini-golf-world {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.sec3-active #mini-golf-world.is-mounted {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

/* Ownership guard: hide Section 2 layers when Section 3 owns the frame */
body.sec3-active #arcade-living-lights .sec2-layer-stack {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* --- Section 3 (Mini Golf) Layer Stack ---
   All Section 3 opacity is now owned by JS (inline styles only).
   No CSS variables, transitions, or filter/brightness for Section 3 layers.
   Only static positioning and pointer-events remain. */
#mini-golf-world .sec3-layer-stack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#mini-golf-world .sec3-layer {
  position: absolute;
  inset: -3%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  opacity: 0;
  transition: none;
}
#mini-golf-world .sec3-layer[data-layer="sec3_solid_layer1"] { z-index: 9; }
#mini-golf-world .sec3-layer[data-layer="sec3_solid_layer2"] { z-index: 8; }
#mini-golf-world .sec3-layer[data-layer="sec3_solid_layer3"] { z-index: 7; }
#mini-golf-world .sec3-layer[data-layer="sec3_solid_layer4"] { z-index: 6; }
#mini-golf-world .sec3-base {
  z-index: 0;
}
#mini-golf-world .sec3-ceiling {
  z-index: 10;
  transition: opacity 0.45s ease-out;
}