/* ==========================================================================
   NACELIO 2026 — Animations CSS Premium
   Porté depuis maquette Animiste v8
   Scroll-driven (Chrome/Edge) + IntersectionObserver fallback (Firefox/Safari)
   ========================================================================== */

/* ---------- Scroll Progress Bar ---------- */

.he-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--he-primary);
  transform-origin: left;
  z-index: 9999;
  animation: he-progress-grow linear;
  animation-timeline: scroll();
  animation-range: 0% 100%;
}

@keyframes he-progress-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---------- Hero Entrance Animations ---------- */

.hero-badge {
  opacity: 0;
  animation: he-hero-fade-up 0.8s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;
}
.hero-title {
  opacity: 0;
  animation: he-hero-fade-up 0.8s cubic-bezier(0.16,1,0.3,1) 0.5s forwards;
}
.hero-subtitle {
  opacity: 0;
  animation: he-hero-fade-up 0.8s cubic-bezier(0.16,1,0.3,1) 0.7s forwards;
}
.hero-cta {
  opacity: 0;
  animation: he-hero-fade-up 0.8s cubic-bezier(0.16,1,0.3,1) 0.9s forwards;
}
.hero-meta {
  opacity: 0;
  animation: he-hero-fade-up 0.8s cubic-bezier(0.16,1,0.3,1) 1.1s forwards;
}

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

/* ---------- Hero Parallax ---------- */

.he-hero-parallax {
  will-change: transform;
  animation: he-hero-parallax-scroll linear;
  animation-timeline: scroll();
  animation-range: 0% 300%;
}

@keyframes he-hero-parallax-scroll {
  from { transform: scale(1.15) translateY(0); }
  to   { transform: scale(1.15) translateY(-100px); }
}

/* ---------- Scroll Reveals ---------- */

.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  will-change: transform, opacity;
}

.reveal-up {
  transform: translateY(40px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal-left {
  transform: translateX(-60px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal-right {
  transform: translateX(60px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal-scale {
  transform: scale(0.92);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal {
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Scroll-driven animations — Chrome/Edge */
@supports (animation-timeline: view()) {
  .reveal, .reveal-up {
    transition: none;
    animation: he-reveal-up-view linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 75%;
  }
  .reveal-left {
    transition: none;
    animation: he-reveal-left-view linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 75%;
  }
  .reveal-right {
    transition: none;
    animation: he-reveal-right-view linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 75%;
  }
  .reveal-scale {
    transition: none;
    animation: he-reveal-scale-view linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 75%;
  }
}

@keyframes he-reveal-up-view {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes he-reveal-left-view {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes he-reveal-right-view {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes he-reveal-scale-view {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- Stagger ---------- */

.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.1s; }
.stagger > *:nth-child(3) { transition-delay: 0.15s; }
.stagger > *:nth-child(4) { transition-delay: 0.2s; }
.stagger > *:nth-child(5) { transition-delay: 0.25s; }
.stagger > *:nth-child(6) { transition-delay: 0.3s; }
.stagger > *:nth-child(7) { transition-delay: 0.35s; }
.stagger > *:nth-child(8) { transition-delay: 0.4s; }

/* ---------- Compteurs Animés ---------- */

@property --num-150 {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}
@property --num-14 {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}
@property --num-5a {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}
@property --num-1 {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.counter-150 {
  counter-reset: num150 var(--num-150);
  --num-150: 0;
}
.counter-150::after { content: counter(num150); }

.counter-14 {
  counter-reset: num14 var(--num-14);
  --num-14: 0;
}
.counter-14::after { content: counter(num14); }

.counter-5a {
  counter-reset: num5a var(--num-5a);
  --num-5a: 0;
}
.counter-5a::after { content: counter(num5a); }

.counter-1 {
  counter-reset: num1 var(--num-1);
  --num-1: 0;
}
.counter-1::after { content: counter(num1); }

@supports (animation-timeline: view()) {
  .counter-150 {
    animation: he-count-150 1.5s cubic-bezier(0.25,1,0.5,1) both;
    animation-timeline: view();
    animation-range: entry 10% entry 55%;
  }
  .counter-14 {
    animation: he-count-14 1.5s cubic-bezier(0.25,1,0.5,1) both;
    animation-timeline: view();
    animation-range: entry 10% entry 55%;
  }
  .counter-5a {
    animation: he-count-5 1.5s cubic-bezier(0.25,1,0.5,1) both;
    animation-timeline: view();
    animation-range: entry 10% entry 55%;
  }
  .counter-1 {
    animation: he-count-1 1.5s cubic-bezier(0.25,1,0.5,1) both;
    animation-timeline: view();
    animation-range: entry 10% entry 55%;
  }
}

@keyframes he-count-150 { from { --num-150: 0; } to { --num-150: 150; } }
@keyframes he-count-14 { from { --num-14: 0; } to { --num-14: 14; } }
@keyframes he-count-5 { from { --num-5a: 0; } to { --num-5a: 5; } }
@keyframes he-count-1 { from { --num-1: 0; } to { --num-1: 1; } }

.counter-150.is-visible { animation: he-count-150 1.5s cubic-bezier(0.25,1,0.5,1) forwards; }
.counter-14.is-visible { animation: he-count-14 1.5s cubic-bezier(0.25,1,0.5,1) forwards; }
.counter-5a.is-visible { animation: he-count-5 1.5s cubic-bezier(0.25,1,0.5,1) forwards; }
.counter-1.is-visible { animation: he-count-1 1.5s cubic-bezier(0.25,1,0.5,1) forwards; }

/* ---------- Image Parallax ---------- */

.he-img-parallax {
  will-change: transform;
  animation: he-img-parallax-view linear;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

@keyframes he-img-parallax-view {
  from { transform: scale(1.18) translateY(6%); }
  to   { transform: scale(1.18) translateY(-6%); }
}

/* ---------- Line Reveal ---------- */

.he-line-reveal {
  transform-origin: left;
  animation: he-line-grow-view linear;
  animation-timeline: view();
  animation-range: entry 0% entry 80%;
}

@keyframes he-line-grow-view {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- Floating Badge ---------- */

.he-floating-badge {
  animation: he-float 3s ease-in-out infinite;
}

@keyframes he-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ---------- Reduced Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-badge, .hero-title, .hero-subtitle, .hero-cta, .hero-meta {
    opacity: 1 !important;
    transform: none !important;
  }
}