/* Opening film stage: the Find film on a floating glass slab, white light only. */
.stage {
  position: relative;
  height: clamp(380px, 64vh, 660px);
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--deck-shadow);
  background:
    radial-gradient(120% 80% at 50% 36%, light-dark(#fbfcfc, #2a2c30) 0%, transparent 62%),
    linear-gradient(180deg, light-dark(#eef0f1, #1f2023) 0%, light-dark(#e6e9eb, #18191b) 72%, light-dark(#dfe3e5, #141517) 100%);
}
.stage__gl { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease-out); }
.stage__gl canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.stage__gl canvas:active { cursor: grabbing; }
.stage.is-3d .stage__gl { opacity: 1; }
.stage__fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 0 clamp(16px, 4vw, 48px);
  perspective: 1100px;
  transition: opacity 700ms var(--ease-out);
}
.stage.is-3d .stage__fallback { opacity: 0; pointer-events: none; }
.stage__card {
  position: relative;
  width: min(680px, 86%);
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  padding: 9px;
  background: linear-gradient(145deg, #f4f6f7 0%, #d5dbde 48%, #eef1f2 100%);
  border: 1px solid rgb(29 29 31 / 0.08);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.85) inset,
    0 0 0 1px rgb(29 29 31 / 0.06),
    0 0 44px rgb(255 255 255 / 0.95),
    0 40px 80px rgb(29 34 38 / 0.18);
  transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -12deg));
  will-change: transform;
}
.stage__card video {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 14px;
  background: #e9ecee;
}
.stage__hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--mat-regular);
  border: 1px solid var(--stroke-secondary);
  -webkit-backdrop-filter: var(--deck-blur);
  backdrop-filter: var(--deck-blur);
  color: var(--text-secondary);
  font: var(--type-label);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
.stage.is-3d .stage__hint { opacity: 1; }
@media (max-width: 599px) {
  .stage { height: clamp(340px, 58vh, 520px); border-radius: var(--r-l); }
  .stage__card { width: 92%; }
}
/* Status dots read as white light, with a faint rim so they hold on light fills. */
.chip--solid::before { background: #fff; box-shadow: 0 0 0 1px rgb(29 29 31 / 0.28), 0 0 6px rgb(255 255 255 / 0.9); }
.dot::before { background: #fff; box-shadow: 0 0 0 1px rgb(29 29 31 / 0.35), 0 0 6px rgb(255 255 255 / 0.9); }