/* ==========================================================================
   UNELIA — couche « premium animée »
   --------------------------------------------------------------------------
   Se superpose à styles.css : mêmes tokens, mêmes composants. On n'ajoute ici
   que ce qui relève du mouvement et des quelques blocs propres à cette version
   (barre de progression, compteurs, marquee des sports, mesh du CTA).

   Principe tenu partout : l'état FINAL est l'état par défaut du document.
   Les états de départ ne sont posés que si JavaScript est actif (html.js) ET
   que le visiteur n'a pas demandé à réduire les animations. Une animation ne
   peut donc jamais empêcher la lecture.
   ========================================================================== */

/* ==========================================================================
   1. Barre de progression de lecture
   ========================================================================== */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--grad);
}

/* ==========================================================================
   2. Écran d'ouverture
   --------------------------------------------------------------------------
   Rappel de l'animation de lancement de l'application. Court (700 ms), une
   seule fois par session, jamais en mouvement réduit.
   ========================================================================== */

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--cream);
}
.intro-mark {
  width: 74px;
  height: 74px;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}
.intro-word {
  margin-top: var(--sp-4);
  font-size: 13px;
  letter-spacing: 0.4em;
  color: var(--navy);
  text-align: center;
  text-indent: 0.4em;
}
html:not(.js) .intro,
.intro[hidden] {
  display: none;
}

/* ==========================================================================
   3. Header réactif au défilement
   ========================================================================== */

header {
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}
header[data-scrolled='true'] {
  box-shadow: var(--shadow-sm);
}
.nav-logo img,
.nav-logo .marque {
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
  transform-origin: left center;
}
header[data-scrolled='true'] .nav-logo img {
  transform: scale(0.88);
}

/* ==========================================================================
   4. Hero
   ========================================================================== */

/* Les mots du titre sont découpés par le script ; chaque mot est un masque
   dans lequel il remonte. Sans JS, le titre reste un titre normal. */
.mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.mot > span {
  display: inline-block;
  will-change: transform;
}

/* Le visuel se dévoile par un volet plutôt que par un simple fondu :
   le mouvement suit la forme de l'image au lieu de la survoler. */
.hero-photo {
  will-change: clip-path;
}
.hero-photo img {
  transform-origin: center;
}

/* Halo du hero : dérive très lente, amplitude faible. Il réchauffe le fond,
   il n'attire pas l'œil. */
.hero::before {
  animation: derive 26s ease-in-out infinite alternate;
}
@keyframes derive {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-3%, 3%, 0) scale(1.08);
  }
}

/* Flottement des deux cartes posées sur la photo. */
.hero-badge {
  will-change: transform;
}

/* ==========================================================================
   5. Bandeau de preuve : compteurs
   ========================================================================== */

.strip-item b {
  font-variant-numeric: tabular-nums; /* le chiffre ne tressaute pas en comptant */
}

/* ==========================================================================
   6. Étapes : filet de progression
   ========================================================================== */

.steps-rail {
  position: relative;
  height: 1px;
  margin-bottom: var(--sp-6);
  background: var(--cream-deep);
}
.steps-rail span {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--peach), var(--lilac));
}

/* ==========================================================================
   7. Sports : deux rubans en défilement continu
   --------------------------------------------------------------------------
   Remplace le nuage statique de pastilles. Le ruban se met en pause au survol
   et redevient une simple grille en mouvement réduit.
   ========================================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee + .marquee {
  margin-top: var(--sp-3);
}
.marquee-piste {
  display: flex;
  gap: 10px;
  width: max-content;
  will-change: transform;
}
.marquee:hover .marquee-piste {
  animation-play-state: paused;
}
.marquee-piste.vers-gauche {
  animation: defile-gauche 46s linear infinite;
}
.marquee-piste.vers-droite {
  animation: defile-droite 52s linear infinite;
}
@keyframes defile-gauche {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes defile-droite {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* ==========================================================================
   8. Cartes : réaction au pointeur
   ========================================================================== */

@media (hover: hover) {
  .feature .icon-tile,
  .step .num {
    transition: transform var(--dur-2) var(--ease);
  }
  .feature:hover .icon-tile {
    transform: translateY(-2px) rotate(-4deg);
  }
  .plan {
    transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  }
  .plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
  /* Aimantation très légère du bouton principal : 4 px au maximum. Au-delà,
     le bouton fuit le curseur au lieu de répondre. */
  .btn-primary,
  .store-badge {
    will-change: transform;
  }
}

/* ==========================================================================
   9. Appel à l'action : mesh en dérive
   ========================================================================== */

.cta-card::after {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(38% 44% at 22% 28%, rgba(242, 200, 186, 0.34), transparent 62%),
    radial-gradient(34% 40% at 78% 70%, rgba(184, 155, 191, 0.36), transparent 62%);
  animation: mesh 22s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes mesh {
  from {
    transform: translate3d(-2%, -1%, 0) rotate(0deg);
  }
  to {
    transform: translate3d(2%, 2%, 0) rotate(6deg);
  }
}

/* ==========================================================================
   10. États de départ des animations
   --------------------------------------------------------------------------
   Uniquement sous html.js, et annulés en mouvement réduit.
   ========================================================================== */

html.js .anim-monte {
  opacity: 0;
  transform: translateY(20px);
}
html.js .anim-fond {
  opacity: 0;
}
html.js .anim-volet {
  clip-path: inset(0 0 100% 0);
}

@media (prefers-reduced-motion: reduce) {
  html.js .anim-monte,
  html.js .anim-fond,
  html.js .anim-volet {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .hero::before,
  .cta-card::after,
  .marquee-piste {
    animation: none !important;
  }
  .marquee {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee-piste {
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
  .intro {
    display: none;
  }
}