/* huiledecode — l'apparition des textes (prototype 25) : compléments de shared/fil.css et shared/fil3.css.
   Le texte attend le code qui sort de la goutte ; il arrive en hologramme (couleur du service, aberration
   chromatique, lignes de balayage, scintillement), puis se stabilise. */

/* en attente : invisible (le code n'est pas encore arrivé) */
html.fl-js .hg-w .hg-c:not(.hg-h):not(.hg-d){color:transparent!important;-webkit-text-fill-color:transparent;text-shadow:none!important}

/* hologramme : couleur du service, franges rouge et cyan, halo, lignes de balayage, scintillement à l'allumage */
html.fl-js .hg-w .hg-c.hg-h{color:color-mix(in srgb,var(--svc) 72%,#fff)!important;
  text-shadow:-1.6px 0 rgba(255,58,112,.6),1.6px 0 rgba(58,214,255,.6),0 0 18px color-mix(in srgb,var(--svc) 80%,transparent)!important;
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 1.8px,rgba(0,0,0,.55) 1.8px 3.2px);mask-image:repeating-linear-gradient(180deg,#000 0 1.8px,rgba(0,0,0,.55) 1.8px 3.2px);
  animation:hg-flick .5s steps(1,end) both}
@keyframes hg-flick{0%{opacity:.3}10%{opacity:1}17%{opacity:.5}24%{opacity:.95}46%{opacity:.75}52%{opacity:1}78%{opacity:.86}84%{opacity:1}}

/* stabilisé : retour aux couleurs du site, en douceur */
html.fl-js .hg-w .hg-c.hg-d{transition:color 1s ease,text-shadow 1s ease}

/* filets, boutons et trait du sur-titre : quand tout le bloc est arrivé */
html.fl-js .hg-w .list,html.fl-js .hg-w .list li{border-color:transparent;transition:border-color .9s ease}
html.fl-js .hg-w.hg-done .list,html.fl-js .hg-w.hg-done .list li{border-color:var(--line)}
html.fl-js .hg-w .ctas{opacity:0;transform:translateY(8px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.1,1)}
html.fl-js .hg-w.hg-done .ctas{opacity:1;transform:none}
html.fl-js .hg-w .kick::before{opacity:0;transition:opacity .6s ease}
html.fl-js .hg-w.hg-done .kick::before{opacity:1}

/* la note de la variante (elle s'efface pour ne pas cacher le texte ; elle revient au survol de la barre) */
.hg-note{position:fixed;left:var(--gutter);bottom:64px;z-index:90;max-width:min(560px,calc(100vw - 2 * var(--gutter)));margin:0;
  padding:9px 12px;background:rgba(5,4,3,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--line);
  font:400 12.5px/1.5 var(--sans);color:var(--muted);pointer-events:none;transition:opacity .6s ease,transform .6s ease}
.hg-note.off{opacity:0;transform:translateY(6px)}
.hg-note b{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-right:10px}
@media (max-width:860px){.hg-note{display:none}}