/* =====================================================================
   LA PAGINA DI ACCESSO ANIMATA -- MARCA_76431_LOGIN_ANIMATO
   Reparto ACCESSI -- aspetto login, direttiva D80 (14 settembre 2026).

   DA DOVE VIENE. Giovanni ha scelto su 21st.dev il componente «Modern
   Animated Sign In». Quello e' scritto per React e Tailwind; il CRM no.
   Qui c'e' lo stesso aspetto rifatto a mano, con i colori, il carattere e
   il marchio del CRM, senza nessuna libreria e niente preso da internet
   mentre la pagina si apre:
     - a sinistra (solo da 1024 punti in su) un pannello scuro con il
       marchio, le onde che respirano e le icone del lavoro in orbita;
     - le scritte che si svelano con una striscia di colore che scorre via;
     - il bordo dei campi che si accende dove passa il mouse;
     - la riga di luce sotto il pulsante «Entra» al passaggio.

   COSA NON TOCCA. Il modulo e' quello di prima, campo per campo: stessi
   nomi, stesso indirizzo, «resta collegato», l'occhio della password,
   Google, Apple, «ho dimenticato la password». Qui dentro c'e' solo
   l'aspetto. Se questo file non arriva, la pagina resta quella di prima e
   si entra lo stesso.

   PERCHE' OGNI REGOLA COMINCIA CON ".accesso.la-login". La pagina ha il suo
   stile scritto dentro, che viene DOPO questo file. Con due classi davanti
   queste regole vincono comunque, in qualunque ordine si carichino, e non
   escono mai dalla pagina di accesso.

   CHI HA CHIESTO DI RIDURRE IL MOVIMENTO (impostazione del telefono o del
   computer) non vede nessuna animazione: le icone restano ferme al loro
   posto e le scritte ci sono subito. In fondo al file.
   ===================================================================== */

@property --la-raggio{syntax:'<length>';inherits:false;initial-value:0px}

/* ---------------------------------------------------------------------
   IL PANNELLO DI SINISTRA (il «palco»). Sul telefono e sul tablet non c'e':
   la pagina resta una colonna sola, com'era, senza scorrere di lato.
   --------------------------------------------------------------------- */
.accesso.la-login .la-scena{display:none}   /* si accende piu' sotto, da 1024 punti in su */

@media (min-width:1024px){
  .accesso.la-login{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    place-items:stretch; padding:0}
  .accesso.la-login > .accesso-box{align-self:center; justify-self:center;
    margin:40px 24px}
  /* il marchio grande sta gia' nel pannello: quello piccolo sopra il
     modulo lascia il posto al titolo (resta nella pagina, solo non si vede) */
  .accesso.la-login .accesso-marchio .accesso-logo{display:none}

  /* Il pannello e' SEMPRE scuro, anche col tema chiaro: il marchio
     (/static/logo.svg) e' bianco fisso e su un fondo chiaro sparirebbe.
     Per questo i colori qui sono quelli «fissi» del tema scuro. */
  /* sticky: se la colonna del modulo e' piu' alta dello schermo, il
     pannello resta fermo mentre si scorre invece di allungarsi */
  /* "!important" perche' nella pagina il pannello nasce con
     style="display:none" scritto dentro: senza il foglio non deve
     vedersi, con il foglio si accende qui. */
  .accesso.la-login .la-scena{display:block !important; position:sticky; top:0; align-self:start;
    overflow:hidden; height:100dvh; min-height:560px;
    background:var(--fisso-s-ground,#17120e); isolation:isolate;
    border-right:1px solid rgba(237,196,135,.10)}
  .accesso.la-login .la-scena::after{content:""; position:absolute; inset:0; z-index:-1;
    background:
      radial-gradient(60% 50% at 50% 42%, rgba(237,196,135,.10), transparent 70%),
      radial-gradient(40% 35% at 85% 100%, rgba(153,111,41,.18), transparent 70%)}
}

/* Le onde: cerchi concentrici che respirano, piu' tenui verso fuori. */
.accesso.la-login .la-onde{position:absolute; inset:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 95%);
          mask-image:linear-gradient(to bottom,#000 30%,transparent 95%)}
.accesso.la-login .la-onde span{position:absolute; top:44%; left:50%;
  width:calc(150px + var(--i) * 76px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(237,196,135,calc(.30 - var(--i) * .025));
  background:rgba(237,196,135,calc(.05 - var(--i) * .004));
  transform:translate(-50%,-50%) scale(1);
  animation:la-onda 3.6s ease-in-out infinite;
  animation-delay:calc(var(--i) * .07s)}
.accesso.la-login .la-onde span:last-child{border-style:dashed}
@keyframes la-onda{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(.92)}
}

/* Le icone in orbita. Ognuna dice raggio (--r), durata (--d) e da che
   angolo parte (--a); "la-contro" gira al contrario. */
.accesso.la-login .la-orbite{position:absolute; left:50%; top:44%; width:0; height:0}
.accesso.la-login .la-cerchio{position:absolute; left:0; top:0;
  width:calc(var(--r) * 2px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(237,196,135,.10); transform:translate(-50%,-50%)}
.accesso.la-login .la-orbita{position:absolute; left:-22px; top:-22px;
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%; color:#edc487;
  background:rgba(34,26,20,.85); border:1px solid rgba(237,196,135,.28);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.6);
  transform:rotate(calc(var(--a) * 1deg)) translateY(calc(var(--r) * 1px)) rotate(calc(var(--a) * -1deg));
  animation:la-orbita calc(var(--d) * 1s) linear infinite}
.accesso.la-login .la-orbita.la-piccola{left:-17px; top:-17px; width:34px; height:34px}
.accesso.la-login .la-orbita.la-contro{animation-direction:reverse}
.accesso.la-login .la-orbita svg{width:52%; height:52%; display:block; fill:none;
  stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
@keyframes la-orbita{
  from{transform:rotate(calc(var(--a) * 1deg)) translateY(calc(var(--r) * 1px)) rotate(calc(var(--a) * -1deg))}
  to{transform:rotate(calc(var(--a) * 1deg + 360deg)) translateY(calc(var(--r) * 1px)) rotate(calc(var(--a) * -1deg - 360deg))}
}

/* Il marchio e la frase grande in mezzo alle onde. */
.accesso.la-login .la-centro{position:absolute; left:50%; top:44%;
  transform:translate(-50%,-50%); display:flex; flex-direction:column;
  align-items:center; gap:18px; text-align:center; width:min(80%,420px)}
.accesso.la-login .la-scena-logo{width:196px; height:auto; display:block;
  animation:la-su .7s cubic-bezier(.2,.7,.2,1) .1s both}
.accesso.la-login .la-scena-frase{margin:0; font-family:var(--font-display);
  font-weight:800; font-size:clamp(34px,3.4vw,50px); line-height:1.05;
  letter-spacing:-.02em;
  background:linear-gradient(180deg,#faf6f1 10%,rgba(237,196,135,.55));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:la-su .7s cubic-bezier(.2,.7,.2,1) .25s both}

/* ---------------------------------------------------------------------
   LO SVELARSI (il «BoxReveal» del componente). Ogni blocco sale di poco e
   compare; sui titoli e sulle etichette una striscia color bronzo copre la
   scritta e poi scorre via verso destra. Il ritardo cresce scendendo nella
   pagina, cosi' l'occhio segue l'ordine in cui si compila.
   --------------------------------------------------------------------- */
@keyframes la-su{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes la-velo{from{transform:scaleX(1)} to{transform:scaleX(0)}}

.accesso.la-login .accesso-marchio > *{animation:la-su .5s cubic-bezier(.2,.7,.2,1) both}
.accesso.la-login .accesso-marchio > :nth-child(2){animation-delay:.08s}
.accesso.la-login .accesso-marchio > :nth-child(3){animation-delay:.16s}
.accesso.la-login .accesso-scheda{animation:la-su .55s cubic-bezier(.2,.7,.2,1) .12s both}

.accesso.la-login .la-titolo{margin:0; font-family:var(--font-display); font-weight:800;
  font-size:26px; line-height:1.15; letter-spacing:-.01em; color:var(--ink-strong,var(--ink))}

.accesso.la-login .la-titolo,
.accesso.la-login .accesso-scheda label:not(.accesso-ricordami){position:relative}
.accesso.la-login .la-titolo::after,
.accesso.la-login .accesso-scheda label:not(.accesso-ricordami)::after{
  content:""; position:absolute; inset:2px -3px; border-radius:4px;
  background:var(--accent); transform-origin:right center; transform:scaleX(0);
  pointer-events:none; animation:la-velo .42s cubic-bezier(.6,0,.4,1) both}
.accesso.la-login .la-titolo::after{animation-delay:.12s}
.accesso.la-login .accesso-scheda label:not(.accesso-ricordami)::after{animation-delay:.3s}
.accesso.la-login .accesso-scheda label[for="password"]::after{animation-delay:.4s}
.accesso.la-login .accesso-scheda label[for="squadra-password"]::after{animation-delay:.1s}
.accesso.la-login .accesso-scheda label[for="squadra-email"]::after{animation-delay:0s}
/* le etichette sono "display:block" larghe quanto la scheda: la striscia
   deve coprire la scritta, non tutta la riga */
.accesso.la-login .accesso-scheda label:not(.accesso-ricordami){width:fit-content}

/* ---------------------------------------------------------------------
   I CAMPI: il bordo che si accende dove passa il mouse. Tre strati di
   fondo: dentro il colore del campo, sul bordo un alone di bronzo che
   segue il puntatore (lo muove login-animato.js), sotto il bordo normale.
   Senza JavaScript l'alone non c'e' e il campo e' quello di sempre.
   --------------------------------------------------------------------- */
.accesso.la-login .accesso-scheda input:not([type="checkbox"]):not([type="radio"]){
  --la-bordo:var(--line-strong);
  border-color:transparent;
  background:
    linear-gradient(var(--ground),var(--ground)) padding-box,
    radial-gradient(var(--la-raggio) circle at var(--la-x,50%) var(--la-y,50%),
                    var(--accent), transparent 80%) border-box,
    linear-gradient(var(--la-bordo),var(--la-bordo)) border-box;
  transition:--la-raggio .3s ease, box-shadow .2s ease}
.accesso.la-login .accesso-scheda input.la-alone{--la-raggio:110px}
.accesso.la-login .accesso-scheda input:not([type="checkbox"]):not([type="radio"]):focus{
  --la-bordo:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
/* Il portachiavi del browser (password salvate) ridipinge il campo e
   toglie i fondi disegnati: senza questa riga il bordo sparirebbe. */
.accesso.la-login .accesso-scheda input:-webkit-autofill{border-color:var(--line-strong)}
.accesso.la-login .accesso-scheda input:-webkit-autofill:focus{border-color:var(--accent)}

/* ---------------------------------------------------------------------
   I COMANDI: almeno 44 punti di altezza, da toccare col dito.
   --------------------------------------------------------------------- */
.accesso.la-login .accesso-scheda button[type="submit"]{position:relative; overflow:visible;
  min-height:48px; font-weight:700; letter-spacing:.01em}
.accesso.la-login .accesso-scheda button[type="submit"]::before,
.accesso.la-login .accesso-scheda button[type="submit"]::after{content:""; position:absolute;
  bottom:-1px; height:1px; pointer-events:none; opacity:0; transition:opacity .5s ease;
  background:linear-gradient(90deg,transparent,var(--accent-2),transparent)}
.accesso.la-login .accesso-scheda button[type="submit"]::after{left:0; right:0}
.accesso.la-login .accesso-scheda button[type="submit"]::before{left:25%; right:25%;
  height:2px; filter:blur(3px)}
.accesso.la-login .accesso-scheda button[type="submit"]:hover::before,
.accesso.la-login .accesso-scheda button[type="submit"]:hover::after,
.accesso.la-login .accesso-scheda button[type="submit"]:focus-visible::before,
.accesso.la-login .accesso-scheda button[type="submit"]:focus-visible::after{opacity:1}
.accesso.la-login .accesso-scheda button[type="submit"]:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px}

.accesso.la-login .accesso-ricordami{min-height:44px; margin:6px 0 0}
.accesso.la-login .accesso-dimenticata{display:flex; align-items:center;
  justify-content:center; min-height:44px; margin-top:6px}
.accesso.la-login .accesso-google,
.accesso.la-login .accesso-apple{min-height:46px; transition:background-color .2s ease, border-color .2s ease}

/* ---------------------------------------------------------------------
   MENO MOVIMENTO: niente animazioni, tutto al suo posto da subito.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .accesso.la-login *,
  .accesso.la-login *::before,
  .accesso.la-login *::after{animation:none !important; transition:none !important}
  .accesso.la-login .la-titolo::after,
  .accesso.la-login .accesso-scheda label::after{display:none}
}