/* ==========================================================================
   MAFOTO — L'ENTRÉE EN SCÈNE                                       [CREATE]
   ==========================================================================
   Relevé sur createstudio.framer.media, dans son script
   `<script type="framer/appear" id="__framer__appearAnimationsContent">`.
   Ce ne sont pas des valeurs à l'œil : c'est la table exacte du template.

     retard   durée   courbe                          élément      depuis
     ------   -----   ----------------------------    ---------    -----------------
      0 s      1 s    cubic-bezier(.68, 0, .2, .89)   LE FOND      opacité 0 · ÉCHELLE 1.3 · y +40
      0,5 s    1 s    cubic-bezier(.29, .84, .56, 1)  nav          opacité 0 · y −48
      0,6 s    1 s    cubic-bezier(0, 1.2, .56, 1)    méta bas     y +40
      0,7 s    0,4 s  ressort                         ligne texte  opacité 0
      1 s      0,6 s  cubic-bezier(0, 1.2, .56, 1)    chiffre      opacité 0
      1 s      2 s    cubic-bezier(0, 1.2, .56, 1)    paragraphe   opacité 0 · y +80
      1/1,2 s  1 s    cubic-bezier(0, 1.2, .56, 1)    boutons      y +70
      1,2 s    0,6 s  ressort                         logo         opacité 0
      1,3 s    0,2 s  ressort                         vidéo        opacité 0

   Les deux enseignements, et c'est exactement ce qui était demandé :

     • LE FOND EN PREMIER, seul, pendant une demi-seconde. Il n'apparaît pas :
       il se REPOSE — il entre à 130 % et redescend à 100 %. C'est le
       « dézoom fondu ». Tout le reste attend que ce mouvement soit engagé.
     • ENSUITE SEULEMENT le texte, en cascade, du haut vers le bas, chacun
       décalé d'un ou deux dixièmes. Jamais deux éléments ensemble.

   La courbe cubic-bezier(0, 1.2, .56, 1) a une ordonnée de contrôle > 1 :
   elle dépasse la cible puis revient. C'est ce qui donne le petit rebond des
   textes, sans avoir à écrire un ressort en JavaScript.

   Tout est en CSS : une animation `both` avec un `animation-delay`. Aucune
   classe à poser au chargement, aucun observateur — le navigateur joue les
   animations dès que le document est peint.
   ========================================================================== */

:root {
  --in-settle: cubic-bezier(.68, 0, .2, .89);   /* le fond qui se repose */
  --in-drop:   cubic-bezier(.29, .84, .56, 1);  /* ce qui descend d'en haut */
  --in-rise:   cubic-bezier(0, 1.2, .56, 1);    /* ce qui monte, avec dépassement */
}

/* Mouvement réduit : aucune chorégraphie. Les éléments sont simplement là. */
@media (prefers-reduced-motion: no-preference) {

  /* --- 0 s — LE FOND, seul ---------------------------------------------
     130 % → 100 %. Le héros a `overflow: hidden`, donc le surplus est rogné :
     on ne voit qu'un cadrage qui se resserre. */
  .opening__bg {
    animation: in-settle 1000ms var(--in-settle) both;
  }

  /* --- 0,5 s — l'en-tête descend --------------------------------------- */
  .head {
    animation: in-drop 1000ms var(--in-drop) 500ms both;
  }

  /* --- 0,6 s — l'index des prestations, ligne à ligne ------------------- */
  .opening__index li {
    animation: in-rise 1000ms var(--in-rise) both;
    animation-delay: calc(600ms + var(--i, 0) * 70ms);
  }

  /* --- 0,7 s — l'accroche, en fondu flouté ------------------------------
     Create anime son titre mot à mot avec `filter: blur()`. Un fondu flouté
     sur la ligne entière donne la même sensation pour un centième du code —
     et surtout, il ne casse pas la sélection du texte ni sa lecture par un
     lecteur d'écran, ce que fait toute découpe en <span> par mot. */
  .opening__claim {
    animation: in-focus 900ms var(--in-rise) 700ms both;
  }

  /* --- 1 s — le bouton --------------------------------------------------- */
  .opening__cta {
    animation: in-lift 1000ms var(--in-rise) 1000ms both;
  }

  /* --- 1,2 s — le logo -------------------------------------------------- */
  .opening__mark {
    animation: in-mark 900ms var(--in-rise) 1200ms both;
  }

  /* --- 1,35 s / 1,45 s — le pied, puis la navigation -------------------- */
  .opening__foot { animation: in-rise 900ms var(--in-rise) 1350ms both; }
  .dock          { animation: in-dock 900ms var(--in-rise) 1450ms both; }
}

/* --------------------------------------------------------------------------
   Les figures
   -------------------------------------------------------------------------- */

@keyframes in-settle {
  from { opacity: .001; transform: scale(1.3) translateY(40px); }
  to   { opacity: 1;    transform: none; }
}

@keyframes in-drop {
  from { opacity: .001; transform: translateY(-48px); }
  to   { opacity: 1;    transform: none; }
}

@keyframes in-rise {
  from { opacity: .001; transform: translateY(40px); }
  to   { opacity: 1;    transform: none; }
}

@keyframes in-lift {
  from { opacity: .001; transform: translateY(70px); }
  to   { opacity: 1;    transform: none; }
}

/* Le fondu flouté : l'accroche se met au point plutôt que d'apparaître. */
@keyframes in-focus {
  from { opacity: .001; transform: translateY(24px); filter: blur(9px); }
  to   { opacity: 1;    transform: none;             filter: blur(0); }
}

/* Le logo ne monte pas : il se repose, comme le fond. Même geste, en plus
   petit — c'est ce qui les relie. */
@keyframes in-mark {
  from { opacity: .001; transform: scale(1.07); }
  to   { opacity: 1;    transform: none; }
}

/* Le dock est centré par `translateX(-50%)` : une animation qui écrit
   `transform` l'écraserait et le renverrait à gauche. On garde le décalage
   horizontal dans chaque image-clé. */
@keyframes in-dock {
  from { opacity: .001; transform: translateX(-50%) translateY(40px); }
  to   { opacity: 1;    transform: translateX(-50%); }
}