/* ============================================================
   PRESTIGE BARBERS — animations.css
   Transitions & micro-interactions
============================================================ */

/* ---------- Reveal au scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  will-change:opacity,transform;
}
.reveal.is-visible{opacity:1;transform:none}

/* Décalage léger pour les cartes successives */
.services__grid .card:nth-child(2){transition-delay:.08s}
.services__grid .card:nth-child(3){transition-delay:.16s}
.services__grid .card:nth-child(4){transition-delay:.24s}
.reviews__grid .review:nth-child(2){transition-delay:.1s}
.reviews__grid .review:nth-child(3){transition-delay:.2s}

/* ---------- Indicateur de scroll hero ---------- */
@keyframes scrollPulse{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}
.hero__scroll-line{animation:scrollPulse 2s var(--ease) infinite}

/* ---------- Fondu d'entrée du hero ---------- */
@keyframes heroFade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero__content.reveal{animation:heroFade 1.1s var(--ease) .2s both}

/* ---------- Glow doré subtil sur les CTA ---------- */
@keyframes goldPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,0)}
  50%{box-shadow:0 0 0 4px rgba(201,168,76,.08)}
}

/* ---------- Apparition lightbox ---------- */
@keyframes lbZoom{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.lightbox.is-open .lightbox__img{animation:lbZoom .35s var(--ease)}

/* ============================================================
   prefers-reduced-motion : on neutralise tout
============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
  .hero__scroll{display:none}
}

/* ============================================================
   Accessibilité — focus clavier visible
============================================================ */
:focus-visible{
  outline:2px solid var(--color-gold);
  outline-offset:3px;
  border-radius:2px;
}
.btn:focus-visible{outline-offset:4px}