/* ecuador-hoy — the enhanced states of «El día dura lo mismo.».
   The ledger, the day line and the live variants are laid out in styles.css (no JS,
   reduced motion and a GSAP-less page all read them there). Everything below hangs from
   html.fx-ecuador, which fx/ecuador-hoy.js adds only after a motion init succeeded.
   .eh-row.is-now   — the row shows its live variant (official → live, once).
   .eh-day.is-drawn — the day line was born (once).
   --line           — how much of a row's (or the sources line's) rule and bar is drawn, 0–1. */

/* ---------- Rolling figures ----------
   The odometer's slots share the figure's line box (line-height .9), so the digits sit
   on the same baseline as the separators between them. */
html.fx-ecuador .ecuador-hoy .eh-num .odo-d {
  height: 0.9em;
  height: 1lh;
  line-height: 0.9em;
}

/* ---------- Rules draw with scroll (--line, written by fx/ecuador-hoy.js) ----------
   Rows and the line to the sources. Only here: a --line left behind by a partial init can never
   collapse the static rules. */
html.fx-ecuador .ecuador-hoy :is(.eh-rule, .eh-bar) { transform: scaleX(var(--line, 1)); }

/* ---------- Official → live: the label changes in place ----------
   styles.css hides the inactive variant with visibility (no JS / reduced motion). Here the
   visibility change rides the opacity transition: visibility interpolates as visible for
   the whole run, so the official label fades out before it hides and the live one shows
   as its delayed fade starts. */
html.fx-ecuador .eh-swap > * {
  transition:
    opacity var(--t-micro) var(--ease-react),
    visibility var(--t-micro) var(--ease-react);
}

html.fx-ecuador .eh-swap > .l-1 { opacity: 0; }
html.fx-ecuador .is-now .eh-swap > .l-0 { opacity: 0; }

html.fx-ecuador .is-now .eh-swap > .l-1 {
  opacity: 1;
  transition-delay: 0.15s;
}

/* ---------- The day line is born where the catalyst sets down ---------- */
html.fx-ecuador .eh-day-line::before {
  transform: scaleX(0);
  transition: transform var(--t-long) var(--ease-react);
}

html.fx-ecuador .eh-light {
  transform: scaleX(0);
  transition: transform var(--t-long) var(--ease-react) 0.15s;
}

html.fx-ecuador .eh-day.is-drawn .eh-day-line::before,
html.fx-ecuador .eh-day.is-drawn .eh-light { transform: none; }

html.fx-ecuador .eh-day-scale > :is(.eh-tick, .eh-end, .eh-sr, .eh-ss, .eh-now, .eh-now-tick) {
  opacity: 0;
  translate: 0 8px;
  transition:
    opacity var(--t-short) var(--ease-react) var(--d, 0.3s),
    translate var(--t-short) var(--ease-react) var(--d, 0.3s);
}

html.fx-ecuador .eh-day-scale > .eh-end { --d: 0.36s; }
html.fx-ecuador .eh-day-scale > .eh-sr { --d: 0.42s; }
html.fx-ecuador .eh-day-scale > .eh-ss { --d: 0.48s; }
html.fx-ecuador .eh-day-scale > :is(.eh-now, .eh-now-tick) { --d: 0.54s; }

html.fx-ecuador .eh-day.is-drawn .eh-day-scale > :is(.eh-tick, .eh-end, .eh-sr, .eh-ss, .eh-now, .eh-now-tick) {
  opacity: 1;
  translate: none;
}

/* A label the catalyst sits on steps aside, and comes back once it leaves. */
html.fx-ecuador .eh-day.is-drawn .eh-day-scale > .is-near {
  opacity: 0;
  transition-delay: 0s;
}

/* ---------- Releases: reduced motion switched on mid-session, and print ---------- */
@media print, (prefers-reduced-motion: reduce) {
  html.fx-ecuador .eh-swap > * { transition: none; }
  html.fx-ecuador .eh-row:not(.is-now) .eh-swap > .l-0,
  html.fx-ecuador .is-now .eh-swap > .l-1 { opacity: 1; }

  html.fx-ecuador .ecuador-hoy :is(.eh-rule, .eh-bar),
  html.fx-ecuador .eh-day-line::before,
  html.fx-ecuador .eh-light { transform: none; }

  html.fx-ecuador .eh-day-scale > :is(.eh-tick, .eh-end, .eh-sr, .eh-ss, .eh-now, .eh-now-tick) {
    opacity: 1;
    translate: none;
  }
}