/* ==========================================================================
   Animation d'arrivée « Mise sous tension » (2,5 s) — pilotée par intro.js
   Le symbole du logo Sura est un bouton marche dans un soleil : sur fond blanc, la barre du bouton descend,
   l'arc se trace, le bouton s'allume (halo jaune), les deux couronnes de tirets se déploient en tournant
   comme des rayons, puis le nom « Sura » et le slogan glissent à côté ; l'écran se lève et découvre la page.
   Jouée seulement si html.sura-intro-on (script du <head>) : une fois par session, jamais si « réduire les animations ».
   ========================================================================== */
#sura-intro{display:none}
.sura-intro-on #sura-intro{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;
  clip-path:inset(0 0 0 0);animation:sura-leve .65s cubic-bezier(.7,0,.3,1) 1.85s forwards}
.sura-intro-lock,.sura-intro-lock body{overflow:hidden}

.sura-intro__scene{display:flex;align-items:center;gap:clamp(10px,2.4vw,22px);width:min(88vw,620px);animation:sura-recul .65s cubic-bezier(.7,0,.3,1) 1.85s forwards}
.sura-intro__symbole{flex:none;width:clamp(86px,22vw,150px);height:auto;color:#FCC01A;overflow:visible}
.sura-intro__nom{flex:1;min-width:0;width:100%;height:auto;opacity:0;transform:translateX(-24px);animation:sura-glisse .55s cubic-bezier(.2,.8,.2,1) 1.1s forwards}

/* Le bouton marche : la barre descend, puis l'arc se trace */
.sura-intro__barre{stroke-dasharray:100;stroke-dashoffset:100;animation:sura-trace .32s cubic-bezier(.4,0,.2,1) .1s forwards}
.sura-intro__arc{stroke-dasharray:100;stroke-dashoffset:100;animation:sura-trace .5s cubic-bezier(.4,0,.2,1) .32s forwards}
/* Il s'allume : un halo jaune pulse derrière */
.sura-intro__halo{opacity:0;transform-origin:center;transform-box:fill-box;animation:sura-halo .7s ease-out .78s forwards}
/* Les couronnes de tirets se déploient en tournant, comme des rayons */
.sura-intro__couronne{opacity:0;transform-origin:center;transform-box:fill-box;animation:sura-rayonne .6s cubic-bezier(.2,.8,.2,1) forwards}
.sura-intro__couronne--int{animation-delay:.78s}
.sura-intro__couronne--ext{animation-delay:.92s}

@keyframes sura-trace{to{stroke-dashoffset:0}}
@keyframes sura-halo{0%{opacity:0;transform:scale(.4)}35%{opacity:.35}100%{opacity:0;transform:scale(2.1)}}
@keyframes sura-rayonne{from{opacity:0;transform:scale(.55) rotate(-70deg)}to{opacity:1;transform:none}}
@keyframes sura-glisse{to{opacity:1;transform:none}}
@keyframes sura-recul{to{transform:translateY(-30px);opacity:0}}
@keyframes sura-leve{to{clip-path:inset(0 0 100% 0)}}

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

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