/* =====================================================================
   lavori.css - pagina "lavori in corso" (lavori.php, layout 'lavori')
   Con i token di vetrina.css: crema, nero, giallo, display Archivo.
   ===================================================================== */

body.lavori { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; overflow-x: clip; }
body.lavori main { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; min-width: 0; width: 100%; overflow: clip; }

/* nastri a strisce che scorrono, come il nastro di un cantiere */
.lv-nastro {
    display: flex; width: max-content; padding: 10px 0; border-block: 3px solid var(--ink);
    background: repeating-linear-gradient(-45deg, var(--giallo) 0 22px, var(--ink) 22px 44px);
    font: 900 16px/1 var(--display); font-stretch: 70%; letter-spacing: 1px; white-space: nowrap;
}
.lv-nastro span { flex-shrink: 0; padding: 6px 0; background: var(--giallo); box-shadow: 0 0 0 2px var(--ink); animation: lv-scorri 26s linear infinite; }
.lv-nastro-su { transform: rotate(-2deg) translateX(-2%); margin: 18px 0 0; }
.lv-nastro-giu { transform: rotate(1.6deg) translateX(-2%); margin: 0 0 18px; }
.lv-nastro-giu span { animation-direction: reverse; background: var(--paper); }
@keyframes lv-scorri { to { transform: translateX(-100%); } }

.lv { position: relative; padding: 48px 0 30px; text-align: center; }
.lv-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.lv-logo { margin-bottom: 26px; animation: lv-entra .6s cubic-bezier(.2, .8, .2, 1.2) both; }
.lv-logo .a { background: var(--giallo); }
.lv-logo .b { background: var(--paper); margin-left: -2px; }
.lv-adesivo { margin-bottom: 18px; animation: lv-entra .6s .1s cubic-bezier(.2, .8, .2, 1.2) both, lv-dondola 3.4s 1s ease-in-out infinite; }
.lv-titolo { margin-bottom: 18px; }
.lv-titolo span { display: block; animation: lv-sale .7s cubic-bezier(.2, .8, .2, 1.1) both; }
.lv-titolo span:first-child { animation-delay: .18s; }
.lv-titolo span:last-child { animation-delay: .3s; color: var(--paper); -webkit-text-stroke: 3px var(--ink); text-shadow: 5px 6px 0 var(--ink); }
.lv-lead { margin: 0 auto 26px; max-width: 26em; animation: lv-entra .6s .45s both; }

/* barra di avanzamento che non arriva mai in fondo */
.lv-barra { width: min(360px, 82vw); height: 24px; border: 3px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 0 5px 0 var(--ink); overflow: hidden; animation: lv-entra .6s .55s both; }
.lv-barra span {
    display: block; height: 100%; width: 0; border-right: 3px solid var(--ink);
    background: repeating-linear-gradient(-45deg, var(--giallo) 0 12px, #FFC61A 12px 24px);
    background-size: 34px 34px; animation: lv-carica 7s ease-in-out infinite, lv-righe .8s linear infinite;
}
@keyframes lv-carica { 0% { width: 6%; } 45% { width: 78%; } 60% { width: 86%; } 80% { width: 92%; } 100% { width: 6%; } }
@keyframes lv-righe { to { background-position: 34px 0; } }

/* pupazzi che saltellano a turno */
.lv-pupazzi { display: flex; align-items: flex-end; justify-content: center; gap: clamp(4px, 2vw, 22px); margin-top: 34px; }
.lv-pupazzo { display: block; transform-origin: 50% 100%; animation: lv-salta 2.4s ease-in-out infinite; }
.lv-pupazzo svg { display: block; max-width: 100%; height: auto; }
.lv-p1 { animation-delay: 0s; } .lv-p2 { animation-delay: .3s; } .lv-p3 { animation-delay: .6s; } .lv-p4 { animation-delay: .9s; }
@keyframes lv-salta {
    0%, 40%, 100% { transform: translateY(0) scale(1, 1); }
    8%  { transform: translateY(0) scale(1.06, .92); }
    20% { transform: translateY(-26px) scale(.96, 1.05); }
    32% { transform: translateY(0) scale(1.05, .95); }
}

/* oggetti che galleggiano ai lati */
.lv-volanti { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lv-volante { position: absolute; animation: lv-galleggia 6s ease-in-out infinite; }
.lv-o1 { left: 6%; top: 12%; }
.lv-o2 { right: 7%; top: 16%; animation-delay: -1.5s; }
.lv-o3 { left: 11%; bottom: 18%; animation-delay: -3s; }
.lv-o4 { right: 9%; bottom: 22%; animation-delay: -4.5s; }
@keyframes lv-galleggia { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-18px) rotate(6deg); } }

@keyframes lv-entra { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes lv-sale { from { opacity: 0; transform: translateY(40px) skewY(4deg); } }
@keyframes lv-dondola { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }

.lv-piede { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 16px 26px; font-size: 14px; font-weight: 600; color: var(--muted); }
.lv-piede nav { display: flex; gap: 18px; }
.lv-piede a { color: var(--ink); font-weight: 800; text-decoration: none; }
.lv-piede a:hover { text-decoration: underline; }

@media (max-width: 719.98px) {
    .lv-volante { opacity: .55; transform: scale(.7); }
    .lv-o1 { left: -4%; top: 4%; } .lv-o2 { right: -4%; top: 6%; }
    .lv-o3, .lv-o4 { display: none; }
    .lv-pupazzi { width: 100%; }
    .lv-pupazzo { width: 23%; }
    .lv-pupazzo svg { width: 100%; }
    .lv-titolo span:last-child { -webkit-text-stroke-width: 2px; text-shadow: 3px 4px 0 var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
    .lv-barra span { width: 80%; }
}