/* ============================================================
   animations.css — effets dynamiques du site HM AUTO
   À charger APRÈS style.css. Les classes .anim-on / .reveal /
   .hero-in sont posées par animations.js : sans JavaScript,
   le site s'affiche normalement.
   ============================================================ */

/* ---- Apparition au défilement ---- */
.anim-on .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
.anim-on .reveal.is-visible { opacity: 1; transform: none; }

/* Le petit trait rouge des sur-titres se dessine à l'apparition */
.anim-on .reveal .eyebrow::before,
.anim-on .reveal.eyebrow::before { width: 0; transition: width .6s .35s ease; }
.anim-on .reveal.is-visible .eyebrow::before,
.anim-on .reveal.is-visible.eyebrow::before { width: 22px; }

/* ---- Entrée de l'accueil ---- */
.anim-on .hero-in { opacity: 0; animation: hmHeroIn .9s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes hmHeroIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Rayures du fond de l'accueil qui glissent très lentement */
.hero::after { animation: hmStripes 40s linear infinite; }
@keyframes hmStripes { to { background-position: 180px 0; } }

/* ---- Barre de menu au défilement ---- */
.nav { transition: background .3s ease, box-shadow .3s ease; }
.nav .wrap { transition: height .3s ease; }
.nav .brand-logo { transition: height .3s ease; }
.nav.scrolled { background: rgba(12, 12, 14, .98); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.nav.scrolled .wrap { height: 64px; }
.nav.scrolled .brand-logo { height: 28px; }
@media (max-width: 980px) {
  .nav.scrolled.open .nav-links { top: 64px; }
}

/* Liens du menu : soulignement rouge qui se déploie au survol */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }
@media (max-width: 980px) { .nav-links a::after { display: none; } }

/* ---- Boutons : la flèche avance au survol ---- */
.btn svg, .btn-link svg { transition: transform .2s ease; }
.btn:hover svg, .btn-link:hover svg { transform: translateX(4px); }
.btn-primary { transition: background .15s ease, transform .2s ease, box-shadow .2s ease; }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(193, 0, 0, .28); }

/* ---- Cartes qui se soulèvent au survol ---- */
.vcard, .testi-card, .compare-card, .vente {
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.vcard:hover, .testi-card:hover, .compare-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
}
.vente:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }

/* Zoom doux des photos au survol */
.vcard-photo img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.vcard:hover .vcard-photo img { transform: scale(1.06); }
.diff-photo, .principle-card { overflow: hidden; border-radius: var(--radius); }
.diff-photo .photo, .principle-card .photo { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.diff-photo:hover .photo, .principle-card:hover .photo { transform: scale(1.04); }

/* Étapes : le numéro rouge grossit légèrement au survol */
.step-num { display: inline-block; transition: transform .3s ease; }
.step:hover .step-num { transform: scale(1.12); }

/* Compteurs : chiffres à largeur fixe pour éviter que le texte tremble */
.stat strong, .about-tag strong { font-variant-numeric: tabular-nums; }

/* ---- Fiche véhicule : vignettes ---- */
.fiche-thumb { transition: border-color .2s ease, opacity .2s ease; opacity: .7; }
.fiche-thumb:hover, .fiche-thumb.active { opacity: 1; }

/* ---- Respect du réglage "réduire les animations" ---- */
@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
  .vcard:hover, .testi-card:hover, .compare-card:hover, .vente:hover,
  .btn-primary:hover:not(:disabled) { transform: none; }
  .vcard:hover .vcard-photo img, .diff-photo:hover .photo, .principle-card:hover .photo { transform: none; }
}