/* Animations communes des maquettes Rénovie (piloté par assets/anim.js). */

/* ── Fond dynamique du reste de la page (canvas fixe derrière le contenu) ── */
#fond-anime { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ── Photo du haut de page : mouvement à la souris + profondeur au défilement ── */
[data-hero] { overflow: hidden; }
[data-hero]::before {
  inset: -7% !important;
  transform: translate3d(calc(var(--mx, 0) * 1px), calc((var(--my, 0) + var(--py, 0)) * 1px), 0) scale(calc(1.04 + var(--pz, 0)));
  filter: brightness(calc(1 - var(--pd, 0) * .4)) saturate(calc(1 + var(--pd, 0) * .15));
  will-change: transform, filter;
}
.hero-lueur {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 40%), rgba(255, 246, 220, .38), rgba(255, 246, 220, 0) 70%);
  mix-blend-mode: soft-light; opacity: var(--lo, 0); transition: opacity .6s ease;
}
[data-hero] > div:not(.hero-lueur) {
  transform: translate3d(0, calc(var(--py, 0) * -.35px), 0);
  opacity: calc(1 - var(--pd, 0) * .9);
}

/* ── Apparition au défilement ── */
/* translate / scale (et non transform) : se combinent avec l'inclinaison des cartes. */
.anim-ok [data-reveal] {
  opacity: 0; translate: 0 22px; scale: .985;
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--delai, 0ms), translate .8s cubic-bezier(.2, .7, .2, 1) var(--delai, 0ms), scale .8s cubic-bezier(.2, .7, .2, 1) var(--delai, 0ms), transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.anim-ok [data-reveal].visible { opacity: 1; translate: 0 0; scale: 1; }

/* ── Cartes vivantes : inclinaison + lueur qui suit la souris ── */
.vivante {
  position: relative; isolation: isolate;
  transform: perspective(900px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)) translateY(var(--ty, 0px));
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.vivante::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(260px circle at var(--cx, 50%) var(--cy, 50%), rgba(149, 193, 33, .22), rgba(149, 193, 33, 0) 65%);
  opacity: 0; transition: opacity .35s ease;
}
.vivante.survol { --ty: -6px; box-shadow: 0 18px 40px rgba(13, 43, 48, .14); }
.vivante.survol::before { opacity: 1; }

/* ── Boutons : léger reflet au survol ── */
.anim-ok .bouton, .anim-ok .btn, .anim-ok .cta, .anim-ok .lp-cta, .anim-ok .v2cta { position: relative; overflow: hidden; }
.anim-ok .bouton::after, .anim-ok .btn::after, .anim-ok .cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.anim-ok .bouton:hover::after, .anim-ok .btn:hover::after, .anim-ok .cta:hover::after { transform: translateX(120%); }

/* ── Accessibilité : aucun mouvement si l'appareil le demande ── */
@media (prefers-reduced-motion: reduce) {
  [data-hero]::before, [data-hero] > div, .vivante, .anim-ok [data-reveal] { transform: none !important; translate: none !important; scale: none !important; transition: none !important; filter: none !important; opacity: 1 !important; }
  .hero-lueur, .vivante::before { display: none; }
}