/* ==========================================================================
   SCENES — one fully-dressed, over-stimulating world per page (js/scenes.js)
   Everything here lives behind the content (z-index 0) or in the side
   gutters, so text panels stay readable.
   ========================================================================== */

/* ---------- Shared page chrome (no header banner) ---------- */
.back-sticker {
  position: fixed; top: 12px; left: 12px; z-index: 860;
  font: 400 1.15rem/1 'Anton', Impact, sans-serif; letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  color: #0d0418; background: #ffd400; padding: .55em .9em;
  border: 3px solid #0d0418; box-shadow: 5px 5px 0 #0d0418; rotate: -4deg;
  transition: rotate .2s, scale .2s;
}
.back-sticker:hover { rotate: 3deg; scale: 1.08; background: #39ff6a; }
.page-main { padding-top: 84px; }
.room-list { display: flex; justify-content: center; }
.room-list .realm-hop { justify-content: center; }
.cta-ticket { position: relative; display: inline-block; margin: .4em 0 .6em; --u: clamp(8px, 1vw, 13px); filter: drop-shadow(5px 7px 0 rgba(0,0,0,.55)); }
.cta-ticket .chase { inset: -16px; }
.page-hero .starburst, .cta .starburst, .gallery-wrap .starburst { z-index: 6; }
.gallery-wrap { position: relative; }
@media (max-width: 860px) { .page-hero__lede .starburst { display: none; } }
@media (max-width: 600px) {
  .cta .click-arrow--left, .cta .click-arrow--right { display: none; }
  .back-sticker { font-size: .95rem; }
}

.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene img { position: absolute; filter: drop-shadow(3px 5px 0 rgba(0,0,0,.35)); }

/* ==========================================================================
   JUNGLE — wild, dense, alive
   ========================================================================== */
.theme-jungle { background: radial-gradient(ellipse at 50% 30%, #1d5e2a, #0a2a12 55%, #031008); background-attachment: fixed; }
.jg-rays {
  position: absolute; inset: -20% -10% 0; mix-blend-mode: screen; opacity: .55;
  background: repeating-conic-gradient(from 190deg at 55% -10%, rgba(220,255,170,.18) 0 4deg, transparent 4deg 13deg);
  -webkit-mask: linear-gradient(#000, transparent 80%); mask: linear-gradient(#000, transparent 80%);
  animation: jg-rays 12s ease-in-out infinite alternate;
}
@keyframes jg-rays { to { transform: rotate(3deg) translateX(2%); opacity: .35; } }
.jg-mist {
  position: absolute; left: -20%; right: -20%; height: 40%;
  background: radial-gradient(ellipse at 30% 50%, rgba(200,255,220,.16), transparent 60%), radial-gradient(ellipse at 75% 60%, rgba(200,255,220,.12), transparent 55%);
  animation: jg-mist 26s ease-in-out infinite alternate;
}
.jg-mist--low { bottom: -5%; }
.jg-mist--mid { top: 35%; animation-duration: 34s; animation-direction: alternate-reverse; opacity: .7; }
@keyframes jg-mist { to { transform: translateX(10%); } }
.jg-leaf { position: absolute; transform-origin: 50% 100%; animation: jg-sway var(--sway, 6s) ease-in-out infinite alternate; }
.jg-leaf svg { display: block; width: 100%; height: auto; overflow: visible; }
.jg-far  { filter: blur(1.6px) brightness(.55) saturate(.8); opacity: .85; }
.jg-near { filter: drop-shadow(6px 10px 8px rgba(0,0,0,.5)); }
@keyframes jg-sway { from { rotate: calc(var(--r, 0deg) - 3deg); } to { rotate: calc(var(--r, 0deg) + 3deg); } }

.jg-vine { position: absolute; top: -10px; transform-origin: 50% 0; animation: jg-swing var(--swing, 5s) ease-in-out infinite alternate; }
.jg-vine svg { display: block; overflow: visible; }
.jg-vine img { position: absolute; left: 50%; translate: -50% 0; top: calc(100% - 30px); }
@keyframes jg-swing { from { rotate: -4deg; } to { rotate: 4deg; } }

.jg-eyes {
  position: absolute; width: 34px; height: 10px; display: flex; justify-content: space-between;
  animation: jg-blink var(--blink, 5s) infinite;
}
.jg-eyes i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #fffbb0 0 20%, #ffd400 40%, #ff6a00 75%); box-shadow: 0 0 12px #ffd400; }
@keyframes jg-blink { 0%, 44%, 52%, 100% { opacity: 1; scale: 1 1; } 47% { scale: 1 .1; } 70%, 90% { opacity: 0; } }

.jg-prowl { position: absolute; bottom: 2%; width: clamp(160px, 18vw, 280px); animation: jg-prowl 46s linear infinite; }
@keyframes jg-prowl {
  0%   { left: -25%; scale: 1 1; }
  49%  { left: 105%; scale: 1 1; }
  50%  { left: 105%; scale: -1 1; }
  99%  { left: -25%; scale: -1 1; }
  100% { left: -25%; scale: 1 1; }
}
.jg-branch {
  position: absolute; height: 18px; border-radius: 9px;
  background: linear-gradient(#6b3d14, #3d1f07); box-shadow: 0 6px 10px rgba(0,0,0,.5);
}

/* ==========================================================================
   PIRATE — storm at sea
   ========================================================================== */
.pr-rain {
  position: absolute; inset: -20%;
  background: repeating-linear-gradient(105deg, transparent 0 18px, rgba(200,220,255,.18) 18px 19px, transparent 19px 41px);
  animation: pr-rain .45s linear infinite;
}
@keyframes pr-rain { to { transform: translate(-40px, 120px); } }
.pr-flash { position: absolute; inset: 0; background: rgba(230,240,255,.55); opacity: 0; animation: pr-flash 9s infinite; }
@keyframes pr-flash { 0%, 93%, 96%, 100% { opacity: 0; } 94%, 97% { opacity: 1; } }
.pr-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 30vh; }
.pr-sea svg { position: absolute; bottom: 0; width: 200%; height: 100%; animation: pr-wave 9s linear infinite; }
.pr-sea svg:nth-child(2) { height: 75%; animation-duration: 6s; animation-direction: reverse; }
.pr-sea svg:nth-child(3) { height: 50%; animation-duration: 4.5s; }
@keyframes pr-wave { to { transform: translateX(-50%); } }
.pr-ship { bottom: 14vh; width: clamp(140px, 16vw, 240px); animation: pr-sail 60s linear infinite, pr-rock 3.2s ease-in-out infinite; }
@keyframes pr-sail { from { left: -20%; } to { left: 110%; } }
@keyframes pr-rock { 0%, 100% { rotate: -6deg; translate: 0 0; } 50% { rotate: 7deg; translate: 0 10px; } }
.pr-octo { right: 1%; bottom: -60px; width: clamp(150px, 15vw, 230px); animation: pr-octo 7s ease-in-out infinite; }
@keyframes pr-octo { 0%, 100% { translate: 0 60px; rotate: -6deg; } 50% { translate: 0 -20px; rotate: 6deg; } }
.pr-flag {
  position: absolute; top: 90px; right: 2%; width: 130px; height: 86px;
  background: #0d0418 center / 60% no-repeat; border: 3px solid #0d0418;
  transform-origin: 0 50%; animation: pr-flag 1.2s ease-in-out infinite alternate;
}
.pr-flag::before { content: ''; position: absolute; left: -10px; top: -12px; bottom: -220px; width: 8px; background: #5a2e0a; border-radius: 4px; }
@keyframes pr-flag { from { transform: skewY(-4deg) scaleX(1); } to { transform: skewY(5deg) scaleX(.93); } }
.pr-gull { top: 12%; width: 70px; animation: pr-gull 18s linear infinite; }
@keyframes pr-gull { from { left: 110%; translate: 0 0; } 50% { translate: 0 30px; } to { left: -15%; translate: 0 0; } }
.pr-beam {
  position: absolute; left: -10%; bottom: 10%; width: 120vmax; height: 120vmax; translate: -50% 50%;
  background: conic-gradient(from 0deg, rgba(255,240,170,.22) 0 8deg, transparent 8deg);
  animation: sb-spin 10s linear infinite; mix-blend-mode: screen;
}

/* ==========================================================================
   SPACE — Y2K holo station
   ========================================================================== */
.sp-astro { width: clamp(90px, 10vw, 150px); animation: sp-drift 70s linear infinite, sp-tumble 14s linear infinite; }
@keyframes sp-drift { 0% { left: -12%; top: 70%; } 50% { left: 55%; top: 15%; } 100% { left: 112%; top: 60%; } }
@keyframes sp-tumble { to { rotate: 360deg; } }
.sp-planet { left: -6%; bottom: -8%; width: clamp(240px, 30vw, 460px); animation: sb-spin 120s linear infinite; }
.sp-moon { right: 3%; top: 8%; width: clamp(80px, 9vw, 140px); }
.sp-comet { width: 160px; animation: sp-comet 9s ease-in infinite; }
@keyframes sp-comet { 0%, 60% { left: 110%; top: -10%; opacity: 0; } 62% { opacity: 1; } 85% { left: -20%; top: 50%; opacity: 1; } 86%, 100% { opacity: 0; left: -20%; top: 50%; } }
.sp-scope { right: 1%; bottom: 2%; width: clamp(90px, 9vw, 140px); rotate: -20deg; }
.sp-ufo { position: absolute; top: 18%; width: 120px; animation: sp-ufo 24s ease-in-out infinite; }
.sp-ufo__saucer {
  position: relative; z-index: 1; height: 34px; border-radius: 50%;
  background: linear-gradient(#e8f4ff, #8aa0c0); border: 3px solid #0d0418;
  box-shadow: inset 0 -6px 0 #5b2a86;
}
.sp-ufo__saucer::before { content: ''; position: absolute; left: 30%; right: 30%; top: -22px; height: 30px; border-radius: 50% 50% 0 0; background: rgba(0,229,255,.55); border: 3px solid #0d0418; }
.sp-ufo__beam { margin: -4px auto 0; width: 70%; height: 150px; background: linear-gradient(rgba(57,255,106,.55), transparent); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); animation: sp-beam 1.4s ease-in-out infinite alternate; }
.sp-ufo__cow { position: absolute; left: 50%; top: 80px; translate: -50% 0; font-size: 2rem; animation: sp-cow 3s ease-in-out infinite; }
@keyframes sp-ufo { 0%, 100% { left: 6%; } 50% { left: 78%; } }
@keyframes sp-beam { to { opacity: .4; } }
@keyframes sp-cow { 0% { translate: -50% 60px; rotate: 0deg; } 100% { translate: -50% -10px; rotate: 360deg; } }
.sp-rings { position: absolute; left: 50%; top: 22%; width: 70vmin; aspect-ratio: 1; translate: -50% -50%; }
.sp-rings i { position: absolute; inset: var(--in, 0); border: 2px dashed rgba(0,229,255,.35); border-radius: 50%; animation: sb-spin var(--t, 30s) linear infinite; }
.sp-rocket { position: absolute; bottom: -80px; font-size: 3rem; animation: sp-launch 11s ease-in infinite; }
.sp-rocket::after { content: ''; position: absolute; left: 50%; top: 80%; width: 14px; height: 120px; translate: -50% 0; background: linear-gradient(#ffd400, #ff2d7a, transparent); border-radius: 8px; filter: blur(2px); }
@keyframes sp-launch { 0%, 55% { translate: 0 0; } 100% { translate: 0 -130vh; } }

/* ==========================================================================
   ARCADE — every cabinet switched on at once
   ========================================================================== */
.ar-invaders { position: absolute; top: 70px; left: 0; display: flex; gap: 46px; animation: ar-march 10s steps(20) infinite alternate; }
.ar-invader { width: 4px; height: 4px; color: var(--c, #39ff6a); box-shadow:
  8px 0, 32px 0, 12px 4px, 28px 4px, 8px 8px, 12px 8px, 16px 8px, 20px 8px, 24px 8px, 28px 8px, 32px 8px,
  4px 12px, 8px 12px, 16px 12px, 20px 12px, 24px 12px, 32px 12px, 36px 12px,
  0 16px, 4px 16px, 8px 16px, 12px 16px, 16px 16px, 20px 16px, 24px 16px, 28px 16px, 32px 16px, 36px 16px, 40px 16px,
  0 20px, 8px 20px, 12px 20px, 16px 20px, 20px 20px, 24px 20px, 28px 20px, 32px 20px, 40px 20px,
  0 24px, 8px 24px, 32px 24px, 40px 24px, 12px 28px, 16px 28px, 24px 28px, 28px 28px;
  animation: ar-wiggle .6s steps(1) infinite; }
@keyframes ar-march { from { translate: 2vw 0; } to { translate: 40vw 40px; } }
@keyframes ar-wiggle { 50% { translate: 0 4px; } }
.ar-pac { position: absolute; bottom: 30px; width: 54px; height: 54px; animation: ar-pac 14s linear infinite; }
.ar-pac::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: #ffe94a;
  clip-path: polygon(50% 50%, 100% 15%, 100% 0, 0 0, 0 100%, 100% 100%, 100% 85%); animation: ar-chomp .25s steps(1) infinite;
}
@keyframes ar-chomp { 50% { clip-path: polygon(50% 50%, 100% 48%, 100% 0, 0 0, 0 100%, 100% 100%, 100% 52%); } }
@keyframes ar-pac { from { left: -10%; } to { left: 110%; } }
.ar-dots { position: absolute; bottom: 52px; left: 0; right: 0; height: 10px; background: radial-gradient(circle, #ffe94a 0 4px, transparent 5px) 0 0 / 40px 10px repeat-x; }
.ar-filmstrip {
  position: absolute; top: 0; bottom: 0; width: 64px;
  background:
    linear-gradient(90deg, #111 0 10px, transparent 10px 54px, #111 54px) ,
    repeating-linear-gradient(#111 0 6px, transparent 6px 18px) 2px 0 / 6px 100% no-repeat,
    repeating-linear-gradient(#111 0 6px, transparent 6px 18px) 56px 0 / 6px 100% no-repeat,
    repeating-linear-gradient(#ff2d7a 0 60px, #111 60px 66px, #00e5ff 66px 126px, #111 126px 132px, #ffe94a 132px 192px, #111 192px 198px);
  background-color: #222; opacity: .85;
  animation: ar-film 3s linear infinite;
}
.ar-filmstrip--l { left: 0; } .ar-filmstrip--r { right: 0; animation-direction: reverse; }
@keyframes ar-film { to { background-position: 0 0, 2px 18px, 56px 18px, 0 198px; } }
.ar-reel {
  position: absolute; width: 120px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #111 0 10%, #888 11% 14%, transparent 15%),
              radial-gradient(circle at 50% 22%, #111 0 12%, transparent 13%), radial-gradient(circle at 78% 62%, #111 0 12%, transparent 13%), radial-gradient(circle at 22% 62%, #111 0 12%, transparent 13%),
              #b8c0c8;
  border: 6px solid #333; animation: sb-spin 2.5s linear infinite;
}
.ar-score { position: absolute; top: 70px; right: 80px; font: .8rem 'Press Start 2P', monospace; color: #ffe94a; text-shadow: 2px 2px 0 #ff2d7a; }
.theme-arcade .page-hero h1 { animation: ar-glitch 5s steps(1) infinite; }
@keyframes ar-glitch {
  0%, 92%, 100% { translate: 0 0; filter: none; }
  93% { translate: -4px 2px; filter: hue-rotate(90deg); clip-path: inset(10% 0 40% 0); }
  95% { translate: 5px -2px; filter: hue-rotate(-90deg); clip-path: inset(50% 0 5% 0); }
  97% { translate: 0 0; filter: invert(1); clip-path: none; }
}

/* ==========================================================================
   CARNIVAL — under the big top
   ========================================================================== */
.theme-playground {
  background:
    radial-gradient(circle at 50% -10%, transparent 0 18vmax, transparent 18vmax),
    repeating-conic-gradient(from 0deg at 50% -10%, #d9142b 0 7.5deg, #fff3dc 7.5deg 15deg);
  background-attachment: fixed;
}
.cv-valance {
  position: absolute; top: 0; left: 0; right: 0; height: 44px;
  background: radial-gradient(circle at 50% 0, #ffd400 0 28px, transparent 29px) 0 -14px / 60px 44px repeat-x;
  filter: drop-shadow(0 4px 0 #0d0418);
}
.cv-lights {
  position: absolute; inset: 6px; border: 10px dotted #ffd400; border-radius: 18px;
  animation: chase .4s steps(1) infinite; filter: drop-shadow(0 0 6px #ffd400);
}
.cv-wheel { position: absolute; left: 1%; bottom: -60px; width: clamp(220px, 24vw, 360px); aspect-ratio: 1; }
.cv-wheel__ring {
  position: absolute; inset: 0; border-radius: 50%; border: 8px solid #ff3d9a;
  background: repeating-conic-gradient(transparent 0 13deg, #0d0418 13deg 15deg);
  animation: sb-spin 18s linear infinite;
}
.cv-wheel__ring i {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 26px; margin: -13px 0 0 -15px; border-radius: 6px 6px 12px 12px;
  background: var(--c); border: 3px solid #0d0418;
  transform: rotate(var(--a)) translateY(calc(var(--rad) * -1)) rotate(calc(var(--a) * -1));
}
.cv-clown { right: 2%; bottom: -40px; width: clamp(110px, 12vw, 180px); animation: cv-pop 6s cubic-bezier(.3,1.7,.5,1) infinite; }
@keyframes cv-pop { 0%, 30% { translate: 0 100%; rotate: 0deg; } 40%, 80% { translate: 0 0; rotate: -8deg; } 60% { rotate: 8deg; } 90%, 100% { translate: 0 100%; } }
.cv-confetti i { position: absolute; top: -20px; width: 10px; height: 16px; background: var(--c); animation: cv-fall var(--t, 6s) linear infinite; animation-delay: var(--d, 0s); }
@keyframes cv-fall { to { translate: var(--x, 30px) 110vh; rotate: 720deg; } }
.cv-eq { position: absolute; right: 3%; top: 30%; display: flex; gap: 6px; align-items: flex-end; height: 120px; }
.cv-eq i { width: 14px; background: linear-gradient(#39ff6a, #ffd400, #ff2d7a); border: 2px solid #0d0418; animation: cv-eq var(--t, .5s) ease-in-out infinite alternate; }
@keyframes cv-eq { from { height: 15%; } to { height: 100%; } }
.cv-mic { left: 3%; top: 26%; width: clamp(80px, 8vw, 120px); animation: dangle 2s ease-in-out infinite alternate; transform-origin: 50% 0; }
.cv-wave { position: absolute; left: 3%; top: 26%; width: 140px; aspect-ratio: 1; border-radius: 50%; border: 4px solid #ff3d9a; animation: cv-wave 1.6s ease-out infinite; }
@keyframes cv-wave { from { scale: .4; opacity: 1; } to { scale: 2.2; opacity: 0; } }

html[data-motion="calm"] .pr-rain, html[data-motion="calm"] .pr-flash, html[data-motion="calm"] .cv-lights,
html[data-motion="calm"] .cv-confetti, html[data-motion="calm"] .theme-arcade .page-hero h1 { animation: none; }
html[data-motion="calm"] .pr-flash { display: none; }

/* Gutter-only decorations step aside on narrow screens so text stays clear */
@media (max-width: 900px) {
  .ar-filmstrip, .ar-reel, .ar-score, .cv-eq, .cv-mic, .cv-wave, .pr-flag { display: none; }
  .scene img { opacity: .55; }
}