/* ============================================================
   ארז ביטון — motion helpers (v3)
   Owned by js/v3/animations/text.js, reveals.js and sparks.js.
   Link after the other sheets:  <link rel="stylesheet" href="css/motion.css?v=3">
   Colour here is white, pink and magenta only. Every helper is inert
   under prefers-reduced-motion.
   ============================================================ */

/* ---------- the sparks layer: one fixed canvas of additive light, above the content, under the nav ---------- */
.sparks-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* ---------- split structure helpers (built by text.js) ---------- */
/* a line needs a box of its own to move: the engine's 'mask' and 'a-rise-stagger-lines' presets tween .li */
[data-assemble="a-rise-stagger-lines"] .split .li,
[data-reveal="a-rise-stagger-lines"] .split .li,
[data-reveal="mask"] .split .li { display: inline-block; }

/* presets whose motion leaves the line box must not be clipped by the line mask (data-assemble already is) */
[data-reveal="a-glow"] .split .l,
[data-reveal="a-sparkle"] .split .l,
[data-reveal="a-unfold"] .split .l,
[data-reveal="a-drift"] .split .l,
[data-reveal="a-rise-stagger-lines"] .split .l,
[data-reveal="a-wipe"] .split .l { overflow: visible; }

/* a-unfold: words rotate around their baseline; the vanishing point sits on the line box, so at rest
   every word is exactly flat (identity transform) */
[data-assemble="a-unfold"] .split .l,
[data-reveal="a-unfold"] .split .l { perspective: 520px; perspective-origin: 50% 100%; }
[data-assemble="a-unfold"] .w,
[data-reveal="a-unfold"] .w { backface-visibility: hidden; }

/* a-wipe: each word is uncovered from its reading-start edge by a clip whose edge carries a 2px pink light.
   --wipe runs 0 → 1 (text.js); at 1 the clip is the word's own box and the light is gone. */
[data-assemble="a-wipe"] .w,
[data-reveal="a-wipe"] .w {
  --wipe: 1;
  position: relative;
  clip-path: inset(-.18em -.08em -.18em calc((1 - var(--wipe)) * 100%));
}
[data-assemble="a-wipe"] .w::after,
[data-reveal="a-wipe"] .w::after {
  content: "";
  position: absolute;
  top: -.06em; bottom: -.06em;
  width: 2px;
  left: calc((1 - var(--wipe)) * 100%);
  background: var(--pink, #ff8fbb);
  box-shadow: 0 0 6px var(--pink, #ff8fbb), 0 0 16px rgba(255, 143, 187, .7);
  opacity: calc(var(--wipe) * (1 - var(--wipe)) * 4);   /* 0 at both ends, full mid-wipe */
  pointer-events: none;
}
html[dir="ltr"] [data-assemble="a-wipe"] .w,
html[dir="ltr"] [data-reveal="a-wipe"] .w { clip-path: inset(-.18em calc((1 - var(--wipe)) * 100%) -.18em -.08em); }
html[dir="ltr"] [data-assemble="a-wipe"] .w::after,
html[dir="ltr"] [data-reveal="a-wipe"] .w::after { left: auto; right: calc((1 - var(--wipe)) * 100%); }
/* done: no clip, no bar, nothing left for the compositor to track */
[data-assemble="a-wipe"].is-done .w,
[data-reveal="a-wipe"].is-done .w { clip-path: none; }
[data-assemble="a-wipe"].is-done .w::after,
[data-reveal="a-wipe"].is-done .w::after { display: none; }

/* compositor hints only while a reveal is live (short titles: a few dozen glyphs, never a paragraph) */
[data-assemble="a-glow"]:not(.is-done) .c,
[data-assemble="a-sparkle"]:not(.is-done) .c,
[data-reveal="a-glow"]:not(.is-done) .c,
[data-reveal="a-sparkle"]:not(.is-done) .c,
[data-assemble="a-unfold"]:not(.is-done) .w,
[data-reveal="a-unfold"]:not(.is-done) .w,
[data-assemble="a-rise-stagger-lines"]:not(.is-done) .li,
[data-reveal="a-rise-stagger-lines"]:not(.is-done) .li { will-change: transform, opacity; }

/* ---------- a soft text glow, opt-in: white type with a pink halo (keeps the black frame underneath) ---------- */
.t-glow { text-shadow: 0 0 18px rgba(255, 143, 187, .38), 0 0 46px rgba(214, 74, 124, .2), var(--outline, 0 0 0 transparent); }

/* ---------- at rest nothing is faded: the secondary voices are pink-white at full opacity, never a grey ---------- */
.muted, .caction__val, .field__label, .totop, .gallery__count-sep, .gallery__count-total, .scene-index { color: var(--pink-soft, #f7dbe8); }
.field__label { opacity: 1; }

/* ---------- reduced motion: every helper is inert, the text is simply there ---------- */
@media (prefers-reduced-motion: reduce) {
  .sparks-canvas { display: none !important; }
  [data-assemble="a-wipe"] .w, [data-reveal="a-wipe"] .w { clip-path: none !important; }
  [data-assemble="a-wipe"] .w::after, [data-reveal="a-wipe"] .w::after { display: none; }
  [data-assemble] .w, [data-assemble] .c, [data-assemble] .li, [data-reveal] .w, [data-reveal] .c, [data-reveal] .li { will-change: auto; }
}