/* ============================================================================
 * sca-motion.css
 * Sistema Consultor Autónomo (SCA) landing — the seven reveal variants,
 * the is-ready gate, and the reduced-motion amplitude reduction.
 * Implements B8 and the B11 reduced-motion contract.
 *
 * Every variant is a pair of rules: a resting state on [data-reveal="X"] and a
 * target state on [data-reveal="X"].is-in, both reading
 *   transition-delay: var(--reveal-delay, 0s)
 * which behaviors/reveal.js writes from data-reveal-index × data-reveal-step.
 *
 * SECTIONS REFER TO A REVEAL BY VARIANT NAME AND INDEX ONLY:
 *   data-reveal="blurIn" data-reveal-index="2"
 * Do NOT re-specify a duration or a curve inside a section. They are fixed here.
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 * 1 · fade — the plain fade + rise entrance.
 * Folds 1, 3, 6, 8, 10, 12, 13, 14.
 * -------------------------------------------------------------------------*/
[data-reveal="fade"] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity   .9s var(--ease) var(--reveal-delay, 0s),
              transform .9s var(--ease) var(--reveal-delay, 0s);
}
[data-reveal="fade"].is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
 * 2 · blurIn — opacity 0→1, y 24→0, blur(14px)→0, 1.1s.
 * Folds 4, 5, 7.
 * -------------------------------------------------------------------------*/
[data-reveal="blurIn"] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(14px);
  transition: opacity   1.1s var(--ease) var(--reveal-delay, 0s),
              transform 1.1s var(--ease) var(--reveal-delay, 0s),
              filter    1.1s var(--ease) var(--reveal-delay, 0s);
}
[data-reveal="blurIn"].is-in { opacity: 1; transform: none; filter: blur(0); }

/* ---------------------------------------------------------------------------
 * 3 · photoIn — opacity 0→1, scale 0.92→1, blur(12px)→0, 1.2s.
 * Fold 9.
 * -------------------------------------------------------------------------*/
[data-reveal="photoIn"] {
  opacity: 0;
  transform: scale(0.92);
  filter: blur(12px);
  transition: opacity   1.2s var(--ease) var(--reveal-delay, 0s),
              transform 1.2s var(--ease) var(--reveal-delay, 0s),
              filter    1.2s var(--ease) var(--reveal-delay, 0s);
}
[data-reveal="photoIn"].is-in { opacity: 1; transform: none; filter: blur(0); }

/* ---------------------------------------------------------------------------
 * 4 · maskedImage — clip-path inset(100% 0 0 0) → inset(0% 0 0 0), 1.1s.
 * Folds 8, 13.
 * -------------------------------------------------------------------------*/
[data-reveal="maskedImage"] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s var(--ease) var(--reveal-delay, 0s);
}
[data-reveal="maskedImage"].is-in { clip-path: inset(0% 0 0 0); }

/* ---------------------------------------------------------------------------
 * 5 · wordRise — per-word rise. Inner span y 110% → 0, opacity 0 → 1,
 * 0.6s WORDRISE, stagger 60ms. Folds 1, 5, 11.
 *
 * The wrapper carries overflow:hidden AND padding-bottom:.2em — without the
 * padding the clip slices the descenders of y, g, p, j. This is one of the
 * three sanctioned uses of overflow:hidden on the page.
 *
 * The renderer writes the per-word delay on each .sca-word__in:
 *   style="transition-delay: calc(var(--reveal-delay, 0s) + {N} * 0.06s)"
 * where {N} is the zero-based word index.
 * -------------------------------------------------------------------------*/
[data-reveal="wordRise"] .sca-word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: .2em;
  vertical-align: bottom;
}
[data-reveal="wordRise"] .sca-word__in {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  transition: opacity   .6s var(--wordrise),
              transform .6s var(--wordrise);
}
[data-reveal="wordRise"].is-in .sca-word__in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
 * 6 · curtain — per-word y 110% → 0, 1.05s, six fixed delays. Fold 14 only.
 * The six delays are literal, written per word by the renderer:
 *   0.1s / 0.18s / 0.26s / 0.34s / 0.42s / 0.5s
 * The headline is six words by construction in both languages.
 * -------------------------------------------------------------------------*/
[data-reveal="curtain"] .sca-word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: .2em;
  vertical-align: bottom;
}
[data-reveal="curtain"] .sca-word__in {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.05s var(--ease);
}
[data-reveal="curtain"].is-in .sca-word__in { transform: none; }

/* ---------------------------------------------------------------------------
 * 7 · draw — SVG stroke reveal. Replaces a pathLength animation.
 * The renderer sets --len to the path length; stroke-dasharray and
 * stroke-dashoffset both take it. Folds 5, 6, 7.
 * -------------------------------------------------------------------------*/
[data-reveal="draw"] {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset .9s var(--ease) var(--reveal-delay, 0s);
}
[data-reveal="draw"].is-in { stroke-dashoffset: 0; }

/* ============================================================================
 * is-ready GATE — owned by behaviors/sca-gate.js.
 *
 * Every CSS animation stays paused until <body> gets `.is-ready`, which lands
 * on document.fonts.ready OR on the 2000ms GATE_FALLBACK, whichever is first.
 * The fallback is NOT optional: if Google Fonts is slow or blocked,
 * document.fonts.ready never settles, nothing throws, the console stays clean,
 * and the page simply never moves.
 *
 * SCOPED to body.sca-active and to SCA subtrees on purpose. B8 writes this
 * as `body:not(.is-ready) *`, which would also freeze the shared SPA loading
 * spinner in index.html and every animation in the director / developer /
 * client panels. Same effect on this page, no blast radius off it.
 * ==========================================================================*/

body.sca-active:not(.is-ready) .sca-fold,
body.sca-active:not(.is-ready) .sca-fold *,
body.sca-active:not(.is-ready) .sca-fold *::before,
body.sca-active:not(.is-ready) .sca-fold *::after,
body.sca-active:not(.is-ready) .sca-nav,
body.sca-active:not(.is-ready) .sca-nav *,
body.sca-active:not(.is-ready) .sca-nav *::before,
body.sca-active:not(.is-ready) .sca-nav *::after,
body.sca-active:not(.is-ready) .sca-sticky,
body.sca-active:not(.is-ready) .sca-sticky * {
  animation-play-state: paused !important;
}

/* prefers-reduced-motion lives in sca-reduced-motion.css, which MUST load last.
   Moving it back here re-introduces the cascade bug: sheets loaded after this
   one beat it at equal specificity and the reduction silently stops applying. */