/* Run the Floor (PURP Admin): the God's-eye view. The product pages' chrome, type, colour, hero and
   finale come from point-of-sale.css; this file is Admin's own: a live wall of every Admin feed, a
   viewer that locks onto one feed at a time as the reader scrolls, and a finale wall, in a HUD voice.
   It takes the page's colours from there too (the light Mist page, and the stage palette for the lock-on
   viewer) and only sets its own components on them. */
:root { --hud: var(--pdb-mono, ui-monospace, monospace); --live: var(--pdb-status-positive-dot, #34d399); }

/* ---- Hero: every feed at once ---- */
/* No PURP light here: the headline opens the page and the wall switches on beneath it. */
.eye-hero h1 { animation-delay: .15s; }
.eye-hero .pos-hero__lede { animation-delay: 1.35s; }
/* The headline, the whole wall and the line under it share the first screen: the navigation and bar
   (160), the headline (95), the gaps (54), the line (63) and 16px to spare leave 100svh - 388px for
   two rows of 16:9 feeds, three across with 10px gaps. */
.admin-stage[data-wall] { position: relative; width: min(var(--content), max(480px, calc((100svh - 398px) * 8 / 3 + 20px))); margin: 28px auto 0; }
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.wall__feed { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--edge-line); border-radius: 12px; background: var(--surface); box-shadow: var(--tile-shadow); animation: power-on .75s var(--ease) calc(.5s + var(--i) * .11s) both; }
.wall__feed video { width: 100%; height: 100%; object-fit: cover; }
.wall__label { position: absolute; bottom: 9px; left: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--raised) 84%, transparent); box-shadow: 0 0 0 1px var(--edge-line); color: var(--type); font: 600 10.5px/1.2 var(--hud); letter-spacing: .08em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wall__label i, .lock__readout::before { width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 8px var(--live); animation: live 2s ease-in-out infinite; }
/* The eye sweeps the wall. */
.wall__scan { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; pointer-events: none; }
.wall__scan::before { content: ""; position: absolute; top: -26%; right: 0; left: 0; height: 24%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pdb-purp-violet, #7c3aed) 6%, transparent) 62%, color-mix(in srgb, var(--pdb-purp-violet, #7c3aed) 22%, transparent) 97%, transparent); animation: sweep 7s cubic-bezier(.45, 0, .55, 1) 2s infinite; }
.admin-stage[data-wall] > .video-toggle { right: 10px; bottom: 10px; }

/* ---- Lock onto anything ---- */
/* A stage (point-of-sale.css): the hero fades into it at dusk, and it runs dark into the finale. */
.lock {
  --section-top: 64px;
  --fade-in: 94px;
  padding: var(--section-top) var(--gutter) 110px;
  scroll-margin-top: calc(-1 * var(--section-top));
  background: linear-gradient(to bottom, var(--dusk-2), var(--dusk-3) calc(var(--fade-in) / 2), transparent var(--fade-in)), var(--ground);
}
.lock h2 { font-size: clamp(38px, 5vw, 64px); line-height: 1.05; font-weight: 600; letter-spacing: -.018em; text-align: center; }
.lock__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 48px; align-items: start; width: var(--content); margin: 28px auto 0; overflow-anchor: none; }
.lock__steps { margin: 0; padding: 0; list-style: none; }
.lock__step { display: flex; flex-direction: column; justify-content: center; min-height: 54svh; color: var(--type-quiet); transition: color .42s var(--ease); }
.lock__step.is-active { color: var(--type); }
.lock__step h3 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; font-weight: 600; letter-spacing: -.015em; }
.lock__step p { margin-top: 10px; font-size: 19px; line-height: 1.35; color: var(--type-quiet); transform: translateY(5px); transition: transform .42s var(--ease), color .42s var(--ease); }
/* The lit step's line settles into place. Only the line moves: the lock line reads the step and its heading. */
.lock__step.is-active p { color: var(--type-muted); transform: none; }
/* The viewer stays in view while its steps scroll past; the page itself scrolls normally. */
.lock__stage { position: sticky; top: max(var(--bar-space), calc(50svh - 232px)); margin: 0; overflow-anchor: none; }
.lock__frame { position: relative; }
/* Its own stacking context: the feeds layer over one another inside the screen, never over the controls. */
.lock__screen { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--edge-line); border-radius: 18px; background: var(--surface); box-shadow: var(--film-shadow); }
/* A crossfade, not a cut: the next film fades in over the one on screen, which is let go underneath
   only once it is covered (run-the-floor.mjs), so no step change ever shows an empty frame. */
.lock__feed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.lock__feed.is-shown { opacity: 1; transition: opacity .56s cubic-bezier(.4, 0, .2, 1); }
/* Corner brackets: the eye locks on. They close in each time the view changes. */
.lock__brackets { --c: var(--accent); position: absolute; inset: -9px; pointer-events: none; background:
  linear-gradient(var(--c), var(--c)) left top / 24px 2px, linear-gradient(var(--c), var(--c)) left top / 2px 24px,
  linear-gradient(var(--c), var(--c)) right top / 24px 2px, linear-gradient(var(--c), var(--c)) right top / 2px 24px,
  linear-gradient(var(--c), var(--c)) left bottom / 24px 2px, linear-gradient(var(--c), var(--c)) left bottom / 2px 24px,
  linear-gradient(var(--c), var(--c)) right bottom / 24px 2px, linear-gradient(var(--c), var(--c)) right bottom / 2px 24px;
  background-repeat: no-repeat; }
.lock__stage.is-locking .lock__brackets { animation: lock-on .7s cubic-bezier(.22, .8, .24, 1); }
.lock__hud { display: flex; align-items: flex-start; gap: 14px; min-height: 2.6em; margin-top: 16px; color: var(--soft); font: 600 11.5px/1.3 var(--hud); letter-spacing: .08em; text-transform: uppercase; }
.lock__map { display: grid; flex: none; grid-template-columns: repeat(4, 12px); gap: 3px; margin-top: .15em; }
.lock__map i { height: 7px; border-radius: 2px; background: color-mix(in srgb, var(--pdb-purp-lavender, #d9cbff) 24%, transparent); transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.lock__map i.is-active { background: var(--live); box-shadow: 0 0 8px var(--live); }
/* The readout crossfades: the old line and the new one share one cell while one fades into the other. */
.lock__readout { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 8px; min-width: 0; }
.lock__readout::before { content: ""; grid-area: 1 / 1; align-self: center; }
.lock__readout > span { grid-area: 1 / 2; transition: opacity .4s var(--ease); }
.lock__readout > span.is-entering, .lock__readout > span.is-leaving { opacity: 0; }

/* ---- Finale: the whole wall, lit ---- */
.eye-finale { padding: 150px var(--gutter) 140px; }
.eye-finale__wall { position: absolute; z-index: -2; top: 50%; left: 50%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(1500px, 128vw); margin: 0; padding: 0; list-style: none; transform: translate(-50%, -50%); }
.eye-finale__wall li { overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--edge-line); border-radius: 14px; background: var(--ground); }
.eye-finale__wall img { width: 100%; height: 100%; object-fit: cover; opacity: .2; filter: saturate(.7); }
/* Over the wall: the words sit in a pool of dark, and the wall fades into the page above and below. */
.eye-finale::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse 58% 56% at 50% 50%, color-mix(in srgb, var(--ground) 97%, transparent), color-mix(in srgb, var(--ground) 82%, transparent) 52%, color-mix(in srgb, var(--ground) 35%, transparent)), linear-gradient(180deg, var(--ground), transparent 24%, transparent 76%, var(--ground)); }
@media (prefers-reduced-motion: no-preference) {
  .js .eye-finale:not(.is-lit) .eye-finale__wall li { opacity: 0; }
  .eye-finale.is-lit .eye-finale__wall li { animation: power-on .75s var(--ease) calc(.1s + var(--i) * .1s) both; }
}

@keyframes power-on { 0% { opacity: 0; transform: scaleY(.02); filter: brightness(3); } 35% { opacity: 1; transform: scaleY(.02); filter: brightness(3); } 72% { transform: none; filter: brightness(1.5); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes sweep { 0% { top: -26%; } 55%, 100% { top: 104%; } }
@keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes lock-on { from { opacity: .3; transform: scale(1.035); } to { opacity: 1; transform: none; } }

@media (max-width: 999px) {
  /* Narrow screens keep the viewer pinned on top while the steps scroll beneath it. */
  .lock__body { grid-template-columns: 1fr; gap: 0; }
  /* Pinned on top, the viewer takes at most about 42% of the window so the steps below stay readable. */
  .lock__stage { z-index: 2; order: -1; justify-self: center; width: min(100%, calc((100svh - var(--bar-space)) * .42 * 16 / 9)); top: var(--bar-space); padding: 10px 0 12px; background: var(--ground); }
  .lock__stage::before { content: ""; position: absolute; z-index: -1; right: 0; bottom: 100%; left: 0; height: var(--bar-space); background: var(--ground); opacity: 0; }
  .lock__stage.is-pinned::before { opacity: 1; }
  .lock__step { min-height: 36svh; }
}

@media (max-width: 999px) and (prefers-reduced-motion: no-preference) {
  .lock__stage::before { transition: opacity .2s linear; }
}

@media (max-width: 734px) {
  .admin-stage[data-wall] { width: var(--content); }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wall__label { bottom: 6px; left: 6px; padding: 3px 6px; font-size: 10px; }
  .lock { --section-top: 44px; }
  .lock__step h3 { font-size: 24px; }
  .lock__step p { font-size: 16px; }
  .lock__hud { gap: 10px; font-size: 10px; }
  .eye-finale { padding: 110px var(--gutter) 100px; }
  .eye-finale__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 150vw; }
}

@media (prefers-reduced-motion: reduce) {
  .wall__feed, .wall__label i, .lock__readout::before, .eye-finale__wall li { animation: none; }
  .wall__scan { display: none; }
  .lock__step, .lock__step p, .lock__feed.is-shown, .lock__map i, .lock__readout > span { transition: none; }
  .lock__stage.is-locking .lock__brackets { animation: none; }
}