/* The verdict engine — the pinned, scroll-driven pipeline film.
 *
 * The wrapper is several viewports tall and the stage inside it is sticky, so
 * the page appears to hold still while scroll drives the animation — native
 * scrolling, keyboard paging and screen readers all keep working, and there is
 * a visible skip link for anyone not in the mood.
 *
 * Enabled only when the script says so (html.p3d-on): without JavaScript, or
 * with reduced motion, the plain written pipeline below it renders instead. */

.p3d { display: none; }
html.p3d-on .p3d { display: block; height: calc(100vh + 7 * 88vh); position: relative; }
html.p3d-on .pipeline { position: absolute; left: -9999px; top: 0; }

.p3d-stage {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  overflow: hidden;
}

/* The camera. Canvas, leader lines and callouts all live inside one 3D-
 * transformed world, so the mouse tilt and per-step push-in move the whole
 * scene as a single object; the caption, rail and skip stay on the lens. */
.p3d-world {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.p3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Leader lines from the drawing to its labels. */
.p3d-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.p3d-svg polyline {
  fill: none; stroke-width: 1.3;
  stroke: rgba(148, 168, 255, 0.55);
  opacity: 0; transition: opacity 300ms ease;
}
.p3d-svg polyline.is-on { opacity: 1; }
.p3d-svg polyline.c-bull { stroke: rgba(52, 211, 153, 0.65); }
.p3d-svg polyline.c-bear { stroke: rgba(248, 113, 113, 0.65); }
.p3d-svg polyline.c-teal { stroke: rgba(62, 219, 200, 0.65); }
.p3d-svg polyline.c-blue { stroke: rgba(91, 141, 247, 0.6); }

/* The annotations: a name on the line, what it does beneath. */
.p3d-callout {
  position: absolute; top: 0; left: 0;
  max-width: min(240px, 38vw);
  opacity: 0; transition: opacity 320ms ease;
  pointer-events: none;
  transform-origin: 0 50%;
  /* lifted off the canvas plane — the tilt separates them */
  translate: 0 0 46px;
}
.p3d-callout.is-on { opacity: 1; }
/* Exit faster than entry: on a step change the outgoing text would otherwise
   still be fading where the incoming step's text is already being laid out. */
.p3d-callout:not(.is-on) { transition-duration: 140ms; }
.p3d-callout b {
  display: block; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--text); line-height: 1.25; margin-bottom: 2px;
  text-shadow: 0 2px 12px rgba(4, 8, 30, 0.9);
}
.p3d-callout span {
  display: block; font-size: 0.78rem; color: var(--text-2); line-height: 1.4;
  text-shadow: 0 2px 12px rgba(4, 8, 30, 0.9);
}
.p3d-callout[data-side='l'] { text-align: end; }
.p3d-callout[data-color='bull'] b { color: var(--bull); }
.p3d-callout[data-color='bear'] b { color: var(--bear); }
.p3d-callout[data-color='teal'] b { color: var(--teal); }
.p3d-callout[data-color='blue'] b { color: var(--blue-2); }

/* The caption card: title across the top of the frame, like a chapter title. */
.p3d-title {
  position: absolute; top: clamp(64px, 11vh, 110px); left: 50%;
  transform: translateX(-50%);
  width: min(860px, calc(100vw - 40px));
  text-align: center; z-index: 3;
  transition: opacity 300ms ease, transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.p3d-title.is-out { opacity: 0; transform: translateX(-50%) translateY(-14px); transition-duration: 160ms; }
.p3d-step-kicker {
  display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 8px;
}
.p3d-title h3 {
  font-size: clamp(1.5rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.12; margin-bottom: 8px;
  background: linear-gradient(100deg, #EDF1FA 20%, #9db4ff 85%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.p3d-title p { color: var(--text-2); font-size: clamp(0.9rem, 1.5vw, 1.05rem); margin: 0; }

/* Step rail: where you are in the argument, and a way to jump. */
.p3d-rail {
  position: absolute; inset-inline-end: clamp(10px, 3vw, 34px); top: 50%;
  transform: translateY(-50%); z-index: 3;
  display: flex; flex-direction: column; gap: 10px;
}
.p3d-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: transparent;
  padding: 0; cursor: pointer; position: relative;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.p3d-dot::after { content: ""; position: absolute; inset: -8px; }  /* 26px target */
.p3d-dot.is-on { background: var(--teal); border-color: var(--teal); transform: scale(1.25); }
.p3d-dot.is-done { background: var(--blue-2); border-color: var(--blue-2); }

.p3d-skip {
  position: absolute; bottom: 18px; inset-inline-end: clamp(14px, 3vw, 36px); z-index: 3;
  font-size: 0.8rem; color: var(--text-3); text-decoration: none;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: rgba(10, 15, 38, 0.6);
}
.p3d-skip:hover { color: var(--text); border-color: var(--border-strong); text-decoration: none; }

/* The verdict, when it lands. */
.p3d-verdict {
  position: absolute; left: 50%; top: 47%; transform: translate(-50%, -130%) scale(0.7);
  z-index: 2; opacity: 0; transition: opacity 400ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  text-align: center; pointer-events: none;
}
.p3d-verdict.is-on { opacity: 1; transform: translate(-50%, -130%) scale(1); }
.p3d-verdict .vd-pill {
  display: inline-block; padding: 10px 30px; border-radius: 999px;
  font-size: 1.6rem; font-weight: 800; letter-spacing: 0.04em;
  color: #06251c; background: linear-gradient(135deg, #34D399, #3EDBC8);
  box-shadow: 0 0 44px rgba(62, 219, 200, 0.5), 0 0 120px rgba(52, 211, 153, 0.25);
}
.p3d-verdict .vd-sub { margin-top: 10px; color: var(--text-2); font-size: 0.9rem; }

@media (max-width: 640px) {
  html.p3d-on .p3d { height: calc(100vh + 7 * 78vh); }
  .p3d-title { top: 58px; }
  .p3d-title h3 { font-size: 1.25rem; }
  .p3d-title p { font-size: 0.85rem; }
  /* Narrow enough to wrap to two tidy lines beside a phone-width scene.
     The z-lift goes: under perspective it shifts the box ~10px off where
     the script put it, and the clamps depend on positions being exact. */
  .p3d-callout { max-width: 60vw; translate: 0 0 0; }
  .p3d-callout b { font-size: 0.82rem; }
  .p3d-callout span { font-size: 0.72rem; }
  .p3d-verdict .vd-pill { font-size: 1.2rem; }
  .p3d-rail { inset-inline-end: 8px; gap: 8px; }
}