/* ==========================================================================
   GESDA — Anticipation Games v2 · the window of anticipation figure
   Surface class A, light theme, white band. No analytical claim, so §3.3
   is not binding; the figure follows §10.8 anyway: SVG draws the lines and
   nodes, every label is HTML.

   Recorded exceptions, flagged for the §19 review:
   - §3.7 / §16 "no gradients on diagrams": the purple → teal sweep follows
     the reference sketch the client supplied. Both ends clear 3:1 on white
     (purple-700 12.1:1, p2-blue 5.5:1).
   - §8.2 explanatory motion outside Class D: the figure draws itself once,
     on first view (time runs forward, then the arrow runs back). It never
     loops or replays, and under reduced motion or without script it shows
     its final state straight away (window.js only arms it otherwise).
   ========================================================================== */

/* Copy right, figure left on desktop; the copy comes first in the source so
   the heading is read before the figure. */
.window {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16); align-items: center;
}
.window .wa { order: -1; }

@media (max-width: 1023px) {
  .window { grid-template-columns: 1fr; gap: var(--space-12); }
  .window .wa { order: 0; max-width: 640px; }
}

.wa {
  /* Component tokens (tier 3): the drawing durations, all at 1.5× the
     original pace (the delays below are scaled to match) */
  --wa-motion-axis: 600ms cubic-bezier(0.4, 0, 0.2, 1);
  --wa-motion-arc: 933ms cubic-bezier(0.65, 0, 0.35, 1);
  --wa-motion-fast: 107ms ease-out;
  --wa-motion-medium: 173ms ease;
  --wa-motion-slow: 267ms cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0;
}

.wa__stage { position: relative; }
.wa__svg { display: block; width: 100%; height: auto; aspect-ratio: 640 / 256; overflow: visible; }

.wa__stop-from { stop-color: var(--purple-700); }
.wa__stop-to   { stop-color: var(--p2-blue); }

/* Time: a tapered line, thin at discovery, full weight at scale */
.wa__axis { fill: url(#wa-tone); }

/* The window: dashed, as the rules inside it are still open */
.wa__window {
  fill: var(--canvas-tinted);
  stroke: var(--p1-violet); stroke-width: 1.5; stroke-dasharray: 6 5;
}

.wa__node { fill: url(#wa-tone); stroke: var(--canvas); stroke-width: 3; }

/* The backcasting arrow: from deployment at scale back to the window */
.wa__arc,
.wa__head {
  fill: none; stroke: url(#wa-tone); stroke-width: 10;
  stroke-linecap: round; stroke-linejoin: round;
}

/* The arrow's label, inside the arc */
.wa__back {
  position: absolute; left: 30%; top: 30%; width: 42%;
  text-align: center;
  font: 400 var(--type-body-sm)/1.45 var(--font-display); color: var(--body);
}
.wa__kicker {
  display: block; margin-bottom: var(--space-1);
  font: 600 var(--type-eyebrow)/1.2 var(--font-accent);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--action);
}

/* The timeline labels, in columns that line up with the figure: discovery
   up to the window (19%), the window itself (38%), then scale. */
.wa__labels {
  display: grid; grid-template-columns: 19% 38% 43%;
  margin-top: var(--space-4);
  font: 600 var(--type-caption)/1.35 var(--font-display); color: var(--ink);
}
.wa__label span { display: block; margin-top: var(--space-1); font-weight: 400; color: var(--muted); }
.wa__label--discovery { padding-right: var(--space-2); }
.wa__label--window { padding-inline: var(--space-2); text-align: center; color: var(--p1-violet); }
.wa__label--scale { padding-left: var(--space-2); text-align: center; color: var(--muted); }

/* Phone: the labels would drop under a readable width, so they leave the
   figure and stack below it (§13.1). */
@media (max-width: 599px) {
  .wa__back { position: static; width: auto; margin-top: var(--space-6); text-align: left; }
  .wa__labels { grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-4); }
  .wa__label--discovery, .wa__label--window, .wa__label--scale { padding: 0; text-align: left; }
}

/* ------------------------------------------------------------- drawing -- */
/* Armed (by window.js): everything waits at its start. Drawn: time runs
   left to right and the nodes arrive with it, then the arrow runs back. */

.wa.is-armed .wa__axis { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
.wa.is-armed .wa__window { opacity: 0; }
.wa.is-armed .wa__node { opacity: 0; transform: scale(0.4); transform-box: fill-box; transform-origin: center; }
.wa.is-armed .wa__arc { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.wa.is-armed .wa__head { opacity: 0; }
.wa.is-armed .wa__label,
.wa.is-armed .wa__back { opacity: 0; transform: translateY(8px); }

.wa.is-drawn .wa__axis { transform: none; transition: transform var(--wa-motion-axis); }
.wa.is-drawn .wa__window { opacity: 1; transition: opacity var(--wa-motion-slow) 333ms; }
.wa.is-drawn .wa__node { opacity: 1; transform: none; transition: opacity var(--wa-motion-medium), transform var(--wa-motion-medium); }
.wa.is-drawn .wa__node--1 { transition-delay: 80ms; }
.wa.is-drawn .wa__node--2 { transition-delay: 220ms; }
.wa.is-drawn .wa__node--3 { transition-delay: 347ms; }
.wa.is-drawn .wa__label { opacity: 1; transform: none; transition: opacity var(--wa-motion-slow), transform var(--wa-motion-slow); }
.wa.is-drawn .wa__label--discovery { transition-delay: 200ms; }
.wa.is-drawn .wa__label--window    { transition-delay: 400ms; }
.wa.is-drawn .wa__label--scale     { transition-delay: 533ms; }
.wa.is-drawn .wa__arc { stroke-dashoffset: 0; transition: stroke-dashoffset var(--wa-motion-arc) 667ms; }
.wa.is-drawn .wa__head { opacity: 1; transition: opacity var(--wa-motion-fast) 1567ms; }
.wa.is-drawn .wa__back { opacity: 1; transform: none; transition: opacity var(--wa-motion-slow) 1533ms, transform var(--wa-motion-slow) 1533ms; }

/* §8.3 as an outcome: the final state, whatever the classes say */
@media (prefers-reduced-motion: reduce) {
  .wa .wa__axis, .wa .wa__node, .wa .wa__label, .wa .wa__back { transform: none !important; }
  .wa .wa__window, .wa .wa__node, .wa .wa__head, .wa .wa__label, .wa .wa__back { opacity: 1 !important; }
  .wa .wa__arc { stroke-dashoffset: 0 !important; }
}