/*
  Ember Kit — Flourishes
  ======================
  Pattern extra visti in tutti e 3 i progetti di riferimento (Dashboard CX,
  Dashboard Reperibilità, Ruota della Sfortuna) oltre ai componenti "base"
  di Smart Design Style: splash screen, reveal a cascata, scrollbar
  sottile, topbar in vetro smerigliato, hover-lift sulle card, toast,
  modal, skeleton loading. Originano da marco-style
  (https://github.com/travelermarco/marco-style), qui riscritti per usare
  SEMPRE le variabili di tokens.css invece di hex fissi: si adattano da
  soli al tema attivo (chiaro/scuro), niente da duplicare per tema.

  Facoltativo: componenti.css funziona benissimo anche senza questo file.
  Caricare dopo tokens.css + components.css.
*/

/* ---- Scrollbar sottile ---- */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

/* ---- Topbar/header/nav "vetro sospeso" (sticky + blur) ----
   Applicala aggiungendo la classe .glass-surface all'elemento sticky
   (header/nav) del tuo progetto. */
.glass-surface {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--surface-topbar) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-default);
}

/* ---- Card hover-lift ----
   Applicala con .card-hover accanto a .card (di components.css). */
.card-hover { transition: border-color .15s, transform .15s, box-shadow .15s; }
.card-hover:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

/* ---- Ambient glow (radiale, dietro hero/login) ----
   Da mettere su un elemento con position:relative + isolation:isolate;
   aggiungi .ambient-glow::before nel markup del contenitore. */
.ambient-glow { position: relative; isolation: isolate; }
.ambient-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, color-mix(in srgb, var(--color-accent) 12%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ---- Modal ---- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20,21,26,.75);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: 28px 24px; width: 100%; max-width: 420px; max-height: 86vh; overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: modalIn .2s ease;
}
.modal-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; color: var(--text-secondary); font-size: 22px; line-height: 1;
  cursor: pointer; font-family: inherit; transition: color .15s;
}
.modal-close:hover { color: var(--text-primary); }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---- Toast ---- */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 12px 20px; font-size: 13px; font-weight: 600; z-index: 500;
  box-shadow: var(--shadow-md);
  animation: toast-in .2s ease; pointer-events: none;
  color: var(--text-primary);
}
.toast.ok  { border-color: var(--status-good); color: var(--status-good); }
.toast.err { border-color: var(--status-critical); color: var(--status-critical); }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; } }

/* ---- Skeleton loading ---- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-hover) 25%, var(--border-default) 37%, var(--surface-hover) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---- Spinner / icona che ruota (refresh, loading) ---- */
@keyframes spin { to { transform: rotate(360deg); } }
.is-loading .icon-refresh,
.spinner { animation: spin .8s linear infinite; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--border-default); border-top-color: var(--color-accent);
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════════════
   REVEAL — comparsa a cascata degli elementi al caricamento pagina
   ═══════════════════════════════════════════════════════════════════════
   Ricetta: metti "animation: reveal-up .55s cubic-bezier(0.2,0,0.38,1)
   <delay>ms both; animation-play-state: paused;" su ogni blocco (header
   0ms, stats 60ms, card 120-240ms...), poi fai partire tutto insieme
   quando il contenuto è pronto aggiungendo una classe trigger (es.
   body.revealed o #app.dash-enter) che rimette running lo
   animation-play-state via selettore discendente — vedi generalfireadme.md
   → "Reveal a cascata" per l'esempio completo con JS. */
@keyframes reveal-up   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal-glow { from { opacity: 0; transform: translate(-50%,-50%) scale(0.55); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

/* ═══════════════════════════════════════════════════════════════════════
   SPLASH SCREEN — logo che si "riempie" dal basso, poi svanisce
   ═══════════════════════════════════════════════════════════════════════
   Markup atteso (vedi generalfireadme.md per l'HTML + splash.js):
   <div id="splash"><div class="splash-logo-wrap">
     <img class="splash-logo-ghost" src="logo.svg">
     <div class="splash-logo-fill"><img src="logo.svg"></div>
   </div><span class="splash-brand">Nome prodotto</span></div> */
#splash {
  position: fixed; inset: 0; z-index: 9999;
  background: color-mix(in srgb, var(--surface-page) 70%, transparent);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; pointer-events: none; opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.4,0,0.6,1);
}
#splash.splash-out  { opacity: 0; }
#splash.splash-gone { display: none; }
.splash-logo-wrap {
  position: relative; width: 84px; height: 84px;
  filter: drop-shadow(0 0 28px color-mix(in srgb, var(--color-accent) 40%, transparent));
}
.splash-logo-ghost { position: absolute; inset: 0; opacity: 0.12; }
.splash-logo-fill {
  position: absolute; inset: 0;
  clip-path: inset(100% 0 0 0);
  animation: splash-fill 1.1s cubic-bezier(0.4,0,0.2,1) 0.15s forwards;
}
@keyframes splash-fill { 0% { clip-path: inset(100% 0 0 0); } 100% { clip-path: inset(0% 0 0 0); } }
.splash-brand {
  font-size: 19px; font-weight: 800; color: var(--color-accent); letter-spacing: -0.3px;
  opacity: 0; animation: splash-brand-in 0.4s ease 0.55s forwards;
}
@keyframes splash-brand-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }