/* =========================================================
   POLYANCE — Intro animation & motifs de convergence
   Principe : plusieurs directions → convergence → symbole →
   (fondu) → la photo et le texte du Hero prennent le relais.
   ~0.85s pour ce voile, ~1.3s ressenti avec l'enchaînement Hero.
   ========================================================= */

html.intro-lock, html.intro-lock body{ overflow:hidden; height:100%; }

.intro-overlay{
  position:fixed; inset:0; z-index:9999;
  background:var(--white);
  display:flex; align-items:center; justify-content:center;
  animation:intro-fade-out .3s var(--ease-soft) forwards;
  animation-delay:.55s;
}
.intro-overlay[hidden]{ display:none; }

.intro-stage{
  position:relative;
  width:320px; height:320px;
  display:flex; align-items:center; justify-content:center;
}

.intro-shape{
  position:absolute; top:50%; left:50%;
  width:64px; height:16px;
  border-radius:100px;
  opacity:0;
  animation-fill-mode:forwards;
  animation-timing-function:var(--ease-soft);
}
.intro-shape.a{ background:var(--blue); animation-name:shape-a; animation-duration:.5s; }
.intro-shape.b{ background:var(--blue-deep); animation-name:shape-b; animation-duration:.5s; animation-delay:.04s; }
.intro-shape.c{ background:var(--orange); animation-name:shape-c; animation-duration:.5s; animation-delay:.08s; }

@keyframes shape-a{
  0%  { transform:translate(-220px,-130px) rotate(-24deg) scale(.5); opacity:0; }
  55% { transform:translate(-50%,-50%) rotate(-40deg) scale(1); opacity:.95; }
  78% { transform:translate(-50%,-50%) rotate(-40deg) scale(1); opacity:.9; }
  100%{ transform:translate(-50%,-50%) rotate(-40deg) scale(.5); opacity:0; }
}
@keyframes shape-b{
  0%  { transform:translate(180px,-150px) rotate(28deg) scale(.5); opacity:0; }
  55% { transform:translate(-50%,-50%) rotate(40deg) scale(1); opacity:.95; }
  78% { transform:translate(-50%,-50%) rotate(40deg) scale(1); opacity:.9; }
  100%{ transform:translate(-50%,-50%) rotate(40deg) scale(.5); opacity:0; }
}
@keyframes shape-c{
  0%  { transform:translate(-50%,190px) rotate(90deg) scale(.5); opacity:0; }
  55% { transform:translate(-50%,-50%) rotate(90deg) scale(1); opacity:.95; }
  78% { transform:translate(-50%,-50%) rotate(90deg) scale(1); opacity:.9; }
  100%{ transform:translate(-50%,-50%) rotate(90deg) scale(.5); opacity:0; }
}

.intro-symbol{
  position:absolute; width:84px; height:auto;
  opacity:0;
  animation:symbol-in .32s var(--ease-soft) forwards;
  animation-delay:.24s;
}
@keyframes symbol-in{
  0%  { opacity:0; transform:scale(.7); }
  60% { opacity:1; transform:scale(1.08); }
  100%{ opacity:1; transform:scale(1); }
}

@keyframes intro-fade-out{
  to{ opacity:0; visibility:hidden; }
}

@media (max-width:520px){
  .intro-stage{ width:240px; height:240px; }
  .intro-shape{ width:48px; height:12px; }
  .intro-symbol{ width:64px; }
}

/* No motion: show final logo instantly then fade the veil quickly */
@media (prefers-reduced-motion: reduce){
  .intro-shape{ display:none; }
  .intro-symbol{ animation:none; opacity:1; transform:none; }
  .intro-overlay{ animation:intro-fade-out .25s ease forwards; animation-delay:.15s; }
}

/* ---------- word-cloud convergence (section "constat") ---------- */
.cloud{ position:relative; }
.cloud-tag{
  display:inline-block;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:9px 18px;
  font-size:14px; font-weight:600; color:var(--ink-soft);
  box-shadow:var(--shadow-s);
  opacity:0; transform:translateY(16px) scale(.92);
  transition:opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
  transition-delay:calc(var(--i,0) * 90ms);
}
.cloud-tag.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .cloud-tag{ opacity:1; transform:none; transition:none; }
}

/* ---------- method arrows draw-in ---------- */
.method-flow-arrow{
  color:var(--orange);
  opacity:0; transform:scale(.6);
  transition:opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
}
.method-flow-arrow.is-visible{ opacity:1; transform:scale(1); }