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

   Origine : Animation Infinicy (bundle Claude Design "motion-design-offres-
   essentielle-pro-infinicy"), conversion vanilla, prefixe `aih-`.

   Scénario : NFC card -> tap NFC -> profil -> tap "Demande de devis" ->
   modal formulaire -> phone exit gauche -> workflow n8n 5 étapes ->
   phone retour -> "Devis généré".
   ============================================================ */

/* ---------- Tokens locaux (scopés) ---------- */
.anim-infinicy-hero {
  --aih-violet-500: #634DFA;
  --aih-violet-100: #EDF0FF;
  --aih-ink-900: #1D184E;
  --aih-white: #FFFFFF;
  --aih-off-white: #FBFBFB;
  --aih-success: #1FA971;
  --aih-gray-100: #E9ECEF;
  --aih-gray-200: #E7E7E7;
  --aih-fg-muted: rgba(29, 24, 78, 0.65);

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

  --duration: 20s;
  --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, transparent, prend toute la place) ---------- */
.anim-infinicy-hero {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  overflow: visible;
}

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

/* ============================================================
   TIMELINE (% de --duration = 20s)
     0–3   : NFC card enters
     3–9   : card visible centered
     5–11  : phone enters from below-right
     11–16 : card slides left toward phone back → NFC waves
     16–18 : card fades, screen lights up
     18–33 : profile visible
     30–33 : tile glow on "Demande de devis"
     35–52 : form modal + 4 fields cascade
     50–53 : send button press
     55–91 : workflow visible
     53–57 : phone slides LEFT off-screen
     57–87 : workflow nodes cascade (5 × ~6%)
     87–91 : phone returns from left
     93–99 : confirmation hold (LONG)
     99–100: fade
   ============================================================ */

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

/* ----- NFC WAVES ----- */
.anim-infinicy-hero .aih-nfc-waves {
  animation: aihNfcShow var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aihNfcShow {
  0%, 9%   { opacity: 0; }
  11%      { opacity: 1; }
  16%      { opacity: 1; }
  18%, 100%{ opacity: 0; }
}
.anim-infinicy-hero .aih-nfc-wave {
  transform-box: fill-box;
  transform-origin: center;
  animation: aihNfcWave var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aihNfcWave {
  0%, 9% { transform: scale(0.3); opacity: 0; }
  12%    { transform: scale(0.7); opacity: 0.9; }
  16%    { transform: scale(1.7); opacity: 0; }
  100%   { opacity: 0; }
}
.anim-infinicy-hero .aih-nfc-w2 { animation-delay: calc(var(--duration) * 0.015); }
.anim-infinicy-hero .aih-nfc-w3 { animation-delay: calc(var(--duration) * 0.030); }

/* ----- PHONE (enters early, exits left during workflow, returns at the end) ----- */
.anim-infinicy-hero .aih-phone {
  transform-box: fill-box;
  transform-origin: center;
  animation: aihPhone var(--duration) infinite var(--ease-in-out);
}
@keyframes aihPhone {
  0%, 5% { transform: translate(36px, 36px) scale(0.95); opacity: 0; }
  11%    { transform: translate(0, 0) scale(1); opacity: 1; }
  52%    { transform: translate(0, 0) scale(1); opacity: 1; }
  57%    { transform: translate(-540px, 0) scale(0.9); opacity: 0; }
  87%    { transform: translate(-540px, 0) scale(0.9); opacity: 0; }
  91%    { transform: translate(0, 0) scale(1); opacity: 1; }
  99%    { transform: translate(0, 0) scale(1); opacity: 1; }
  100%   { transform: translate(0, 0) scale(1); opacity: 0; }
}

/* Tiny shake on NFC tap */
.anim-infinicy-hero .aih-phone-shake {
  transform-box: fill-box;
  transform-origin: center;
  animation: aihPhoneShake var(--duration) infinite var(--ease-out);
}
@keyframes aihPhoneShake {
  0%, 13%  { transform: translate(0, 0); }
  14%      { transform: translate(-2px, 1px); }
  15%      { transform: translate(2px, -1px); }
  16%      { transform: translate(-1px, 0); }
  17%,100% { transform: translate(0, 0); }
}

/* ----- STEP 1 : PROFIL ----- */
.anim-infinicy-hero .aih-step-profile {
  animation: aihStepProfile var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aihStepProfile {
  0%, 15% { opacity: 0; }
  18%     { opacity: 1; }
  33%     { opacity: 1; }
  35%, 100% { opacity: 0; }
}
.anim-infinicy-hero .aih-tile-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: aihTileGlow var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aihTileGlow {
  0%, 29% { opacity: 0; transform: scale(0.85); }
  31%     { opacity: 0.85; transform: scale(1.04); }
  34%     { opacity: 0; transform: scale(1.4); }
  100%    { opacity: 0; }
}

/* ----- STEP 2 : FORM MODAL ----- */
.anim-infinicy-hero .aih-step-form {
  animation: aihStepForm var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aihStepForm {
  0%, 32% { opacity: 0; }
  35%     { opacity: 1; }
  52%     { opacity: 1; }
  55%, 100% { opacity: 0; }
}
.anim-infinicy-hero .aih-modal-pop {
  transform-box: fill-box;
  transform-origin: center;
  animation: aihModalPop var(--duration) infinite var(--ease-out);
}
@keyframes aihModalPop {
  0%, 32% { transform: scale(0.85); opacity: 0; }
  35%     { transform: scale(1.02); opacity: 1; }
  37%     { transform: scale(1); opacity: 1; }
  52%     { transform: scale(1); opacity: 1; }
  55%, 100% { transform: scale(0.9); opacity: 0; }
}

/* 4 champs en cascade */
.anim-infinicy-hero .aih-field {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: left center;
}
.anim-infinicy-hero .aih-field-0 { animation: aihFieldA var(--duration) infinite var(--ease-out); }
.anim-infinicy-hero .aih-field-1 { animation: aihFieldB var(--duration) infinite var(--ease-out); }
.anim-infinicy-hero .aih-field-2 { animation: aihFieldC var(--duration) infinite var(--ease-out); }
.anim-infinicy-hero .aih-field-3 { animation: aihFieldD var(--duration) infinite var(--ease-out); }
@keyframes aihFieldA { 0%,38%{opacity:0; transform:translateX(-6px);} 40%{opacity:1; transform:translateX(0);} 52%{opacity:1;} 55%,100%{opacity:0;} }
@keyframes aihFieldB { 0%,41%{opacity:0; transform:translateX(-6px);} 43%{opacity:1; transform:translateX(0);} 52%{opacity:1;} 55%,100%{opacity:0;} }
@keyframes aihFieldC { 0%,44%{opacity:0; transform:translateX(-6px);} 46%{opacity:1; transform:translateX(0);} 52%{opacity:1;} 55%,100%{opacity:0;} }
@keyframes aihFieldD { 0%,47%{opacity:0; transform:translateX(-6px);} 49%{opacity:1; transform:translateX(0);} 52%{opacity:1;} 55%,100%{opacity:0;} }

/* CTA press */
.anim-infinicy-hero .aih-send-press {
  transform-box: fill-box;
  transform-origin: center;
  animation: aihSendPress var(--duration) infinite var(--ease-out);
}
@keyframes aihSendPress {
  0%, 50% { transform: scale(1); }
  51%     { transform: scale(0.95); }
  52%     { transform: scale(1); }
  100%    { transform: scale(1); }
}

/* ----- WORKFLOW n8n (visible 55% → 89%) ----- */
.anim-infinicy-hero .aih-workflow {
  animation: aihWorkflow var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aihWorkflow {
  0%, 55% { opacity: 0; }
  59%     { opacity: 1; }
  89%     { opacity: 1; }
  91%, 100% { opacity: 0; }
}

/* Edges : tracé progressif (stroke-dasharray) */
.anim-infinicy-hero .aih-edge {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  opacity: 0;
}
.anim-infinicy-hero .aih-edge-0 { animation: aihEdgeA var(--duration) infinite var(--ease-out); }
.anim-infinicy-hero .aih-edge-1 { animation: aihEdgeB var(--duration) infinite var(--ease-out); }
.anim-infinicy-hero .aih-edge-2 { animation: aihEdgeC var(--duration) infinite var(--ease-out); }
.anim-infinicy-hero .aih-edge-3 { animation: aihEdgeD var(--duration) infinite var(--ease-out); }
@keyframes aihEdgeA { 0%,58%{stroke-dashoffset:500; opacity:0.5;} 63%,89%{stroke-dashoffset:0; opacity:1;} 100%{stroke-dashoffset:0; opacity:0;} }
@keyframes aihEdgeB { 0%,64%{stroke-dashoffset:500; opacity:0.5;} 69%,89%{stroke-dashoffset:0; opacity:1;} 100%{stroke-dashoffset:0; opacity:0;} }
@keyframes aihEdgeC { 0%,70%{stroke-dashoffset:500; opacity:0.5;} 75%,89%{stroke-dashoffset:0; opacity:1;} 100%{stroke-dashoffset:0; opacity:0;} }
@keyframes aihEdgeD { 0%,76%{stroke-dashoffset:500; opacity:0.5;} 81%,89%{stroke-dashoffset:0; opacity:1;} 100%{stroke-dashoffset:0; opacity:0;} }

/* 5 nœuds — stagger + scale-in */
.anim-infinicy-hero .aih-node {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.anim-infinicy-hero .aih-node-0 { animation: aihNodeA var(--duration) infinite var(--ease-out); }
.anim-infinicy-hero .aih-node-1 { animation: aihNodeB var(--duration) infinite var(--ease-out); }
.anim-infinicy-hero .aih-node-2 { animation: aihNodeC var(--duration) infinite var(--ease-out); }
.anim-infinicy-hero .aih-node-3 { animation: aihNodeD var(--duration) infinite var(--ease-out); }
.anim-infinicy-hero .aih-node-4 { animation: aihNodeE var(--duration) infinite var(--ease-out); }
@keyframes aihNodeA { 0%,58%{opacity:0; transform:scale(0.7);} 62%{opacity:1; transform:scale(1.08);} 65%{opacity:1; transform:scale(1);} 89%{opacity:1;} 91%,100%{opacity:0;} }
@keyframes aihNodeB { 0%,64%{opacity:0; transform:scale(0.7);} 68%{opacity:1; transform:scale(1.08);} 71%{opacity:1; transform:scale(1);} 89%{opacity:1;} 91%,100%{opacity:0;} }
@keyframes aihNodeC { 0%,70%{opacity:0; transform:scale(0.7);} 74%{opacity:1; transform:scale(1.08);} 77%{opacity:1; transform:scale(1);} 89%{opacity:1;} 91%,100%{opacity:0;} }
@keyframes aihNodeD { 0%,76%{opacity:0; transform:scale(0.7);} 80%{opacity:1; transform:scale(1.08);} 83%{opacity:1; transform:scale(1);} 89%{opacity:1;} 91%,100%{opacity:0;} }
@keyframes aihNodeE { 0%,82%{opacity:0; transform:scale(0.7);} 86%{opacity:1; transform:scale(1.08);} 88%{opacity:1; transform:scale(1);} 89%{opacity:1;} 91%,100%{opacity:0;} }

/* Halo violet pulsé sur chaque nœud */
.anim-infinicy-hero .aih-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: aihHalo 1.6s infinite ease-in-out;
}
@keyframes aihHalo {
  0%, 100% { opacity: 0.22; transform: scale(1); }
  50%      { opacity: 0.5;  transform: scale(1.08); }
}

/* ----- CONFIRMATION : "Devis généré" (91% → 99%, LONG hold) ----- */
.anim-infinicy-hero .aih-confirm {
  animation: aihConfirm var(--duration) infinite var(--ease-out);
  opacity: 0;
}
@keyframes aihConfirm {
  0%, 90% { opacity: 0; }
  93%     { opacity: 1; }
  99%     { opacity: 1; }
  100%    { opacity: 0; }
}
.anim-infinicy-hero .aih-confirm-burst {
  transform-box: fill-box;
  transform-origin: center;
  animation: aihConfirmBurst var(--duration) infinite var(--ease-out);
}
@keyframes aihConfirmBurst {
  0%, 91% { transform: scale(0.4); opacity: 0; }
  94%     { transform: scale(1.15); opacity: 1; }
  96%     { transform: scale(1); opacity: 1; }
  100%    { transform: scale(1); opacity: 1; }
}
.anim-infinicy-hero .aih-confirm-check {
  stroke-dasharray: 56;
  stroke-dashoffset: 56;
  animation: aihConfirmCheck var(--duration) infinite var(--ease-out);
}
@keyframes aihConfirmCheck {
  0%, 94% { stroke-dashoffset: 56; }
  97%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 0; }
}
.anim-infinicy-hero .aih-confirm-text {
  opacity: 0;
  animation: aihConfirmText var(--duration) infinite var(--ease-out);
}
@keyframes aihConfirmText {
  0%, 92% { opacity: 0; transform: translateY(4px); }
  94%     { opacity: 1; transform: translateY(0); }
  99%     { opacity: 1; }
  100%    { opacity: 0; }
}

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