/* trAIpeze conceptual graphics: distinct metaphors, one visual grammar. */
.vs-stage {
  --cg-a: var(--scene-accent, var(--space, #60a5fa));
  --cg-b: var(--scene-accent-2, var(--space-2, #34d399));
  position: relative;
  min-height: 420px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 28%, color-mix(in oklch, var(--cg-a) 18%, transparent), transparent 35%),
    radial-gradient(circle at 26% 80%, color-mix(in oklch, var(--cg-b) 10%, transparent), transparent 36%),
    linear-gradient(145deg, #0b1022 0%, #060913 56%, #05070d 100%);
}

.vs-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148,163,184,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 45%, black, transparent 78%);
  pointer-events: none;
}

.vs-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), inset 0 -90px 120px rgba(0,0,0,.28);
  pointer-events: none;
}

.concept-stage {
  --concept-ease: cubic-bezier(.22,1,.36,1);
  perspective: 1100px;
}

.concept-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition:
    transform .5s var(--concept-ease),
    filter .42s var(--concept-ease);
}

.concept-svg text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .13em;
}

.cg-line {
  fill: none;
  stroke: var(--cg-a);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cg-line.secondary { stroke: var(--cg-b); }
.cg-line.faint { opacity: .16; }
.cg-line.medium { opacity: .38; }
.cg-line.strong { opacity: .86; }
.cg-dash { stroke-dasharray: 4 9; }

.cg-fill { fill: var(--cg-a); }
.cg-fill.secondary { fill: var(--cg-b); }
.cg-fill.soft { opacity: .12; }
.cg-fill.medium { opacity: .38; }
.cg-fill.strong { opacity: .92; }

.cg-surface {
  fill: rgba(11,16,34,.78);
  stroke: rgba(148,163,184,.16);
  stroke-width: 1;
}

.cg-glow {
  filter: drop-shadow(0 0 10px color-mix(in oklch, var(--cg-a) 62%, transparent));
}

.cg-label {
  fill: rgba(203,213,225,.56);
  font-size: 9px;
  font-weight: 600;
}

.cg-label.accent { fill: var(--cg-a); }
.cg-label.secondary { fill: var(--cg-b); }

.cg-title {
  fill: rgba(248,250,252,.88);
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em !important;
}

.concept-legend {
  position: absolute;
  z-index: 2;
  left: 28px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(203,213,225,.58);
  font: 600 9px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.concept-legend::before {
  content: '';
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--cg-a), var(--cg-b));
  box-shadow: 0 0 12px color-mix(in oklch, var(--cg-a) 50%, transparent);
}

.concept-object,
.concept-layer,
.concept-focus {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform .48s var(--concept-ease),
    opacity .32s var(--concept-ease),
    filter .44s var(--concept-ease);
}

.concept-depth-shadow {
  pointer-events: none;
  opacity: .13;
  filter: blur(.7px) saturate(1.25);
  transform: translate(8px, 11px) scale(.985);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform .5s var(--concept-ease),
    opacity .34s var(--concept-ease),
    filter .42s var(--concept-ease);
}

.concept-depth-shadow text,
.concept-depth-shadow .cg-label,
.concept-depth-shadow .cg-title { opacity: 0; }
.concept-depth-shadow .cg-line { opacity: .28; stroke: var(--cg-b); }
.concept-depth-shadow .cg-fill { opacity: .18; fill: var(--cg-b); }
.concept-depth-shadow .cg-surface { opacity: .16; stroke: var(--cg-b); }

/* One-shot, concept-led motion. Every scene settles into a still final frame. */
.concept-stage.motion-ready .concept-layer,
.concept-stage.motion-ready .concept-focus {
  opacity: 0;
  filter: blur(3px);
}

.concept-stage.motion-ready .concept-svg {
  transform: perspective(900px) rotateX(7deg) rotateY(-9deg) translateZ(-24px) scale(.965);
  filter: brightness(.82) saturate(.9);
}

.concept-stage.motion-ready .concept-depth-shadow {
  opacity: 0;
  filter: blur(2px) saturate(1.1);
  transform: translate(18px, 22px) scale(.94);
}

.concept-stage.motion-ready.is-active .concept-layer,
.concept-stage.motion-ready.is-active .concept-focus {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.concept-stage.motion-ready.is-active .concept-svg {
  transform: perspective(900px) rotateX(0) rotateY(0) translateZ(0) scale(1);
  filter: brightness(1) saturate(1);
}

.concept-stage.motion-ready.is-active .concept-depth-shadow {
  opacity: .13;
  filter: blur(.7px) saturate(1.25);
  transform: translate(8px, 11px) scale(.985);
}

.concept-stage.motion-ready .concept-focus { transition-delay: .08s; }

.concept-lattice.motion-ready .concept-layer { transform: scale(.82) rotate(3deg); }
.concept-lattice.motion-ready .concept-focus { transform: scale(.88); }
.concept-constellation.motion-ready .concept-layer { transform: rotate(-7deg) scale(.9); }
.concept-constellation.motion-ready .concept-focus { transform: scale(.86); }
.concept-prism.motion-ready .concept-layer { transform: translateX(-22px); }
.concept-prism.motion-ready .concept-focus { transform: translateX(-34px); }
.concept-ripple.motion-ready .concept-layer { transform: scale(.68); transform-origin: 50% 70%; }
.concept-ripple.motion-ready .concept-focus { transform: translateY(-18px); }
.concept-alignment.motion-ready .concept-layer { transform: scaleX(1.18); }
.concept-alignment.motion-ready .concept-focus { transform: translateX(-20px); }
.concept-topography.motion-ready .concept-layer { transform: translateY(24px) scaleY(.9); transform-origin: bottom; }
.concept-topography.motion-ready .concept-focus { transform: translateY(14px); }
.concept-provenance.motion-ready .concept-layer { transform: translateX(-28px); }
.concept-provenance.motion-ready .concept-focus { transform: translateX(-16px); }
.concept-corridor.motion-ready .concept-layer { transform: scale(.76); }
.concept-corridor.motion-ready .concept-focus { transform: translateX(-26px); }
.concept-loom.motion-ready .concept-layer { transform: scaleY(.82); }
.concept-loom.motion-ready .concept-focus { transform: translateX(-22px); }
.concept-handoff.motion-ready .concept-layer { transform: translateY(-18px); }
.concept-handoff.motion-ready .concept-focus { transform: translate(-18px, 12px); }
.concept-loop.motion-ready .concept-layer { transform: scale(.82); }
.concept-loop.motion-ready .concept-focus { transform: scale(.9); }
.concept-helix.motion-ready .concept-layer { transform: scaleX(.76); }
.concept-helix.motion-ready .concept-focus { transform: scale(.9); }

.concept-index {
  position: absolute;
  z-index: 2;
  right: 24px;
  top: 22px;
  color: color-mix(in oklch, var(--cg-a) 72%, white 8%);
  font: 600 9px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .vs-stage { min-height: 350px; }
  .concept-legend { left: 18px; bottom: 16px; font-size: 7.5px; }
  .concept-index { right: 16px; top: 16px; font-size: 7.5px; }
}

/* ── Mechanism sequencing ─────────────────────────────────────────────
   Scenes demonstrate a process: input → process → output, revealed in
   order, settling into a still final frame. The BASE state is the final
   frame, so pages without JS (and reduced-motion, which never receives
   .motion-ready) render the complete, legible drawing. One-shot only;
   no loops. */

.cg-s1, .cg-s2, .cg-s3, .cg-s4, .cg-s5 {
  transition: opacity .42s var(--concept-ease), transform .42s var(--concept-ease);
}
.concept-stage.motion-ready :is(.cg-s1, .cg-s2, .cg-s3, .cg-s4, .cg-s5) {
  opacity: 0;
  transform: translateY(9px);
}
.concept-stage.motion-ready.is-active .cg-s1 { opacity: 1; transform: none; transition-delay: .1s; }
.concept-stage.motion-ready.is-active .cg-s2 { opacity: 1; transform: none; transition-delay: .38s; }
.concept-stage.motion-ready.is-active .cg-s3 { opacity: 1; transform: none; transition-delay: .66s; }
.concept-stage.motion-ready.is-active .cg-s4 { opacity: 1; transform: none; transition-delay: .94s; }
.concept-stage.motion-ready.is-active .cg-s5 { opacity: 1; transform: none; transition-delay: 1.22s; }

/* Flow lines draw from source to destination. Requires pathLength="1". */
.cg-flow {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .9s var(--concept-ease);
}
.concept-stage.motion-ready .cg-flow { stroke-dashoffset: 1; }
.concept-stage.motion-ready.is-active .cg-flow { stroke-dashoffset: 0; transition-delay: .5s; }

/* A single element that travels into its final position (e.g. the
   syllabus document crossing the gates). Offset set per-element
   via --tx. */
.cg-travel { transition: transform 1.15s var(--concept-ease); }
.concept-stage.motion-ready .cg-travel { transform: translateX(var(--tx, -300px)); }
.concept-stage.motion-ready.is-active .cg-travel { transform: none; transition-delay: .15s; }

/* A meter that fills to its drawn width. */
.cg-meter {
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform .6s var(--concept-ease);
}
.concept-stage.motion-ready .cg-meter { transform: scaleX(0); }
.concept-stage.motion-ready.is-active .cg-meter { transform: scaleX(1); transition-delay: 1.05s; }

@media (prefers-reduced-motion: reduce) {
  .cg-s1, .cg-s2, .cg-s3, .cg-s4, .cg-s5,
  .cg-flow, .cg-travel, .cg-meter {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
  .concept-object,
  .concept-layer,
  .concept-focus,
  .concept-svg,
  .concept-depth-shadow {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .concept-depth-shadow { opacity: .1 !important; transform: translate(6px, 8px) scale(.99) !important; }
}