/* ==========================================================================
   Fidelyxa — séquence d'ouverture (voir fx-intro.js)
   Le logo se construit sur fond vert profond, puis le rideau se lève et le
   logo rejoint l'en-tête.
   Performance : chaque pièce du logo est un petit calque à part, animé
   uniquement en transform et en opacité. Rien n'est redessiné pendant
   l'animation : tout tourne sur la carte graphique.
   ========================================================================== */
.fxi{
  --fxi-l:#69c6b0;            /* vert clair du logo */
  --fxi-d:#e4f4f0;            /* « del » et contours : clairs sur fond sombre */
  position:fixed;inset:0;z-index:100000;display:grid;place-items:center;overflow:hidden;
  animation:fxi-safety 0s 10s forwards;   /* si le script s'arrête, l'écran disparaît quand même */
}
@keyframes fxi-safety{to{visibility:hidden;pointer-events:none}}
/* le fond dépasse sous l'écran : ses coins arrondis n'apparaissent qu'en se levant */
.fxi-bg{
  position:absolute;inset:0 0 -64px 0;border-radius:0 0 56px 56px;
  background:
    radial-gradient(60% 55% at 50% 44%,rgba(15,143,131,.38),transparent 70%),
    radial-gradient(40% 40% at 82% 100%,rgba(244,183,63,.1),transparent 70%),
    #052f2b;
  transition:transform .9s cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
.fxi-logo{
  position:relative;width:min(560px,78vw);aspect-ratio:2172/724;
  transform-origin:0 0;transition:transform .8s cubic-bezier(.7,0,.2,1),opacity .2s linear;will-change:transform,opacity;
}
.fxi-p{position:absolute;display:block}
.fxi-p,.fxi-wipe-in,.fxi-ch{will-change:transform,opacity}
.fxi-L{fill:var(--fxi-l)}
.fxi-D{fill:var(--fxi-d)}

/* --- état de départ ---------------------------------------------------------- */
.fxi-ghost{opacity:0}
/* balayage en biais : la fenêtre glisse le long de la feuille, son contenu glisse
   en sens inverse → la feuille reste immobile et se découvre de la tige vers la pointe */
.fxi-wipe{overflow:hidden;transform:rotate(-30deg) translateX(-100%)}
.fxi-wipe-in{position:absolute;inset:0;transform:translateX(100%) rotate(30deg)}
.fxi-abs{position:absolute;display:block}
.fxi-card,.fxi-st,.fxi-dot,.fxi-ring{opacity:0}
.fxi-ring{border:2px solid var(--fxi-l);border-radius:50%}
.fxi-mask{overflow:hidden}
.fxi-ch{display:block;width:100%;height:100%;transform:translateY(106%)}

/* --- construction ------------------------------------------------------------ */
/* 0. le « F » apparaît en filigrane, comme un plan */
.fxi.is-play .fxi-ghost{animation:fxi-ghost .5s ease both,fxi-ghost-out .5s ease 1.9s forwards}
@keyframes fxi-ghost{from{opacity:0}to{opacity:.13}}
@keyframes fxi-ghost-out{to{opacity:0}}
/* 1. il pousse petit à petit : la feuille du bas, puis celle du haut */
.fxi.is-play .fxi-wipe{animation:fxi-wipe-out 1.25s cubic-bezier(.5,0,.25,1) .2s both}
.fxi.is-play .fxi-wipe-in{animation:fxi-wipe-in 1.25s cubic-bezier(.5,0,.25,1) .2s both}
.fxi.is-play .fxi-wipe-b1,.fxi.is-play .fxi-wipe-b1 .fxi-wipe-in{animation-duration:1.35s;animation-delay:.85s}
@keyframes fxi-wipe-out{from{transform:rotate(-30deg) translateX(-100%)}to{transform:rotate(-30deg) translateX(0)}}
@keyframes fxi-wipe-in{from{transform:translateX(100%) rotate(30deg)}to{transform:translateX(0) rotate(30deg)}}

/* 2. la carte tombe en place, puis reçoit ses tampons */
.fxi.is-play .fxi-card{animation:fxi-card .75s cubic-bezier(.2,1.25,.35,1) 1.95s both}
@keyframes fxi-card{from{opacity:0;transform:translate(34%,-96%) rotate(-42deg)}45%{opacity:1}to{opacity:1;transform:none}}
.fxi.is-play .fxi-st{animation:fxi-stamp .45s cubic-bezier(.2,1.35,.4,1) both}
.fxi.is-play .fxi-s1{animation-delay:2.5s}
.fxi.is-play .fxi-s2{animation-delay:2.6s}
.fxi.is-play .fxi-s3{animation-delay:2.7s}
.fxi.is-play .fxi-dot{animation:fxi-stamp .5s cubic-bezier(.2,1.35,.4,1) 2.84s both}
@keyframes fxi-stamp{0%{opacity:0;transform:scale(2.1) rotate(-16deg)}55%{opacity:1;transform:scale(.9) rotate(3deg)}100%{opacity:1;transform:none}}
.fxi.is-play .fxi-ring{animation:fxi-ring .7s ease-out 2.98s forwards}
@keyframes fxi-ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.5)}}

/* 3. les lettres montent une à une */
.fxi.is-play .fxi-ch{animation:fxi-rise .75s cubic-bezier(.16,1,.3,1) calc(2.15s + var(--i,0) * 80ms) both}
@keyframes fxi-rise{from{transform:translateY(106%)}to{transform:none}}

/* --- sortie : le rideau se lève, le logo vole vers l'en-tête -------------------- */
.fxi.is-out{pointer-events:none}
.fxi.is-out .fxi-bg{transform:translateY(-102%)}
.fxi.is-landed .fxi-logo,.fxi-logo.is-fade{opacity:0}
/* pendant le vol, le vrai logo de l'en-tête s'efface : pas de double image */
.fxi-flying #siteHeader .fx-brand img{visibility:hidden}
/* la carte du « i » s'envole vers le héros, puis la vraie carte prend le relais */
.fxi-fly{position:fixed;z-index:2;transform-origin:50% 50%;transition:transform .9s cubic-bezier(.6,0,.2,1) .06s,opacity .32s ease;will-change:transform,opacity;pointer-events:none}
.fxi-fly-svg{display:block;width:100%;height:100%;overflow:visible}
.fxi.is-carded .fxi-fly{opacity:0}
html.fxi-carding #heroPass,html.fxi-carding [data-pass-demo]{animation:none!important;opacity:0}
html.fxi-carded #heroPass,html.fxi-carded [data-pass-demo]{animation:fxi-pass-land .55s cubic-bezier(.2,1.2,.35,1) both!important}
@keyframes fxi-pass-land{from{opacity:0;scale:.9}}
/* passage rapide (clic, touche, molette) */
.fxi.is-skip{opacity:0;pointer-events:none;transition:opacity .22s ease}

/* l'entrée du héros des pages sombres attend aussi derrière le rideau */
.fx-loading-on .pg-hero *,.fx-loading-on .pg-hero *::before,.fx-loading-on .pg-hero *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){.fxi{display:none}}
@media print{.fxi{display:none}}