/* ═══════════════════════════════════════════════════════════════════════════
   ZapCalendar — Micro-animazioni
   ═══════════════════════════════════════════════════════════════════════════
   Tre cose, non venti:

   1. SCHELETRI (skeleton screen) — all'avvio, al posto dello schermo fermo.
      Non sono un vezzo: mostrare subito la FORMA di quello che sta arrivando
      fa percepire l'attesa come piu' breve, perche' l'occhio ha gia' qualcosa
      da leggere e la pagina non "salta" quando i dati arrivano.
   2. SPUNTA — la conferma che si disegna. Un cerchio che entra e un segno che
      si scrive: dice "fatto" senza far leggere niente.
   3. ATTESA — una barra per le operazioni lunghe (pubblicare il portale, un
      salvataggio pesante), che alla fine diventa la spunta.

   REGOLA GENERALE: tutto entro 400ms, tutto con la stessa curva del resto
   dell'app. Un'animazione che si fa notare e' un'animazione sbagliata; queste
   devono solo togliere la sensazione di cosa rotta.

   CHI NON LE VUOLE: il sistema operativo ha un interruttore "riduci
   movimento" (accessibilita'), e chi lo accende di solito ha un motivo —
   nausea da movimento, vertigini. In fondo al foglio le animazioni si
   spengono e resta tutto leggibile e funzionante.                          */

:root {
  --anim-osso: rgba(120,113,108,.14);   /* il grigio degli scheletri */
  --anim-luce: rgba(255,255,255,.45);   /* l'onda che ci passa sopra */
}
:root[data-theme="dark"] {
  --anim-osso: rgba(255,255,255,.07);
  --anim-luce: rgba(255,255,255,.10);
}

/* ─────────────────────────────────────────────────────────────
   1. SCHELETRI
   ───────────────────────────────────────────────────────────── */
.osso {
  position: relative;
  overflow: hidden;
  background: var(--anim-osso);
  border-radius: 8px;
}
.osso::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--anim-luce), transparent);
  animation: onda 1.5s infinite;
}
@keyframes onda { 100% { transform: translateX(100%); } }

/* La schermata d'avvio. Sta nell'HTML, non la disegna il JavaScript: deve
   essere li' al PRIMO fotogramma, prima che qualunque script parta. */
#avvio {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--sfondo, #F7F5F2);
  display: flex;
  flex-direction: column;
  padding: 18px 16px;
  gap: 14px;
  opacity: 1;
  transition: opacity .32s var(--ease, cubic-bezier(.4,0,.2,1));
}
#avvio.via { opacity: 0; pointer-events: none; }

#avvio .avvio-testata { display: flex; align-items: center; gap: 12px; }
#avvio .avvio-marchio {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--fd, 'Bricolage Grotesque', sans-serif);
  font-weight: 800; font-size: 17px; color: var(--t1, #171412);
  letter-spacing: -.3px;
}
#avvio .avvio-fulmine {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--verde-vivo, #2ECC8F);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  animation: respiro 1.8s ease-in-out infinite;
}
@keyframes respiro {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(46,204,143,.42); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 9px rgba(46,204,143,0); }
}
#avvio .avvio-riga { display: flex; gap: 10px; align-items: center; }
#avvio .avvio-corpo { flex: 1; display: flex; gap: 12px; min-height: 0; }
#avvio .avvio-ore { width: 44px; display: flex; flex-direction: column; gap: 26px; padding-top: 6px; }
#avvio .avvio-giornata { flex: 1; display: flex; flex-direction: column; gap: 10px; }
#avvio .avvio-scritta {
  text-align: center; font-size: 12.5px; color: var(--t3, #8A827A);
  padding-bottom: 6px;
}

/* ─────────────────────────────────────────────────────────────
   2. LA SPUNTA
   ───────────────────────────────────────────────────────────── */
.zap-fatto {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 12000;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 26px 30px;
  border-radius: 20px;
  background: var(--card, #fff);
  border: 1px solid var(--bordo, #E7E2DA);
  box-shadow: 0 18px 50px rgba(20,18,16,.18), 0 2px 8px rgba(20,18,16,.08);
  pointer-events: none;
  animation: fattoEntra .26s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) both;
}
.zap-fatto.esce { animation: fattoEsce .2s var(--ease, cubic-bezier(.4,0,.2,1)) both; }
@keyframes fattoEntra {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fattoEsce {
  to { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
}
.zap-fatto .zap-testo {
  font-size: 14.5px; font-weight: 700; color: var(--t1, #171412);
  text-align: center; max-width: 220px; line-height: 1.4;
}
.zap-fatto .zap-sotto {
  font-size: 12px; font-weight: 500; color: var(--t2, #6B635B);
  text-align: center; max-width: 230px; line-height: 1.45; margin-top: -6px;
}

/* Il cerchio si disegna, poi il segno si scrive dentro: due tempi, come una
   mano che firma. Un solo tempo sembrerebbe un GIF. */
.zap-segno { width: 62px; height: 62px; }
.zap-segno circle {
  fill: none; stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 170; stroke-dashoffset: 170;
  animation: disegnaCerchio .42s var(--ease, cubic-bezier(.4,0,.2,1)) forwards;
}
.zap-segno path {
  fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: disegnaSegno .3s var(--ease, cubic-bezier(.4,0,.2,1)) .3s forwards;
}
@keyframes disegnaCerchio { to { stroke-dashoffset: 0; } }
@keyframes disegnaSegno   { to { stroke-dashoffset: 0; } }

.zap-segno.ok circle { stroke: var(--verde-vivo, #2ECC8F); }
.zap-segno.ok path   { stroke: var(--verde-vivo, #2ECC8F); }
.zap-segno.no circle { stroke: var(--cancellato-t, #D14343); }
.zap-segno.no path   { stroke: var(--cancellato-t, #D14343); }

/* L'alone verde che si allarga e sfuma: e' quello che rende la conferma
   "soddisfacente" invece che soltanto chiara. */
.zap-fatto .alone {
  position: absolute; top: 26px; left: 50%;
  width: 62px; height: 62px; margin-left: -31px;
  border-radius: 50%;
  border: 2px solid var(--verde-vivo, #2ECC8F);
  animation: alone .7s var(--ease, cubic-bezier(.4,0,.2,1)) .34s both;
}
@keyframes alone {
  from { opacity: .55; transform: scale(1); }
  to   { opacity: 0;   transform: scale(1.85); }
}

/* ─────────────────────────────────────────────────────────────
   3. L'ATTESA
   ───────────────────────────────────────────────────────────── */
.zap-attesa {
  position: fixed;
  left: 50%; bottom: 96px;
  transform: translateX(-50%);
  z-index: 11500;
  min-width: 230px; max-width: min(360px, calc(100vw - 32px));
  padding: 14px 18px 12px;
  border-radius: 14px;
  background: var(--card, #fff);
  border: 1px solid var(--bordo, #E7E2DA);
  box-shadow: 0 12px 34px rgba(20,18,16,.16);
  animation: attesaEntra .24s var(--ease, cubic-bezier(.4,0,.2,1)) both;
}
.zap-attesa.esce { animation: attesaEsce .22s var(--ease, cubic-bezier(.4,0,.2,1)) both; }
@keyframes attesaEntra { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes attesaEsce  { to   { opacity: 0; transform: translate(-50%, 10px); } }
.zap-attesa .zap-att-testo {
  font-size: 13.5px; font-weight: 600; color: var(--t1, #171412); margin-bottom: 10px;
}
.zap-attesa .zap-barra {
  height: 4px; border-radius: 100px; overflow: hidden;
  background: var(--anim-osso);
  position: relative;
}
/* Barra "indeterminata": non finge una percentuale che non conosciamo.
   Promettere il 70% e restare li' e' peggio del non dire niente. */
.zap-attesa .zap-barra::after {
  content: ''; position: absolute; inset: 0;
  width: 40%;
  border-radius: 100px;
  background: var(--verde-vivo, #2ECC8F);
  animation: scorre 1.1s var(--ease, cubic-bezier(.4,0,.2,1)) infinite;
}
@keyframes scorre {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.zap-attesa.finita .zap-barra::after { animation: none; width: 100%; transform: none; }

/* ─────────────────────────────────────────────────────────────
   CHI HA CHIESTO MENO MOVIMENTO
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .osso::after,
  #avvio .avvio-fulmine,
  .zap-attesa .zap-barra::after,
  .zap-fatto .alone { animation: none; }
  .zap-fatto, .zap-attesa { animation: none; }
  .zap-segno circle, .zap-segno path { animation: none; stroke-dashoffset: 0; }
  #avvio { transition: none; }
}