/* ==========================================================================
   Motion layer — sempre attivo, discreto: niente ombre; si animano solo
   transform / opacity / clip-path / background-size (+ border-radius dei blob
   e padding dell'header compatto). Tutto sotto prefers-reduced-motion: no-preference;
   hover solo dove esiste davvero (hover:hover), tilt solo con puntatore fine.
   Le variabili --mo-* sono scritte da js/motion.js; .mo-armed compare solo
   quando JS è partito (senza JS niente resta nascosto).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference){

/* --------------------------------------------------------------------------
   1. Blob "vivaci": respiro ampio + morph di forma (proprietà individuali)
   -------------------------------------------------------------------------- */
@keyframes mo-breathe{
  from{
    translate: calc(var(--mo-x, 28px) * -1) calc(var(--mo-y, 24px) * -1);
    rotate: calc(var(--mo-r, 8deg) * -1);
    scale: var(--mo-s0, .96);
  }
  to{
    translate: var(--mo-x, 28px) var(--mo-y, 24px);
    rotate: var(--mo-r, 8deg);
    scale: var(--mo-s1, 1.06);
  }
}

/* I cerchi non ruotano (sarebbe invisibile) */
@keyframes mo-breathe-cerchio{
  from{
    translate: calc(var(--mo-x, 28px) * -1) calc(var(--mo-y, 24px) * -1);
    scale: var(--mo-s0, .96);
  }
  to{
    translate: var(--mo-x, 28px) var(--mo-y, 24px);
    scale: var(--mo-s1, 1.06);
  }
}

@keyframes mo-morph{
  from{ border-radius: 64% 36% 55% 45% / 55% 48% 52% 45%; }
  to{   border-radius: 38% 62% 34% 66% / 70% 32% 68% 30%; }
}

main > .vt-macchia--blob{
  animation:
    mo-breathe var(--mo-dur, 10s) ease-in-out var(--mo-delay, 0s) infinite alternate,
    mo-morph calc(var(--mo-dur, 10s) * 1.3) ease-in-out var(--mo-delay, 0s) infinite alternate;
}

main > .vt-macchia--cerchio{
  animation: mo-breathe-cerchio var(--mo-dur, 10s) ease-in-out var(--mo-delay, 0s) infinite alternate;
}

/* Bolla dell'hero: galleggiamento lentissimo */
@keyframes mo-bolla-float{
  from{ translate: 0 -8px; }
  to{   translate: 0 8px; }
}

.vt-hero__grid > .vt-bolla{
  animation: mo-bolla-float 7s ease-in-out infinite alternate;
}

/* --------------------------------------------------------------------------
   2. Ingresso: titoli parola per parola, tutto il resto in dissolvenza.
   .mo-item = elemento taggato da JS · .mo-hd = titolo spezzato in .mo-w
   .mo-in = già entrato in viewport
   -------------------------------------------------------------------------- */
@keyframes mo-fade{
  from{ opacity: 0; }
  to{   opacity: 1; }
}

@keyframes mo-rise{
  from{ opacity: 0; translate: 0 .55em; }
  to{   opacity: 1; translate: 0 0; }
}

.mo-w{ display: inline-block; }

.mo-armed .mo-item:not(.mo-in){ opacity: 0; }

.mo-item.mo-in{
  animation: mo-fade 450ms ease-out calc(var(--mo-i, 0) * 80ms) backwards;
}

/* Bolla hero: dissolvenza + float insieme (una sola dichiarazione `animation`) */
.vt-hero__grid > .vt-bolla.mo-item.mo-in{
  animation:
    mo-fade 450ms ease-out calc(var(--mo-i, 0) * 80ms) backwards,
    mo-bolla-float 7s ease-in-out infinite alternate;
}

/* Parole: 420ms + stagger 30ms (max 6 passi) → titolo leggibile entro ~600ms */
.mo-armed .mo-hd:not(.mo-in) .mo-w{ opacity: 0; translate: 0 .55em; }

.mo-hd.mo-in .mo-w{
  animation: mo-rise 420ms cubic-bezier(.2,.7,.2,1) calc(var(--mo-w, 0) * 30ms) backwards;
}

/* --------------------------------------------------------------------------
   3. Card e riquadri: inclinazione 3D (sull'elemento) + riempimento (sul ::before)
   Si compongono: transform sull'host, clip-path sul pseudo-elemento.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine){
  .vt-card,
  .vt-riquadro{
    transform: perspective(800px) rotateX(var(--mo-rx, 0deg)) rotateY(var(--mo-ry, 0deg));
    transition: transform 160ms ease-out, border-color var(--vt-transition);
  }

  .vt-card::before,
  .vt-riquadro::before{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--mo-fill);
    clip-path: circle(0% at var(--mo-x, 50%) var(--mo-y, 100%));
    transition: clip-path 520ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
  }

  .vt-card:hover::before,
  .vt-riquadro:hover::before{
    clip-path: circle(150% at var(--mo-x, 50%) var(--mo-y, 100%));
  }

  /* Tinte scelte per non abbassare il contrasto del testo:
     riquadri = pastelli fissi con testo scuro fisso → velo bianco (schiarisce);
     card = testo fisso scuro (vedi components.css) → tinta molto chiara, in entrambi i temi */
  .vt-riquadro{ --mo-fill: rgba(255, 255, 255, .45); }
  .vt-card{ --mo-fill: var(--vt-bianco-lilla); }

  .vt-card::before{ z-index: 0; }

  /* il riquadro non era posizionato: serve per ancorare e ritagliare il velo,
     e un contesto d'impilamento per tenerlo sotto il testo */
  .vt-riquadro{ position: relative; overflow: hidden; isolation: isolate; }
  .vt-riquadro::before{ z-index: -1; }
}

/* --------------------------------------------------------------------------
   4. Bottoni: la freccia → scorre in e l'etichetta (.mo-lbl, creata da JS) si sposta
   -------------------------------------------------------------------------- */
@media (hover: hover){
  .vt-btn{ position: relative; }

  .vt-btn::after{
    content: "\2192";
    position: absolute;
    right: 12px;
    top: 50%;
    opacity: 0;
    translate: -10px -50%;
    transition: opacity 200ms ease, translate 260ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
  }

  .vt-btn .mo-lbl{ display: inline-block; transition: translate 260ms cubic-bezier(.2,.7,.2,1); }

  .vt-btn:hover::after,
  .vt-btn:focus-visible::after{ opacity: 1; translate: 0 -50%; }

  .vt-btn:hover .mo-lbl,
  .vt-btn:focus-visible .mo-lbl{ translate: -9px 0; }
}

/* --------------------------------------------------------------------------
   5. Banda che si disegna da sinistra a destra, una volta
   -------------------------------------------------------------------------- */
.vt-banda{
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mo-armed .vt-banda{
  background-size: 0% 100%;
  transition: background-size 900ms cubic-bezier(.2,.7,.2,1) 250ms;
}

.mo-armed .vt-banda.mo-in{ background-size: 100% 100%; }

/* --------------------------------------------------------------------------
   6. Foto: anello che ruota molto lentamente (dentro il bordo, la bolla ha overflow hidden)
   -------------------------------------------------------------------------- */
@keyframes mo-spin{ to{ rotate: 360deg; } }

.vt-bolla::before{
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 2;
  border: 2px dashed var(--vt-lilla-100);
  border-radius: 50%;
  pointer-events: none;
  animation: mo-spin 70s linear infinite;
}

/* --------------------------------------------------------------------------
   7. Header compatto: il margine inferiore restituisce il padding perso, così il
   contenuto sotto non si sposta (nessun layout shift sulla soglia di scroll)
   -------------------------------------------------------------------------- */
.vt-header{ transition: margin-bottom 240ms ease; }
.vt-header__inner{ transition: padding-block 240ms ease; }
.vt-header__logo{ transform-origin: left center; transition: scale 240ms ease; }

.mo-compact .vt-header{ margin-bottom: var(--vt-space-3); }
.mo-compact .vt-header__inner{ padding-block: var(--vt-space-2); }
.mo-compact .vt-header__logo{ scale: .86; }

/* --------------------------------------------------------------------------
   8. Numeri dei badge: rimbalzo con overshoot quando il riquadro entra
   -------------------------------------------------------------------------- */
@keyframes mo-pop{
  from{ opacity: 0; scale: .3; }
  to{   opacity: 1; scale: 1; }
}

.mo-armed .mo-item:not(.mo-in) .vt-badge{ opacity: 0; scale: .3; }

.mo-item.mo-in .vt-badge{
  animation: mo-pop 600ms cubic-bezier(.34,1.56,.64,1) 220ms backwards;
}

/* --------------------------------------------------------------------------
   9. Link con sottolineatura che scorre (testo in <main> e link del footer).
   Riga tenue sempre visibile (i link restano riconoscibili), quella piena scorre.
   -------------------------------------------------------------------------- */
:is(main a:not(.vt-btn):not(.vt-card):not(.vt-contatto-card), .vt-footer a){
  text-decoration: none;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(color-mix(in srgb, currentColor 35%, transparent), color-mix(in srgb, currentColor 35%, transparent));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0% 1.5px, 100% 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 320ms cubic-bezier(.2,.7,.2,1);
}

.vt-footer a:is(:hover, :focus-visible){ text-decoration: none; }

:is(main a:not(.vt-btn):not(.vt-card):not(.vt-contatto-card), .vt-footer a):focus-visible{
  background-size: 100% 1.5px, 100% 1px;
}

@media (hover: hover){
  :is(main a:not(.vt-btn):not(.vt-card):not(.vt-contatto-card), .vt-footer a):hover{
    background-size: 100% 1.5px, 100% 1px;
  }
}

/* --------------------------------------------------------------------------
   10. Dissolvenza tra le pagine (View Transitions cross-document).
   Stessa durata e stessa curva per old/new: la somma resta 1, quindi l'header
   (identico nelle due pagine) non sfarfalla. Nessun view-transition-name:
   sull'header romperebbe il drawer mobile (diventerebbe containing block).
   -------------------------------------------------------------------------- */
@view-transition{ navigation: auto; }

::view-transition-old(root),
::view-transition-new(root){ animation-duration: 180ms; }

} /* /prefers-reduced-motion: no-preference */