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

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

/* ---------- Tokens locaux (scopés) ---------- */
.anim-pro-hero {
  --aph-violet-500: #634DFA;
  --aph-violet-100: #EDF0FF;
  --aph-ink-900: #1D184E;
  --aph-white: #FFFFFF;
  --aph-off-white: #FBFBFB;
  --aph-gray-050: #F1F3F4;
  --aph-gray-100: #E9ECEF;
  --aph-gray-200: #E7E7E7;
  --aph-gray-300: #DADADA;
  --aph-gray-400: #C4C4C4;
  --aph-fg-muted: rgba(29, 24, 78, 0.65);

  /* alias utilisés par le SVG via var(--accent) etc. */
  --accent: var(--aph-violet-500);
  --accent-soft: var(--aph-violet-100);
  --ink-900: var(--aph-ink-900);
  --white: var(--aph-white);
  --off-white: var(--aph-off-white);
  --gray-050: var(--aph-gray-050);
  --gray-100: var(--aph-gray-100);
  --gray-200: var(--aph-gray-200);
  --gray-300: var(--aph-gray-300);
  --gray-400: var(--aph-gray-400);
  --color-fg-muted: var(--aph-fg-muted);

  --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-pro-hero {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  overflow: visible;
}

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

/* ============================================================
   TIMELINE (% de --duration = 11s)
     0–8   : carte Infinicy entre en scène
     8–18  : smartphone arrive
     18–28 : NFC tap (ondes)
     28–46 : Step 1 — profil Infinicy
     46–50 : tap sur "Échange de contact"
     50–62 : Step 2 — modal scanner
     62–66 : tap "Prendre une photo"
     66–80 : Step 3 — photo + OCR
     80–94 : succès — check + 2 enveloppes
     94–100: fade out
   ============================================================ */

/* ----- INFINICY NFC CARD ----- */
.anim-pro-hero .aph-infinicy-card {
  transform-box: fill-box;
  transform-origin: center;
  animation: aphInfinicyCard var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aphInfinicyCard {
  0%   { transform: translate(0, 80px) rotate(-12deg) scale(0.55); opacity: 0; }
  6%   { transform: translate(0, 0) rotate(-4deg) scale(1.05); opacity: 1; }
  14%  { transform: translate(0, 0) rotate(-4deg) scale(1.05); opacity: 1; }
  22%  { transform: translate(-130px, 30px) rotate(-18deg) scale(0.85); opacity: 1; }
  32%  { transform: translate(-130px, 30px) rotate(-18deg) scale(0.85); opacity: 0.9; }
  44%  { transform: translate(-180px, 60px) rotate(-22deg) scale(0.7); opacity: 0; }
  100% { opacity: 0; }
}

/* ----- NFC WAVES ----- */
.anim-pro-hero .aph-nfc-waves {
  animation: aphNfcWavesShow var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aphNfcWavesShow {
  0%, 18%   { opacity: 0; }
  20%       { opacity: 1; }
  27%       { opacity: 1; }
  30%, 100% { opacity: 0; }
}
.anim-pro-hero .aph-nfc-wave {
  transform-box: fill-box;
  transform-origin: center;
  animation: aphNfcWave var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aphNfcWave {
  0%, 18% { transform: scale(0.3); opacity: 0; }
  22%     { transform: scale(0.6); opacity: 0.8; }
  27%     { transform: scale(1.4); opacity: 0; }
  100%    { opacity: 0; }
}
.anim-pro-hero .aph-nfc-wave-2 { animation-delay: calc(var(--duration) * 0.015); }
.anim-pro-hero .aph-nfc-wave-3 { animation-delay: calc(var(--duration) * 0.030); }

/* ----- PAPER CARD (Step 3) ----- */
.anim-pro-hero .aph-paper {
  transform-box: fill-box;
  transform-origin: center;
  animation: aphPaperJourney var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aphPaperJourney {
  0%, 60% { transform: translate(0, 60px) rotate(-4deg) scale(0.6);  opacity: 0; }
  66%     { transform: translate(0, 60px) rotate(-4deg) scale(0.62); opacity: 1; }
  82%     { transform: translate(0, 60px) rotate(-4deg) scale(0.62); opacity: 1; }
  92%     { transform: translate(60px, 120px) rotate(-10deg) scale(0.55); opacity: 0; }
  100%    { opacity: 0; }
}

/* ----- PAPER CARD SCAN (entre par la droite step 2 → derrière phone step 2/3) ----- */
.anim-pro-hero .aph-card-scan {
  transform-box: fill-box;
  transform-origin: center;
  animation: aphCardScan var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aphCardScan {
  0%, 48% { transform: translate(180px, 0)  rotate(-4deg)  scale(0.55); opacity: 0; }
  52%     { transform: translate(140px, 0)  rotate(-4deg)  scale(0.6);  opacity: 1; }
  56%     { transform: translate(120px, 0)  rotate(-4deg)  scale(0.6);  opacity: 1; }
  60%     { transform: translate(118px, -4px) rotate(-2deg) scale(0.6); opacity: 1; }
  62%     { transform: translate(120px, 0)  rotate(-4deg)  scale(0.6);  opacity: 1; }
  65%     { transform: translate(40px, 10px) rotate(-8deg) scale(0.45); opacity: 0.6; }
  66%     { transform: translate(0, 20px)   rotate(-12deg) scale(0.35); opacity: 0; }
  100%    { transform: translate(0, 20px)   rotate(-12deg) scale(0.35); opacity: 0; }
}

/* ----- PHONE ----- */
.anim-pro-hero .aph-phone {
  transform-box: fill-box;
  transform-origin: center;
  animation: aphPhoneIn var(--duration) infinite var(--ease-out);
}
@keyframes aphPhoneIn {
  0%, 8% { transform: translate(60px, 60px) scale(0.9); opacity: 0; }
  18%    { transform: translate(0, 0) scale(1); opacity: 1; }
  94%    { transform: translate(0, 0) scale(1); opacity: 1; }
  100%   { transform: translate(0, -10px) scale(0.98); opacity: 0; }
}
.anim-pro-hero .aph-phone-shake {
  transform-box: fill-box;
  transform-origin: center;
  animation: aphPhoneShake var(--duration) infinite var(--ease-out);
}
@keyframes aphPhoneShake {
  0%, 21%   { transform: translate(0, 0); }
  22%       { transform: translate(-2px, 1px); }
  23%       { transform: translate(2px, -1px); }
  24%       { transform: translate(-1px, 0); }
  25%, 100% { transform: translate(0, 0); }
}

/* ===== STEP 1 ===== */
.anim-pro-hero .aph-step-1 {
  animation: aphStep1 var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aphStep1 {
  0%, 26%   { opacity: 0; }
  30%       { opacity: 1; }
  47%       { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.anim-pro-hero .aph-tap-ripple {
  transform-box: fill-box;
  transform-origin: center;
  animation: aphTapRipple var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aphTapRipple {
  0%, 44% { transform: scale(0.4); opacity: 0; }
  46%     { transform: scale(0.6); opacity: 0.8; }
  51%     { transform: scale(1.6); opacity: 0; }
  100%    { opacity: 0; }
}
.anim-pro-hero .aph-cta-btn {
  animation: aphCtaPress var(--duration) infinite;
}
@keyframes aphCtaPress {
  0%, 45% { transform: scale(1); }
  47%     { transform: scale(0.96); }
  50%     { transform: scale(1); }
  100%    { transform: scale(1); }
}

/* ===== STEP 2 ===== */
.anim-pro-hero .aph-step-2 {
  animation: aphStep2 var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aphStep2 {
  0%, 50%   { opacity: 0; }
  54%       { opacity: 1; }
  62%       { opacity: 1; }
  66%, 100% { opacity: 0; }
}
.anim-pro-hero .aph-modal-slide {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: aphModalSlide var(--duration) infinite var(--ease-out);
}
@keyframes aphModalSlide {
  0%, 50%   { transform: translateY(40px); }
  54%       { transform: translateY(0); }
  62%       { transform: translateY(0); }
  66%, 100% { transform: translateY(40px); }
}
.anim-pro-hero .aph-photo-ripple {
  transform-box: fill-box;
  transform-origin: center;
  animation: aphPhotoRipple var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aphPhotoRipple {
  0%, 60% { transform: scale(0.4); opacity: 0; }
  62%     { transform: scale(0.6); opacity: 0.8; }
  66%     { transform: scale(1.6); opacity: 0; }
  100%    { opacity: 0; }
}

/* ===== STEP 3 ===== */
.anim-pro-hero .aph-step-3 {
  animation: aphStep3 var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aphStep3 {
  0%, 66%   { opacity: 0; }
  68%       { opacity: 1; }
  82%       { opacity: 1; }
  86%, 100% { opacity: 0; }
}
.anim-pro-hero .aph-ocr-ray {
  animation: aphOcrSweep var(--duration) infinite var(--ease-in-out);
  opacity: 0;
}
@keyframes aphOcrSweep {
  0%, 68%   { transform: translateY(-50px); opacity: 0; }
  71%       { opacity: 1; }
  80%       { transform: translateY(50px); opacity: 1; }
  82%, 100% { opacity: 0; }
}
.anim-pro-hero .aph-detect {
  transform-box: fill-box;
  transform-origin: left center;
  animation: aphDetect var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aphDetect {
  0%, 72%   { transform: scaleX(0); opacity: 0; }
  76%       { transform: scaleX(1); opacity: 1; }
  82%       { transform: scaleX(1); opacity: 1; }
  86%, 100% { opacity: 0; }
}

/* ===== STEP 4 ===== */
.anim-pro-hero .aph-step-4 {
  animation: aphStep4 var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aphStep4 {
  0%, 82% { opacity: 0; }
  86%     { opacity: 1; }
  96%     { opacity: 1; }
  100%    { opacity: 0; }
}
.anim-pro-hero .aph-check {
  transform-box: fill-box;
  transform-origin: center;
  animation: aphCheckPop var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aphCheckPop {
  0%, 82% { transform: scale(0); opacity: 0; }
  86%     { transform: scale(1.15); opacity: 1; }
  90%     { transform: scale(1); opacity: 1; }
  96%     { transform: scale(1); opacity: 1; }
  100%    { opacity: 0; }
}
.anim-pro-hero .aph-mail-out {
  animation: aphMailOut var(--duration) infinite var(--ease-in-out);
  opacity: 0;
}
/* "vous" — sort vers la DROITE */
@keyframes aphMailOut {
  0%, 84% { transform: translate(0, 0)        scale(0.5); opacity: 0; }
  87%     { transform: translate(0, 0)        scale(1);   opacity: 1; }
  91%     { transform: translate(0, 0)        scale(1);   opacity: 1; }
  96%     { transform: translate(160px, -20px) scale(0.7); opacity: 0; }
  100%    { transform: translate(160px, -20px) scale(0.7); opacity: 0; }
}
.anim-pro-hero .aph-mail-in {
  animation: aphMailIn var(--duration) infinite var(--ease-in-out);
  opacity: 0;
}
/* "contact" — sort vers la GAUCHE */
@keyframes aphMailIn {
  0%, 86% { transform: translate(0, 0)         scale(0.5); opacity: 0; }
  89%     { transform: translate(0, 0)         scale(1);   opacity: 1; }
  93%     { transform: translate(0, 0)         scale(1);   opacity: 1; }
  98%     { transform: translate(-160px, -20px) scale(0.7); opacity: 0; }
  100%    { transform: translate(-160px, -20px) scale(0.7); opacity: 0; }
}

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