/* ════════════════════════════════════════════════════════
   RSON AIRFLOW — PREMIUM SCROLL ANIMATION SYSTEM v2
   Pure CSS + JS · No libraries · Intersection Observer
   ════════════════════════════════════════════════════════

   AVAILABLE CLASSES (scroll-triggered via JS observer):
   .rson-left    → slides in from left  + fade
   .rson-right   → slides in from right + fade
   .rson-up      → rises up from below  + fade
   .rson-scale   → clip-reveal + scale  (images / cards)
   .rson-line    → heading line wipe (clip-path, luxury feel)
   .rson-mask    → full image mask wipe left→right

   HERO (fires on load, not scroll):
   .rson-hero-left / .rson-hero-right / .rson-hero-up

   DELAY (optional):
   style="--delay: 200ms"
   ════════════════════════════════════════════════════════ */


/* ── EASING TOKENS ─────────────────────────────────────── */
:root {
  --rson-ease-out-expo : cubic-bezier(0.16, 1, 0.3, 1);
  --rson-ease-premium  : cubic-bezier(0.22, 1, 0.36, 1);   /* smoother tail */
  --rson-ease-reveal   : cubic-bezier(0.76, 0, 0.24, 1);   /* clip wipe */
  --rson-dur-base      : 1100ms;
  --rson-dur-long      : 1400ms;
  --rson-dur-hero      : 1200ms;
}


/* ══════════════════════════════════════════════════════════
   SCROLL CLASSES — hidden base states
   ══════════════════════════════════════════════════════════ */

.rson-left,
.rson-right,
.rson-up,
.rson-scale,
.rson-line,
.rson-mask {
  will-change: opacity, transform;
}

/* — Slide left — */
.rson-left {
  opacity: 0;
  transform: translateX(-60px);
  transition:
    opacity  var(--rson-dur-base) var(--rson-ease-premium) var(--delay, 0ms),
    transform var(--rson-dur-base) var(--rson-ease-premium) var(--delay, 0ms);
}

/* — Slide right — */
.rson-right {
  opacity: 0;
  transform: translateX(60px);
  transition:
    opacity  var(--rson-dur-base) var(--rson-ease-premium) var(--delay, 0ms),
    transform var(--rson-dur-base) var(--rson-ease-premium) var(--delay, 0ms);
}

/* — Rise up — */
.rson-up {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity  var(--rson-dur-base) var(--rson-ease-premium) var(--delay, 0ms),
    transform var(--rson-dur-base) var(--rson-ease-premium) var(--delay, 0ms);
}

/* — Scale / clip reveal (images, cards) — */
.rson-scale {
  opacity: 0;
  transform: scale(0.92) translateY(24px);
  clip-path: inset(6% 3% 6% 3% round 4px);
  transition:
    opacity   var(--rson-dur-long) var(--rson-ease-premium) var(--delay, 0ms),
    transform var(--rson-dur-long) var(--rson-ease-premium) var(--delay, 0ms),
    clip-path var(--rson-dur-long) var(--rson-ease-reveal)  var(--delay, 0ms);
}

/* — Line wipe (headings / large text) — */
.rson-line {
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path var(--rson-dur-long) var(--rson-ease-reveal) var(--delay, 0ms);
}

/* — Full mask wipe (full-width banners / images) — */
.rson-mask {
  clip-path: inset(0 100% 0 0 round 2px);
  transition:
    clip-path var(--rson-dur-long) var(--rson-ease-reveal) var(--delay, 0ms);
}


/* ── REVEALED STATE (JS adds .in-view) ─────────────────── */

.rson-left.in-view,
.rson-right.in-view,
.rson-up.in-view {
  opacity: 1;
  transform: none;
}

.rson-scale.in-view {
  opacity: 1;
  transform: none;
  clip-path: inset(0% 0% 0% 0% round 4px);
}

.rson-line.in-view,
.rson-mask.in-view {
  clip-path: inset(0 0% 0 0);
}


/* ══════════════════════════════════════════════════════════
   HERO SECTION — fires on page load via @keyframes
   ══════════════════════════════════════════════════════════ */

.rson-hero-left {
  animation: rsonHeroLeft var(--rson-dur-hero) var(--rson-ease-premium) var(--delay, 200ms) both;
}
.rson-hero-right {
  animation: rsonHeroRight var(--rson-dur-hero) var(--rson-ease-premium) var(--delay, 0ms) both;
}
.rson-hero-up {
  animation: rsonHeroUp var(--rson-dur-hero) var(--rson-ease-premium) var(--delay, 0ms) both;
}
.rson-hero-line {
  animation: rsonHeroLine var(--rson-dur-long) var(--rson-ease-reveal) var(--delay, 0ms) both;
}

@keyframes rsonHeroLeft {
  from { opacity: 0; transform: translateX(-70px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rsonHeroRight {
  from { opacity: 0; transform: translateX(70px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rsonHeroUp {
  from { opacity: 0; transform: translateY(55px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rsonHeroLine {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}


/* ══════════════════════════════════════════════════════════
   SECTION-BY-SECTION CLASS GUIDE  (v2)
   ══════════════════════════════════════════════════════════

   ── 01. HERO BANNER ──────────────────────────────────────
   H1 headline           → class="rson-hero-left"
   Subtext               → class="rson-hero-up"    style="--delay:300ms"

   ── 02. WHAT DRIVES RSON AIRFLOW ─────────────────────────
   Sub-label             → class="rson-left"
   H2                    → class="rson-left"        style="--delay:120ms"
   Para 1                → class="rson-left"        style="--delay:240ms"
   Para 2                → class="rson-left"        style="--delay:340ms"
   Video block           → class="rson-scale"       style="--delay:200ms"

   ── 03. BUILT FOR AIR CONTROL ────────────────────────────
   Sub-label             → class="rson-left"
   H2                    → class="rson-left"        style="--delay:120ms"
   Para                  → class="rson-left"        style="--delay:240ms"
   CTA btn               → class="rson-left"        style="--delay:360ms"

   ── 04. PRODUCT ICON TABS ────────────────────────────────
   Tab 1–6               → class="rson-up"          style="--delay: N×80ms"

   ── 05. HOW WE DELIVER RESULTS ───────────────────────────
   Section heading       → class="rson-up"
   Each process image    → class="rson-left"        style="--delay:120ms"
   Each process content  → class="rson-right"       style="--delay:220ms"

   ── 06. STATS ROW ────────────────────────────────────────
   Stat 1–4              → class="rson-up"          style="--delay: N×120ms"
   Number span           → add data-count + data-suffix

   ── 07. FAQ ──────────────────────────────────────────────
   Heading               → class="rson-up"
   FAQ items             → class="rson-up"          style="--delay: N×100ms"
   FAQ image             → class="rson-mask"

   ── 08. INDUSTRIES ───────────────────────────────────────
   Section heading       → class="rson-left"
   Each card             → class="rson-scale"       style="--delay: N×100ms"

   ── 09. PARTNER LOGOS ────────────────────────────────────
   Heading               → class="rson-left"
   Para                  → class="rson-left"        style="--delay:120ms"
   Each logo             → class="rson-up"          style="--delay: N×60ms"

   ── 10. CTA STRIP ────────────────────────────────────────
   Heading               → class="rson-up"
   Button                → class="rson-up"          style="--delay:180ms"

   ── 11. EMAIL CTA ────────────────────────────────────────
   Email address         → class="rson-line"
   Subtitle              → class="rson-up"          style="--delay:200ms"
   Desc                  → class="rson-up"          style="--delay:350ms"

   ══════════════════════════════════════════════════════════ */


/* ── ACCESSIBILITY ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rson-left,
  .rson-right,
  .rson-up,
  .rson-scale,
  .rson-line,
  .rson-mask {
    transition: opacity 200ms ease;
    transform: none;
    clip-path: none !important;
  }
  .rson-hero-left,
  .rson-hero-right,
  .rson-hero-up,
  .rson-hero-line {
    animation: none;
    opacity: 1;
    clip-path: none;
  }
}