/* ============================================================
   MODAL — Animations & transitions
   Keyframes, idle motion, and reveal transitions.

   Reveal pattern (used by every section below the hero):
     - Initial state: opacity 0, translateY(24px)
     - Transition: 0.7s ease on opacity + transform
     - In-view state: opacity 1, no translate, with staggered delays
     - Driver: js/home.js IntersectionObserver adds .in-view to the
       section once 25% of it has scrolled into view.
   ============================================================ */

/* ---------- Globe drift ---------- */
@keyframes earth-drift {
  0%, 100% { transform: translate(-50%, -28%) translateY(0); }
  50%      { transform: translate(-50%, -28%) translateY(-10px); }
}

/* ---------- Body-card typing caret ---------- */
@keyframes caret-blink {
  0%, 55%      { opacity: 1; }
  55.01%, 100% { opacity: 0; }
}

/* ============================================================
   Reveal base — everything that animates in starts here
   ============================================================ */
.s2-eyebrow,
.s2-support,
.s3-eyebrow,
.s3-headline,
.s3-sub,
.s3-stream,
.s3-visual,
.s-tech-eyebrow,
.s-tech-headline,
.s-tech-sub,
.s-tech-pillar,
.s4-eyebrow,
.s4-headline,
.s4-sub,
.s4-claw,
.s4-metric,
.s4-closing,
.s-aud-eyebrow,
.s-aud-headline,
.s-aud-sub,
.s-aud-card,
.s5-eyebrow,
.s5-headline,
.s5-body {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

@media (prefers-reduced-motion: reduce) {
  .s2-eyebrow,    .s2-support,    .s2-line,        .s2-changes,
  .s3-eyebrow,    .s3-headline,    .s3-sub,        .s3-stream, .s3-visual,
  .s-tech-eyebrow,.s-tech-headline,.s-tech-sub,    .s-tech-pillar,
  .s4-eyebrow,    .s4-headline,    .s4-sub,        .s4-claw,   .s4-metric, .s4-closing,
  .s-aud-eyebrow, .s-aud-headline, .s-aud-sub,     .s-aud-card,
  .s5-eyebrow,    .s5-headline,    .s5-body {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Section 2 — Manifesto
   Headline + climactic line shoot in from the right; eyebrow + the
   supporting paragraph still use the site-wide rise-from-below.
   ============================================================ */
.s2-line,
.s2-changes {
  opacity: 0;
  /* Slide in from off-stage right — 60vw is far enough to feel like
     a real entrance without crossing the entire viewport. */
  transform: translate3d(60vw, 0, 0);
  /* Punchier curve than the default ease — fast travel, soft landing. */
  transition:
    opacity   0.55s ease,
    transform 0.85s cubic-bezier(0.18, 0.9, 0.22, 1);
  /* Headline lines extend full-width; clipping keeps the off-stage
     portion from triggering horizontal scroll while it animates. */
  will-change: transform, opacity;
}

/* Punchy stagger — ~0.25s between lines. Each line gets a quick
   clean entrance from the right before the next arrives; the whole
   sequence wraps in ~1.5s so it stays lively but the user still
   catches each line while scrolling through the slide-up. */
.section-2.in-view .s2-eyebrow                  { opacity: 1; transform: none; transition-delay: 0.10s; }
.section-2.in-view .s2-line:nth-child(1)        { opacity: 1; transform: none; transition-delay: 0.28s; }
.section-2.in-view .s2-line:nth-child(2)        { opacity: 1; transform: none; transition-delay: 0.46s; }
.section-2.in-view .s2-line:nth-child(3)        { opacity: 1; transform: none; transition-delay: 0.64s; }
.section-2.in-view .s2-line:nth-child(4)        { opacity: 1; transform: none; transition-delay: 0.82s; }
.section-2.in-view .s2-line:nth-child(5)        { opacity: 1; transform: none; transition-delay: 1.00s; }
.section-2.in-view .s2-line:nth-child(6)        { opacity: 1; transform: none; transition-delay: 1.18s; }
/* "MODAL changes that." — the punch line. Held back a beat after the
   final headline line so it lands with weight. */
.section-2.in-view .s2-changes                  { opacity: 1; transform: none; transition-delay: 1.45s; }
.section-2.in-view .s2-support                  { opacity: 1; transform: none; transition-delay: 1.75s; }

/* ============================================================
   Section 3 — The MODAL System (intro + two AOD/DCM streams)
   ============================================================ */
.section-3.in-view .s3-eyebrow                { opacity: 1; transform: none; transition-delay: 0.05s; }
.section-3.in-view .s3-headline               { opacity: 1; transform: none; transition-delay: 0.18s; }
.section-3.in-view .s3-sub                    { opacity: 1; transform: none; transition-delay: 0.30s; }
.section-3.in-view .s3-stream:nth-child(1)    { opacity: 1; transform: none; transition-delay: 0.42s; }
.section-3.in-view .s3-stream:nth-child(2)    { opacity: 1; transform: none; transition-delay: 0.54s; }
.section-3.in-view .s3-visual                 { opacity: 1; transform: none; transition-delay: 0.70s; }

/* Monitor flip-up — the system.png "screen" sits flat against the
   page initially, then rotates around its bottom edge to stand
   upright as section-3 enters view. Paired with the perspective +
   transform-origin on .s3-visual in css/home.css. */
.s3-visual-img {
  opacity: 0;
  transform: rotateX(-78deg) translate3d(0, 22px, 0);
  /* Slow, theatrical landing — soft cubic-bezier curve, no overshoot. */
  transition:
    opacity   0.7s ease,
    transform 1.05s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.section-3.in-view .s3-visual-img {
  opacity: 1;
  transform: rotateX(0) translate3d(0, 0, 0);
  /* Land well after the two stream cards (delay 0.54s) and the
     section-3 figure reveal (0.70s) so the monitor lifts last and
     reads as the visual payoff. Delayed extra to give the user time
     to scroll into it before the flip starts. */
  transition-delay: 1.35s;
}
@media (prefers-reduced-motion: reduce) {
  .s3-visual-img,
  .section-3.in-view .s3-visual-img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Section Technology — five R+D pillars (staggered list)
   ============================================================ */
.section-tech.in-view .s-tech-eyebrow              { opacity: 1; transform: none; transition-delay: 0.05s; }
.section-tech.in-view .s-tech-headline             { opacity: 1; transform: none; transition-delay: 0.18s; }
.section-tech.in-view .s-tech-sub                  { opacity: 1; transform: none; transition-delay: 0.30s; }
.section-tech.in-view .s-tech-pillar:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0.42s; }
.section-tech.in-view .s-tech-pillar:nth-child(2)  { opacity: 1; transform: none; transition-delay: 0.54s; }
.section-tech.in-view .s-tech-pillar:nth-child(3)  { opacity: 1; transform: none; transition-delay: 0.66s; }
.section-tech.in-view .s-tech-pillar:nth-child(4)  { opacity: 1; transform: none; transition-delay: 0.78s; }
.section-tech.in-view .s-tech-pillar:nth-child(5)  { opacity: 1; transform: none; transition-delay: 0.90s; }

/* ============================================================
   Section 4 — The MODAL Advantage (5 metric tiles)
   ============================================================ */
.section-4.in-view .s4-eyebrow                { opacity: 1; transform: none; transition-delay: 0.05s; }
.section-4.in-view .s4-headline               { opacity: 1; transform: none; transition-delay: 0.18s; }
.section-4.in-view .s4-sub                    { opacity: 1; transform: none; transition-delay: 0.30s; }
/* Claw shares the title row with the headline — reveal alongside it. */
.section-4.in-view .s4-claw                   { opacity: 1; transform: none; transition-delay: 0.24s; }
.section-4.in-view .s4-metric:nth-child(1)    { opacity: 1; transform: none; transition-delay: 0.42s; }
.section-4.in-view .s4-metric:nth-child(2)    { opacity: 1; transform: none; transition-delay: 0.54s; }
.section-4.in-view .s4-metric:nth-child(3)    { opacity: 1; transform: none; transition-delay: 0.66s; }
.section-4.in-view .s4-metric:nth-child(4)    { opacity: 1; transform: none; transition-delay: 0.78s; }
.section-4.in-view .s4-metric:nth-child(5)    { opacity: 1; transform: none; transition-delay: 0.90s; }
.section-4.in-view .s4-closing                { opacity: 1; transform: none; transition-delay: 1.05s; }

/* ============================================================
   Section Audience — three client cards
   ============================================================ */
.section-audience.in-view .s-aud-eyebrow             { opacity: 1; transform: none; transition-delay: 0.05s; }
.section-audience.in-view .s-aud-headline            { opacity: 1; transform: none; transition-delay: 0.18s; }
.section-audience.in-view .s-aud-sub                 { opacity: 1; transform: none; transition-delay: 0.30s; }
.section-audience.in-view .s-aud-card:nth-child(1)   { opacity: 1; transform: none; transition-delay: 0.42s; }
.section-audience.in-view .s-aud-card:nth-child(2)   { opacity: 1; transform: none; transition-delay: 0.54s; }
.section-audience.in-view .s-aud-card:nth-child(3)   { opacity: 1; transform: none; transition-delay: 0.66s; }

/* ============================================================
   Section 5 — The MODAL Fleet (truck bg + surrounding paragraphs)
   ============================================================ */
.section-5.in-view .s5-eyebrow                    { opacity: 1; transform: none; transition-delay: 0.05s; }
.section-5.in-view .s5-headline                   { opacity: 1; transform: none; transition-delay: 0.18s; }
.section-5.in-view .s5-body--left                 { opacity: 1; transform: none; transition-delay: 0.42s; }
.section-5.in-view .s5-body--right                { opacity: 1; transform: none; transition-delay: 0.54s; }
.section-5.in-view .s5-body--bottom               { opacity: 1; transform: none; transition-delay: 0.66s; }

/* ============================================================
   ABOUT + TEAM pages — base reveal state
   Same pattern as home: eyebrow → headline → body → cards,
   with a small stagger. The hero block animates on page load
   (IntersectionObserver fires immediately since it's already in
   view at threshold 0.15).
   ============================================================ */
.ab-hero .ab-eyebrow,
.ab-hero .ab-hero-headline,
.ab-hero .ab-hero-sub,
.ab-section .ab-eyebrow,
.ab-section .ab-headline,
.ab-section .ab-lead,
.ab-section .ab-closing,
.ab-section .ab-cta-headline,
.ab-section .ab-points li,
.ab-section .ab-block,
.ab-section .ab-sub,
.ab-section .ab-partner-group,
.ab-section .ab-cta-links li,
.ab-section .tm-row,
.ab-section .tm-network-body {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
@media (prefers-reduced-motion: reduce) {
  .ab-hero .ab-eyebrow,        .ab-hero .ab-hero-headline,  .ab-hero .ab-hero-sub,
  .ab-section .ab-eyebrow,     .ab-section .ab-headline,    .ab-section .ab-lead,
  .ab-section .ab-closing,     .ab-section .ab-cta-headline,
  .ab-section .ab-points li,   .ab-section .ab-block,       .ab-section .ab-sub,
  .ab-section .ab-partner-group, .ab-section .ab-cta-links li,
  .ab-section .tm-row,         .ab-section .tm-network-body {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* About / Team — hero (fires on load) */
.ab-hero.in-view .ab-eyebrow                          { opacity: 1; transform: none; transition-delay: 0.05s; }
.ab-hero.in-view .ab-hero-headline                    { opacity: 1; transform: none; transition-delay: 0.18s; }
.ab-hero.in-view .ab-hero-sub                         { opacity: 1; transform: none; transition-delay: 0.30s; }

/* About / Team — generic per-section reveals */
.ab-section.in-view .ab-eyebrow                       { opacity: 1; transform: none; transition-delay: 0.05s; }
.ab-section.in-view .ab-headline                      { opacity: 1; transform: none; transition-delay: 0.18s; }
.ab-section.in-view .ab-lead                          { opacity: 1; transform: none; transition-delay: 0.30s; }
.ab-section.in-view .ab-cta-headline                  { opacity: 1; transform: none; transition-delay: 0.05s; }
.ab-section.in-view .ab-closing                       { opacity: 1; transform: none; transition-delay: 0.70s; }

/* About — worldview numbered points */
.ab-section.in-view .ab-points li:nth-child(1)        { opacity: 1; transform: none; transition-delay: 0.36s; }
.ab-section.in-view .ab-points li:nth-child(2)        { opacity: 1; transform: none; transition-delay: 0.46s; }
.ab-section.in-view .ab-points li:nth-child(3)        { opacity: 1; transform: none; transition-delay: 0.56s; }
.ab-section.in-view .ab-points li:nth-child(4)        { opacity: 1; transform: none; transition-delay: 0.66s; }

/* About — platform + foundation blocks */
.ab-section.in-view .ab-block:nth-child(1)            { opacity: 1; transform: none; transition-delay: 0.36s; }
.ab-section.in-view .ab-block:nth-child(2)            { opacity: 1; transform: none; transition-delay: 0.48s; }
.ab-section.in-view .ab-block:nth-child(3)            { opacity: 1; transform: none; transition-delay: 0.60s; }

/* About — future sub-cards */
.ab-section.in-view .ab-sub:nth-child(1)              { opacity: 1; transform: none; transition-delay: 0.36s; }
.ab-section.in-view .ab-sub:nth-child(2)              { opacity: 1; transform: none; transition-delay: 0.48s; }
.ab-section.in-view .ab-sub:nth-child(3)              { opacity: 1; transform: none; transition-delay: 0.60s; }

/* About — partner groups (8) */
.ab-section.in-view .ab-partner-group:nth-child(1)    { opacity: 1; transform: none; transition-delay: 0.42s; }
.ab-section.in-view .ab-partner-group:nth-child(2)    { opacity: 1; transform: none; transition-delay: 0.50s; }
.ab-section.in-view .ab-partner-group:nth-child(3)    { opacity: 1; transform: none; transition-delay: 0.58s; }
.ab-section.in-view .ab-partner-group:nth-child(4)    { opacity: 1; transform: none; transition-delay: 0.66s; }
.ab-section.in-view .ab-partner-group:nth-child(5)    { opacity: 1; transform: none; transition-delay: 0.74s; }
.ab-section.in-view .ab-partner-group:nth-child(6)    { opacity: 1; transform: none; transition-delay: 0.82s; }
.ab-section.in-view .ab-partner-group:nth-child(7)    { opacity: 1; transform: none; transition-delay: 0.90s; }
.ab-section.in-view .ab-partner-group:nth-child(8)    { opacity: 1; transform: none; transition-delay: 0.98s; }

/* About — CTA link list */
.ab-section.in-view .ab-cta-links li:nth-child(1)     { opacity: 1; transform: none; transition-delay: 0.22s; }
.ab-section.in-view .ab-cta-links li:nth-child(2)     { opacity: 1; transform: none; transition-delay: 0.32s; }
.ab-section.in-view .ab-cta-links li:nth-child(3)     { opacity: 1; transform: none; transition-delay: 0.42s; }

/* Team — exec rows */
.ab-section.in-view .tm-row:nth-child(1)              { opacity: 1; transform: none; transition-delay: 0.30s; }
.ab-section.in-view .tm-row:nth-child(2)              { opacity: 1; transform: none; transition-delay: 0.42s; }
.ab-section.in-view .tm-row:nth-child(3)              { opacity: 1; transform: none; transition-delay: 0.54s; }
.ab-section.in-view .tm-row:nth-child(4)              { opacity: 1; transform: none; transition-delay: 0.66s; }
.ab-section.in-view .tm-row:nth-child(5)              { opacity: 1; transform: none; transition-delay: 0.78s; }

/* Team — network body */
.ab-section.in-view .tm-network-body                  { opacity: 1; transform: none; transition-delay: 0.30s; }

/* ============================================================
   CONTACT page reveals
   ============================================================ */
.ct-stage .ct-eyebrow,
.ct-stage .ct-headline,
.ct-stage .ct-sub,
.ct-stage .ct-card,
.ct-stage .ct-specs,
.ct-stage .ct-quote-row {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
@media (prefers-reduced-motion: reduce) {
  .ct-stage .ct-eyebrow, .ct-stage .ct-headline, .ct-stage .ct-sub,
  .ct-stage .ct-card,    .ct-stage .ct-specs,    .ct-stage .ct-quote-row {
    opacity: 1; transform: none; transition: none;
  }
}
.ct-stage.in-view .ct-eyebrow              { opacity: 1; transform: none; transition-delay: 0.05s; }
.ct-stage.in-view .ct-headline             { opacity: 1; transform: none; transition-delay: 0.18s; }
.ct-stage.in-view .ct-sub                  { opacity: 1; transform: none; transition-delay: 0.30s; }
.ct-stage.in-view .ct-card:nth-child(1)    { opacity: 1; transform: none; transition-delay: 0.42s; }
.ct-stage.in-view .ct-card:nth-child(2)    { opacity: 1; transform: none; transition-delay: 0.54s; }
.ct-stage.in-view .ct-card:nth-child(3)    { opacity: 1; transform: none; transition-delay: 0.66s; }
.ct-stage.in-view .ct-specs                { opacity: 1; transform: none; transition-delay: 0.82s; }
.ct-stage.in-view .ct-quote-row            { opacity: 1; transform: none; transition-delay: 0.98s; }

/* ============================================================
   PROJECTS page reveals — hero + tile grid + closing
   ============================================================ */
.pj-hero .pj-eyebrow,
.pj-hero .pj-headline,
.pj-hero .pj-sub,
.pj-grid-section .pj-tile,
.pj-closing-section .pj-closing-eyebrow,
.pj-closing-section .pj-closing-headline,
.pj-closing-section .pj-closing-sub {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
@media (prefers-reduced-motion: reduce) {
  .pj-hero .pj-eyebrow, .pj-hero .pj-headline, .pj-hero .pj-sub,
  .pj-grid-section .pj-tile,
  .pj-closing-section .pj-closing-eyebrow,
  .pj-closing-section .pj-closing-headline,
  .pj-closing-section .pj-closing-sub {
    opacity: 1; transform: none; transition: none;
  }
}
.pj-hero.in-view .pj-eyebrow                          { opacity: 1; transform: none; transition-delay: 0.05s; }
.pj-hero.in-view .pj-headline                         { opacity: 1; transform: none; transition-delay: 0.18s; }
.pj-hero.in-view .pj-sub                              { opacity: 1; transform: none; transition-delay: 0.30s; }

.pj-grid-section.in-view .pj-tile:nth-child(1)        { opacity: 1; transform: none; transition-delay: 0.10s; }
.pj-grid-section.in-view .pj-tile:nth-child(2)        { opacity: 1; transform: none; transition-delay: 0.22s; }
.pj-grid-section.in-view .pj-tile:nth-child(3)        { opacity: 1; transform: none; transition-delay: 0.34s; }
.pj-grid-section.in-view .pj-tile:nth-child(4)        { opacity: 1; transform: none; transition-delay: 0.46s; }
.pj-grid-section.in-view .pj-tile:nth-child(5)        { opacity: 1; transform: none; transition-delay: 0.58s; }

.pj-closing-section.in-view .pj-closing-eyebrow       { opacity: 1; transform: none; transition-delay: 0.05s; }
.pj-closing-section.in-view .pj-closing-headline      { opacity: 1; transform: none; transition-delay: 0.18s; }
.pj-closing-section.in-view .pj-closing-sub           { opacity: 1; transform: none; transition-delay: 0.30s; }

/* ============================================================
   PORTAL page reveals — login card + request line
   ============================================================ */
.pt-stage .pt-card,
.pt-stage .pt-request,
.pt-stage .ct-quote-row {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
@media (prefers-reduced-motion: reduce) {
  .pt-stage .pt-card, .pt-stage .pt-request, .pt-stage .ct-quote-row {
    opacity: 1; transform: none; transition: none;
  }
}
.pt-stage.in-view .pt-card        { opacity: 1; transform: none; transition-delay: 0.10s; }
.pt-stage.in-view .pt-request     { opacity: 1; transform: none; transition-delay: 0.40s; }
.pt-stage.in-view .ct-quote-row   { opacity: 1; transform: none; transition-delay: 0.55s; }