/* ====================================================
   06-animations.css
   Toutes les animations du site : entrées, flottements,
   reveals au scroll, hover, prefers-reduced-motion.
   Pour désactiver toutes les animations, vider ce fichier.
   ==================================================== */

/* --- Entrée du héros : montée + flou vers net, en cascade --- */

@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hero-category {
  animation: heroIn .8s var(--ease) .15s both;
}

.hero .eyebrow {
  animation: heroIn .8s var(--ease) .3s both;
}

.hero-title-line {
  animation: heroIn .9s var(--ease) .45s both;
}

.hero-title-big {
  animation: heroIn 1.1s var(--ease) .55s both;
}

.hero-copy > .button {
  animation: heroIn .8s var(--ease) .8s both;
}

/* --- Photos du hero : entrée + flottement perpétuel --- */

@keyframes photoIn {
  from {
    opacity: 0;
    scale: .82;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes float-y {
  0%, 100% {
    transform: translateY(0) rotate(var(--r, 0deg));
  }
  50% {
    transform: translateY(-16px) rotate(var(--r, 0deg));
  }
}

.hero-photo {
  animation:
    photoIn .9s var(--ease) var(--idel, 0s) both,
    float-y var(--fdur, 6s) ease-in-out var(--fdel, 0s) infinite;
}

/* --- Stickers : pop d'entrée puis oscillation douce --- */

@keyframes stickerPop {
  from {
    opacity: 0;
    scale: 0;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes stickerWiggle {
  0%, 100% {
    rotate: var(--tilt, 0deg);
  }
  50% {
    rotate: calc(var(--tilt, 0deg) + 7deg);
  }
}

.sticker {
  animation:
    stickerPop .7s var(--ease) .35s both,
    stickerWiggle 6s ease-in-out 1.4s infinite;
}

/* --- Changement de service : fondu du texte et de la photo --- */

@keyframes swapIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.swap {
  animation: swapIn .5s var(--ease) both;
}

/* --- Réponses de la FAQ : glissement à l'ouverture --- */

@keyframes faqIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq details[open] p {
  animation: faqIn .45s var(--ease) both;
}

/* --- Photo du footer : balancement lent --- */

@keyframes sway {
  0%, 100% {
    rotate: -3deg;
  }
  50% {
    rotate: -1deg;
  }
}

.footer-photo {
  animation: sway 9s ease-in-out infinite;
}

/* --- Révélations au scroll ---
   La classe .js est posée par une ligne dans <head>.
   Sans JS, tout reste visible. */

.js .reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease);
  transition-delay: var(--rdel, 0s);
}

.js .reveal-left {
  transform: translateX(-44px);
}

.js .reveal-right {
  transform: translateX(44px);
}

.js .reveal-zoom {
  transform: scale(.94);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Entrée de la navbar : descente en fondu --- */

@keyframes navIn {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header {
  animation: navIn .9s var(--ease) .1s both;
}

/* --- Respect de prefers-reduced-motion --- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
    .mobile-menu.is-open .mobile-menu-inner a {
    transition-delay: 0s;
  }
}