/* Implementazioni originali ispirate ai riferimenti raccolti in animazioni.md. */
[data-version] {
  --v-ease: cubic-bezier(.18,.75,.22,1);
  --v-spring: cubic-bezier(.2,1.35,.35,1);
  --v-photo-spring: cubic-bezier(.34,1.56,.64,1);
}
.v-word, .v-word-inner, .v-char { display: inline-block; }
.v-setup *, .v-setup *::before, .v-setup *::after,
.v-reset, .v-reset *, .v-reset *::before, .v-reset *::after { transition: none !important; }
.v-word { vertical-align: baseline; }
.v-glue, .v-glue > * { white-space: nowrap; }
.v-motion .v-soft, .v-motion .v-copy {
  opacity: 0;
  translate: 0 calc(1.5rem * var(--v-dir, 1));
  transition: opacity .7s ease, translate .9s var(--v-ease);
}
.v-motion .v-soft.v-in, .v-motion .v-copy.v-in { opacity: 1; translate: none; }
.v-motion .v-photo {
  opacity: 0;
  rotate: calc(-3deg * var(--v-dir, 1));
  scale: .94;
  transition: opacity 700ms ease, rotate 1.1s var(--v-photo-spring), scale 1.1s var(--v-photo-spring);
}
.v-motion .v-photo.v-in { opacity: 1; rotate: 0deg; scale: 1; }
.v-motion .v-gallery-photo {
  opacity: 0;
  scale: .86;
  transition: opacity 500ms ease, scale 800ms var(--v-photo-spring);
}
.v-motion .v-gallery-photo.v-in { opacity: 1; scale: 1; }
.v-card { position: relative; isolation: isolate; }
.v-card::after {
  position: absolute;
  z-index: -1;
  top: .3rem;
  right: .7rem;
  content: attr(data-v-number);
  font-size: clamp(3rem, 5vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -.08em;
  line-height: 1;
  color: var(--accent);
  opacity: .12;
  pointer-events: none;
}
.v-motion .v-card {
  opacity: 0;
  transition: opacity .7s ease, transform 1.15s var(--v-ease), box-shadow .3s ease, background-color .4s ease;
  transition-delay: calc(var(--v-card-step) * 150ms), calc(var(--v-card-step) * 150ms), 0s, 0s;
}
.v-motion .v-card.v-in { opacity: 1; transform: none; }
.v-motion [data-v-from]:not(.v-in),
.v-motion [data-v-from]:not(.v-in) * { transition-delay: 0s !important; }

/* 1 · Ventaglio. Maschere verticali, carte che si aprono dal centro. */
.v-motion[data-version="1"] .v-title .v-word {
  overflow: clip;
  padding: .14em .07em;
  margin: -.14em -.07em;
}
.v-motion[data-version="1"] .v-title .v-word-inner {
  translate: 0 calc(125% * var(--v-dir, 1));
  rotate: calc(5deg * var(--v-dir, 1));
  transition: translate .95s var(--v-ease), rotate .95s var(--v-ease);
  transition-delay: calc(min(var(--v-order, var(--v-i)), 12) * 55ms);
}
.v-motion[data-version="1"] .v-title.v-in .v-word-inner { translate: none; rotate: 0deg; }
.v-motion[data-version="1"] .v-card {
  transform: translate(calc(var(--v-side) * -80%), calc(5rem * var(--v-dir, 1))) rotate(calc(var(--v-side) * -20deg * var(--v-dir, 1))) scale(.82);
  transform-origin: 50% 100%;
}
.v-motion[data-version="1"] .v-card.v-in { transform: none; }

/* 2 · Profondità. Parole in prospettiva e apertura a domino dei punti di forza. */
.v-motion[data-version="2"] .v-title .v-word { perspective: 700px; }
.v-motion[data-version="2"] .v-title .v-word-inner {
  opacity: 0;
  transform: rotateX(-85deg) translateY(.45em);
  transform-origin: 50% 100%;
  transition: transform 1s var(--v-ease), opacity .65s ease;
  transition-delay: calc(min(var(--v-order, var(--v-i)), 10) * 70ms);
}
.v-motion[data-version="2"] .v-title.v-in .v-word-inner { opacity: 1; transform: none; }
.v-motion[data-version="2"] .v-copy {
  filter: blur(5px);
  transition: opacity .8s ease, translate 1s var(--v-ease), filter 1s ease;
}
.v-motion[data-version="2"] .v-copy.v-in { filter: none; }
.v-motion[data-version="2"] .v-card {
  transform: perspective(1000px) translateY(calc(4rem * var(--v-dir, 1))) rotateY(calc(-75deg * var(--v-dir, 1)));
  transform-origin: 0 50%;
}
.v-motion[data-version="2"] .v-card.v-in { transform: perspective(1000px) rotateY(0deg); }

/* 3 · Traccia. Inchiostro sui titoli, contorno disegnato attorno ai blocchi. */
.v-motion[data-version="3"] .v-title .v-word-inner {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-size .85s var(--v-ease) calc(min(var(--v-order, var(--v-i)), 12) * 65ms);
}
.v-motion[data-version="3"] .v-title.v-in .v-word-inner { background-size: 100% 100%; }
.v-motion[data-version="3"] .v-copy { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--v-ease), opacity .7s ease; }
.v-motion[data-version="3"] .v-copy.v-in { clip-path: inset(0); }
.v-motion[data-version="3"] .v-card {
  border-color: transparent;
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: left top, right top, right bottom, left bottom;
  background-size: 0% 3px, 3px 0%, 0% 3px, 3px 0%;
  transform: translateY(calc(3rem * var(--v-dir, 1))) scale(.85);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--v-ease), opacity .5s ease, transform .8s var(--v-ease), background-size 1.2s var(--v-ease), box-shadow .3s ease;
  transition-delay: calc(var(--v-card-step) * 190ms);
}
.v-motion[data-version="3"] .v-card.v-in { background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%; transform: none; opacity: 1; clip-path: inset(0); }
.v-motion[data-version="3"] .v-card > * {
  opacity: 0;
  translate: 0 calc(.75rem * var(--v-dir, 1));
  transition: opacity .7s ease, translate .7s var(--v-ease);
  transition-delay: calc(.25s + var(--v-card-step) * 190ms);
}
.v-motion[data-version="3"] .v-card.v-in > * { opacity: 1; translate: none; }

/* 4 · Scrittura. Lettere in sequenza e blocchi con ribaltamento 3D. */
.v-motion[data-version="4"] .v-title .v-char {
  opacity: 0;
  translate: .18em 0;
  transition: opacity .65s ease, translate .8s var(--v-ease);
  transition-delay: calc(min(var(--v-char-order, var(--v-c)), 42) * 18ms);
}
.v-motion[data-version="4"] .v-title.v-in .v-char { opacity: 1; translate: none; }
.v-motion[data-version="4"] .v-card {
  transform: perspective(1200px) rotateX(calc(-75deg * var(--v-dir, 1))) translateY(calc(4rem * var(--v-dir, 1)));
  transform-origin: 50% 0;
}
.v-motion[data-version="4"] .v-card[data-v-from="above"] { transform-origin: 50% 100%; }
.v-motion[data-version="4"] .v-card.v-in { transform: none; }

/* 5 · Slancio. Titoli in alternanza e rimbalzo ampio riservato ai blocchi. */
.v-motion[data-version="5"] .v-title .v-word-inner {
  opacity: 0;
  translate: -.4em calc(.4em * var(--v-dir, 1));
  rotate: calc(-5deg * var(--v-dir, 1));
  transition: translate .85s var(--v-ease), rotate .85s var(--v-ease), opacity .65s ease;
  transition-delay: calc(min(var(--v-order, var(--v-i)), 12) * 60ms);
}
.v-motion[data-version="5"] .v-title .v-word:nth-child(even) .v-word-inner { translate: .4em calc(.4em * var(--v-dir, 1)); rotate: calc(5deg * var(--v-dir, 1)); }
.v-motion[data-version="5"] .v-title.v-in .v-word-inner { opacity: 1; translate: none; rotate: 0deg; }
.v-motion[data-version="5"] .v-title.v-in .v-word:nth-child(even) .v-word-inner { translate: none; rotate: 0deg; }
.v-motion[data-version="5"] p.v-copy { opacity: 1; translate: none; }
.v-motion[data-version="5"] p.v-copy .v-word-inner {
  opacity: 0;
  translate: 0 calc(.7em * var(--v-dir, 1));
  transition: opacity .6s ease, translate .8s var(--v-spring);
  transition-delay: calc(min(var(--v-order, var(--v-i)), 30) * 18ms);
}
.v-motion[data-version="5"] p.v-copy.v-in .v-word-inner { opacity: 1; translate: none; }
.v-motion[data-version="5"] .v-card {
  transform: translateY(calc(7rem * var(--v-dir, 1))) scale(.75) rotate(calc(var(--v-side) * 9deg * var(--v-dir, 1)));
  transition-timing-function: ease, var(--v-spring), ease, ease;
}
.v-motion[data-version="5"] .v-card.v-in { transform: none; }

/* La direzione di ingresso e l'ordine della sequenza si invertono risalendo. */
.v-motion[data-version="3"] .v-title[data-v-from="above"] .v-word-inner { background-position: right top; }
.v-motion[data-version="3"] .v-card[data-v-from="above"]:not(.v-in) { clip-path: inset(0 0 0 100%); }
.v-motion[data-version="4"] .v-title[data-v-from="above"] .v-char { translate: -.18em 0; }
.v-motion[data-version="4"] .v-title[data-v-from="above"].v-in .v-char { translate: none; }

/* Nuovo confronto dedicato ai testi. Blocchi e foto mantengono i loro effetti. */
.v-motion .v-text-effect.v-copy { opacity: 1; translate: none; filter: none; clip-path: none; }

/* Righe: le parole appartenenti alla stessa riga condividono il ritardo. */
.v-motion[data-version="1"] .v-text-effect .v-word {
  overflow: clip;
  padding: .15em .04em;
  margin: -.15em -.04em;
  vertical-align: bottom;
}
.v-motion[data-version="1"] .v-text-effect .v-word-inner {
  translate: 0 calc(125% * var(--v-dir, 1));
  opacity: 0;
  transition: translate .8s var(--v-ease), opacity .5s ease;
  transition-delay: calc(min(var(--v-line-order, 0), 10) * 110ms);
}
.v-motion[data-version="1"] .v-text-effect.v-in .v-word-inner { translate: none; opacity: 1; }

/* Fuoco: nitidezza progressiva delle parole, anche nei titoli. */
.v-motion[data-version="2"] .v-title .v-word-inner {
  transform: none;
  filter: blur(12px);
  scale: calc(1 + .08 * var(--v-dir, 1));
  translate: 0 calc(.2em * var(--v-dir, 1));
  transition: opacity .7s ease, filter 1s ease, scale 1s var(--v-ease), translate 1s var(--v-ease);
  transition-delay: calc(min(var(--v-order, var(--v-i)), 16) * 55ms);
}
.v-motion[data-version="2"] .v-title.v-in .v-word-inner { filter: none; scale: 1; translate: none; }
.v-motion[data-version="2"] .v-text-effect .v-word-inner {
  opacity: 0;
  filter: blur(6px);
  translate: 0 calc(.45em * var(--v-dir, 1));
  transition: opacity .65s ease, filter .85s ease, translate .85s var(--v-ease);
  transition-delay: calc(min(var(--v-order, var(--v-i)), 35) * 22ms);
}
.v-motion[data-version="2"] .v-text-effect.v-in .v-word-inner { filter: none; opacity: 1; translate: none; }

/* Lettura: le parole rimangono visibili, lo scroll ne aumenta il contrasto. */
.v-motion[data-version="3"] .v-text-effect .v-word-inner { opacity: var(--v-read, .28); }

/* Scrittura: apparizione discreta, senza cursore lampeggiante o testo sostituito. */
.v-motion[data-version="4"] .v-text-effect .v-word-inner {
  opacity: 0;
  transition: opacity 20ms steps(1, start);
}
.v-motion[data-version="4"] .v-text-effect.v-in .v-word-inner {
  opacity: 1;
  transition-delay: var(--v-type-delay);
}

/* Onda: un movimento contenuto sui paragrafi, seguito dall'accento sui grassetti. */
.v-motion[data-version="5"] .v-text-effect .v-word-inner {
  rotate: -4deg;
  transition-property: opacity, translate, rotate;
  transition-duration: .6s, .8s, .8s;
  transition-timing-function: ease, var(--v-spring), var(--v-ease);
}
.v-motion[data-version="5"] .v-text-effect .v-word:nth-child(even) .v-word-inner { rotate: 4deg; }
.v-motion[data-version="5"] .v-text-effect.v-in .v-word-inner { rotate: 0deg; }
.v-motion[data-version="5"] .v-text-effect.v-in .v-word:nth-child(even) .v-word-inner { rotate: 0deg; }
.v-motion[data-version="5"] .v-text-effect strong .v-word-inner {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 0% 2px;
  transition: opacity .6s ease, translate .8s var(--v-spring), rotate .8s var(--v-ease), background-size .6s var(--v-ease);
  transition-delay: calc(min(var(--v-order, var(--v-i)), 30) * 18ms), calc(min(var(--v-order, var(--v-i)), 30) * 18ms), calc(min(var(--v-order, var(--v-i)), 30) * 18ms), .9s;
}
.v-motion[data-version="5"] .v-text-effect.v-in strong .v-word-inner { background-size: 100% 2px; }

/* Hover differenti per ogni proposta. Nessun inseguitore del puntatore. */
@media (hover: hover) and (pointer: fine) {
  .v-motion[data-version="1"] .button:is(:hover, :focus-visible) .icon-arrow { animation: v-arrow-pass .5s var(--v-ease); }
  @keyframes v-arrow-pass { 45% { translate: 130% -130%; opacity: 0; } 46% { translate: -130% 130%; opacity: 0; } 100% { translate: none; opacity: 1; } }
  .v-motion[data-version="1"] .v-card:hover { box-shadow: 0 12px 0 rgba(195,104,62,.35); }
  .v-motion[data-version="2"] .button::before { transform: scaleX(0); transform-origin: 50% 50%; transition-duration: .45s; }
  .v-motion[data-version="2"] .button:is(:hover, :focus-visible)::before { transform: scaleX(1); }
  .v-motion[data-version="2"] .v-card:hover .method-block-icon { transform: rotateY(180deg); transition: transform .6s var(--v-ease); }
  .v-motion[data-version="3"] .button::after {
    position: absolute; inset: 3px; content: ''; border: 1px solid currentColor; border-radius: inherit;
    clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--v-ease); pointer-events: none;
  }
  .v-motion[data-version="3"] .button:is(:hover, :focus-visible)::after { clip-path: inset(0); }
  .v-motion[data-version="3"] .v-card:hover { box-shadow: 0 0 0 3px var(--accent); }
  .v-motion[data-version="4"] .button > span:first-child {
    background-image: linear-gradient(currentColor, currentColor); background-position: left bottom;
    background-size: 0% 1px; background-repeat: no-repeat; transition: background-size .45s var(--v-ease);
  }
  .v-motion[data-version="4"] .button:is(:hover, :focus-visible) > span:first-child { background-size: 100% 1px; }
  .v-motion[data-version="4"] .v-card:hover { box-shadow: 0 0 0 2px var(--accent); }
  .v-motion[data-version="5"] .button .button-arrow { transition: scale .35s var(--v-spring), transform .35s var(--v-ease); }
  .v-motion[data-version="5"] .button:is(:hover, :focus-visible) .button-arrow { scale: 1.13; transform: rotate(45deg); }
  .v-motion[data-version="5"] .button:active { scale: .97; }
  .v-motion[data-version="5"] .v-card:hover .method-block-icon { animation: v-icon-pop .5s var(--v-spring); }
  @keyframes v-icon-pop { 50% { scale: 1.2; rotate: -8deg; } }
}

@media (max-width: 640px) {
  .v-motion .v-card { transition-delay: 0s; }
  .v-motion[data-version="1"] .v-card { transform: translateY(calc(3rem * var(--v-dir, 1))) rotate(calc(var(--v-side) * 5deg * var(--v-dir, 1))) scale(.94); }
  .v-motion[data-version="1"] .v-card.v-in { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* Anche se la preferenza cambia mentre la pagina è aperta. */
  [data-version] *, [data-version] *::before, [data-version] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}