/* ==========================================================================
   Animation d'arrivée « Les cinq facettes » (2,6 s) — pilotée par intro.js
   Sur un fond de plan d'ingénieur : les cinq facettes du bâtiment du logo arrivent et s'assemblent, OPTIMUS les
   balaie d'un trait cyan et elles passent au bleu Mavie, les lettres MAVIE montent puis « INGÉNIERIE » apparaît ;
   enfin l'écran se lève comme un calque et découvre la page.
   Jouée seulement si html.mav-intro-on (script du <head>) : une fois par session, jamais si « réduire les animations ».
   ========================================================================== */
#mav-intro{display:none}
.mav-intro-on #mav-intro{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:
    linear-gradient(rgba(0,64,193,.07) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(0,64,193,.07) 1px,transparent 1px) 0 0/40px 40px,
    #F7F9FD;
  clip-path:inset(0 0 0 0);animation:mav-leve .7s cubic-bezier(.7,0,.3,1) 1.9s forwards}
.mav-intro-lock,.mav-intro-lock body{overflow:hidden}

.mav-intro__scene{width:min(78vw,520px);animation:mav-recul .7s cubic-bezier(.7,0,.3,1) 1.9s forwards}
.mav-intro__logo{display:block;width:100%;height:auto;overflow:visible}

/* Les cinq facettes : chacune arrive de sa direction, en bleu clair */
.mav-intro__f{fill:#B9CCF4;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:mav-pose .55s cubic-bezier(.2,.8,.2,1) forwards,mav-bleu .3s ease-out forwards}
.mav-intro__f:nth-child(1){--dx:0px;--dy:-320px;animation-delay:.05s,.86s}
.mav-intro__f:nth-child(2){--dx:-320px;--dy:-120px;animation-delay:.14s,.98s}
.mav-intro__f:nth-child(3){--dx:320px;--dy:-120px;animation-delay:.23s,.98s}
.mav-intro__f:nth-child(4){--dx:-280px;--dy:260px;animation-delay:.32s,1.12s}
.mav-intro__f:nth-child(5){--dx:280px;--dy:260px;animation-delay:.41s,1.12s}

/* Le balayage OPTIMUS : un trait cyan descend sur le bâtiment */
.mav-intro__scan{fill:#00B7D7;opacity:0;filter:drop-shadow(0 0 14px rgba(0,183,215,.9));animation:mav-scan .62s cubic-bezier(.45,0,.4,1) .8s forwards}

/* Le nom : les lettres MAVIE montent une à une, puis INGÉNIERIE */
.mav-intro__lettre{fill:#111820;opacity:0;transform:translateY(60px);animation:mav-monte .5s cubic-bezier(.2,.8,.2,1) forwards}
.mav-intro__lettre:nth-child(1){animation-delay:1.02s}
.mav-intro__lettre:nth-child(2){animation-delay:1.08s}
.mav-intro__lettre:nth-child(3){animation-delay:1.14s}
.mav-intro__lettre:nth-child(4){animation-delay:1.2s}
.mav-intro__lettre:nth-child(5){animation-delay:1.26s}
.mav-intro__desc{fill:#111820;opacity:0;animation:mav-apparait .45s ease-out 1.38s forwards}

@keyframes mav-pose{from{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.8)}to{opacity:1;transform:none}}
@keyframes mav-bleu{to{fill:#0040C1}}
@keyframes mav-scan{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(384px)}}
@keyframes mav-monte{to{opacity:1;transform:none}}
@keyframes mav-apparait{to{opacity:1}}
@keyframes mav-recul{to{transform:translateY(-36px);opacity:0}}
@keyframes mav-leve{to{clip-path:inset(0 0 100% 0)}}

/* Entrée du hero, une fois l'écran levé (html.mav-intro-revealed) */
.mav-intro-hold .hero .surtitre,.mav-intro-hold .hero .h1 span,.mav-intro-hold .hero .lede,.mav-intro-hold .hero .garanties,.mav-intro-hold .hero .labels,.mav-intro-hold .devis,.mav-intro-hold .hero__optimus{opacity:0;transform:translateY(24px)}
.mav-intro-revealed .hero .surtitre,.mav-intro-revealed .hero .h1 span,.mav-intro-revealed .hero .lede,.mav-intro-revealed .hero .garanties,.mav-intro-revealed .hero .labels,.mav-intro-revealed .devis,.mav-intro-revealed .hero__optimus{
  transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.mav-intro-revealed .hero .h1 span:first-child{transition-delay:.05s}
.mav-intro-revealed .hero .h1 span:last-child{transition-delay:.12s}
.mav-intro-revealed .hero .lede{transition-delay:.2s}
.mav-intro-revealed .hero .garanties{transition-delay:.27s}
.mav-intro-revealed .hero .labels{transition-delay:.34s}
.mav-intro-revealed .devis{transition-delay:.16s}
.mav-intro-revealed .hero__optimus{transition-delay:.5s}

@media (prefers-reduced-motion:reduce){#mav-intro{display:none!important}}