/* ============================================================
   CTC — Chauffage & Climatique · Scroll-driven Animations (CSS pur)
   animation-timeline: view() / scroll() — géré par le navigateur,
   zéro JavaScript, exécuté sur le thread compositeur (ultra fluide).

   Fallback : si le navigateur ne supporte pas (Safari < 18.2, etc.),
   les éléments restent simplement visibles — aucun contenu caché.
   ============================================================ */

/* ---- Apparition des blocs (fade + slide up) à l'entrée dans le viewport ---- */
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }

  /* Variante : zoom léger (utilisée sur les images de la galerie) */
  .reveal-zoom {
    animation: reveal-zoom linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }

  /* Parallax doux sur l'image du hero : l'image glisse plus lentement que le scroll */
  .parallax-hero {
    animation: parallax-fade linear both;
    animation-timeline: scroll();
  }

  @keyframes reveal-up {
    from {
      opacity: 0;
      transform: translateY(42px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes reveal-zoom {
    from {
      opacity: 0;
      transform: scale(0.92);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes parallax-fade {
    from {
      opacity: 0.55;
      transform: translateY(0);
    }
    20% {
      opacity: 1;
    }
    to {
      opacity: 1;
      transform: translateY(-4%);
    }
  }

  /* Respect de la réduction de mouvement (accessibilité) */
  @media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-zoom,
    .parallax-hero {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
}

/* ---- Décor : animations douces permanentes (flottement des badges) ---- */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.float-soft {
  animation: float-soft 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .float-soft {
    animation: none;
  }
}