/* =============================================================
   PianoFlow — Couche d'animation · V2 « Kinetic »
   Énergique : titres en volet, cartes qui s'inclinent en 3D,
   fond dégradé mouvant, boutons magnétiques, barre de progression.
   Reste dans le langage spring de la charte. Superpose site.css.
   ============================================================= */

/* ---- Barre de progression de scroll ---- */
.kin-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  z-index: 200;
  background: var(--pf-grad-cta);
  box-shadow: 0 0 12px rgba(255,107,44,0.6);
  transition: width .1s linear;
}

/* ---- Reveal : glissé plus ample + spring ---- */
.anim-kinetic .reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition:
    opacity .7s var(--pf-ease-out),
    transform .8s var(--pf-ease-spring);
}
.anim-kinetic .reveal.is-visible { opacity: 1; transform: none; }

/* ---- Titres en volet (clip-path wipe) ---- */
.anim-kinetic .h-mega,
.anim-kinetic .h-xl {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--pf-ease-out);
}
.anim-kinetic .h-mega.wipe-in,
.anim-kinetic .h-xl.wipe-in { clip-path: inset(0 0 0 0); }

/* ---- Fond dégradé mouvant sur sections clés ---- */
.anim-kinetic #fonctionnalites,
.anim-kinetic #coach,
.anim-kinetic #telecharger { position: relative; isolation: isolate; }
.anim-kinetic #fonctionnalites::before,
.anim-kinetic #coach::before,
.anim-kinetic #telecharger::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 15% 20%, rgba(255,107,44,0.10), transparent 60%),
    radial-gradient(45% 55% at 85% 80%, rgba(167,139,250,0.10), transparent 60%);
  background-size: 200% 200%, 200% 200%;
  animation: kin-mesh 18s ease-in-out infinite alternate;
}
@keyframes kin-mesh {
  0%   { background-position: 0% 0%, 100% 100%; }
  100% { background-position: 100% 50%, 0% 50%; }
}

/* ---- Cartes : inclinaison 3D au survol ---- */
.anim-kinetic .feature-card,
.anim-kinetic .song-card {
  transform-style: preserve-3d;
  transition: transform .25s var(--pf-ease-out), box-shadow .25s var(--pf-ease-out);
  will-change: transform;
}
.anim-kinetic .feature-card:hover {
  box-shadow: var(--pf-glass-shine), 0 30px 60px rgba(0,0,0,0.4);
}
.anim-kinetic .feature-card .ico,
.anim-kinetic .feature-card h3 { transform: translateZ(26px); }

/* ---- Boutons magnétiques : transition douce du retour ---- */
.anim-kinetic .btn--primary { transition: transform .25s var(--pf-ease-spring), filter .2s, box-shadow .3s; }

/* ---- Compteurs ---- */
.anim-kinetic .count-done { animation: kin-pop .45s var(--pf-ease-spring); }
@keyframes kin-pop {
  0% { transform: scale(0.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); }
}

/* ---- Pulsation de l'orbe Coach ---- */
.anim-kinetic .coach-orb { animation: kin-orb 3.4s var(--pf-ease-in-out) infinite; }
@keyframes kin-orb {
  0%, 100% { box-shadow: var(--pf-shadow-ai); transform: scale(1); }
  50%      { box-shadow: var(--pf-shadow-ai), 0 0 0 12px rgba(167,139,250,0.10); transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .anim-kinetic .reveal { transform: none; opacity: 1; transition: none; }
  .anim-kinetic .h-mega, .anim-kinetic .h-xl { clip-path: none; transition: none; }
  .anim-kinetic #fonctionnalites::before, .anim-kinetic #coach::before,
  .anim-kinetic #telecharger::before, .anim-kinetic .coach-orb { animation: none; }
  .kin-progress { display: none; }
}