/* 3D stage, poster fallback and reveal screen for case pages. Load after tokens.css and
   rebuild-tokens.css. */

/* ---------- stage ---------- */
/* --case3d-vh is 1svh captured once (and on width changes only). Set --case3d-stage-vh per page. */
.case3d-stage {
  position: relative;
  overflow: hidden;
  height: calc(var(--case3d-vh, 1svh) * var(--case3d-stage-vh, 100));
  background: var(--color-bg);
}
.case3d-poster,
.case3d-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.case3d-poster { object-fit: cover; }
.case3d-canvas {
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
.case3d-canvas.is-live { opacity: 1; }
.case3d-canvas.is-instant { transition: none; }
.case3d-stage[data-turntable] { touch-action: pan-y pinch-zoom; cursor: grab; }
.case3d-stage[data-turntable]:active { cursor: grabbing; }
.case3d-stage:focus-visible {
  outline: 2px solid var(--case-accent, var(--color-accent));
  outline-offset: -2px;
}

/* ---------- reveal screen ---------- */
/* Shown only under html.case3d-pending (set by the head script when the 3D will load). */
.case3d-reveal { display: none; }
.case3d-pending .case3d-reveal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: 0 var(--gutter-mobile);
  background: var(--color-bg);
  color: var(--color-text);
  transition: opacity 880ms cubic-bezier(.22, .61, .36, 1) 120ms;
}
.case3d-lift .case3d-reveal { opacity: 0; pointer-events: none; }
/* On the way out the name and the bar rise and fade first, then the screen dissolves into the page. */
.case3d-reveal__name, .case3d-reveal__line { transition: opacity 420ms ease-out, transform 640ms cubic-bezier(.22, .61, .36, 1); }
.case3d-lift .case3d-reveal__name { opacity: 0; transform: translateY(-14px); }
.case3d-lift .case3d-reveal__line { opacity: 0; transform: translateY(-8px) scaleX(1.04); }
.case3d-reveal__name {
  margin: 0;
  font-family: "Space Grotesk", var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-align: center;
}
.case3d-reveal__line {
  position: relative;
  overflow: hidden;
  width: min(240px, 60vw);
  height: 1px;
  background: var(--color-border);
}
.case3d-reveal__fill {
  position: absolute;
  inset: 0;
  background: var(--case-accent, var(--color-accent));
  transform-origin: left center;
  transform: scaleX(var(--case3d-progress, 0));
  transition: transform 160ms linear;
}
/* No byte total: a travelling segment instead of a fill. */
.case3d-reveal[data-indeterminate] .case3d-reveal__fill {
  right: auto;
  width: 30%;
  transform: translateX(-100%);
  animation: case3d-travel 1.2s var(--ease-in-out) infinite;
}
@keyframes case3d-travel {
  from { transform: translateX(-100%); }
  to { transform: translateX(340%); }
}

/* Keeps the fades for a visitor who chose "Enable motion" over a reduced-motion setting. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-preference="on"]) .case3d-canvas,
  html:not([data-motion-preference="on"]) .case3d-reveal,
  html:not([data-motion-preference="on"]) .case3d-reveal__name,
  html:not([data-motion-preference="on"]) .case3d-reveal__line,
  html:not([data-motion-preference="on"]) .case3d-reveal__fill {
    transition: none;
    animation: none;
  }
}