/* ============================================================
   animations.css — Reveal au scroll, titres animés, divers
   ============================================================ */

/* --------- 1) Reveal au scroll ---------
   Utilisation HTML :
   <div class="reveal">…</div>               (fade + slide up — défaut)
   <div class="reveal reveal--left">…</div>  (slide depuis la gauche)
   <div class="reveal reveal--right">…</div>
   <div class="reveal reveal--zoom">…</div>
   <div class="reveal" data-reveal-delay="200">…</div>

   Le JS ajoute la classe `is-visible` quand l'élément entre en vue.
*/
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}
.reveal--left  { transform: translateX(-48px); }
.reveal--right { transform: translateX(48px); }
.reveal--zoom  { transform: scale(0.94); }
.reveal--fade  { transform: none; }

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

/* Effet stagger (cascade) sur enfants directs */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 500ms; }
.reveal-stagger.is-visible > *:nth-child(n + 7) { transition-delay: 600ms; }

/* --------- 2) Titre animé (flip-in mots, signature Brizy de cenza) ---------
   HTML :
   <h1 class="animated-heading">
     <span class="aw-word">Cuisine</span>
     <span class="aw-word">italienne</span>
     <span class="aw-word">sur mesure</span>
   </h1>
   Le JS découpe automatiquement si on met juste le texte avec data-split="words".
*/
.animated-heading { perspective: 800px; }
.animated-heading .aw-word {
  display: inline-block;
  opacity: 0;
  transform: rotateX(-90deg) translateY(0.4em);
  transform-origin: center bottom;
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out-back);
}
.animated-heading.is-visible .aw-word {
  opacity: 1;
  transform: rotateX(0) translateY(0);
}
.animated-heading .aw-word:nth-child(2) { transition-delay: 120ms; }
.animated-heading .aw-word:nth-child(3) { transition-delay: 240ms; }
.animated-heading .aw-word:nth-child(4) { transition-delay: 360ms; }
.animated-heading .aw-word:nth-child(5) { transition-delay: 480ms; }
.animated-heading .aw-word:nth-child(6) { transition-delay: 600ms; }
.animated-heading .aw-word:nth-child(n + 7) { transition-delay: 720ms; }
/* Espace entre mots */
.animated-heading .aw-word + .aw-word { margin-left: 0.25em; }

/* --------- 3) Filet animé (séparateurs élégants) --------- */
.rule-anim {
  display: block;
  height: 1px;
  background: var(--c-rule);
  position: relative;
  overflow: hidden;
}
.rule-anim::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--c-accent);
  transition: width 1.2s var(--ease-out);
}
.rule-anim.is-visible::after { width: 100%; }

/* --------- 4) Image qui se révèle (clip-path) --------- */
.reveal-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease-out);
}
.reveal-clip.is-visible {
  clip-path: inset(0 0 0 0);
}

/* --------- 5) Petites utilitaires --------- */
.fade-in { animation: fade-in 0.8s var(--ease-out) both; }
.fade-in-up { animation: fade-in-up 0.9s var(--ease-out) both; }
.fade-in-down { animation: fade-in-down 0.9s var(--ease-out) both; }

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-down {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pulse léger pour CTA */
@keyframes subtle-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
.pulse { animation: subtle-pulse 2.2s var(--ease-in-out) infinite; }

/* Spinner discret pour formulaires */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}