/* Firma Inflow Studio · «la scia». Il movimento del mouse è la firma: dove passi resta una scia nei colori del sito.
   1. .ifs-firma                il credito nel piè di pagina: un punto con la sua scia, che si disegna quando arriva
   2. body.ifs-scia             la scia: una linea che segue il mouse e svanisce (il cursore del sistema resta)
   3. body.ifs-cursore          il cursore Inflow: un punto al posto della freccia, che sui link e i bottoni si apre in un
                                anello e al clic lascia un'onda; sul telefono un'onda piena a ogni tocco
   Sul telefono (2 e 3) la scia segue il dito mentre scorri.
   Colore: --ifs-colore (di base l'accento del sito). Il cursore solo con un mouse vero; con «riduci animazioni»
   niente scia e niente cursore: resta il credito, fermo. */

/* 1. il credito */
.ifs-firma{display:inline-flex;align-items:center;gap:.55em;color:inherit;text-decoration:none;font-size:.875rem;
  letter-spacing:.01em;line-height:1.2;opacity:.85;transition:opacity .3s ease}
.ifs-firma:hover,.ifs-firma:focus-visible{opacity:1}
.ifs-firma strong{font-weight:600}
.ifs-firma__scia{width:2.3em;height:1em;flex:none;overflow:visible;color:var(--ifs-colore,currentColor)}
.ifs-firma__coda{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-dasharray:36;stroke-dashoffset:0}
.ifs-firma__punto{fill:currentColor}
.ifs-js .ifs-firma__coda{stroke-dashoffset:36}
.ifs-js .ifs-firma__punto{opacity:0}
.ifs-js .ifs-firma.ifs-vista .ifs-firma__coda{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1)}
.ifs-js .ifs-firma.ifs-vista .ifs-firma__punto{opacity:1;transition:opacity .4s ease .75s}
.ifs-firma:hover .ifs-firma__coda,.ifs-firma:focus-visible .ifs-firma__coda{animation:ifs-ridisegna .9s cubic-bezier(.65,0,.35,1)}
@keyframes ifs-ridisegna{from{stroke-dashoffset:36}to{stroke-dashoffset:0}}

/* 2. la tela della scia */
.ifs-scia__tela{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2147483645}

/* 3. il cursore Inflow (attivo solo dopo il primo movimento del mouse) */
html.ifs-cursore-attivo,html.ifs-cursore-attivo *{cursor:none!important}
html.ifs-cursore-attivo :is(input:not([type=button],[type=submit],[type=reset],[type=checkbox],[type=radio],[type=range],[type=color]),textarea,select,[contenteditable]:not([contenteditable=false])){cursor:auto!important}
.ifs-cursore__punto{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:2147483646;
  color:var(--ifs-colore,currentColor);will-change:transform}
.ifs-cursore__punto::before,.ifs-cursore__punto::after{content:"";position:absolute;border-radius:50%;
  transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s ease}
.ifs-cursore__punto::before{left:-5px;top:-5px;width:10px;height:10px;background:currentColor;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.8)}
.ifs-cursore__punto::after{left:-20px;top:-20px;width:40px;height:40px;border:1.5px solid currentColor;
  box-shadow:0 0 0 1px rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.55);transform:scale(.25);opacity:0}
.ifs-cursore__punto.ifs-sopra::before{transform:scale(.45)}
.ifs-cursore__punto.ifs-sopra::after{transform:scale(1);opacity:1}
.ifs-cursore__punto.ifs-premuto::before{transform:scale(.7)}
.ifs-cursore__punto.ifs-premuto.ifs-sopra::after{transform:scale(.85)}
.ifs-cursore__punto.ifs-fuori,.ifs-cursore__punto.ifs-testo{opacity:0}
.ifs-cursore__onda{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  border:1.5px solid var(--ifs-colore,currentColor);pointer-events:none;z-index:2147483645;
  animation:ifs-onda .6s cubic-bezier(.16,1,.3,1) forwards}
@keyframes ifs-onda{from{transform:var(--ifs-dove) scale(.2);opacity:.9}to{transform:var(--ifs-dove) scale(1.5);opacity:0}}
.ifs-cursore__onda--tocco{width:60px;height:60px;margin:-30px 0 0 -30px;border-width:2.5px;
  background:color-mix(in srgb,var(--ifs-colore,currentColor) 30%,transparent);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.7),inset 0 0 0 1.5px rgba(255,255,255,.5);
  animation:ifs-tocco .75s cubic-bezier(.16,1,.3,1) forwards}
@keyframes ifs-tocco{from{transform:var(--ifs-dove) scale(.15);opacity:1}to{transform:var(--ifs-dove) scale(1.6);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .ifs-js .ifs-firma__coda{stroke-dashoffset:0}
  .ifs-js .ifs-firma__punto{opacity:1}
  .ifs-firma:hover .ifs-firma__coda{animation:none}
  .ifs-scia__tela,.ifs-cursore__punto,.ifs-cursore__onda{display:none}
}
@media print{.ifs-scia__tela,.ifs-cursore__punto,.ifs-cursore__onda{display:none}}