/* =========================================================
   Visual effects (approved 8 Nov 2026)
   Each effect is switched by a class on <html>:
     .fx-band   navy band behind the key figures in "About us"
     .fx-count  figures count up once when scrolled into view (logic in fx.js)
     .fx-rows   numbered focus rows that fly in from below, one after another
     .fx-zoom   section images ease from slightly enlarged to normal size while scrolling in (logic in fx.js)
   Remove: delete this file, assets/js/fx.js, their two tags in src/home.html
   and the four classes on <html>; then run tools/build_site.py.
   ========================================================= */

/* ---------- 1. Navy band ---------- */

.fx-band .stats-band {
  position: relative;
  margin-top: 120px;
  padding: 104px 0 96px;
  color: var(--white);
  background: var(--navy);
  /* full-bleed background without horizontal overflow */
  box-shadow: 0 0 0 100vmax var(--navy);
  clip-path: inset(0 -100vmax);
}
.fx-band .stats-band .stats { margin-top: 0; }
.fx-band .stats-band .stats__number { color: var(--white); }
.fx-band .stats-band .stats__label { color: rgba(255, 255, 255, 0.72); }
.fx-band .stats-band .stats__note { margin-top: 56px; color: rgba(255, 255, 255, 0.56); }

/* ---------- 2. Count-up ---------- */

.fx-count .proof__number,
.fx-count .stats__number,
.fx-count .about__years { font-variant-numeric: tabular-nums; }

/* ---------- 3. Focus rows ---------- */

.fx-rows .focus { counter-reset: fx-row; }
.fx-rows .focus__row {
  position: relative;
  counter-increment: fx-row;
}
/* small blue index above each title; hidden from screen readers where supported */
.fx-rows .focus__title::before {
  content: counter(fx-row, decimal-leading-zero);
  content: counter(fx-row, decimal-leading-zero) / "";
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--blue);
}
/* rows fly in from below, one after another – only once fx.js is running (no-JS shows everything) */
.fx-rows.fx-ready .focus__row {
  opacity: 0;
  transform: translateY(72px);
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--fx-i, 0) * 110ms);
}
.fx-rows.fx-ready .focus__row.is-in { opacity: 1; transform: none; }

@media (max-width: 899px) {
  .fx-band .stats-band { margin-top: 80px; padding: 72px 0 64px; }
  .fx-band .stats-band .stats__note { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-rows.fx-ready .focus__row { opacity: 1; transform: none; transition: none; }
}

/* ---------- 4. Image zoom ---------- */

.fx-zoom .segment__img { transform-origin: 70% 50%; will-change: transform; }