/* ==========================================================================
   Photobooth attract mode (attract.js). Everything lives in #attract-layer, which
   sits inside the calibrated #idle-anim-layer (follows overscan calibration).
   Perf rules (HANDOFF 2026-07-09): animate transform/opacity only, no
   filters, no animated shadows; canvases are pixel-capped in JS.
   --u = 1% of the stage height (set by JS), so sizes track the stage.
   ========================================================================== */

#attract-layer {
  position: absolute; inset: 0; z-index: 6; overflow: hidden;
  pointer-events: none;            /* never steals input: clicks fall through to #idle-screen */
  display: none; --u: 10.8px;
  font-family: 'PhotoboothFont', Arial, sans-serif; color: #fff;
  contain: strict;
}
#attract-layer.on { display: block; }
#attract-layer.rm-fade { transition: opacity .7s ease; }

/* While a non-classic scene covers the stage, stop painting what's under it */
#idle-screen.att-cover #idle-anim-zoom,
#idle-screen.att-cover #particle-canvas,
#idle-screen.att-cover .start-text { visibility: hidden; }
/* ...and stop animating it. A visibility:hidden element's animations can't run on the
   compositor (nothing to draw), so the idle zoom, heart, CTA pulse (and crazy mode's
   hue rave) fell back to the main thread: a style recalc every frame under every scene. */
#idle-screen.att-cover #idle-anim-zoom, #idle-screen.att-cover #idle-anim-zoom *,
#idle-screen.att-cover .start-text { animation-play-state: paused !important; }

/* Logo vibe (logo-vibe.js): logos drifting over the classic idle, above the
   splash and particles, under the attract layer; gone under covering scenes */
#logo-vibe { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
#logo-vibe img { position: absolute; left: 0; top: 0; height: auto; will-change: transform; user-select: none; }
#idle-screen.att-cover #logo-vibe { visibility: hidden; }

.att-scene { position: absolute; inset: 0; display: none; overflow: hidden; }
.att-scene.on { display: block; }
.att-scene.fade-in { animation: attFadeIn .8s ease both; }
@keyframes attFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Scenes never sit still (owner: more action): a slow camera drift (transform,
   scale >= 1.02 so the edges never show) plus an impact punch on every
   explosion (punch() in attract.js toggles hit-a / hit-b; `scale` composes
   with the drift `transform`). Compositor-only. */
.att-scene.on { will-change: transform; animation: attDrift 9s ease-in-out infinite alternate; }
.att-scene.on.fade-in { animation: attFadeIn .8s ease both, attDrift 9s ease-in-out infinite alternate; }
#attract-layer.hit-a .att-scene.on { animation: attDrift 9s ease-in-out infinite alternate, attPunchA .5s cubic-bezier(.2, .9, .3, 1); }
#attract-layer.hit-b .att-scene.on { animation: attDrift 9s ease-in-out infinite alternate, attPunchB .5s cubic-bezier(.2, .9, .3, 1); }
@keyframes attDrift {
  0%   { transform: scale(1.02) translate(-0.7%, 0.4%) rotate(-0.5deg); }
  100% { transform: scale(1.1) translate(0.8%, -0.6%) rotate(0.6deg); }
}
@keyframes attPunchA { 0% { scale: 1.07; } 100% { scale: 1; } }
@keyframes attPunchB { 0% { scale: 1.07; } 100% { scale: 1; } }

.att-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 58%, #4b0f6e 0%, #26062f 52%, #10021a 100%);
}
.att-fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Shared bits ---------- */
.att-cta {
  position: absolute; left: 50%; bottom: calc(var(--u) * 7.5);
  transform: translateX(-50%);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 3.6);
  font-size: calc(var(--u) * 3.6); letter-spacing: calc(var(--u) * .35);
  white-space: nowrap; color: #fff;
  background: linear-gradient(90deg, #8a3dd4, #ff1493 55%, #ff7733);
  border: calc(var(--u) * .35) solid #fff; border-radius: calc(var(--u) * 6);
  box-shadow: 0 0 calc(var(--u) * 3) rgba(255, 20, 147, .75), 0 calc(var(--u) * .7) 0 #3b0052;
  text-shadow: 0 calc(var(--u) * .3) 0 rgba(60, 0, 80, .8);
}
.att-cta.pulse { animation: attCtaPulse 1.1s ease-in-out infinite; }
@keyframes attCtaPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.07); }
}
.att-title {
  position: absolute; left: 0; right: 0; top: calc(var(--u) * 9);
  text-align: center; font-size: calc(var(--u) * 5.4); letter-spacing: calc(var(--u) * .5);
  color: #fff;
  text-shadow: 0 0 calc(var(--u) * 1.2) #ff1493, 0 0 calc(var(--u) * 3) rgba(255, 20, 147, .6), 0 calc(var(--u) * .4) 0 #3b0052;
}
.att-sub {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: calc(var(--u) * 2.4); letter-spacing: calc(var(--u) * .4); color: #7ff3ff;
  text-shadow: 0 0 calc(var(--u) * 1) rgba(34, 224, 255, .8);
}

/* ---------- Transition wipe (three skewed brand bands) ---------- */
#attract-wipe { position: absolute; inset: 0; display: none; z-index: 50; }
#attract-wipe.on { display: block; }
#attract-wipe .b {
  position: absolute; top: -10%; height: 120%; will-change: transform;
  transform: translateX(-200%) skewX(-14deg);
}
/* all bands share one 150%-wide box (translateX % is relative to the band's
   own width, so equal boxes keep them fully off-stage at both ends) */
#attract-wipe .b { left: -25%; width: 150%; }
#attract-wipe .b1 { background: linear-gradient(90deg, transparent 0 82%, #ff7733 82% 100%); }
#attract-wipe .b2 {
  background: linear-gradient(90deg, #ff1493 0, #ff1493 4%, #2a0640 4%, #2a0640 96%, #8a3dd4 96%);
  display: flex; align-items: center; justify-content: center;
}
#attract-wipe .b2 .brand {
  transform: skewX(14deg); font-size: calc(var(--u) * 13); letter-spacing: calc(var(--u) * .3); white-space: nowrap;
}
#attract-wipe .b3 { background: linear-gradient(90deg, #22e0ff 0 14%, transparent 14% 100%); }
#attract-wipe.run-a .b { animation: attWipeA 1.1s cubic-bezier(.75, 0, .25, 1) both; }
#attract-wipe.run-b .b { animation: attWipeB 1.1s cubic-bezier(.75, 0, .25, 1) both; }
#attract-wipe .b2 { animation-delay: .06s !important; }
#attract-wipe .b3 { animation-delay: .12s !important; }
@keyframes attWipeA { from { transform: translateX(-170%) skewX(-14deg); } to { transform: translateX(170%) skewX(-14deg); } }
@keyframes attWipeB { from { transform: translateX(-170%) skewX(-14deg); } to { transform: translateX(170%) skewX(-14deg); } }

/* ---------- Scene: strike a pose (kinetic type) ---------- */
.att-phrase {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-58%);
  text-align: center; display: none; line-height: 1;
}
.att-phrase.on, .att-phrase.out { display: block; }
.att-line { display: block; white-space: nowrap; }
.att-line + .att-line { margin-top: calc(var(--u) * 2); }
.att-ch { display: inline-block; will-change: transform, opacity; }
.att-ch.sp { width: calc(var(--u) * 5); }
.att-l1 { font-size: calc(var(--u) * 11); }
.att-l2 { font-size: calc(var(--u) * 15); }
.att-pose .att-ch.sp { width: calc(var(--u) * 3.5); }
.att-bigbtn .att-eyes { left: 50%; top: 40%; font-size: calc(var(--u) * 5.2); }
.att-phrase.on .att-ch { animation: attDrop .75s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(var(--i) * 55ms); }
.att-phrase.on .att-l2 .att-ch { animation-name: attPop; animation-delay: calc(var(--i) * 55ms + 220ms); }
.att-phrase.out .att-ch { animation: attOut .4s ease-in both; animation-delay: calc(var(--i) * 18ms); }
@keyframes attDrop {
  from { opacity: 0; transform: translateY(calc(var(--u) * -60)) rotate(-25deg) scale(.6); }
  to   { opacity: 1; transform: none; }
}
@keyframes attPop {
  0%   { opacity: 0; transform: scale(2.6) rotate(12deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes attOut { to { opacity: 0; transform: translateY(calc(var(--u) * -18)) scale(.8); } }
.att-phrase.on .att-l2 { animation: attWiggle 1.6s ease-in-out 1.2s infinite; }
@keyframes attWiggle { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) scale(1.03); } }

.att-bigbtn {
  position: absolute; left: 50%; bottom: calc(var(--u) * 5);
  width: calc(var(--u) * 15); height: calc(var(--u) * 15); margin-left: calc(var(--u) * -7.5);
  display: none;
}
.att-bigbtn.on { display: block; }
.att-bigbtn .cap {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffb3d9 0, #ff1493 38%, #a1005a 78%);
  box-shadow: 0 calc(var(--u) * 1.4) 0 #55002f, 0 0 calc(var(--u) * 5) rgba(255, 20, 147, .8);
  animation: attPress .9s ease-in-out infinite; will-change: transform;
}
@keyframes attPress { 0%, 55%, 100% { transform: none; } 70% { transform: translateY(calc(var(--u) * 1.2)) scale(.97, .9); } }

.att-ticker {
  position: absolute; left: -10%; width: 120%; height: calc(var(--u) * 6.4);
  overflow: hidden; transform: rotate(-3deg);
  background: linear-gradient(90deg, #ff7733, #ff1493 50%, #8a3dd4);
  box-shadow: 0 0 calc(var(--u) * 2) rgba(255, 20, 147, .6);
}
.att-ticker.top { top: calc(var(--u) * 6); transform: rotate(2.5deg); background: linear-gradient(90deg, #22e0ff, #8a3dd4 60%, #ff1493); }
.att-ticker.bottom { bottom: calc(var(--u) * 26); }
.att-ticker .run {
  position: absolute; top: 0; left: 0; white-space: nowrap; height: 100%;
  display: flex; align-items: center;
  font-size: calc(var(--u) * 3.3); letter-spacing: calc(var(--u) * .4); color: #fff;
  text-shadow: 0 calc(var(--u) * .3) 0 rgba(50, 0, 70, .7);
  animation: attTicker 22s linear infinite; will-change: transform;
}
.att-ticker.top .run { animation-direction: reverse; animation-duration: 26s; }
@keyframes attTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Scene: logo reveal ---------- */
.att-logo .att-bg { background: radial-gradient(circle at 50% 44%, var(--acc, #ff1493) 0%, #3a0a52 34%, #12021c 78%); }
.att-logo .halo {
  position: absolute; left: 50%; top: 42%; width: calc(var(--u) * 70); height: calc(var(--u) * 70);
  margin: calc(var(--u) * -35) 0 0 calc(var(--u) * -35); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .12) 38%, transparent 68%);
  animation: attHalo 3.2s ease-in-out infinite; will-change: transform, opacity;
}
@keyframes attHalo { 0%, 100% { opacity: .7; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
/* The entrance runs on .wrap and the float on .inner: both on .inner were two transform
   animations on one element, which Chrome can't run on the compositor
   (TargetHasIncompatibleAnimations), so the float ticked on the main thread. */
.att-logo .wrap {
  position: absolute; left: 50%; top: 42%; height: calc(var(--u) * 44);
  transform: translate(-50%, -50%);
  animation: attLogoIn 1.5s cubic-bezier(.2, 1.4, .3, 1) both; will-change: transform;
}
.att-logo .wrap .inner { position: absolute; inset: 0; animation: attFloat 6s ease-in-out 1.5s infinite; will-change: transform; }
@keyframes attLogoIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.15) rotate(-30deg); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes attFloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(calc(var(--u) * -2)) rotate(1.5deg); } }
.att-logo .wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.att-logo .shine { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.att-logo .shine i {
  position: absolute; top: -10%; left: 0; width: 35%; height: 120%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-150%) skewX(-18deg); animation: attShine 3.4s ease-in-out 1.4s infinite; will-change: transform;
}
@keyframes attShine { 0% { transform: translateX(-150%) skewX(-18deg); } 45%, 100% { transform: translateX(420%) skewX(-18deg); } }
.att-logo .name { position: absolute; left: 0; right: 0; top: calc(var(--u) * 69); text-align: center;
  font-size: calc(var(--u) * 8); letter-spacing: calc(var(--u) * 1); white-space: nowrap; }

.att-logo .att-cta { animation: attBlink 1.2s steps(2, jump-none) 2s infinite both; }
@keyframes attBlink { 0% { opacity: 1; } 100% { opacity: .25; } }
.att-star {
  position: absolute; width: calc(var(--u) * 3); height: calc(var(--u) * 3); background: #fff;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0; animation: attTwinkle 2.4s ease-in-out infinite; will-change: transform, opacity;
}
@keyframes attTwinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ---------- Scene: gallery wall (3D carousel) ---------- */
.att-gallery .att-bg { background: radial-gradient(ellipse at 50% 40%, #3d0d5c 0%, #1a0428 55%, #08000f 100%); }
.att-gallery .floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(180deg, rgba(255, 20, 147, 0) 0, rgba(255, 20, 147, .16) 40%, rgba(138, 61, 212, .3) 100%);
}
.att-gallery .stage3d {
  position: absolute; left: 0; right: 0; top: calc(var(--u) * 19); height: calc(var(--u) * 60);
  perspective: calc(var(--u) * 170); perspective-origin: 50% 30%;
}
.att-gallery .ring {
  position: absolute; left: 50%; top: 0; width: 0; height: 100%;
  transform-style: preserve-3d; animation: attRing3d 36s linear infinite; will-change: transform;
}
@keyframes attRing3d { from { transform: translateZ(var(--rz)) rotateX(-5deg) rotateY(0deg); } to { transform: translateZ(var(--rz)) rotateX(-5deg) rotateY(-360deg); } }
.att-gallery .card {
  position: absolute; top: 0; left: 0; height: 100%;
  transform: rotateY(var(--a)) translateZ(var(--r));
}
.att-gallery .card .fly {
  position: absolute; inset: 0; background: #fff; padding: calc(var(--u) * .9);
  border-radius: calc(var(--u) * .5); box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 3) rgba(0, 0, 0, .55);
  animation: attFlyIn 1.1s cubic-bezier(.2, 1.2, .3, 1) both; animation-delay: calc(var(--i) * 140ms);
}
.att-gallery .card canvas { display: block; width: 100%; height: 100%; }
@keyframes attFlyIn { from { opacity: 0; transform: translateY(calc(var(--u) * 80)) rotate(25deg) scale(.6); } to { opacity: 1; transform: none; } }
.att-gallery .count { top: calc(var(--u) * 16); }

/* ---------- Scene: disco ---------- */
.att-disco .title { top: auto; bottom: calc(var(--u) * 19); font-size: calc(var(--u) * 7.5); }
.att-disco .title .att-ch { animation: attBounce .5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -60ms); }
@keyframes attBounce { from { transform: translateY(0); } to { transform: translateY(calc(var(--u) * -1.6)); } }

/* ---------- Scene: countdown teaser ---------- */
.att-count .polaroid {
  position: absolute; left: 9%; top: calc(var(--u) * 12); width: calc(var(--u) * 62); height: calc(var(--u) * 74);
  background: #fdf8ee; padding: calc(var(--u) * 2.6) calc(var(--u) * 2.6) calc(var(--u) * 13);
  box-sizing: border-box; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0, 0, 0, .6);
  transform: rotate(-4deg); will-change: transform;
}
.att-count .polaroid.snap { animation: attSnap .7s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes attSnap { 0% { transform: rotate(-4deg) scale(1); } 30% { transform: rotate(3deg) scale(1.06); } 100% { transform: rotate(-2deg) scale(1); } }
.att-count .polaroid canvas { display: block; width: 100%; height: 100%; background: #1b0626; }
.att-count .polaroid .cap {
  position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 3.6); text-align: center;
  font-size: calc(var(--u) * 4.2); color: #2a0640; letter-spacing: calc(var(--u) * .3); opacity: 0;
}
.att-count .polaroid.snap .cap { opacity: 1; transition: opacity .6s .4s; }
.att-count .num-wrap {
  position: absolute; right: 9%; top: calc(var(--u) * 16); width: calc(var(--u) * 52); height: calc(var(--u) * 52);
}
.att-count .num-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.att-count .num-wrap circle { fill: none; stroke-width: 5; }
.att-count .num-wrap .track { stroke: rgba(255, 255, 255, .12); }
.att-count .num-wrap .arc { stroke: #22e0ff; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; }
.att-count .num-wrap.tick .arc  { animation: attArc 1s linear both; }
.att-count .num-wrap.tick2 .arc { animation: attArc2 1s linear both; }
@keyframes attArc2 { from { stroke-dashoffset: 289; } to { stroke-dashoffset: 0; } }
@keyframes attArc { from { stroke-dashoffset: 289; } to { stroke-dashoffset: 0; } }
.att-count .num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--u) * 30); color: #fff;
  text-shadow: 0 0 calc(var(--u) * 2) #ff1493, 0 calc(var(--u) * 1.2) 0 #3b0052;
}
.att-count .num.go  { animation: attNum 1s cubic-bezier(.2, 1.4, .4, 1) both; }
.att-count .num.go2 { animation: attNum2 1s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes attNum2 { 0% { opacity: 0; transform: scale(2.4); } 25% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(.7); } }
@keyframes attNum { 0% { opacity: 0; transform: scale(2.4); } 25% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(.7); } }
.att-count .msg {
  position: absolute; right: 4%; width: 46%; top: calc(var(--u) * 26); text-align: center;
  font-size: calc(var(--u) * 8.5); line-height: 1.15; color: #ff2d95; opacity: 0;
  text-shadow: 0 0 calc(var(--u) * 1.6) rgba(255, 45, 149, .9), 0 calc(var(--u) * 1) 0 #2b0040;
}
.att-count .msg small { display: block; font-size: .42em; color: #7ff3ff; margin-top: calc(var(--u) * 2);
  text-shadow: 0 0 calc(var(--u) * 1) rgba(34, 224, 255, .8); }
.att-count .msg.on { animation: attPop .7s cubic-bezier(.2, 1.4, .4, 1) .25s both; }
.att-count .flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.att-count .flash.go { animation: attFlash .9s ease-out both; }
@keyframes attFlash { 0% { opacity: .55; } 100% { opacity: 0; } }   /* soft camera-flash fade */
.att-count .att-cta { left: 72%; }


@keyframes attHazBlink { 0% { opacity: 1; } 100% { opacity: .6; } }

/* ---------- Kitsch kit: WordArt chrome, googly eyes, comic pops, badges ---------- */
/* WordArt: the element itself is the dark bevel/extrusion; ::after lays the
   chrome rainbow face on top (background-clip:text), so the extrusion never
   paints over the gradient. Static paint: only transforms animate. */
.wa-line .att-ch, .wa-word { position: relative; display: inline-block; color: #2b0040;
  font-family: 'Arial Black', Impact, 'Segoe UI Black', sans-serif; font-weight: 900;
  text-shadow: calc(var(--u) * .12) calc(var(--u) * .12) 0 #4d0a66, calc(var(--u) * .24) calc(var(--u) * .24) 0 #4d0a66,
    calc(var(--u) * .36) calc(var(--u) * .36) 0 #3b0052, calc(var(--u) * .48) calc(var(--u) * .48) 0 #3b0052,
    calc(var(--u) * .6) calc(var(--u) * .6) 0 #24002f, calc(var(--u) * .9) calc(var(--u) * 1) calc(var(--u) * .6) rgba(0, 0, 0, .5); }
.wa-line .att-ch::after, .wa-word::after {
  content: attr(data-t); position: absolute; left: 0; top: 0; white-space: pre;
  color: transparent; -webkit-text-stroke: calc(var(--u) * .14) #fff;
  background: linear-gradient(180deg, #ffffff 0%, var(--c1, #ff6fd0) 36%, var(--c2, #8a0f63) 50%, var(--c1, #ff6fd0) 64%, #fff4fb 100%);
  -webkit-background-clip: text; background-clip: text; text-shadow: none;
}
.wa-line .att-ch:nth-child(6n+1) { --c1: #ff4fc0; --c2: #8a0050; }
.wa-line .att-ch:nth-child(6n+2) { --c1: #ffa53d; --c2: #a33a00; }
.wa-line .att-ch:nth-child(6n+3) { --c1: #ffe94d; --c2: #9c7a00; }
.wa-line .att-ch:nth-child(6n+4) { --c1: #4dff9a; --c2: #00804a; }
.wa-line .att-ch:nth-child(6n+5) { --c1: #3de8ff; --c2: #005f8a; }
.wa-line .att-ch:nth-child(6n)   { --c1: #c08aff; --c2: #4a1a99; }
.wa-word::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 45%, rgba(40, 0, 60, .35) 50%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .5) 100%),
    linear-gradient(90deg, #ff1493, #ff7733, #ffe066, #3dff8a, #22e0ff, #b06cff, #ff1493);
  -webkit-background-clip: text; background-clip: text;
}
.goo {
  position: relative; display: inline-block; width: .82em; height: .82em; border-radius: 50%; vertical-align: -.04em;
  margin: 0 .03em; background: radial-gradient(circle at 34% 30%, #fff 0 52%, #e6dcef 100%);
  box-shadow: 0 0 0 .07em #2b0040, .08em .1em 0 .07em #3b0052;
}
.goo b { position: absolute; inset: 0; animation: attGoo 2.1s cubic-bezier(.3, 1.6, .5, 1) infinite; will-change: transform; }
.goo + .goo b { animation-delay: -.7s; animation-duration: 1.7s; }
.goo i { position: absolute; left: 27%; top: 27%; width: 46%; height: 46%; border-radius: 50%; background: #111; transform: translateY(52%); }
.goo i::after { content: ""; position: absolute; left: 20%; top: 18%; width: 28%; height: 28%; border-radius: 50%; background: #fff; }
@keyframes attGoo { 0% { transform: rotate(0); } 14% { transform: rotate(80deg); } 30% { transform: rotate(-55deg); } 46% { transform: rotate(30deg); }
  60% { transform: rotate(-12deg); } 72%, 100% { transform: rotate(4deg); } }
.att-eyes { position: absolute; display: flex; gap: .12em; transform: translate(-50%, -50%); pointer-events: none; }

.att-tagline { position: absolute; left: 0; right: 0; top: calc(var(--u) * 2.5); z-index: 43; text-align: center; display: none;
  font-size: calc(var(--u) * 5.2); white-space: nowrap; }
.att-tagline .wa-word { transform: rotate(-3deg); }
.att-tagline.go  { animation: attTagIn .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.att-tagline.go2 { animation: attTagIn2 .55s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes attTagIn  { from { opacity: 0; transform: scale(.2) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes attTagIn2 { from { opacity: 0; transform: scale(.2) rotate(12deg); } to { opacity: 1; transform: none; } }
#attract-layer[data-scene="disco"] .att-tagline { display: block; top: calc(var(--u) * 33); left: auto; right: 3%; text-align: right; font-size: calc(var(--u) * 4.2); }
#attract-layer[data-scene="logo"] .att-tagline { display: block; top: calc(var(--u) * 2.5); }
#attract-layer[data-scene="countdown"] .att-tagline { display: block; top: calc(var(--u) * 1.6); font-size: calc(var(--u) * 4.4); }
#attract-layer[data-scene="gallery"] .att-tagline { display: block; top: calc(var(--u) * 1.5); font-size: calc(var(--u) * 4); }

/* comic-book starburst balloon */
.att-pow { position: absolute; z-index: 44; display: none; width: calc(var(--u) * var(--s, 30)); height: calc(var(--u) * var(--s, 30) * .72);
  margin: calc(var(--u) * var(--s, 30) * -.36) 0 0 calc(var(--u) * var(--s, 30) * -.5); }
.att-pow.go, .att-pow.go2 { display: flex; align-items: center; justify-content: center; }
.att-pow.go  { animation: attPow 1.5s cubic-bezier(.2, 1.4, .4, 1) both; }
.att-pow.go2 { animation: attPow2 1.5s cubic-bezier(.2, 1.4, .4, 1) both; }
.att-pow .s1, .att-pow .s2 { position: absolute; inset: 0;
  clip-path: polygon(50% 0, 58% 22%, 75% 4%, 72% 27%, 98% 16%, 82% 38%, 100% 50%, 82% 60%, 96% 84%, 70% 72%, 70% 98%, 56% 76%, 42% 100%, 38% 76%, 16% 92%, 25% 68%, 0 70%, 17% 52%, 2% 30%, 26% 34%, 18% 8%, 38% 24%); }
.att-pow .s1 { background: #12001c; transform: scale(1.08); }
.att-pow .s2 { background: radial-gradient(circle, rgba(255, 255, 255, .55) 0 18%, transparent 19%) 0 0 / calc(var(--u) * 1.3) calc(var(--u) * 1.3), #ffe066; }
.att-pow[data-hue="p"] .s2 { background-color: #ff6fd0; }
.att-pow[data-hue="c"] .s2 { background-color: #3de8ff; }
.att-pow span { position: relative; font: 900 calc(var(--u) * var(--s, 30) * .2) Impact, 'Arial Black', sans-serif; color: #ff1f4b; letter-spacing: .02em;
  transform: rotate(-6deg); -webkit-text-stroke: calc(var(--u) * .25) #12001c; text-shadow: calc(var(--u) * .5) calc(var(--u) * .5) 0 #12001c; white-space: nowrap; }
.att-pow[data-hue="p"] span, .att-pow[data-hue="c"] span { color: #fff; }
@keyframes attPow  { 0% { opacity: 0; transform: scale(0) rotate(-50deg); } 14% { opacity: 1; transform: scale(1.25) rotate(var(--r)); }
  24% { transform: scale(.95) rotate(var(--r)); } 32%, 82% { opacity: 1; transform: scale(1) rotate(var(--r)); } 100% { opacity: 0; transform: scale(1.5) rotate(var(--r)); } }
@keyframes attPow2 { 0% { opacity: 0; transform: scale(0) rotate(50deg); } 14% { opacity: 1; transform: scale(1.25) rotate(var(--r)); }
  24% { transform: scale(.95) rotate(var(--r)); } 32%, 82% { opacity: 1; transform: scale(1) rotate(var(--r)); } 100% { opacity: 0; transform: scale(1.5) rotate(var(--r)); } }

/* "AS SEEN ON TV" starburst badge */
.att-tv { position: absolute; width: calc(var(--u) * 17); height: calc(var(--u) * 17); display: flex; align-items: center; justify-content: center;
  animation: attTvWob 2.4s ease-in-out infinite; will-change: transform; z-index: 2; }
.att-tv::before { content: ""; position: absolute; inset: 0; background: #ff1f4b; box-shadow: inset 0 0 0 calc(var(--u) * .6) #ffe066;
  clip-path: polygon(50% 0, 61% 12%, 75% 4%, 79% 20%, 95% 21%, 90% 36%, 100% 50%, 90% 64%, 95% 79%, 79% 80%, 75% 96%, 61% 88%, 50% 100%, 39% 88%, 25% 96%, 21% 80%, 5% 79%, 10% 64%, 0 50%, 10% 36%, 5% 21%, 21% 20%, 25% 4%, 39% 12%); }
.att-tv span { position: relative; white-space: pre; text-align: center; font: 900 calc(var(--u) * 2.4) / 1.05 'Arial Black', Impact, sans-serif;
  color: #ffe066; text-shadow: calc(var(--u) * .25) calc(var(--u) * .25) 0 #6b0018; transform: rotate(-10deg); }
@keyframes attTvWob { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.08); } }

/* cameo flyby (rubber chicken / unicorn cat): positioned by JS transform */
.att-cameo { position: absolute; left: 0; top: 0; z-index: 42; display: none; pointer-events: none; will-change: transform;
  width: calc(var(--u) * 26); height: calc(var(--u) * 14.3); margin: calc(var(--u) * -7.15) 0 0 calc(var(--u) * -13); }
.att-cameo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.att-cameo .trail { display: none; }
.att-cameo.cat { width: calc(var(--u) * 22); height: calc(var(--u) * 14.7); margin: calc(var(--u) * -7.35) 0 0 calc(var(--u) * -11); }
.att-cameo.cat .trail { display: block; position: absolute; right: 78%; top: 30%; height: 44%; width: calc(var(--u) * 60);
  background: linear-gradient(180deg, #ff1f4b 0 16.6%, #ff9a2e 16.6% 33.3%, #ffe066 33.3% 50%, #3dff8a 50% 66.6%, #22e0ff 66.6% 83.3%, #b06cff 83.3%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%);
  animation: attTrail .3s steps(2, jump-none) infinite; }
@keyframes attTrail { from { transform: translateY(-6%); } to { transform: translateY(6%); } }

/* rubber stamp */
.att-stamp { position: absolute; padding: calc(var(--u) * .5) calc(var(--u) * 1.2); border: calc(var(--u) * .45) double #e0123f; border-radius: calc(var(--u) * .8);
  color: #e0123f; font: 900 calc(var(--u) * 2.2) / 1 'Arial Black', Impact, sans-serif; letter-spacing: calc(var(--u) * .15); text-align: center;
  white-space: nowrap; transform: rotate(-14deg); opacity: .88; background: rgba(255, 255, 255, .12); }

/* ---------- Kitsch per scene ---------- */
/* logo: rainbow arc, lens-flare chain, googly eyes peeking over the logo */
.att-rainbow { position: absolute; left: 50%; top: calc(var(--u) * 6); width: calc(var(--u) * 124); height: calc(var(--u) * 62);
  margin-left: calc(var(--u) * -62); overflow: hidden; opacity: .7; }
.att-rainbow::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 200%; border-radius: 50%;
  background: radial-gradient(circle closest-side, transparent 0 63%, #b06cff 63% 68%, #22e0ff 68% 73%, #3dff8a 73% 78%, #ffe066 78% 83%, #ff9a2e 83% 88%, #ff1f4b 88% 93%, transparent 93%); }
.att-flares { position: absolute; left: 50%; top: 42%; width: 0; height: 0; animation: attSpin 18s linear infinite; will-change: transform; z-index: 1; pointer-events: none; }
@keyframes attSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.att-flares i { position: absolute; top: 0; left: 0; border-radius: 50%; width: calc(var(--u) * var(--s)); height: calc(var(--u) * var(--s));
  margin: calc(var(--u) * var(--s) * -.5) 0 0 calc(var(--u) * var(--s) * -.5); transform: translateX(calc(var(--u) * var(--x))); }
.att-flares i:nth-child(1) { --x: 74; --s: 16; background: radial-gradient(circle, #fff 0 8%, rgba(255, 240, 200, .8) 14%, rgba(255, 120, 200, .25) 40%, transparent 70%); }
.att-flares i:nth-child(1)::after { content: ""; position: absolute; left: -150%; right: -150%; top: 46%; height: 8%;
  background: linear-gradient(90deg, transparent, rgba(190, 230, 255, .9), transparent); }
.att-flares i:nth-child(2) { --x: 46; --s: 5; background: rgba(34, 224, 255, .22); }
.att-flares i:nth-child(3) { --x: 30; --s: 9; background: radial-gradient(circle, transparent 55%, rgba(255, 110, 200, .35) 62%, transparent 72%); }
.att-flares i:nth-child(4) { --x: -16; --s: 4; background: rgba(255, 230, 102, .3); }
.att-flares i:nth-child(5) { --x: -34; --s: 12; background: radial-gradient(circle, rgba(176, 108, 255, .22) 0 50%, transparent 70%); }
.att-flares i:nth-child(6) { --x: -56; --s: 7; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); background: rgba(61, 255, 154, .22); }
.att-flares i:nth-child(7) { --x: -78; --s: 18; background: radial-gradient(circle, transparent 60%, rgba(34, 224, 255, .25) 66%, transparent 74%); }
.att-logo .inner .att-eyes { left: 50%; top: 4%; font-size: calc(var(--u) * 7); z-index: 2; }
.att-logo .att-tv { right: 6%; top: calc(var(--u) * 13); }
.att-logo .name { font-size: calc(var(--u) * 9.5); letter-spacing: calc(var(--u) * .4); }
.att-logo .name .att-ch, .att-logo .name .goo { animation: attDrop .8s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(900ms + var(--i) * 70ms); }
#attract-layer[data-scene="logo"] .att-tagline { top: calc(var(--u) * 1.8); font-size: calc(var(--u) * 4.4); }

/* logo without a configured logo: the googly PHOTOBOOTH is the star */
.att-logo.nologo .wrap, .att-logo.nologo .att-flares { display: none; }
.att-logo.nologo .name { top: calc(var(--u) * 36); font-size: calc(var(--u) * 15); }

/* disco: the mirror ball has googly eyes */
.att-disco .ball-eyes { left: 50%; top: 20.5%; font-size: calc(var(--u) * 7.4); z-index: 1; }
.att-disco .title { font-size: calc(var(--u) * 7); }

/* countdown: rubber stamp slams onto the polaroid frame after the snap */
.att-count .polaroid .att-stamp { right: calc(var(--u) * -4); bottom: calc(var(--u) * 12); font-size: calc(var(--u) * 2.6); opacity: 0; transform: rotate(-14deg) scale(3); }
.att-count .polaroid.snap .att-stamp { animation: attStamp .45s cubic-bezier(.5, 0, .7, 1.4) .55s both; }
@keyframes attStamp { from { opacity: 0; transform: rotate(-24deg) scale(3); } to { opacity: .9; transform: rotate(-14deg) scale(1); } }
.att-count .polaroid .cap { font-size: calc(var(--u) * 3.8); }

/* gallery: small stamps on some strips (corner only) */
.att-gallery .card .att-stamp { right: calc(var(--u) * -1); bottom: calc(var(--u) * 2); font-size: calc(var(--u) * 1.7); background: rgba(255, 255, 255, .8); }
.att-gallery .att-title { font-size: calc(var(--u) * 6); top: calc(var(--u) * 8); }


/* ---------- Explosions (Booms in attract.js; public/fx/*.webm, VP9 + alpha) ----------
   In the classic idle the bursts sit on the attract layer under the cameo/tagline/
   comic pops (42-44); in a scene they move inside it (see below). The full-stage
   fireball goes over the wipe (50). visibility, not display, so the
   clips keep their preloaded data between bursts. */
.att-booms { position: absolute; inset: 0; z-index: 41; pointer-events: none; }
.att-booms.big { z-index: 55; }
/* inside a scene (mountFx): no stacking context, so the bursts paint in DOM
   order, after the background + lava and before the scene's text */
.att-scene > .att-booms { z-index: auto; }
/* Safari stacked-alpha path (FX_STACKED in attract.js): the <video>s only
   decode; a canvas per layer shows the composited frame. Kept in the DOM, at
   their natural size and "visible" to the engine (iOS won't decode a
   display:none video; WebKit on Windows decoded a 1-px box at 1x1), opacity 0. */
.att-boom-src { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; z-index: -1; }
.att-boom { position: absolute; display: block; visibility: hidden; left: 50%; top: 50%;
  height: calc(var(--u) * var(--h, 50)); width: auto; aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%) scaleX(var(--fx, 1)); }
.att-boom.on { visibility: visible; }
.att-booms.big .att-boom { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(var(--fx, 1)); }

/* Lava pool (Lava in attract.js): small canvas stretched over the bottom of the
   current scene, above its background and below its text/banners */
.att-lava { position: absolute; left: 0; bottom: 0; width: 100%; height: 30%; display: block; pointer-events: none; }

/* ---------- Vintage film look + kitsch marquee bulbs (scenes only) ----------
   Everything here animates transform/opacity only (compositor). Full-stage
   layers are mostly transparent; the grain is a 192-px tile. Scratches and
   dust are full-stage layers translated by % of the stage. */
.att-film, .att-bulbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.att-film { z-index: 46; }
.att-bulbs { z-index: 47; }
#attract-layer[data-scene="classic"] .att-film,
#attract-layer[data-scene="classic"] .att-bulbs { display: none; }
.att-film > div { position: absolute; inset: 0; }
.att-film .grain { inset: -8%; background-size: calc(var(--u) * 18) calc(var(--u) * 18); will-change: transform;
  animation: attGrain .48s steps(1) infinite; }
@keyframes attGrain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-3%, 2%); } 33% { transform: translate(2%, -4%); }
  50% { transform: translate(-4%, -1%); } 67% { transform: translate(3%, 3%); } 83% { transform: translate(-1%, 4%); }
}
.att-film .wash { background: radial-gradient(ellipse at 50% 48%, rgba(40, 18, 0, 0) 52%, rgba(40, 18, 0, .62) 100%), rgba(255, 176, 90, .1); }
.att-film .flick { background: #1a0c00; opacity: 0; animation: attFlick 1.9s steps(1) infinite; }
@keyframes attFlick { 0% { opacity: 0; } 12% { opacity: .08; } 16% { opacity: 0; } 44% { opacity: .05; } 47% { opacity: 0; } 70% { opacity: .1; } 73% { opacity: 0; } }
.att-film .scratch { background: linear-gradient(90deg, rgba(255, 250, 225, .5) 0 2px, transparent 2px); will-change: transform, opacity; }
.att-film .s1 { animation: attScratch1 2.3s steps(1) infinite; }
.att-film .s2 { animation: attScratch2 3.1s steps(1) infinite; }
@keyframes attScratch1 { 0% { transform: translateX(23%); opacity: .9; } 18% { opacity: 0; } 40% { transform: translateX(64%); opacity: .7; } 55% { opacity: 0; } 70% { transform: translateX(12%); opacity: .8; } 86% { opacity: 0; } }
@keyframes attScratch2 { 0% { transform: translateX(81%); opacity: .6; } 25% { opacity: 0; } 52% { transform: translateX(37%); opacity: .8; } 63% { opacity: 0; } 80% { transform: translateX(55%); opacity: .5; } 92% { opacity: 0; } }
.att-film .dust { will-change: transform, opacity; animation: attDust 1.3s steps(1) infinite;
  background:
    radial-gradient(circle at 18% 30%, rgba(25, 12, 0, .75) 0 calc(var(--u) * .35), transparent calc(var(--u) * .5)),
    radial-gradient(ellipse at 66% 72%, rgba(25, 12, 0, .7) 0 calc(var(--u) * .25), transparent calc(var(--u) * .45)),
    radial-gradient(circle at 42% 58%, rgba(255, 250, 225, .6) 0 calc(var(--u) * .3), transparent calc(var(--u) * .45)); }
@keyframes attDust { 0% { transform: translate(0, 0); opacity: 1; } 20% { opacity: 0; } 35% { transform: translate(27%, -18%); opacity: 1; } 50% { opacity: 0; } 62% { transform: translate(-31%, 12%); opacity: .8; } 80% { transform: translate(12%, 25%); opacity: 1; } 92% { opacity: 0; } }

/* Marquee bulbs around the stage: two interleaved rows blinking in turn = chase */
.att-bulbs > div { position: absolute; inset: calc(var(--u) * .4); --b: calc(var(--u) * 3.4);
  --bulb: radial-gradient(circle, #fffbe6 0 13%, #ffd23a 27%, rgba(255, 166, 0, .55) 40%, rgba(255, 140, 0, 0) 60%);
  background: var(--bulb) 0 0 / var(--b) var(--b) repeat-x, var(--bulb) 0 100% / var(--b) var(--b) repeat-x,
              var(--bulb) 0 0 / var(--b) var(--b) repeat-y, var(--bulb) 100% 0 / var(--b) var(--b) repeat-y;
  animation: attBulb .56s steps(1) infinite; }
.att-bulbs .b2 { background-position: calc(var(--b) / 2) 0, calc(var(--b) / 2) 100%, 0 calc(var(--b) / 2), 100% calc(var(--b) / 2);
  animation-delay: -.28s; }
@keyframes attBulb { 0% { opacity: 1; } 50% { opacity: .22; } }

/* ---------- Attract scene on screen: the idle corner buttons step aside ----------
   (any key/click snaps back to classic, which brings them back) */
body.att-scene-on #settings-btn, body.att-scene-on #qr-btn, body.att-scene-on #strip-btn,
body.att-scene-on #videoclub-btn, body.att-scene-on #game-open-btn, body.att-scene-on #mobile-menu-toggle {
  visibility: hidden !important; pointer-events: none !important;
}

/* ---------- Version tag (idle, discreet) ---------- */
#pb-version-tag {
  position: absolute; left: 24px; bottom: 3px; z-index: 7; pointer-events: none;
  font-family: 'PhotoboothFont', Arial, sans-serif; color: #fff; opacity: .38;
  font-size: clamp(10px, 1.05vh, 15px); letter-spacing: .08em; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
body.is-mobile #pb-version-tag { display: none; }

/* ---------- Reduced motion: keep the scenes, drop the motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #attract-layer *, #attract-layer *::before, #attract-layer *::after {
    animation-duration: .001s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  }
  .att-scene.fade-in { animation: attFadeIn .8s ease both !important; }
  .att-scene.on, #attract-layer.hit-a .att-scene.on, #attract-layer.hit-b .att-scene.on { transform: none; scale: none; }
  .att-count .flash { display: none; }
}

/* ==========================================================================
   Scenes with their own vibe (attract.js NeonScene, ZenScene, NewsScene,
   DesktopScene): no film grain / marquee bulbs over them, no drift punch.
   Transform/opacity animations only.
   ========================================================================== */
#attract-layer[data-scene="neon"] .att-film, #attract-layer[data-scene="neon"] .att-bulbs,
#attract-layer[data-scene="zen"] .att-film, #attract-layer[data-scene="zen"] .att-bulbs,
#attract-layer[data-scene="news"] .att-film, #attract-layer[data-scene="news"] .att-bulbs,
#attract-layer[data-scene="desktop"] .att-film, #attract-layer[data-scene="desktop"] .att-bulbs { display: none; }
.att-zen.on, .att-news.on, .att-desktop.on { animation: none; }
.att-zen.on.fade-in, .att-news.on.fade-in, .att-desktop.on.fade-in { animation: attFadeIn .8s ease both; }
/* rotating lines (.on enters, .out leaves) */
.nn-sub, .zn-line, .nw-head { opacity: 0; }

/* ---------- Neon night ---------- */
.att-neon .att-bg { position: absolute; inset: 0;
  background: linear-gradient(180deg, #07011a 0%, #1d0a3d 38%, #5b136b 54%, #ff2e88 63%, #12022a 63.2%, #12022a 100%); }
.nn-stars { position: absolute; inset: 0 0 40% 0; opacity: .8;
  background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 32%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 47% 12%, #fff, transparent), radial-gradient(1px 1px at 63% 28%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 78% 16%, #fff, transparent), radial-gradient(1px 1px at 88% 36%, #fff, transparent),
    radial-gradient(1px 1px at 8% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 38% 44%, #fff, transparent);
  animation: nnTwinkle 3.2s ease-in-out infinite alternate; }
@keyframes nnTwinkle { to { opacity: .35; } }
.nn-sun { position: absolute; left: 50%; top: calc(var(--u) * 30); width: calc(var(--u) * 38); height: calc(var(--u) * 38); margin-left: calc(var(--u) * -19);
  border-radius: 50%; background: linear-gradient(180deg, #ffe66d 0%, #ff9a3c 45%, #ff2e88 85%);
  -webkit-mask: linear-gradient(180deg, #000 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82% 88%, transparent 88%);
          mask: linear-gradient(180deg, #000 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82% 88%, transparent 88%);
  animation: nnSun 6s ease-in-out infinite alternate; }
@keyframes nnSun { to { transform: translateY(calc(var(--u) * 2)) scale(1.03); } }
.nn-mount { position: absolute; left: 0; right: 0; top: calc(var(--u) * 47); height: calc(var(--u) * 17); background: #12022a;
  clip-path: polygon(0 100%, 0 70%, 8% 38%, 15% 62%, 24% 20%, 33% 58%, 40% 44%, 47% 72%, 53% 70%, 60% 36%, 68% 60%, 76% 14%, 85% 52%, 92% 34%, 100% 64%, 100% 100%); }
.nn-grid { position: absolute; left: 0; right: 0; top: 63%; bottom: 0; perspective: calc(var(--u) * 18); perspective-origin: 50% 0; overflow: hidden; }
.nn-floor { position: absolute; left: -100%; right: -100%; top: 0; height: 200%; transform-origin: 50% 0; transform: rotateX(62deg); }
.nn-floor i { position: absolute; inset: -10% 0 0 0;
  background-image: linear-gradient(90deg, rgba(255, 46, 136, .9) 2px, transparent 2px), linear-gradient(0deg, rgba(34, 224, 255, .9) 2px, transparent 2px);
  background-size: calc(var(--u) * 8) calc(var(--u) * 8); animation: nnFloor 1.2s linear infinite; }
@keyframes nnFloor { to { transform: translateY(calc(var(--u) * 8)); } }
.nn-sign { position: absolute; left: 0; right: 0; top: calc(var(--u) * 7); text-align: center; transform: rotate(-4deg); }
.nn-title { font: italic 900 calc(var(--u) * 12)/0.95 'Arial Black', Impact, sans-serif; letter-spacing: calc(var(--u) * .6); color: #fff;
  text-shadow: 0 0 calc(var(--u) * .6) #fff, 0 0 calc(var(--u) * 2) #ff2e88, 0 0 calc(var(--u) * 5) #ff2e88; }
.nn-title.b { color: #c9fbff; text-shadow: 0 0 calc(var(--u) * .6) #fff, 0 0 calc(var(--u) * 2) #22e0ff, 0 0 calc(var(--u) * 5) #22e0ff;
  animation: nnFlicker 5s steps(1) infinite; }
@keyframes nnFlicker { 0%, 61%, 64%, 66%, 100% { opacity: 1; } 62%, 65% { opacity: .35; } }
.nn-sub { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 8); text-align: center;
  font: 700 calc(var(--u) * 4.6) 'Courier New', monospace; letter-spacing: calc(var(--u) * .5); color: #ffe66d;
  text-shadow: 0 0 calc(var(--u) * 1.2) #ff9a3c; }
.nn-sub.on { animation: nnSubIn .35s steps(4) both, nnBlink 1s steps(1) .35s infinite; }
.nn-sub.out { animation: attOut .3s ease both; }
@keyframes nnSubIn { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }
@keyframes nnBlink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .15; } }
@keyframes attOut { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Zen ---------- */
.att-zen .att-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #fde2e4 0%, #e2ece9 45%, #dfe7fd 100%); }
.zn-blob { position: absolute; border-radius: 50%; opacity: .75; will-change: transform; }
.zn-blob.z1 { width: calc(var(--u) * 60); height: calc(var(--u) * 60); left: -8%; top: -18%; background: radial-gradient(circle, #ffc8dd 0%, rgba(255, 200, 221, 0) 70%); animation: znFloat1 16s ease-in-out infinite alternate; }
.zn-blob.z2 { width: calc(var(--u) * 70); height: calc(var(--u) * 70); right: -12%; bottom: -30%; background: radial-gradient(circle, #bde0fe 0%, rgba(189, 224, 254, 0) 70%); animation: znFloat2 19s ease-in-out infinite alternate; }
.zn-blob.z3 { width: calc(var(--u) * 44); height: calc(var(--u) * 44); left: 40%; top: 55%; background: radial-gradient(circle, #cdeac0 0%, rgba(205, 234, 192, 0) 70%); animation: znFloat1 14s ease-in-out -5s infinite alternate-reverse; }
.zn-blob.z4 { width: calc(var(--u) * 36); height: calc(var(--u) * 36); left: 70%; top: 5%; background: radial-gradient(circle, #ffe5b4 0%, rgba(255, 229, 180, 0) 70%); animation: znFloat2 17s ease-in-out -8s infinite alternate; }
.zn-blob.z5 { width: calc(var(--u) * 30); height: calc(var(--u) * 30); left: 12%; top: 60%; background: radial-gradient(circle, #e0c3fc 0%, rgba(224, 195, 252, 0) 70%); animation: znFloat2 21s ease-in-out -3s infinite alternate-reverse; }
@keyframes znFloat1 { to { transform: translate(calc(var(--u) * 14), calc(var(--u) * 9)) scale(1.12); } }
@keyframes znFloat2 { to { transform: translate(calc(var(--u) * -12), calc(var(--u) * -8)) scale(.92); } }
.zn-ring { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 56); height: calc(var(--u) * 56); margin: calc(var(--u) * -28) 0 0 calc(var(--u) * -28);
  border-radius: 50%; border: 1px solid rgba(90, 80, 110, .25); animation: znBreathe 8s ease-in-out infinite; }
@keyframes znBreathe { 0%, 100% { transform: scale(.86); opacity: .5; } 50% { transform: scale(1.06); opacity: 1; } }
.zn-line { position: absolute; left: 0; right: 0; top: 50%; margin-top: calc(var(--u) * -5); text-align: center;
  font: italic 400 calc(var(--u) * 8.5)/1.1 Georgia, 'Times New Roman', serif; color: #4a4458; letter-spacing: .02em; }
.zn-line.on { animation: znIn 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.zn-line.out { animation: znOut .9s ease both; }
@keyframes znIn { from { opacity: 0; transform: translateY(calc(var(--u) * 2.5)); } to { opacity: 1; transform: none; } }
@keyframes znOut { from { opacity: 1; } to { opacity: 0; transform: translateY(calc(var(--u) * -2)); } }
.zn-mark { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 7); text-align: center;
  font: 400 calc(var(--u) * 2.4) Georgia, serif; letter-spacing: calc(var(--u) * .9); color: #7a7088; text-transform: lowercase; }

/* ---------- Breaking news ---------- */
.att-news .att-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, #1f4fa8 0%, #0b1e4a 55%, #050d24 100%); }
.nw-beams { position: absolute; inset: -20%; opacity: .25;
  background: repeating-conic-gradient(from 0deg at 50% 30%, rgba(255, 255, 255, .5) 0 4deg, transparent 4deg 18deg);
  animation: nwSpin 40s linear infinite; }
@keyframes nwSpin { to { transform: rotate(360deg); } }
.nw-live { position: absolute; left: 4%; top: calc(var(--u) * 5); padding: calc(var(--u) * .8) calc(var(--u) * 2); background: #d90429; color: #fff;
  font: 900 calc(var(--u) * 3.4) 'Arial Black', Arial, sans-serif; letter-spacing: calc(var(--u) * .3); display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
.nw-live i { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); border-radius: 50%; background: #fff; animation: nnBlink 1.2s steps(1) infinite; }
.nw-bug { position: absolute; right: 4%; top: calc(var(--u) * 5); display: flex; align-items: center; gap: calc(var(--u) * 1.5);
  font: 700 calc(var(--u) * 3.2) Arial, sans-serif; color: #fff; }
.nw-bug b { padding: calc(var(--u) * .6) calc(var(--u) * 1.4); border: 2px solid #fff; font-weight: 900; letter-spacing: calc(var(--u) * .2); }
.nw-flash { position: absolute; left: 0; right: 0; top: calc(var(--u) * 28); text-align: center; color: #fff;
  font: italic 900 calc(var(--u) * 13) 'Arial Black', Impact, sans-serif; letter-spacing: calc(var(--u) * .2);
  background: linear-gradient(90deg, transparent, #d90429 12%, #d90429 88%, transparent); padding: calc(var(--u) * 2) 0;
  transform-origin: 50% 50%; animation: nwFlash 4.8s cubic-bezier(.2, 1.3, .4, 1) infinite; }
@keyframes nwFlash { 0% { transform: translateX(-110%) skewX(-12deg); } 12%, 88% { transform: none; } 100% { transform: translateX(110%) skewX(-12deg); } }
.nw-third { position: absolute; left: 6%; right: 6%; bottom: calc(var(--u) * 17); display: flex; align-items: stretch; }
.nw-label { flex: 0 0 auto; display: flex; align-items: center; padding: 0 calc(var(--u) * 2.4); background: #d90429; color: #fff;
  font: 900 calc(var(--u) * 3.6) 'Arial Black', Arial, sans-serif; }
.nw-heads { position: relative; flex: 1; height: calc(var(--u) * 10); background: #fff; overflow: hidden; }
.nw-head { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 calc(var(--u) * 2.4); color: #0b1e4a;
  font: 900 calc(var(--u) * 4.2)/1 Arial, sans-serif; white-space: nowrap; }
.nw-head.on { animation: nwHeadIn .6s cubic-bezier(.2, .9, .3, 1) both; }
.nw-head.out { animation: nwHeadOut .5s ease both; }
@keyframes nwHeadIn { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes nwHeadOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-100%); } }
.nw-ticker { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 6); height: calc(var(--u) * 6.5); display: flex; background: #ffd60a; overflow: hidden; }
.nw-tlabel { flex: 0 0 auto; z-index: 1; display: flex; align-items: center; padding: 0 calc(var(--u) * 2); background: #0b1e4a; color: #ffd60a;
  font: 900 calc(var(--u) * 2.8) 'Arial Black', Arial, sans-serif; }
.nw-track { position: relative; flex: 1; overflow: hidden; }
.nw-track .run { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; white-space: nowrap; color: #0b1e4a;
  font: 800 calc(var(--u) * 3.2) Arial, sans-serif; animation: nwRun 30s linear infinite; }
@keyframes nwRun { from { transform: translateX(0); } to { transform: translateX(-66.66%); } }

/* ---------- Y2K desktop ---------- */
.att-desktop { --dk-face: #c0c0c0; --dk-raised: inset -2px -2px 0 #000, inset 2px 2px 0 #fff, inset -4px -4px 0 #808080, inset 4px 4px 0 #dfdfdf;
  font-family: Tahoma, 'MS Sans Serif', Verdana, sans-serif; color: #000; }
.att-desktop .att-bg { position: absolute; inset: 0; background: #008080; }
.dk-icons { position: absolute; left: 2.5%; top: calc(var(--u) * 4); display: flex; flex-direction: column; gap: calc(var(--u) * 3.5); }
.dk-icon { width: calc(var(--u) * 13); text-align: center; color: #fff; }
.dk-icon span { display: block; font-size: calc(var(--u) * 6.5); line-height: 1.1; }
.dk-icon small { display: inline-block; font-size: calc(var(--u) * 2.1); padding: 0 calc(var(--u) * .5); }
.dk-icon:first-child small { background: #000080; outline: 1px dotted #fff; }
.dk-win { position: absolute; background: var(--dk-face); box-shadow: var(--dk-raised), calc(var(--u) * .8) calc(var(--u) * .8) 0 rgba(0, 0, 0, .4); padding: 4px; }
.dk-title { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * .4) calc(var(--u) * .8); color: #fff;
  background: linear-gradient(90deg, #000080, #1084d0); font-weight: 700; font-size: calc(var(--u) * 2.6); }
.dk-ctl { display: flex; gap: 3px; }
.dk-ctl i { font-style: normal; width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.3); display: grid; place-items: center; color: #000;
  font-size: calc(var(--u) * 1.8); background: var(--dk-face); box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff; }
.dk-body { padding: calc(var(--u) * 2) calc(var(--u) * 2.5); font-size: calc(var(--u) * 2.8); }
.dk-body.row { display: flex; gap: calc(var(--u) * 2); align-items: center; }
.dk-win.main { left: 25%; top: calc(var(--u) * 12); width: 50%; }
.dk-big { font: 900 calc(var(--u) * 6.5) 'Arial Black', Tahoma, sans-serif; color: #000080; text-align: center; margin-bottom: calc(var(--u) * 2); }
.dk-txt { margin: calc(var(--u) * 1) 0; }
.dk-txt.small { font-size: calc(var(--u) * 2.2); color: #333; }
.dk-bar { height: calc(var(--u) * 3.6); padding: 3px; background: #fff; box-shadow: inset 2px 2px 0 #808080, inset -2px -2px 0 #fff; overflow: hidden; }
.dk-bar i { display: block; height: 100%; transform-origin: 0 50%;
  background: repeating-linear-gradient(90deg, #000080 0 calc(var(--u) * 1.8), transparent calc(var(--u) * 1.8) calc(var(--u) * 2.3));
  animation: dkProgress 7s steps(16) infinite; }
@keyframes dkProgress { 0% { transform: scaleX(0); } 85%, 100% { transform: scaleX(1); } }
.dk-win.pop { width: 34%; opacity: 0; transform: scale(.6); transition: opacity .12s, transform .18s cubic-bezier(.2, 1.4, .4, 1); }
.dk-win.pop.on { opacity: 1; transform: none; }
.dk-win.pop.p0 { left: 9%; top: calc(var(--u) * 47); }
.dk-win.pop.p1 { left: 58%; top: calc(var(--u) * 43); }
.dk-win.pop.p2 { left: 22%; top: calc(var(--u) * 66); }
.dk-win.pop.p3 { left: 54%; top: calc(var(--u) * 69); }
.dk-ico { font-size: calc(var(--u) * 6); }
.dk-body b { display: block; margin-bottom: calc(var(--u) * .6); }
.dk-btns { display: flex; justify-content: center; gap: calc(var(--u) * 1.5); padding: 0 0 calc(var(--u) * 1.5); }
.dk-btn { min-width: calc(var(--u) * 11); padding: calc(var(--u) * .7) calc(var(--u) * 1.5); text-align: center; font-size: calc(var(--u) * 2.4);
  background: var(--dk-face); box-shadow: var(--dk-raised); }
.dk-btn:first-child { outline: 1px dotted #000; outline-offset: -6px; }
.dk-cursor { position: absolute; left: 0; top: 0; width: calc(var(--u) * 3.2); height: calc(var(--u) * 5); z-index: 5;
  background: #fff; clip-path: polygon(0 0, 0 78%, 22% 60%, 40% 100%, 56% 94%, 38% 56%, 70% 56%);
  animation: dkCursor 12s ease-in-out infinite; }
@keyframes dkCursor {
  0%   { transform: translate(calc(var(--u) * 20), calc(var(--u) * 80)); }
  20%  { transform: translate(calc(var(--u) * 52), calc(var(--u) * 52)); }
  30%  { transform: translate(calc(var(--u) * 50), calc(var(--u) * 64)); }
  50%  { transform: translate(calc(var(--u) * 115), calc(var(--u) * 58)); }
  70%  { transform: translate(calc(var(--u) * 90), calc(var(--u) * 78)); }
  100% { transform: translate(calc(var(--u) * 20), calc(var(--u) * 80)); }
}
.dk-task { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 5.5); display: flex; align-items: center; gap: calc(var(--u) * 1);
  padding: 0 calc(var(--u) * .8); background: var(--dk-face); box-shadow: inset 0 2px 0 #fff; font-size: calc(var(--u) * 2.5); }
.dk-start { padding: calc(var(--u) * .5) calc(var(--u) * 1.5); font-weight: 900; box-shadow: var(--dk-raised); }
.dk-tab { padding: calc(var(--u) * .5) calc(var(--u) * 1.5); min-width: 22%; box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #fff; background: #dfdfdf; }
.dk-clock { margin-left: auto; padding: calc(var(--u) * .5) calc(var(--u) * 1.8); box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; }

@media (prefers-reduced-motion: reduce) {
  .nn-floor i, .nn-sun, .nn-stars, .zn-blob, .zn-ring, .nw-beams, .nw-flash, .nw-track .run, .dk-cursor { animation: none !important; }
}

/* Lite mode (attract.js setLite, automatic on a booth that can't keep up):
   no scene drift / punch, no animated film grain, scratches, dust or flicker
   (the warm vignette stays), no marquee bulbs */
#attract-layer.att-lite .att-scene.on,
#attract-layer.att-lite.hit-a .att-scene.on,
#attract-layer.att-lite.hit-b .att-scene.on { animation: none; will-change: auto; }
#attract-layer.att-lite .att-scene.on.fade-in { animation: attFadeIn .8s ease both; }
#attract-layer.att-lite .att-film .grain,
#attract-layer.att-lite .att-film .flick,
#attract-layer.att-lite .att-film .scratch,
#attract-layer.att-lite .att-film .dust,
#attract-layer.att-lite .att-bulbs { display: none; }