/* ═══════════════════════════════════════════════════════════
   Alice 3D — ui.css
   Motion system condiviso: animazioni uniformi, skeleton
   loader, transizioni. Incluso da tutte le pagine.
   ═══════════════════════════════════════════════════════════ */

:root{
  --ui-ease:cubic-bezier(.25,.8,.25,1);
  --ui-ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ui-fast:.18s;
  --ui-med:.32s;
  --ui-slow:.5s;
}

/* ── Keyframes ── */
@keyframes uiFade{from{opacity:0}to{opacity:1}}
@keyframes uiUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes uiShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes uiSpin{to{transform:rotate(360deg)}}
@keyframes uiPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ── Ingresso pagina ── */
body{animation:uiFade var(--ui-med) var(--ui-ease)}

/* ── Ingresso card principali (uniforme su tutte le pagine) ── */
.sc,.card,.product,.print-card,.printer-card,.cat,.c{
  animation:uiUp var(--ui-med) var(--ui-ease) backwards;
}
.sc:nth-child(1),.product:nth-child(1),.print-card:nth-child(1),.printer-card:nth-child(1),.cat:nth-child(1),.c:nth-child(1){animation-delay:.03s}
.sc:nth-child(2),.product:nth-child(2),.print-card:nth-child(2),.printer-card:nth-child(2),.cat:nth-child(2),.c:nth-child(2){animation-delay:.06s}
.sc:nth-child(3),.product:nth-child(3),.print-card:nth-child(3),.printer-card:nth-child(3),.cat:nth-child(3),.c:nth-child(3){animation-delay:.09s}
.sc:nth-child(4),.product:nth-child(4),.print-card:nth-child(4),.printer-card:nth-child(4),.cat:nth-child(4),.c:nth-child(4){animation-delay:.12s}
.sc:nth-child(5),.product:nth-child(5),.print-card:nth-child(5),.printer-card:nth-child(5),.cat:nth-child(5),.c:nth-child(5){animation-delay:.15s}
.sc:nth-child(6),.product:nth-child(6),.print-card:nth-child(6),.printer-card:nth-child(6),.cat:nth-child(6),.c:nth-child(6){animation-delay:.18s}
.sc:nth-child(n+7),.product:nth-child(n+7),.print-card:nth-child(n+7),.printer-card:nth-child(n+7),.cat:nth-child(n+7),.c:nth-child(n+7){animation-delay:.21s}

/* ── Transizioni interattive uniformi ── */
button,.tab,.chip,.fchip,a.tab,.sb-item{
  transition:background-color var(--ui-fast) var(--ui-ease),
             color var(--ui-fast) var(--ui-ease),
             border-color var(--ui-fast) var(--ui-ease),
             opacity var(--ui-fast) var(--ui-ease),
             filter var(--ui-fast) var(--ui-ease),
             transform var(--ui-fast) var(--ui-ease),
             box-shadow var(--ui-fast) var(--ui-ease);
}
button:active,.tab:active,.chip:active,.fchip:active{transform:scale(.96)}

/* ── Skeleton loader ── */
.skel{
  border-radius:14px;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.05) 75%);
  background-size:200% 100%;
  animation:uiShimmer 1.4s linear infinite;
}
.skel-row{height:52px;margin-bottom:8px}
.skel-tile{aspect-ratio:1/1.35}
.skel-block{height:120px}
.skel-text{height:14px;width:60%;border-radius:7px}

/* ── Spinner ── */
.ui-spinner{
  width:28px;height:28px;border-radius:50%;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:rgba(255,255,255,.7);
  animation:uiSpin .8s linear infinite;
  margin:0 auto;
}
.ui-loading-label{
  color:#6e6e73;font-size:13px;text-align:center;margin-top:10px;
  animation:uiPulse 1.6s ease-in-out infinite;
}

/* ── Accessibilità: rispetta chi disattiva le animazioni ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}