/* Look 4 showpiece CSS (light <-> dark). Loaded only by Look 4 (SHOWPIECE in src/lib.mjs); Look 2 keeps showpiece.css.
   Separate fixed layer, decorative, aria-hidden, pointer-events none. Plays only while <html> has .sp-run (to dark) or
   .sp-rev (to light); otherwise display:none, so it never traps focus or blocks clicks. Every timing, size and easing
   is a --sp-* token in look-4.tokens.css. Only opacity, transform and stroke-dashoffset animate; no filters.
   Rule kept by the timings: art is visible only while the dim layer is >= ~.85 (page text and buttons hidden under it)
   and is fully faded before the dim lifts, so art never sits over readable text or controls, and glow never shows on white. */
.sp4 { display: none; position: fixed; inset: 0; z-index: 200; pointer-events: none; contain: strict; }
.sp-run .sp4, .sp-rev .sp4 { display: block; }
.sp4 .sp-dim { position: absolute; inset: 0; opacity: 0; background: var(--black-page); will-change: opacity; }
/* art band: below the header (the tapped switch stays clear) and above the phone call bar */
.sp4 .sp-box { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + var(--sp-box-gap)); bottom: var(--sp-box-bottom);
  display: flex; align-items: center; justify-content: center; }
.sp4 .sp-art { display: block; height: min(100%, var(--sp-art-max)); width: auto; max-width: 100%; aspect-ratio: 400 / 700; overflow: hidden; }
.sp4 .sp-all { opacity: 1; }
.sp4 .sp-flame, .sp4 .sp-flick { transform-box: fill-box; transform-origin: 50% 100%; }
.sp4 .sp-flame-glow, .sp4 .sp-pin-glow { transform-box: fill-box; transform-origin: 50% 50%; }
.sp4 .sp-trace, .sp4 .sp-halo { fill: none; stroke: var(--amber); stroke-dasharray: 1; stroke-dashoffset: 1; }
.sp4 .sp-trace { stroke-width: var(--sp-trace-w); }
.sp4 .sp-halo { stroke-width: calc(var(--sp-trace-w) * 3.6); stroke-opacity: .2; stroke-linecap: round; }
.sp4 .sp-pin, .sp4 .sp-pin-glow, .sp4 .sp-flame, .sp4 .sp-flame-glow { opacity: 0; }
.sp4 .sp-pin-ring { fill: none; stroke: var(--amber); stroke-width: 3; opacity: 0; }
.sp4 .sp-dot { opacity: 0; animation-timing-function: linear, linear; animation-fill-mode: both, both; }
.sp4 .sp-dot circle { transform: scale(var(--sp-dot-scale)); }

/* ---------- light -> dark (.sp-run) ---------- */
.sp-run .sp4 .sp-dim { animation: sp4-dim var(--sp-dim-dur) var(--sp-ease) var(--sp-dim-at) both, sp4-undim var(--sp-out-dur) var(--sp-ease) var(--sp-out-at) forwards; }
.sp-run .sp4 .sp-all { animation: sp4-hide var(--sp-art-out-dur) var(--sp-ease) var(--sp-art-out-at) forwards; }
.sp-run .sp4 .sp-flame { animation: sp4-ignite var(--sp-ignite-dur) var(--sp-ease-soft) var(--sp-ignite-at) both; }
.sp-run .sp4 .sp-flame-glow { animation: sp4-glow-in var(--sp-ignite-dur) var(--sp-ease) var(--sp-ignite-at) both; }
.sp-run .sp4 .sp-flick, .sp-rev .sp4 .sp-flick { animation: sp4-flick var(--sp-flicker-speed) ease-in-out infinite; }
.sp-run .sp4 .sp-trace, .sp-run .sp4 .sp-halo { animation: sp4-draw var(--sp-traces-dur) var(--sp-ease) calc(var(--sp-traces-at) + var(--n) * var(--sp-trace-stagger)) both; }
.sp-run .sp4 .sp-pin { animation: sp4-show var(--sp-traces-dur) var(--sp-ease) var(--sp-traces-at) both; }
.sp-run .sp4 .sp-pin-ring, .sp-run .sp4 .sp-pin-glow { animation: sp4-show var(--sp-pin-dur) var(--sp-ease) var(--sp-pin-at) both; }
.sp-run .sp4 .sp-dot { animation-duration: var(--sp-dot-dur), var(--sp-dot-dur);
  animation-delay: calc(var(--sp-dots-at) + var(--i) * var(--sp-dot-stagger)), calc(var(--sp-dots-at) + var(--i) * var(--sp-dot-stagger)); }

/* ---------- dark -> light (.sp-rev): the same art played backwards, then the lights come up on the white page ---------- */
.sp-rev .sp4 .sp-dim { animation: sp4-dim var(--sp-rev-dim-dur) var(--sp-ease) 0ms both, sp4-undim var(--sp-rev-out-dur) var(--sp-ease) var(--sp-rev-out-at) forwards; }
.sp-rev .sp4 .sp-all { animation: sp4-show var(--sp-rev-in-dur) var(--sp-ease) var(--sp-rev-in-at) both; }
.sp-rev .sp4 .sp-flame { animation: sp4-douse var(--sp-rev-flame-dur) var(--sp-ease) var(--sp-rev-flame-at) both; }
.sp-rev .sp4 .sp-flame-glow { animation: sp4-hide var(--sp-rev-flame-dur) var(--sp-ease) var(--sp-rev-flame-at) both; }
.sp-rev .sp4 .sp-trace, .sp-rev .sp4 .sp-halo { animation: sp4-draw var(--sp-traces-dur) var(--sp-ease) calc(var(--sp-rev-traces-at) + (4 - var(--n)) * var(--sp-trace-stagger)) both reverse; }
.sp-rev .sp4 .sp-pin { animation: sp4-hide var(--sp-pin-dur) var(--sp-ease) var(--sp-rev-pin-at) both; }
.sp-rev .sp4 .sp-pin-ring, .sp-rev .sp4 .sp-pin-glow { animation: sp4-hide var(--sp-pin-dur) var(--sp-ease) var(--sp-rev-glow-at) both; }
.sp-rev .sp4 .sp-dot { animation-direction: reverse, reverse; animation-duration: var(--sp-dot-dur), var(--sp-dot-dur);
  animation-delay: calc(var(--sp-rev-dots-at) + var(--i) * var(--sp-dot-stagger)), calc(var(--sp-rev-dots-at) + var(--i) * var(--sp-dot-stagger)); }

@keyframes sp4-dim { from { opacity: 0; } to { opacity: var(--sp-dim-max); } }
@keyframes sp4-undim { from { opacity: var(--sp-dim-max); } to { opacity: 0; } }
@keyframes sp4-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp4-hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes sp4-ignite { 0% { opacity: 0; transform: scale(.3, .15); } 60% { opacity: 1; transform: scale(1.05, 1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes sp4-douse { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.3, .15); } }
@keyframes sp4-glow-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes sp4-flick { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.97, 1.04); } 65% { transform: scale(1.02, .98); } }
@keyframes sp4-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sp4-fade { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sp4 { display: none !important; } }