/* =====================================================================
   ANIMAZIONI E RIFINITURE
   ===================================================================== */
:root { --ease: cubic-bezier(.22,.61,.36,1); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ruleGrow { from { width: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes modalOut { to { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes bgOut { to { opacity: 0; } }
@keyframes reveal { from { clip-path: inset(0 0 100% 0); transform: translateY(30px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes woodDrift { 0% { background-position: 0% 0%, 0 0; } 100% { background-position: 100% 100%, 400px 0; } }
@keyframes loadbar { 0% { left: -40%; } 100% { left: 100%; } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(206,184,41,.5); } 50% { box-shadow: 0 0 0 7px rgba(206,184,41,0); } }
@keyframes pulseRed { 0%,100% { box-shadow: 0 0 0 0 rgba(163,58,44,.5); } 50% { box-shadow: 0 0 0 6px rgba(163,58,44,0); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes fillBar { from { transform: scaleX(0); } }

/* Ingresso pagine: blocchi che salgono in sequenza */
.anim > * { animation: fadeUp .6s var(--ease) both; }
.anim > *:nth-child(2) { animation-delay: .06s; } .anim > *:nth-child(3) { animation-delay: .12s; }
.anim > *:nth-child(4) { animation-delay: .18s; } .anim > *:nth-child(5) { animation-delay: .24s; }
.anim > *:nth-child(6) { animation-delay: .30s; } .anim > *:nth-child(n+7) { animation-delay: .36s; }
.page-title .rule, .modal .rule, .login-side .rule { animation: ruleGrow 1s .3s var(--ease) both; }

/* Barra di caricamento */
#loader { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 50; overflow: hidden; opacity: 0; transition: opacity .3s; pointer-events: none; }
#loader.on { opacity: 1; }
#loader::after { content: ""; position: absolute; top: 0; height: 100%; width: 40%; background: var(--gold); animation: loadbar 1s var(--ease) infinite; }

/* Header compatto allo scroll */
header { transition: box-shadow .3s, background .3s; }
header .in { transition: padding .3s var(--ease); }
header img { transition: height .3s var(--ease); }
body.scrolled header { box-shadow: 0 6px 24px rgba(0,0,0,.06); background: rgba(255,255,255,.92); backdrop-filter: blur(8px); }
body.scrolled header .in { padding-top: 8px; padding-bottom: 8px; }
body.scrolled header img { height: 30px; }
nav a { position: relative; border-bottom: 0 !important; }
nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
nav a:hover::after, nav a.active::after { transform: scaleX(1); transform-origin: left; }

/* Bottoni: riempimento che scorre */
button { position: relative; overflow: hidden; z-index: 0; transition: color .35s var(--ease), border-color .35s var(--ease), transform .15s; }
button::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); background: var(--ink); }
button:hover::before { transform: scaleX(1); transform-origin: left; }
button:hover { color: #fff; }
button.primary:hover, button.solid:hover { background: inherit; }
button.primary::before, button.solid::before { background: var(--gold); }
button.solid:hover { border-color: var(--gold); background: var(--ink); }
button.danger::before { background: var(--danger); }
button.link::before, .stati button::before, .viewer .bar button::before, #totop::before { display: none; }
button.link:hover { color: var(--ink); }
button:active { transform: scale(.97); }

/* Card */
.card { transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; overflow: hidden; }
.card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(0,0,0,.2); }
.card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.card:hover::after { transform: scaleX(1); }
.card h3 { transition: color .3s; padding-right: 24px; }
.card:hover h3 { color: var(--gold-dark); }
.card .arrow { position: absolute; right: 22px; top: 22px; color: var(--gold); opacity: 0; transform: translateX(-10px); transition: all .4s var(--ease); font-size: 20px; }
.card:hover .arrow { opacity: 1; transform: none; }
.grid .card { animation: fadeUp .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 18px; }
.progress i { height: 3px; background: var(--line); position: relative; overflow: hidden; }
.progress i.on::after { content: ""; position: absolute; inset: 0; background: var(--pc); transform-origin: left; animation: fillBar .7s var(--ease) both; animation-delay: var(--d); }
.urg { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); display: inline-block; animation: pulseRed 1.6s infinite; margin-right: 6px; vertical-align: middle; }

/* Chip filtri */
.chips span { transition: all .3s var(--ease); }
.chips span:hover { border-color: var(--ink); color: var(--ink); }
.chips span.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips span.on i { color: var(--gold); }

/* Ricerca + input con linea oro animata */
.search { position: relative; }
.search::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; border: 1.5px solid var(--muted); border-radius: 50%; transform: translateY(-65%); }
.search::after { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 1.5px; background: var(--muted); transform: translateY(4px) rotate(45deg); }
.search input { padding-left: 26px; }
input:not([type=checkbox]):not([type=file]), select { background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0 1px; background-repeat: no-repeat; background-position: left bottom; transition: background-size .5s var(--ease), border-color .3s; }
input:focus, select:focus { background-size: 100% 1px; }

/* Dettaglio */
.facts div { transition: background .3s; }
.facts div:hover { background: var(--bg-soft); }
.stati button { transition: background .4s var(--ease), color .4s; overflow: visible; }
.stati button .dot { transition: transform .4s var(--ease); }
.stati button:hover .dot { transform: scale(1.5); }
.stati button.on .dot { animation: pulse 2s infinite; }
.stati button.on::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--gold); animation: ruleGrow .6s var(--ease) both; }
.files li { transition: background .3s, padding .3s var(--ease); }
.files li:hover { background: var(--bg-soft); padding-left: 10px; padding-right: 10px; }
.files .ic { transition: all .3s; background: #fff; position: relative; }
.files .ic::after { content: ""; position: absolute; right: -1px; top: -1px; border-width: 0 10px 10px 0; border-style: solid; border-color: #fff #fff var(--line) var(--line); }
.files li:hover .ic { border-color: var(--gold); color: var(--ink); }
.history div { animation: fadeIn .5s both; padding: 10px 0 14px 18px; position: relative; border-bottom: 0; border-left: 1px solid var(--line); margin-left: 4px; }
.history div::before { content: ""; position: absolute; left: -4px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 1px solid var(--gold); }
.history div:first-child::before { background: var(--gold); }

/* Dropzone */
.drop { display: block; border: 1px dashed #cfcac0; padding: 34px 20px; text-align: center; cursor: pointer; transition: all .3s var(--ease); margin-top: 18px; color: var(--muted); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.drop b { display: block; font-family: var(--head); font-weight: 400; font-size: 15px; color: var(--ink); margin-bottom: 6px; letter-spacing: 2px; }
.drop:hover, .drop.over { border-color: var(--gold); background: #fcfaf0; color: var(--ink); }
.drop.over { transform: scale(1.01); }
.drop input { display: none; }

/* Modale e visore */
.modal-bg { animation: fadeIn .3s both; }
.modal { animation: modalIn .45s var(--ease) both; }
.modal-bg.closing { animation: bgOut .25s both; }
.modal-bg.closing .modal { animation: modalOut .25s both; }
.viewer { animation: fadeIn .3s both; }
.viewer.closing { animation: bgOut .25s both; }
.viewer iframe, .viewer .imgwrap { animation: fadeUp .5s .1s var(--ease) both; }

/* Login: venatura del legno in lento movimento */
.login-side { background:
  radial-gradient(ellipse at 30% 20%, rgba(150,105,60,.85) 0%, rgba(58,38,22,.9) 45%, rgba(18,11,7,.97) 100%),
  repeating-linear-gradient(100deg, #2a1a0f 0 3px, #3a2616 3px 9px, #2f1e11 9px 20px);
  background-size: 200% 200%, 400px 100%; animation: woodDrift 30s linear infinite alternate; }
.login-side h1 span { display: inline-block; animation: reveal 1s var(--ease) both; }
.login-side h1 span + br + span { animation-delay: .25s; }
.login-side p { animation: fadeIn 1s .8s both; }
.login-side::after { content: "DEVOTO"; position: absolute; right: 10px; top: 40px; font-family: var(--head); font-size: 150px; letter-spacing: 24px; color: rgba(255,255,255,.04); font-weight: 300; writing-mode: vertical-rl; }
.login > * { animation: fadeUp .7s var(--ease) both; }
.login > *:nth-child(2) { animation-delay: .08s; } .login > *:nth-child(n+3) { animation-delay: .16s; }

/* Scheletro di caricamento */
.skeleton { height: 230px; border: 1px solid var(--line); background: linear-gradient(90deg, #f4f3f0 0, #fbfaf8 50%, #f4f3f0 100%); background-size: 800px 100%; animation: shimmer 1.3s linear infinite; }

/* Torna su */
#totop { position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; padding: 0; z-index: 8; opacity: 0; transform: translateY(20px); pointer-events: none; transition: all .4s var(--ease); background: #fff; font-size: 18px; }
#totop:hover { border-color: var(--gold); color: var(--gold-dark); }
body.scrolled #totop { opacity: 1; transform: none; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }