/*! WAPI Connect, "Kuwait Time": story engine styles (M06). Plan: .router/MOTION.md §2.4.
    Generic parts only: the sticky frame of a track, the camera layer, callout rings, progress lines. A module declares
    its own tall heights (calc(100svh + var(--steps) * var(--w-step))) and pre-paint sticky selectors under html.w-story;
    the rules here cover what story.js marks on init ([data-w-track] > [data-w-frame]). Tokens only, no new colour,
    transforms and opacity; everything that moves or sticks needs html.w-story / a JS-made element and no reduced motion. */

/* 1. Tracks: step distance and the sticky frame (html.w-story is set before the first paint, never with reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  html.w-story { --w-step: 80vh; }
  html.w-story [data-w-track] > [data-w-frame] { position: sticky; top: 0; block-size: 100svh; }
  /* the compositor layers exist only while a track is on screen */
  [data-w-track].is-active .w-cam,
  [data-w-track].is-active .w-line { will-change: transform; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 699.98px) {
  html.w-story { --w-step: 60svh; }
}

/* 2. Camera: one transformed layer over the whole crop box (made by story.js only). The picture keeps the crop's own
      position rules (wapi-layout.css places .w-shot__crop > img; inside the layer it is .w-cam > img). Pins scale by
      1/s so they keep their size while the camera zooms. */
.w-cam {
  position: absolute; inset: 0; transform-origin: 0 0;
  transform: translate(calc(var(--w-cam-x, 0) * 1px), calc(var(--w-cam-y, 0) * 1px)) scale(var(--w-cam-s, 1));
}
.w-cam > img, .w-cam > video {
  position: absolute; max-inline-size: none; inline-size: auto; block-size: auto; display: block;
  width: calc(var(--sw) / var(--w) * 100%);
  left: calc(var(--x) / var(--w) * -100%);
  top: calc(var(--y) / var(--h) * -100%);
}
.w-cam > .w-pin { scale: calc(1 / var(--w-cam-s, 1)); }

/* 3. Callouts: GSAP drives the number's scale and the label's slide through these properties */
[data-w-pins] .w-pin__n { scale: var(--w-pn-s, 1); }
[data-w-pins] .w-pin__l { transform: translate(calc(var(--w-pl-x, 0) * 1px), calc(var(--w-pl-y, 0) * 1px)); }
.w-ring {
  position: absolute; left: 0; top: 0; inline-size: 44px; block-size: 44px; translate: -50% -50%;
  overflow: visible; pointer-events: none;
}
.w-ring circle { fill: none; stroke: var(--w-ink); stroke-width: 2; }

/* 4. Progress line along a list: grows from the inline start */
.w-line-host { position: relative; }
.w-line { position: absolute; pointer-events: none; background: var(--w-ink); }
.w-line--y { inset-block: 0; inset-inline-start: 0; inline-size: 2px; transform-origin: 50% 0; }
.w-line--x { inset-inline: 0; inset-block-start: 0; block-size: 2px; transform-origin: 0 50%; }
:root[dir="rtl"] .w-line--x { transform-origin: 100% 50%; }

/* 5. Print: the plain page. Tracks at their normal height, every frame in the flow, camera at rest, no decorations. */
@media print {
  html.w-story [data-w-track] { block-size: auto !important; min-block-size: 0 !important; }
  html.w-story [data-w-track] > [data-w-frame] { position: static !important; block-size: auto !important; }
  .w-cam { transform: none !important; }
  .w-cam > .w-pin, [data-w-pins] .w-pin__n { scale: none !important; }
  [data-w-pins] .w-pin__l { transform: none !important; }
  [data-w-track] *, [data-w-track] { clip-path: none !important; }
  .w-ring, .w-line, [data-w-clone] { display: none !important; }
}