/* ============================================================
   anim-essentielle-hero.css
   Animation hero de la page /essentielle.html — pure SVG + CSS, 0 JS.
   Boucle infinie 9s. Couleurs/espacements scopés sous .anim-essentielle-hero
   pour ne pas polluer le reste du site.

   Origine : Animation Essentielle (bundle Claude Design "motion-design-offres-
   essentielle-pro-infinicy"), conversion vanilla, prefixe `aeh-`.
   ============================================================ */

/* ---------- Tokens locaux (scopés) ---------- */
.anim-essentielle-hero {
  --aeh-violet-500: #634DFA;
  --aeh-violet-100: #EDF0FF;
  --aeh-ink-900: #1D184E;
  --aeh-white: #FFFFFF;
  --aeh-success: #1FA971;

  /* alias utilisés par le SVG via var(--accent) etc. */
  --accent: var(--aeh-violet-500);
  --accent-soft: var(--aeh-violet-100);
  --ink-900: var(--aeh-ink-900);
  --white: var(--aeh-white);
  --success: var(--aeh-success);

  --duration: 11s;
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Wrapper sans cadre (l'animation prend tout l'espace disponible) ----------
   Note : `aspect-ratio: 1 / 1` est conservé — sans lui, le parent collapse en hauteur 0
   car le SVG enfant est en `position: absolute; inset: 0`. */
.anim-essentielle-hero {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  overflow: visible;
}

.anim-essentielle-hero__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================
   TIMELINE (% de --duration = 9s)
     0–6   : left phone fade-in + slide up
     6–18  : wallet card slides up (whole card together)
     18–28 : hold
     28–38 : right phone slides in from the right, lands OVER the left phone
     36–42 : left phone fades out (caché derrière dès que le scan commence)
     38–55 : scan view (camera + QR + scan line + success check)
     52–82 : contact view (avatar stagger 56% → CTA visible 81%)
     82–85 : CTA press (scale 1→0.93 + fade out)
     85–96 : confirmation (anneaux + disque + coche tracée + textes)
     96–100: loop fade
   ============================================================ */

/* ----- LEFT PHONE entry ----- */
.anim-essentielle-hero .aeh-phone-left {
  transform-box: fill-box;
  transform-origin: center;
  animation: aehLeftPhoneIn var(--duration) infinite var(--ease-out);
}
@keyframes aehLeftPhoneIn {
  0%   { transform: translateY(36px); opacity: 0; }
  6%   { transform: translateY(0);    opacity: 1; }
  36%  { transform: translateY(0);    opacity: 1; }
  42%  { transform: translateY(0);    opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}

/* ----- WALLET CARD — slides up from below ----- */
.anim-essentielle-hero .aeh-wallet-card {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: aehWalletCard var(--duration) infinite var(--ease-out);
}
@keyframes aehWalletCard {
  0%, 6% { transform: translateY(70px); opacity: 0; }
  18%    { transform: translateY(0); opacity: 1; }
  96%    { opacity: 1; }
  100%   { opacity: 0; }
}

/* QR pulse pendant le scan */
.anim-essentielle-hero .aeh-qr-frame {
  transform-box: fill-box;
  transform-origin: center;
  animation: aehQrPulse var(--duration) infinite var(--ease-in-out);
}
@keyframes aehQrPulse {
  0%, 38% { transform: scale(1); }
  44%     { transform: scale(1.04); }
  50%     { transform: scale(1); }
  100%    { transform: scale(1); }
}

/* ----- RIGHT PHONE — slides in once, stays over the left phone ----- */
.anim-essentielle-hero .aeh-phone-right {
  transform-box: fill-box;
  transform-origin: center;
  animation: aehRightPhoneIn var(--duration) infinite var(--ease-out);
}
@keyframes aehRightPhoneIn {
  0%, 24% { transform: translateX(260px) translateY(10px) rotate(3deg); opacity: 0; }
  28%     { transform: translateX(260px) translateY(10px) rotate(3deg); opacity: 0; }
  38%     { transform: translateX(0)     translateY(0)    rotate(2deg); opacity: 1; }
  96%     { transform: translateX(0)     translateY(0)    rotate(2deg); opacity: 1; }
  100%    { transform: translateX(0)     translateY(0)    rotate(2deg); opacity: 0; }
}

/* ----- SCAN VIEW ----- */
.anim-essentielle-hero .aeh-scan-view {
  opacity: 0;
  animation: aehScanView var(--duration) infinite var(--ease-in-out);
}
@keyframes aehScanView {
  0%, 36% { opacity: 0; }
  40%     { opacity: 1; }
  52%     { opacity: 1; }
  56%     { opacity: 0; }
  100%    { opacity: 0; }
}
.anim-essentielle-hero .aeh-scan-line {
  transform-box: fill-box;
  transform-origin: center;
  animation: aehScanLine var(--duration) infinite var(--ease-in-out);
}
@keyframes aehScanLine {
  0%, 39% { transform: translateY(-58px); opacity: 0; }
  41%     { transform: translateY(-58px); opacity: 1; }
  50%     { transform: translateY( 58px); opacity: 1; }
  52%     { transform: translateY( 58px); opacity: 0; }
  100%    { transform: translateY(-58px); opacity: 0; }
}
.anim-essentielle-hero .aeh-scan-check {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: aehScanCheck var(--duration) infinite var(--ease-out);
}
@keyframes aehScanCheck {
  0%, 49% { opacity: 0; transform: scale(0.5); }
  52%     { opacity: 1; transform: scale(1.15); }
  55%     { opacity: 1; transform: scale(1); }
  57%     { opacity: 0; transform: scale(1); }
  100%    { opacity: 0; }
}

/* ----- CONTACT VIEW ----- */
.anim-essentielle-hero .aeh-contact-view {
  opacity: 0;
  animation: aehContactView var(--duration) infinite var(--ease-out);
}
@keyframes aehContactView {
  0%, 52% { opacity: 0; }
  56%     { opacity: 1; }
  82%     { opacity: 1; }
  85%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* Reveals individuels (stagger) */
.anim-essentielle-hero .aeh-ios-avatar {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: aehIosAvatar var(--duration) infinite var(--ease-out);
}
@keyframes aehIosAvatar {
  0%, 56% { opacity: 0; transform: scale(0.4); }
  61%     { opacity: 1; transform: scale(1.08); }
  64%     { opacity: 1; transform: scale(1); }
  100%    { opacity: 1; transform: scale(1); }
}
.anim-essentielle-hero .aeh-ios-name {
  opacity: 0;
  animation: aehIosName var(--duration) infinite var(--ease-out);
}
@keyframes aehIosName {
  0%, 62% { opacity: 0; transform: translateY(4px); }
  67%     { opacity: 1; transform: translateY(0); }
  100%    { opacity: 1; transform: translateY(0); }
}
.anim-essentielle-hero .aeh-ios-role {
  opacity: 0;
  animation: aehIosRole var(--duration) infinite var(--ease-out);
}
@keyframes aehIosRole {
  0%, 63% { opacity: 0; transform: translateY(4px); }
  68%     { opacity: 1; transform: translateY(0); }
  100%    { opacity: 1; transform: translateY(0); }
}

/* 4 action buttons — stagger */
.anim-essentielle-hero .aeh-ios-action {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.anim-essentielle-hero .aeh-ios-action-0 { animation: aehIosActionA var(--duration) infinite var(--ease-out); }
.anim-essentielle-hero .aeh-ios-action-1 { animation: aehIosActionB var(--duration) infinite var(--ease-out); }
.anim-essentielle-hero .aeh-ios-action-2 { animation: aehIosActionC var(--duration) infinite var(--ease-out); }
.anim-essentielle-hero .aeh-ios-action-3 { animation: aehIosActionD var(--duration) infinite var(--ease-out); }
@keyframes aehIosActionA {
  0%, 64% { opacity: 0; transform: scale(0.6); }
  69%     { opacity: 1; transform: scale(1.06); }
  71%     { opacity: 1; transform: scale(1); }
  100%    { opacity: 1; transform: scale(1); }
}
@keyframes aehIosActionB {
  0%, 65% { opacity: 0; transform: scale(0.6); }
  70%     { opacity: 1; transform: scale(1.06); }
  72%     { opacity: 1; transform: scale(1); }
  100%    { opacity: 1; transform: scale(1); }
}
@keyframes aehIosActionC {
  0%, 66% { opacity: 0; transform: scale(0.6); }
  71%     { opacity: 1; transform: scale(1.06); }
  73%     { opacity: 1; transform: scale(1); }
  100%    { opacity: 1; transform: scale(1); }
}
@keyframes aehIosActionD {
  0%, 67% { opacity: 0; transform: scale(0.6); }
  72%     { opacity: 1; transform: scale(1.06); }
  74%     { opacity: 1; transform: scale(1); }
  100%    { opacity: 1; transform: scale(1); }
}

/* 4 action labels (message/appel/vidéo/mail) — fade-in synchronisé avec leur bouton */
.anim-essentielle-hero .aeh-ios-action-label {
  opacity: 0;
}
.anim-essentielle-hero .aeh-ios-action-label-0 { animation: aehIosActionLabelA var(--duration) infinite var(--ease-out); }
.anim-essentielle-hero .aeh-ios-action-label-1 { animation: aehIosActionLabelB var(--duration) infinite var(--ease-out); }
.anim-essentielle-hero .aeh-ios-action-label-2 { animation: aehIosActionLabelC var(--duration) infinite var(--ease-out); }
.anim-essentielle-hero .aeh-ios-action-label-3 { animation: aehIosActionLabelD var(--duration) infinite var(--ease-out); }
@keyframes aehIosActionLabelA {
  0%, 64% { opacity: 0; }
  69%     { opacity: 1; }
  100%    { opacity: 1; }
}
@keyframes aehIosActionLabelB {
  0%, 65% { opacity: 0; }
  70%     { opacity: 1; }
  100%    { opacity: 1; }
}
@keyframes aehIosActionLabelC {
  0%, 66% { opacity: 0; }
  71%     { opacity: 1; }
  100%    { opacity: 1; }
}
@keyframes aehIosActionLabelD {
  0%, 67% { opacity: 0; }
  72%     { opacity: 1; }
  100%    { opacity: 1; }
}

/* 4 contact rows — stagger */
.anim-essentielle-hero .aeh-ios-row {
  transform-box: fill-box;
  transform-origin: left center;
  opacity: 0;
}
.anim-essentielle-hero .aeh-ios-row-0 { animation: aehIosRowA var(--duration) infinite var(--ease-out); }
.anim-essentielle-hero .aeh-ios-row-1 { animation: aehIosRowB var(--duration) infinite var(--ease-out); }
.anim-essentielle-hero .aeh-ios-row-2 { animation: aehIosRowC var(--duration) infinite var(--ease-out); }
.anim-essentielle-hero .aeh-ios-row-3 { animation: aehIosRowD var(--duration) infinite var(--ease-out); }
@keyframes aehIosRowA {
  0%, 68% { opacity: 0; transform: translateX(-10px); }
  73%     { opacity: 1; transform: translateX(0); }
  100%    { opacity: 1; transform: translateX(0); }
}
@keyframes aehIosRowB {
  0%, 70% { opacity: 0; transform: translateX(-10px); }
  75%     { opacity: 1; transform: translateX(0); }
  100%    { opacity: 1; transform: translateX(0); }
}
@keyframes aehIosRowC {
  0%, 72% { opacity: 0; transform: translateX(-10px); }
  77%     { opacity: 1; transform: translateX(0); }
  100%    { opacity: 1; transform: translateX(0); }
}
@keyframes aehIosRowD {
  0%, 74% { opacity: 0; transform: translateX(-10px); }
  79%     { opacity: 1; transform: translateX(0); }
  100%    { opacity: 1; transform: translateX(0); }
}

/* CTA — fade in + press animation @ 82–84% */
.anim-essentielle-hero .aeh-ios-add {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: aehIosAdd var(--duration) infinite var(--ease-out);
}
@keyframes aehIosAdd {
  0%, 76% { opacity: 0; transform: translateY(8px) scale(0.94); }
  81%     { opacity: 1; transform: translateY(0) scale(1); }
  82%     { opacity: 1; transform: scale(1); }
  84%     { opacity: 1; transform: scale(0.93); }
  85%     { opacity: 0; transform: scale(0.93); }
  100%    { opacity: 0; }
}

/* ----- CONFIRMATION VIEW ----- */
.anim-essentielle-hero .aeh-confirm-view {
  opacity: 0;
  animation: aehConfirmView var(--duration) infinite var(--ease-out);
}
@keyframes aehConfirmView {
  0%, 84% { opacity: 0; }
  87%     { opacity: 1; }
  98%     { opacity: 1; }
  100%    { opacity: 0; }
}
.anim-essentielle-hero .aeh-confirm-burst {
  transform-box: fill-box;
  transform-origin: center;
  animation: aehConfirmBurst var(--duration) infinite var(--ease-out);
}
@keyframes aehConfirmBurst {
  0%, 84% { transform: scale(0.4); opacity: 0; }
  88%     { transform: scale(1.15); opacity: 1; }
  91%     { transform: scale(1); opacity: 1; }
  100%    { transform: scale(1); opacity: 1; }
}
.anim-essentielle-hero .aeh-confirm-check {
  stroke-dasharray: 56;
  stroke-dashoffset: 56;
  animation: aehConfirmCheck var(--duration) infinite var(--ease-out);
}
@keyframes aehConfirmCheck {
  0%, 87% { stroke-dashoffset: 56; }
  93%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 0; }
}
.anim-essentielle-hero .aeh-confirm-text {
  opacity: 0;
  animation: aehConfirmText var(--duration) infinite var(--ease-out);
}
@keyframes aehConfirmText {
  0%, 89% { opacity: 0; transform: translateY(4px); }
  93%     { opacity: 1; transform: translateY(0); }
  100%    { opacity: 1; transform: translateY(0); }
}
.anim-essentielle-hero .aeh-confirm-ring-1 {
  transform-box: fill-box;
  transform-origin: center;
  animation: aehConfirmRing1 var(--duration) infinite var(--ease-out);
}
.anim-essentielle-hero .aeh-confirm-ring-2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: aehConfirmRing2 var(--duration) infinite var(--ease-out);
}
@keyframes aehConfirmRing1 {
  0%, 87% { transform: scale(0.6); opacity: 0; }
  91%     { transform: scale(1.4); opacity: 0.6; }
  95%     { transform: scale(1.7); opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes aehConfirmRing2 {
  0%, 89% { transform: scale(0.6); opacity: 0; }
  93%     { transform: scale(1.5); opacity: 0.4; }
  97%     { transform: scale(1.8); opacity: 0; }
  100%    { opacity: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim-essentielle-hero *,
  .anim-essentielle-hero *::before,
  .anim-essentielle-hero *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}