/* ============================================================
   anim-multilingue.css
   Animation "Système multilingue" Infinicy - pure SVG + CSS, 0 JS.
   Boucle infinie 18s. Couleurs/espacements scopés sous
   .anim-multilingue pour ne pas polluer le reste du site.

   Origine : Animation Multilingue (bundle Claude Design), conversion
   vanilla depuis la référence React, prefixe `aml-`.

   Scénario : une seule fiche commerciale dont la charte (bannière,
   logo localisé, accent, libellés, tuiles, CTA) s'adapte à chaque
   marché, pendant que l'avatar + le téléphone restent immobiles.
   Cycle : France -> Deutschland -> United Kingdom -> France (boucle).
   ============================================================ */

/* ---------- Tokens locaux (scopés) ---------- */
.anim-multilingue {
  --aml-violet-500: #634DFA;
  --aml-ink-900: #1D184E;
  --aml-white: #FFFFFF;
  --aml-off-white: #FBFBFB;
  --aml-gray-200: #E7E7E7;
  --aml-fg-muted: rgba(29, 24, 78, 0.65);

  /* alias utilisés par le SVG via var(--ink-900) etc. */
  --ink-900: var(--aml-ink-900);
  --white: var(--aml-white);
  --off-white: var(--aml-off-white);
  --gray-200: var(--aml-gray-200);
  --color-fg-muted: var(--aml-fg-muted);

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

/* ---------- Wrapper (sans cadre, transparent, prend toute la place) ---------- */
.anim-multilingue {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  overflow: visible;
}

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

/* ============================================================
   TIMELINE (% de --duration = 18s) - wrap-around capable.
   La ré-entrée FR chevauche la sortie EN : la transition EN -> FR
   est visuellement identique à FR -> DE et DE -> EN.

     Hold FR : 0-30%   (ré-entre 96-100 puis continue 0-30%)
     FR -> DE : 30-33%
     Hold DE : 33-63%
     DE -> EN : 63-66%
     Hold EN : 66-96%
     EN -> FR : 96-99%  (chevauche FR enter 96-100%)
   Easing : var(--ease-out) = cubic-bezier(0.22, 1, 0.36, 1)
   ============================================================ */

/* ---------- Calque marché parent - OPACITÉ uniquement ---------- */
.anim-multilingue .aml-layer { opacity: 0; }
.anim-multilingue .aml-layer-fr { animation: amlLayerFR var(--duration) infinite var(--ease-out); }
.anim-multilingue .aml-layer-de { animation: amlLayerDE var(--duration) infinite var(--ease-out); }
.anim-multilingue .aml-layer-en { animation: amlLayerEN var(--duration) infinite var(--ease-out); }

@keyframes amlLayerFR {
  0%, 30%   { opacity: 1; }
  33%       { opacity: 0; }
  96%       { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes amlLayerDE {
  0%, 30%   { opacity: 0; }
  33%, 63%  { opacity: 1; }
  66%, 100% { opacity: 0; }
}
@keyframes amlLayerEN {
  0%, 63%   { opacity: 0; }
  66%, 96%  { opacity: 1; }
  99%, 100% { opacity: 0; }
}

/* ---------- Sous-groupe BODY - glisse depuis le BAS (entrée), sort vers le HAUT ---------- */
.anim-multilingue .aml-body { transform-box: fill-box; transform-origin: center; }
.anim-multilingue .aml-body-fr { animation: amlBodyFR var(--duration) infinite var(--ease-out); }
.anim-multilingue .aml-body-de { animation: amlBodyDE var(--duration) infinite var(--ease-out); }
.anim-multilingue .aml-body-en { animation: amlBodyEN var(--duration) infinite var(--ease-out); }

@keyframes amlBodyFR {
  0%, 30%   { transform: translateY(0); }
  33%       { transform: translateY(-6px); }
  96%       { transform: translateY(6px); }   /* reset sous l'écran, invisible (opacity 0) */
  100%      { transform: translateY(0); }
}
@keyframes amlBodyDE {
  0%, 30%   { transform: translateY(6px); }
  33%, 63%  { transform: translateY(0); }
  66%, 100% { transform: translateY(-6px); }
}
@keyframes amlBodyEN {
  0%, 63%   { transform: translateY(6px); }
  66%, 96%  { transform: translateY(0); }
  99%, 100% { transform: translateY(-6px); }
}

/* ---------- Sous-groupe BANNER - glisse depuis le HAUT (entrée), sort vers le BAS ---------- */
/* Direction opposée au body : contraste intentionnel. */
.anim-multilingue .aml-banner { transform-box: fill-box; transform-origin: center; }
.anim-multilingue .aml-banner-fr { animation: amlBannerFR var(--duration) infinite var(--ease-out); }
.anim-multilingue .aml-banner-de { animation: amlBannerDE var(--duration) infinite var(--ease-out); }
.anim-multilingue .aml-banner-en { animation: amlBannerEN var(--duration) infinite var(--ease-out); }

@keyframes amlBannerFR {
  0%, 30%   { transform: translateY(0); }
  33%       { transform: translateY(6px); }
  96%       { transform: translateY(-6px); }  /* reset au-dessus de l'écran, invisible */
  100%      { transform: translateY(0); }
}
@keyframes amlBannerDE {
  0%, 30%   { transform: translateY(-6px); }
  33%, 63%  { transform: translateY(0); }
  66%, 100% { transform: translateY(6px); }
}
@keyframes amlBannerEN {
  0%, 63%   { transform: translateY(-6px); }
  66%, 96%  { transform: translateY(0); }
  99%, 100% { transform: translateY(6px); }
}

/* ---------- Pastilles pays : overlay "actif" (même cycle que le calque) ---------- */
.anim-multilingue .aml-chip-on { opacity: 0; }
.anim-multilingue .aml-chip-on-fr { animation: amlChipFR var(--duration) infinite var(--ease-out); }
.anim-multilingue .aml-chip-on-de { animation: amlChipDE var(--duration) infinite var(--ease-out); }
.anim-multilingue .aml-chip-on-en { animation: amlChipEN var(--duration) infinite var(--ease-out); }

@keyframes amlChipFR {
  0%, 30%   { opacity: 1; }
  33%       { opacity: 0; }
  96%       { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes amlChipDE {
  0%, 30%   { opacity: 0; }
  33%, 63%  { opacity: 1; }
  66%, 100% { opacity: 0; }
}
@keyframes amlChipEN {
  0%, 63%   { opacity: 0; }
  66%, 96%  { opacity: 1; }
  99%, 100% { opacity: 0; }
}

/* ---------- Connecteurs pastille -> téléphone (même cycle que les pastilles) ---------- */
.anim-multilingue .aml-conn { opacity: 0; }
.anim-multilingue .aml-conn-fr { animation: amlChipFR var(--duration) infinite var(--ease-out); }
.anim-multilingue .aml-conn-de { animation: amlChipDE var(--duration) infinite var(--ease-out); }
.anim-multilingue .aml-conn-en { animation: amlChipEN var(--duration) infinite var(--ease-out); }

/* ============================================================
   Reduced motion - fige l'animation sur le marché FR statique.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .anim-multilingue .aml-layer,
  .anim-multilingue .aml-body,
  .anim-multilingue .aml-banner,
  .anim-multilingue .aml-chip-on,
  .anim-multilingue .aml-conn {
    animation: none !important;
  }
  /* FR visible, immobile */
  .anim-multilingue .aml-layer-fr,
  .anim-multilingue .aml-chip-on-fr,
  .anim-multilingue .aml-conn-fr {
    opacity: 1 !important;
  }
  .anim-multilingue .aml-body-fr,
  .anim-multilingue .aml-banner-fr {
    transform: translateY(0) !important;
  }
  /* DE + EN masqués */
  .anim-multilingue .aml-layer-de,
  .anim-multilingue .aml-layer-en,
  .anim-multilingue .aml-chip-on-de,
  .anim-multilingue .aml-chip-on-en,
  .anim-multilingue .aml-conn-de,
  .anim-multilingue .aml-conn-en {
    opacity: 0 !important;
  }
}