/* COOKING · Night Market motion
   Stepped, game-like timing. Hidden starting states only apply once motion.js adds
   html.motion, so the page is fully visible without JavaScript or with reduced motion. */

/* Pixel text builds in, pixel by pixel */
html.motion [data-pixel].px-reveal:not(.px-in) rect { opacity: 0; }
html.motion [data-pixel].px-reveal.px-in:not(.px-done) rect { animation: px-on 1ms linear var(--d, 0ms) both; }
@keyframes px-on { from { opacity: 0; } to { opacity: 1; } }

/* Hero entrance: short stepped rise */
html.motion .prise { opacity: 0; transform: translateY(8px); }
html.motion .prise.in { animation: prise .32s steps(4, end) var(--delay, 0ms) both; }
@keyframes prise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Windows and panels open like game boxes */
html.motion .boot { clip-path: inset(0 0 100% 0); }
html.motion .boot.in { animation: boot .36s steps(6, end) var(--delay, 0ms) both; }
@keyframes boot { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(-8px -8px -8px -8px); } }
html.motion .dialog.boot { clip-path: inset(-8px 50% -8px 50%); }
html.motion .dialog.boot.in { animation-name: boot-wide; animation-duration: .4s; }
@keyframes boot-wide { from { clip-path: inset(-8px 50% -8px 50%); } to { clip-path: inset(-8px -8px -8px -8px); } }

/* Token meters fill in steps */
html.motion .hud-card .meter { --v-now: 0; }
html.motion .hud-card.in .meter { animation: meter .7s steps(10, end) calc(var(--delay, 0ms) + 200ms) both; }
html.motion .hud-card .meter { background: linear-gradient(90deg, var(--fill) calc(var(--v-now) * 10%), #2a2340 0); }
@property --v-now { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes meter { from { --v-now: 0; } to { --v-now: var(--v); } }
html.motion .hud-card.passed.in { animation: boot .36s steps(6, end) var(--delay, 0ms) both, pass-blink .9s steps(2, end) calc(var(--delay, 0ms) + 700ms) 2; }
@keyframes pass-blink { 50% { --edge-c: #ffffff; } }

/* Fireflies drifting through the scene */
.fireflies { position: absolute; z-index: 0; inset: 0; pointer-events: none; overflow: hidden; }
.firefly { position: absolute; width: 4px; height: 4px; background: var(--lamp); box-shadow: 0 0 8px 2px rgba(242, 180, 90, .55); opacity: 0; animation: drift var(--dur, 9s) steps(36, end) var(--delay, 0s) infinite; }
.firefly.cool { background: var(--lav); box-shadow: 0 0 8px 2px rgba(191, 167, 255, .5); }
@keyframes drift {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: .9; }
  50% { transform: translate(var(--dx, 16px), -70px); opacity: .7; }
  88% { opacity: .85; }
  100% { opacity: 0; transform: translate(calc(var(--dx, 16px) * -0.5), -150px); }
}
@media (max-width: 900px) { .fireflies { display: none; } }

/* Ticker tape of example screens */
.tape { position: relative; overflow: hidden; padding-block: 14px; border-block: 3px solid #1a1626; background: #0e0b18; }
.tape::before, .tape::after { content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; width: 80px; pointer-events: none; }
.tape::before { left: 0; background: linear-gradient(90deg, #0e0b18, transparent); }
.tape::after { right: 0; background: linear-gradient(-90deg, #0e0b18, transparent); }
.tape-track { display: flex; gap: 40px; width: max-content; padding-left: 40px; font: 500 12.5px var(--mono); letter-spacing: .04em; white-space: nowrap; }
html.motion .tape-track { animation: tape 38s linear infinite; }
.tape:hover .tape-track { animation-play-state: paused; }
@keyframes tape { to { transform: translateX(-50%); } }
.tape-item b { color: var(--lamp); font-weight: 600; }
.tape-item .no { color: var(--rug); }
.tape-item .ok { color: var(--pass); }
.tape-item .tag { margin-left: 8px; padding: 2px 6px; background: #1a1626; text-transform: uppercase; font-size: 11px; }
.tape-label { position: absolute; z-index: 2; right: 12px; top: 50%; transform: translateY(-50%); padding: 3px 8px; background: #0e0b18; color: var(--quiet); font: 11px var(--mono); }

/* Stat "OFF" flickers on like a sign */
html.motion .pixel-stat.flicker.in { animation: flicker 1s steps(1, end) .1s both; }
@keyframes flicker { 0%, 18%, 34% { opacity: .15; } 10%, 26%, 44%, 100% { opacity: 1; } }

/* CRT scanline sweep across the dashboard monitor */
.monitor { overflow: hidden; }
.monitor::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 60px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(191, 167, 255, .07) 50%, transparent); transform: translateY(-80px); }
html.motion .monitor.in::after { animation: scan 7s linear 1s infinite; }
@keyframes scan { 0% { transform: translateY(-80px); } 40%, 100% { transform: translateY(var(--scan-to, 700px)); } }

/* Buttons nudge up a pixel step on hover */
html.motion .btn:hover { transform: translate(0, -2px); }
html.motion .btn:active { transform: translate(2px, 2px); }

@media (prefers-reduced-motion: reduce) {
  html.motion .prise, html.motion .boot, html.motion [data-pixel] rect { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
  .firefly, .tape-track, .monitor::after { animation: none !important; }
}

/* Raw heading text stays hidden until it is redrawn in pixels */
html.motion [data-pixel]:not(:has(svg)) { color: transparent; }