/* ===================================================================
   DentalCore MOTION — livello animazioni, additivo a site.css.
   Caricare DOPO site.css. Prefisso keyframe "dc-" per evitare conflitti.
=================================================================== */

/* ---------- Keyframes ---------- */
@keyframes dc-rise    { from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes dc-fade    { from{ opacity:0; } to{ opacity:1; } }
@keyframes dc-route   { from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:translateX(0); } }
@keyframes dc-drop    { from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
@keyframes dc-pop     { 0%{ transform:scale(.9); opacity:0; } 60%{ transform:scale(1.04); opacity:1; } 100%{ transform:scale(1); } }
@keyframes dc-shimmer { 0%{ background-position:-420px 0; } 100%{ background-position:420px 0; } }
@keyframes dc-float   { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes dc-pulse   { 0%,100%{ box-shadow:0 0 0 0 rgba(23,184,145,.35); } 50%{ box-shadow:0 0 0 6px rgba(23,184,145,0); } }

/* ---------- 1 · Ingresso pagina ---------- */
.content { animation: dc-fade .35s ease both; }
.content > * { animation: dc-route .4s cubic-bezier(.2,.7,.2,1) both; }
.content > *:nth-child(2) { animation-delay: .04s; }
.content > *:nth-child(3) { animation-delay: .08s; }
.content > *:nth-child(4) { animation-delay: .12s; }

.sidebar { animation: dc-fade .5s ease both; }
.sidebar-nav a { animation: dc-route .35s cubic-bezier(.2,.7,.2,1) both; }
.sidebar-nav a:nth-child(1) { animation-delay: .03s; }
.sidebar-nav a:nth-child(2) { animation-delay: .07s; }
.sidebar-nav a:nth-child(3) { animation-delay: .11s; }
.sidebar-nav a:nth-child(4) { animation-delay: .15s; }
.sidebar-nav a:nth-child(5) { animation-delay: .19s; }

/* ---------- 2 · Ingresso a cascata: stat card, tabelle ---------- */
.stat-grid .stat-card { animation: dc-rise .5s cubic-bezier(.2,.7,.2,1) both; }
.stat-grid .stat-card:nth-child(1) { animation-delay: .03s; }
.stat-grid .stat-card:nth-child(2) { animation-delay: .08s; }
.stat-grid .stat-card:nth-child(3) { animation-delay: .13s; }
.stat-grid .stat-card:nth-child(4) { animation-delay: .18s; }
.stat-grid .stat-card:nth-child(5) { animation-delay: .23s; }
.stat-grid .stat-card:nth-child(6) { animation-delay: .28s; }

table.sib-table tbody tr { animation: dc-rise .4s cubic-bezier(.2,.7,.2,1) both; }
table.sib-table tbody tr:nth-child(1) { animation-delay: .02s; }
table.sib-table tbody tr:nth-child(2) { animation-delay: .05s; }
table.sib-table tbody tr:nth-child(3) { animation-delay: .08s; }
table.sib-table tbody tr:nth-child(4) { animation-delay: .11s; }
table.sib-table tbody tr:nth-child(5) { animation-delay: .14s; }
table.sib-table tbody tr:nth-child(6) { animation-delay: .17s; }
table.sib-table tbody tr:nth-child(7) { animation-delay: .20s; }
table.sib-table tbody tr:nth-child(8) { animation-delay: .23s; }

/* ---------- 3 · Micro-interazioni ---------- */
.btn-sib, .btn-outline, .btn-danger { will-change: transform; }
.badge-status { animation: dc-pop .35s cubic-bezier(.2,.7,.2,1) both; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], select, textarea {
    transition: border-color .18s ease, box-shadow .18s ease;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus,
input[type=date]:focus, input[type=tel]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--sib-accent);
    box-shadow: 0 0 0 3px rgba(23, 184, 145, 0.15);
}

/* ---------- 4 · Alert banner ---------- */
.alert-banner { animation: dc-drop .3s cubic-bezier(.2,.7,.2,1) both; }

/* ---------- 5 · Auth screen ---------- */
.auth-card { animation: dc-pop .45s cubic-bezier(.2,.7,.2,1) both; }
.auth-brand { animation: dc-rise .4s ease .05s both; }

/* ---------- 6 · Skeleton / shimmer (available for future async loads) ---------- */
.dc-skel {
    background: linear-gradient(90deg, #eef1f6 25%, #e3e8f0 37%, #eef1f6 63%);
    background-size: 720px 100%;
    animation: dc-shimmer 1.4s linear infinite;
    border-radius: 4px;
    display: block;
}

/* ---------- Accessibilità: rispetta prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .content, .content > *, .sidebar, .sidebar-nav a,
    .stat-grid .stat-card, table.sib-table tbody tr,
    .badge-status, .alert-banner, .auth-card, .auth-brand, .dc-skel {
        animation: none !important;
    }
}