/*
 * Intro du téléphone du héros de /home. Au chargement, le téléphone part de
 * très loin dans la scène 3D (perspective) : minuscule, tout au fond, bien
 * droit — sans aucune inclinaison. Il se rapproche d'abord à grande vitesse
 * (il grossit rapidement pendant l'approche), puis freine très doucement sur
 * un long plan final, pour atterrir exactement dans sa position de mise en
 * page. Uniquement transform + opacity : aucune recomposition de mise en
 * page, l'animation reste sur le compositeur.
 *
 * v4 : plus aucun palier intermédiaire. L'ancien arrêt à 97 % relançait la
 * courbe d'accélération sur le dernier tronçon : le téléphone, déjà arrivé
 * visuellement, repartait pour quelques pixels de descente — un à-coup
 * perceptible (mobile comme ordinateur) juste quand il atteint sa taille
 * finale. La trajectoire est désormais une seule course from → to : la courbe
 * expo-out fait tout le travail (grossissement rapide, freinage long et
 * strictement monotone — la vitesse ne repasse jamais par un second démarrage).
 *
 * v5 : [HOME-MOBILE-PARITY-20260916] l'intro 3D est jouée à l'identique sur
 * mobile et sur ordinateur, même lorsque le système demande moins
 * d'animations : une seule passe de 1900 ms au chargement, transform +
 * opacity uniquement, sans boucle ni mouvement long.
 */

.demo-section .product-stage {
  perspective: 900px;
}

/* La trajectoire dépasse la grille au départ : sans barre de défilement
   horizontale. `clip` ne crée pas de conteneur de défilement, donc le bandeau
   collant reste fonctionnel. [HOME-NO-HPAN-20260925] `hidden` en première
   ligne : repli pour les navigateurs sans `clip` (la section n’a aucun
   descendant collant, le conteneur de défilement est sans effet). */
.demo-section {
  overflow-x: hidden;
  overflow-x: clip;
}

.demo-section .hero-trial-phone {
  animation: duello-phone-hero-intro 1900ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both;
}

/* Départ tout au fond de la scène (translateZ -1200px devant une perspective
   de 900px : le téléphone paraît ~23 fois plus petit) ; une seule course
   continue jusqu'à la position exacte de mise en page. */
@keyframes duello-phone-hero-intro {
  from {
    opacity: 0.01;
    transform: translate3d(0, -160px, -1200px) scale(0.06);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Parité mobile/ordinateur : en mouvement réduit, l'atterrissage reste joué
   mais s'instantanéise (1 ms) au lieu d'être supprimé — le téléphone arrive
   comme sur ordinateur, sans le vol de 1900 ms. */
@media (prefers-reduced-motion: reduce) {
  .demo-section .hero-trial-phone {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}