/* ═══════════════════════════════════════════════════════════════
   SCROLL-DRIVEN CINEMATICS — LawIA
   Progressive enhancement: scroll-driven animations wrapped
   in @supports. Falls back to IntersectionObserver reveals
   on unsupported browsers (Firefox).

   Supported: Chrome 115+, Edge 115+, Safari 18.4+
   Fallback:  Firefox — IO-based .visible class triggers
   ═══════════════════════════════════════════════════════════════ */


/* ─── Scroll Progress Bar ─── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--bleu-f);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 101;
  pointer-events: none;
}


/* ─── Keyframes ─── */

@keyframes sda-progress {
  to { transform: scaleX(1); }
}

@keyframes sda-fade-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sda-fade-up-sm {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* translate property (not transform) — preserves hover transforms */
@keyframes sda-card-left {
  from { opacity: 0; translate: -50px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes sda-card-right {
  from { opacity: 0; translate: 50px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes sda-slide-left {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes sda-slide-right {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes sda-scale-up {
  from { opacity: 0; scale: 0.88; }
  to   { opacity: 1; scale: 1; }
}

@keyframes sda-rotate-left {
  from { opacity: 0; translate: 0 30px; rotate: -3deg; }
  to   { opacity: 1; translate: 0 0;    rotate: 0deg; }
}

@keyframes sda-rotate-right {
  from { opacity: 0; translate: 0 30px; rotate: 3deg; }
  to   { opacity: 1; translate: 0 0;    rotate: 0deg; }
}

@keyframes sda-clip-up {
  from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(20px); }
  to   { opacity: 1; clip-path: inset(0 0 0 0);    transform: translateY(0); }
}

@keyframes sda-ink-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes sda-parallax-up {
  to { transform: translateY(-80px); }
}

@keyframes sda-overline {
  from { letter-spacing: 8px; opacity: 0; }
  to   { letter-spacing: 3.5px; opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════
   SCROLL-DRIVEN ASSIGNMENTS
   Everything below only activates in browsers with view() support.
   Firefox users get the existing IntersectionObserver fallback.
   ═══════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {

  /* ─── Progress bar ─── */
  .scroll-progress {
    animation: sda-progress linear forwards;
    animation-timeline: scroll();
  }


  /* ─── Override IO-based reveal system ───
     The .visible class still gets added by JS but has
     no visual effect — scroll position drives everything. */

  .reveal,
  .reveal-stagger > * {
    transition-property: none !important;
  }

  /* Remove base transform on stagger children so it doesn't
     stack with the animation's translate property */
  .reveal-stagger > * {
    transform: none;
  }


  /* ─── Generic reveals ─── */
  .reveal {
    animation: sda-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }

  .reveal-stagger > * {
    animation: sda-fade-up-sm linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }


  /* ─── Ink lines — scroll-driven draw ─── */
  .reveal .ink,
  .reveal .ink-c,
  .section-header .ink-c,
  .section-header--spaced .ink-c {
    transition: none !important;
    animation: sda-ink-draw linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 25%;
  }

  /* ─── Overline letter-spacing entrance ─── */
  .reveal .overline,
  .section-header .overline,
  .section-header--spaced .overline {
    animation: sda-overline linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 20%;
  }


  /* ═══ HERO ═══
     Keep JS entrance for hero — first impression matters.
     Add parallax on dots background only. */

  .hero-dots {
    animation: sda-parallax-up linear;
    animation-timeline: scroll();
    animation-range: 0% 35%;
  }

  /* Line-art Mirabeau — dérive plus lente que les points (profondeur) */
  .hero-mirabeau {
    animation: sda-parallax-up linear;
    animation-timeline: scroll();
    animation-range: 0% 55%;
  }


  /* ═══ PAIN CARDS — slide from right ═══ */
  .pain-cards .pain-card {
    animation: sda-slide-right linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }


  /* ═══ SKILL CARDS — alternating directions ═══
     Uses translate property so hover transform still works */

  .skills-grid .skill-card:nth-child(odd) {
    animation: sda-card-left linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
  .skills-grid .skill-card:nth-child(even) {
    animation: sda-card-right linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }


  /* ═══ STEPS — scale entrance ═══ */
  .steps .step {
    animation: sda-scale-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }


  /* ═══ AUTHOR — split entrance ═══ */
  .author-section-grid > *:first-child {
    animation: sda-slide-left linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
  .author-section-grid > *:last-child {
    animation: sda-slide-right linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }


  /* ═══ TESTIMONIALS — rotate in with variety ═══
     Uses translate/rotate properties so hover transform works */

  .temoignages-grid .temo-card:nth-child(3n+1) {
    animation: sda-rotate-left linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  .temoignages-grid .temo-card:nth-child(3n+2) {
    animation: sda-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  .temoignages-grid .temo-card:nth-child(3n+3) {
    animation: sda-rotate-right linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }

  /* Stats bar */
  .temo-stats.reveal {
    animation: sda-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }


  /* ═══ PULL QUOTE — clip reveal ═══ */
  .pull-quote-text.reveal {
    animation: sda-clip-up linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 40%;
  }


  /* ═══ PRICE CARD — dramatic scale entrance ═══
     Override the priceFloat animation entirely */
  .price-card {
    animation: sda-scale-up linear both !important;
    animation-timeline: view() !important;
    animation-range: entry 0% entry 35% !important;
  }


  /* ═══ FAQ — natural stagger via scroll position ═══ */
  .faq-list details {
    animation: sda-fade-up-sm linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }


  /* ═══ GENERIC PAGE SECTIONS ═══
     For pages that don't use .reveal classes,
     add .sda-reveal to any element for scroll-driven entrance */

  .sda-reveal {
    animation: sda-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }

  .sda-slide-left {
    animation: sda-slide-left linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  .sda-slide-right {
    animation: sda-slide-right linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  .sda-scale {
    animation: sda-scale-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }

  .sda-clip {
    animation: sda-clip-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}


/* ═══ Reduced motion ═══
   charte-graphique-lawia.css already kills all animations via
   prefers-reduced-motion. Just hide the progress bar. */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
}