/* ══════════════════════════════════════════════════════════════════════════
   Le mouvement. Deux choses, et rien d'autre :
   1. des APPARITIONS au défilement, sobres, façon Apple — une translation
      courte et un fondu, sur une courbe qui décélère longuement ;
   2. une INTRODUCTION : une onde vocale qui se forme, se ramasse, et laisse
      la marque. C'est l'agent qui décroche.

   Règle : tout est VISIBLE au repos. C'est le script qui pose .anim-prete,
   donc une page sans JavaScript ne cache jamais rien.
   ══════════════════════════════════════════════════════════════════════════ */

.anim-prete { opacity: 0; transform: translateY(22px); }
.anim-prete, .anim-entree {
  transition: opacity .85s var(--douceur), transform .85s var(--douceur);
}
.anim-entree { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .anim-prete { opacity: 1; transform: none; transition: none; }
}

/* ── L'introduction ────────────────────────────────────────────────────
   Deux temps : une onde vocale qui se forme, puis la phrase qui dit ce que
   fait Allolia. Et c'est tout — pas de logo à la fin (Lionel, 22/09) : la
   marque est déjà dans l'en-tête, la répéter ici n'ajoutait rien. La phrase
   reste à l'écran jusqu'à ce que le voile s'efface. */
.intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--nuit);
  animation: intro-sortie .9s var(--douceur) 3.2s both;
}
.intro[hidden] { display: none; }
.intro::after {   /* la lueur qui respire derrière la scène */
  content: ""; position: absolute; width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,199,127,.16), rgba(16,112,206,.07) 45%, transparent 70%);
  animation: intro-lueur 3.3s var(--douceur) both;
}
@keyframes intro-lueur { from { opacity: 0; transform: scale(.4); } 40% { opacity: 1; } to { opacity: .85; transform: scale(1); } }
@keyframes intro-sortie { to { opacity: 0; transform: translateY(-2%); visibility: hidden; } }

.intro__scene { position: relative; display: grid; place-items: center; height: 130px; width: min(90vw, 620px); text-align: center; }

/* 1. L'onde : des barres qui montent une à une, puis se ramassent. */
.intro__onde { display: flex; align-items: center; gap: 7px; height: 96px; }
.intro__onde i {
  display: block; width: 5px; border-radius: 99px; background: var(--degrade);
  height: 8px; transform-origin: center;
  animation: intro-barre 1s var(--douceur) both, intro-ramasse .5s var(--douceur) 1.05s forwards;
}
/* Hauteur et départ de chacune des 13 barres — écrits ici et non dans la page depuis le 04/11/2026 (la CSP du site
   refuse les styles en ligne) ; les mêmes valeurs qu'avant, au pixel et à la milliseconde. */
.intro__onde i:nth-child(1) { height: 18px; animation-delay: 0ms, 1.25s; }
.intro__onde i:nth-child(2) { height: 34px; animation-delay: 55ms, 1.25s; }
.intro__onde i:nth-child(3) { height: 52px; animation-delay: 110ms, 1.25s; }
.intro__onde i:nth-child(4) { height: 74px; animation-delay: 165ms, 1.25s; }
.intro__onde i:nth-child(5) { height: 92px; animation-delay: 220ms, 1.25s; }
.intro__onde i:nth-child(6) { height: 62px; animation-delay: 275ms, 1.25s; }
.intro__onde i:nth-child(7) { height: 96px; animation-delay: 330ms, 1.25s; }
.intro__onde i:nth-child(8) { height: 58px; animation-delay: 385ms, 1.25s; }
.intro__onde i:nth-child(9) { height: 88px; animation-delay: 440ms, 1.25s; }
.intro__onde i:nth-child(10) { height: 70px; animation-delay: 495ms, 1.25s; }
.intro__onde i:nth-child(11) { height: 46px; animation-delay: 550ms, 1.25s; }
.intro__onde i:nth-child(12) { height: 30px; animation-delay: 605ms, 1.25s; }
.intro__onde i:nth-child(13) { height: 16px; animation-delay: 660ms, 1.25s; }
@keyframes intro-barre { from { height: 4px; opacity: 0; } to { opacity: 1; } }
@keyframes intro-ramasse { to { height: 5px; opacity: 0; transform: scaleX(.3); } }

/* 2. La phrase, en deux souffles. */
.intro__phrase {
  position: absolute; margin: 0; display: flex; flex-direction: column; gap: 6px;
  font-size: 25px; font-weight: 500; line-height: 1.3; color: #C3C9CF;
}
.intro__phrase span { display: block; animation: intro-souffle .75s var(--douceur) both; }
.intro__phrase span:nth-child(1) { animation-delay: 1.15s; }
.intro__phrase span:nth-child(2) { animation-delay: 1.9s; color: var(--blanc); }
@keyframes intro-souffle { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.intro__ligne {
  position: absolute; bottom: 6px; height: 1px; width: 0;
  background: linear-gradient(90deg, transparent, var(--vert), transparent);
  animation: intro-ligne 1s var(--douceur) 2.15s both;
}
@keyframes intro-ligne { to { width: 320px; opacity: .55; } }

/* Le corps ne défile pas pendant l'introduction. */
body[data-intro] { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}