/* Copiato da sunnycatnice/limtech_backend, static/css/lc-motion.css (LIM-216): non modificare qui, si aggiorna da lì. */
/* lc-motion · movimento discreto comune LIMCA · LimShop · LimTech (LIM-216).
   Fonte: sunnycatnice/limtech_backend, static/css/lc-motion.css e
   static/js/lc-motion.js. Gli altri prodotti ne usano una copia.

   Tutto sta sotto prefers-reduced-motion: no-preference: con la riduzione
   del movimento la pagina è identica, ferma. Solo opacity e transform, mai
   proprietà che spostano il layout (CLS a 0); le entrate partono da
   un'opacità quasi zero, non zero, così il browser conta subito l'elemento
   per l'LCP.

   Classi e attributi:
   - [data-lc-sequenza]  i figli entrano in sequenza, una volta sola; il
                         valore è l'indice di partenza
   - [data-lc-luce]      riflesso speculare che segue di poco il puntatore
   - [data-lc-parallasse] si sposta di pochi pixel con il puntatore
   - .lc-riflesso        un lampo di luce che passa al passaggio e al focus
   - .lc-alone           alone morbido sul focus dei campi
   - form[data-lc-invio] all'invio il pulsante va in attesa, poi diventa una spunta
   - .lc-campo-errore    campo con l'errore, rosso; [data-lc-scuoti] scuote la carta
   - [data-lc-vt="carta"] la carta che si solleva verso la pagina dopo */

/* ── Stati dei pulsanti: valgono sempre, anche senza movimento ────────── */

.lc-in-attesa, .lc-fatto { position: relative; color: transparent !important; pointer-events: none; }
.lc-in-attesa:disabled, .lc-fatto:disabled { opacity: 1 !important; }
.lc-in-attesa > .lc-ico, .lc-fatto > .lc-ico, .lc-in-attesa > svg:not(.lc-stato svg), .lc-fatto > svg:not(.lc-stato svg) { opacity: 0; }
.lc-stato {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--lc-stato-colore, var(--lc-brand-blue));
}
.lc-stato svg { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lc-stato__giro { stroke-dasharray: 40 60; opacity: 0.9; }
.lc-stato__spunta { opacity: 0; stroke-dasharray: 20; stroke-dashoffset: 0; }
.lc-fatto .lc-stato__giro { opacity: 0; }
.lc-fatto .lc-stato__spunta { opacity: 1; }

/* Campo con l'errore: rosso, sempre */
.lc-campo-errore { border-color: var(--lc-campo-errore, #ff6b7a) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lc-campo-errore, #ff6b7a) 28%, transparent) !important; }

@media (prefers-reduced-motion: no-preference) {
  /* 3. Entrata in sequenza: 35 ms tra un elemento e l'altro */
  [data-lc-sequenza] > * {
    animation: lc-entra var(--lc-durata-entrata, 420ms) var(--lc-molla) both;
    animation-delay: calc(var(--lc-i, 0) * var(--lc-passo-sequenza, 35ms));
  }
  /* un gruppo dentro un gruppo non entra da solo: entrano i suoi figli */
  [data-lc-sequenza] > [data-lc-sequenza] { animation: none; }

  /* 1. Luce che segue il puntatore (la posizione la scrive lc-motion.js) */
  [data-lc-luce] {
    transition: --lc-luce-x 0.7s var(--lc-molla), --lc-luce-y 0.7s var(--lc-molla);
  }

  /* 2. Parallasse leggera: lc-motion.js scrive --lc-px e --lc-py (da -1 a 1) */
  [data-lc-parallasse] {
    translate: calc(var(--lc-px, 0) * var(--lc-ampiezza, 6px)) calc(var(--lc-py, 0) * var(--lc-ampiezza, 6px));
    transition: translate 0.8s var(--lc-molla);
  }

  /* 4. Riflesso che passa sul pulsante: solo al passaggio e al focus */
  .lc-riflesso { position: relative; overflow: hidden; isolation: isolate; }
  .lc-riflesso::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65%);
    transform: translateX(-110%);
    pointer-events: none;
  }
  .lc-riflesso:hover::before,
  .lc-riflesso:focus-visible::before {
    transform: translateX(110%);
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* Pulsante in attesa: il giro ruota; spunta che si disegna con la molla */
  .lc-stato__giro { transform-origin: 12px 12px; animation: lc-gira 0.8s linear infinite; }
  .lc-fatto .lc-stato { animation: lc-sboccia var(--lc-durata-molla) var(--lc-molla) both; }
  .lc-fatto .lc-stato__spunta { animation: lc-traccia 0.32s ease-out both; }

  /* Password errata: scuotimento orizzontale smorzato (3 oscillazioni,
     circa 300 ms) e il campo che si accende di rosso */
  [data-lc-scuoti] { animation: lc-scuoti 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
  .lc-campo-errore { animation: lc-accende-errore 0.4s ease-out both; }

  /* Accesso riuscito: la carta si solleva e si dissolve verso la pagina dopo */
  @view-transition { navigation: auto; }
  [data-lc-vt="carta"] { view-transition-name: carta-accesso; }
  ::view-transition-group(carta-accesso) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  ::view-transition-old(carta-accesso):only-child { animation: lc-carta-esce 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

  /* 5. Alone sul focus dei campi */
  .lc-alone {
    transition: border-color 0.2s ease, box-shadow 0.35s var(--lc-molla), background-color 0.2s ease;
  }
}

/* La posizione della luce è animabile (il riflesso scivola, non salta) */
@property --lc-luce-x { syntax: "<percentage>"; inherits: true; initial-value: 30%; }
@property --lc-luce-y { syntax: "<percentage>"; inherits: true; initial-value: 0%; }

@keyframes lc-entra {
  from { opacity: 0.01; transform: translateY(10px) scale(0.985); }
}
@keyframes lc-gira { to { transform: rotate(360deg); } }
@keyframes lc-sboccia { from { transform: scale(0.6); } }
@keyframes lc-traccia { from { stroke-dashoffset: 20; } }
@keyframes lc-scuoti {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px); }
  32% { transform: translateX(8px); }
  49% { transform: translateX(-6px); }
  66% { transform: translateX(4px); }
  83% { transform: translateX(-2px); }
}
@keyframes lc-accende-errore { from { border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 0 transparent; } }
@keyframes lc-carta-esce { to { opacity: 0; transform: translateY(-16px) scale(1.02); } }