/* ============================================================================
   X3WEB — MOTION
   Two systems, deliberately separate:
     1. Scroll reveal for the page body, driven by IntersectionObserver.
     2. A one-shot hero entrance, driven by WAAPI from hero-entrance.js.
   Both no-op under prefers-reduced-motion and both degrade to the finished
   frame when JavaScript does not run.
   ========================================================================== */

/* ── Scroll reveal ─────────────────────────────────────────────────────── *
   Pre-states apply only when JS is present (html.js), so a no-JS visitor sees
   the finished page rather than a blank one.                                */
.js .reveal,
.js .reveal-left,
.js .reveal-right,
.js .reveal-scale{
  opacity:0;
  transition:opacity var(--dur-reveal) var(--ease-soft),transform var(--dur-reveal) var(--ease-soft);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.js .reveal{transform:translateY(20px)}
.js .reveal-left{transform:translateX(-24px)}
.js .reveal-right{transform:translateX(24px)}
.js .reveal-scale{transform:scale(.965)}

.js .reveal.is-visible,
.js .reveal-left.is-visible,
.js .reveal-right.is-visible,
.js .reveal-scale.is-visible{
  opacity:1;
  transform:none;
}

/* Legacy alias retained: some templates still mark blocks with .fade-up. */
.js .fade-up{opacity:0;transform:translateY(20px);transition:opacity var(--dur-reveal) var(--ease-soft),transform var(--dur-reveal) var(--ease-soft)}
.js .fade-up.is-visible{opacity:1;transform:none}

/* ── Hero entrance ─────────────────────────────────────────────────────── *
   html.hero-pre is set by an inline head script before first paint and removed
   by the timeline once it finishes, so the resting frame is the authored CSS.
   The video plate is the stage: it never animates, only the foreground does.  */
html.hero-pre .hero .section-label,
html.hero-pre .page-hero .section-label,
html.hero-pre .hero-eyebrow,
html.hero-pre .hero-sub,
html.hero-pre .hero-btns,
html.hero-pre .hero-panel,
html.hero-pre .breadcrumb,
html.hero-pre .site-header{opacity:0}

html.hero-pre .hero h1,
html.hero-pre .page-hero h1,
html.hero-pre .hero h2,
html.hero-pre .page-hero h2{clip-path:inset(100% 0 -14% 0)}

html.hero-pre .hero-panel-track i{scale:0 1}
html.hero-pre .hero-panel-dot{scale:0}

/* ── Connector line draw ───────────────────────────────────────────────── *
   Used once, by the South Africa → America section. The path's own length
   is set inline per-instance (stroke-dasharray/offset), so this file only
   owns the timing: it animates from fully hidden to fully drawn once the
   section's .reveal wrapper picks up .is-visible from reveal.js. Sits inside
   the reduced-motion blanket rule below like every other transition on the
   site, so it still resolves to the finished line — just without the draw. */
.connector-line{
  stroke-dashoffset:var(--connector-len,1000);
  transition:stroke-dashoffset 1.4s var(--ease-expo) .2s;
}
.is-visible .connector-line{stroke-dashoffset:0}

.connector-node{
  transform:scale(0);
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .5s var(--ease-soft);
}
.connector-node--start{transition-delay:.1s}
.connector-node--end{transition-delay:1.3s}
.is-visible .connector-node{transform:scale(1)}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .js .reveal,.js .reveal-left,.js .reveal-right,.js .reveal-scale,.js .fade-up{
    opacity:1;transform:none;
  }
  html.hero-pre .hero .section-label,
  html.hero-pre .page-hero .section-label,
  html.hero-pre .hero-eyebrow,
  html.hero-pre .hero-sub,
  html.hero-pre .hero-btns,
  html.hero-pre .hero-panel,
  html.hero-pre .breadcrumb,
  html.hero-pre .site-header{opacity:1}
  html.hero-pre .hero h1,
  html.hero-pre .page-hero h1,
  html.hero-pre .hero h2,
  html.hero-pre .page-hero h2{clip-path:none}
  html.hero-pre .hero-panel-track i,
  html.hero-pre .hero-panel-dot{scale:1}
  .connector-line{stroke-dashoffset:0}
  .connector-node{transform:scale(1)}
}