/* =====================================================================
   VIVO — strato di interattività e animazioni (si aggiunge a site.css)
   Tutto si spegne con "riduci movimento" del sistema.
   ===================================================================== */

/* 1. Barra di avanzamento della lettura */
.vv-progresso{position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--river),var(--sun));transform-origin:0 50%;transform:scaleX(0)}

/* 2. Comparsa allo scorrimento (solo per elementi che non hanno già .rivela) */
.vv-on .vv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--vv-d,0s)}
.vv-on .vv.vv-sx{transform:translateX(-30px)}
.vv-on .vv.vv-zoom{transform:scale(.94)}
.vv-on .vv.vv-visto{opacity:1;transform:none}

/* 3. Titoli di sezione: tratto a mano che si disegna sotto */
.vv-on .vv-tratto{position:relative}
.vv-on .vv-tratto::after{content:"";position:absolute;left:0;bottom:-.04em;height:.1em;width:min(120px,50%);
  border-radius:99px;background:var(--sun);opacity:.85;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1s cubic-bezier(.2,.7,.2,1) .25s}
.vv-on .vv-tratto.vv-visto::after{transform:scaleX(1)}

/* 4. Schede: luce che segue il mouse + leggera inclinazione */
.vv-card{position:relative;transform-style:preserve-3d;will-change:transform}
.vv-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(227,169,59,.20),transparent 45%);
  transition:opacity .3s}
.vv-card:hover::before{opacity:1}

/* 5. Pulsanti: effetto onda al clic */
.vv-onda{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.28;
  transform:scale(0);animation:vv-onda .65s ease-out forwards}
@keyframes vv-onda{to{transform:scale(1);opacity:0}}

/* 6. Foto della galleria: zoom morbido al passaggio */
#foto figure,#foto .gallery > *{overflow:hidden}
#foto img{transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .4s}
#foto figure:hover img,#foto .gallery > *:hover img{transform:scale(1.06);filter:saturate(1.12)}

/* 7. Menù: voce della sezione in vista */
#nav-principale a{position:relative}
#nav-principale a.vv-qui{color:var(--river)}
#nav-principale a::after{content:"";position:absolute;left:10%;right:10%;bottom:-3px;height:2px;border-radius:2px;
  background:var(--river);transform:scaleX(0);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
#nav-principale a.vv-qui::after,#nav-principale a:hover::after{transform:scaleX(1)}

/* 8. Torna su */
.vv-su{position:fixed;right:18px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:55;width:46px;height:46px;
  border-radius:50%;border:1px solid var(--rule);background:var(--card);color:var(--ink);font:600 20px/1 var(--f-body);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 20px rgba(20,25,15,.18);
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .3s,transform .3s}
.vv-su.vv-vedi{opacity:1;transform:none;pointer-events:auto}
.vv-su:hover{background:var(--river);color:var(--on-river);border-color:var(--river)}
@media (min-width:701px){.vv-su{bottom:24px}}

/* 9. Api che volano sopra la foto d'apertura */
.vv-api{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.vv-ape{position:absolute;width:30px;height:24px;left:-40px;animation:vv-volo var(--dur,18s) linear infinite;animation-delay:var(--rit,0s)}
.vv-ape svg{width:100%;height:100%;display:block;animation:vv-bob 1.1s ease-in-out infinite alternate;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.vv-ape .ali{transform-origin:50% 100%;transform-box:fill-box;animation:vv-ali .08s linear infinite alternate}
@keyframes vv-volo{
  0%{transform:translate(0,0)}
  25%{transform:translate(28vw,-40px)}
  50%{transform:translate(55vw,30px)}
  75%{transform:translate(82vw,-20px)}
  100%{transform:translate(calc(100vw + 80px),10px)}}
@keyframes vv-bob{from{transform:translateY(-4px) rotate(-6deg)}to{transform:translateY(4px) rotate(6deg)}}
@keyframes vv-ali{from{transform:scaleY(1)}to{transform:scaleY(.35)}}

/* 10. Freccia "scorri" nella prima schermata */
.vv-scorri{position:absolute;left:50%;bottom:18px;z-index:3;width:34px;height:52px;margin-left:-17px;border:2px solid rgba(255,255,255,.85);
  border-radius:20px;display:block;cursor:pointer;background:rgba(0,0,0,.12)}
.vv-scorri::after{content:"";position:absolute;left:50%;top:9px;width:6px;height:10px;margin-left:-3px;border-radius:3px;
  background:#fff;animation:vv-rotella 1.8s ease-in-out infinite}
@keyframes vv-rotella{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(18px)}}

/* 11. Numeri che contano */
.vv-num{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){
  .vv-progresso,.vv-api,.vv-scorri{display:none!important}
  .vv-on .vv,.vv-on .vv-tratto::after{opacity:1!important;transform:none!important;transition:none!important}
  #foto img{transition:none!important}
}
@media (hover:none){.vv-card::before{display:none}}
@media print{.vv-progresso,.vv-su,.vv-api,.vv-scorri{display:none!important}}