/* Ouverture de l'accueil : la nouvelle identité se monte sous les yeux, comme un lancement.
   Le soleil se lève derrière le a, le a se range, le soleil vient au-dessus du mot, les lettres arrivent
   de gauche à droite, puis le soleil se pose sur le i. Trois modes :
   - défilement lié (animation-timeline) : le montage suit le défilement, dans une scène collante ;
   - .io (posée par ouverture.js quand le défilement lié n'existe pas) : le montage se joue tout seul, une fois ;
   - mouvement réduit : le logo final, sans animation.
   Les valeurs de départ viennent de la géométrie du logo (a : 8→106 × 95→202 ; soleil : 533, 62, r 17,9),
   pour un monogramme agrandi 3,4 fois et centré sur (338, 125). */

/* site.css met overflow-x: hidden sur body, qui devient un conteneur de défilement immobile :
   la scène ne collerait plus et la timeline se rattacherait au body. clip coupe sans défiler. */
body { overflow-x: clip; }

.ouverture { padding: 48px 0 8px; }
@media (max-width: 640px) { .ouverture { padding-top: 32px; } }
.ouv-scene { display: grid; justify-items: center; gap: 16px; width: min(1120px, 100% - 40px); margin-inline: auto; text-align: center; }
.ouv-art { display: block; width: min(100%, 520px); height: auto; aspect-ratio: 700 / 240; color: var(--ink); }
.ouv-art .lt, .ouv-art .vol { transform-box: view-box; transform-origin: 0 0; }
.ouv-a { margin: 0; font: 400 clamp(28px, 1.4vw + 20px, 40px)/1.15 var(--title); letter-spacing: -.01em; }

@media (prefers-reduced-motion: no-preference) {
  /* Le soleil se lève tout seul à l'arrivée sur la page */
  .leve { animation: ouv-lever 1.6s cubic-bezier(.2, .7, .2, 1) .2s both; }

  /* ---------- Défilement lié ---------- */
  /* Toujours « animation: » d'abord, puis animation-timeline et animation-range : le raccourci les remettrait à zéro. */
  @supports (animation-timeline: view()) {
    /* La scène n'est pas plus haute que son contenu : collée au centre de l'écran (sous l'en-tête),
       elle laisse arriver le hero juste dessous. Taille : jamais moins de 220 px (téléphone à l'horizontale). */
    .ouverture { height: 210svh; padding: 0; view-timeline: --ouv block; }
    .ouv-scene { --ouv-l: min(92vw, 760px, max(220px, calc((100svh - 240px) * 1.4894))); }
    .ouv-scene { position: sticky; top: max(88px, calc((100svh - var(--ouv-l) * .6714 - 62px) / 2)); }
    .ouv-art { aspect-ratio: 700 / 470; width: var(--ouv-l); }

    /* Plages en svh depuis le début de la scène : elles ne bougent pas quand la barre d'adresse du téléphone apparaît */
    .ouv-a { animation: ouv-sortir linear both; animation-timeline: --ouv; animation-range: contain 5.6svh contain 19.6svh; }
    .l1 { animation: ouv-ranger ease-in-out both; animation-timeline: --ouv; animation-range: contain 19.6svh contain 58.8svh; }
    .vol { animation: ouv-voler linear both; animation-timeline: --ouv; animation-range: contain 19.6svh contain 100.8svh; }
    .l2, .l3, .l4, .l5, .l6, .l7 { animation: ouv-lettre ease-out both; animation-timeline: --ouv; }
    .l2 { animation-range: contain 58.8svh contain 67.2svh; }
    .l3 { animation-range: contain 63svh contain 71.4svh; }
    .l4 { animation-range: contain 67.2svh contain 75.6svh; }
    .l5 { animation-range: contain 71.4svh contain 79.8svh; }
    .l6 { animation-range: contain 75.6svh contain 84svh; }
    .l7 { animation-range: contain 79.8svh contain 88.2svh; }
  }

  /* ---------- Repli : le même montage, joué une fois dans le temps ---------- */
  /* La phrase reste sous le mot (comme sans animation) : pas de trou entre le logo et le hero */
  .io .ouv-scene { --ouv-l: min(92vw, 640px, max(220px, calc((100svh - 300px) * 1.4894))); }
  .io .ouv-art { aspect-ratio: 700 / 470; width: var(--ouv-l); }
  .io .l1 { animation: ouv-ranger 1.1s ease-in-out 2.2s both; }
  .io .vol { animation: ouv-voler 2.6s linear 2.2s both; }
  .io .l2, .io .l3, .io .l4, .io .l5, .io .l6, .io .l7 { animation: ouv-lettre .45s ease-out both; }
  .io .l2 { animation-delay: 3.3s; }
  .io .l3 { animation-delay: 3.42s; }
  .io .l4 { animation-delay: 3.54s; }
  .io .l5 { animation-delay: 3.66s; }
  .io .l6 { animation-delay: 3.78s; }
  .io .l7 { animation-delay: 3.9s; }
}

@keyframes ouv-lever { from { transform: translateY(39.06px); } }
@keyframes ouv-sortir { to { opacity: 0; transform: translateY(-16px); } }
@keyframes ouv-ranger { from { transform: translate(100px, -339.1px) scale(3.4); } }
/* Le soleil rétrécit en allant au-dessus du i, attend que les lettres soient là, puis se pose */
@keyframes ouv-voler {
  0% { transform: translate(-3761.7px, -443.2px) scale(7.8257); animation-timing-function: ease-in-out; }
  55% { transform: translate(0px, -90px) scale(1); }
  80% { transform: translate(0px, -90px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes ouv-lettre { from { opacity: 0; transform: translateY(14px); } }