/* Movimento del sito. Regole (skill animate, ADR 001):
   - transform, opacity e clip-path soltanto; curve del sito, mai ease-in;
   - ogni entrata parte una volta, quando l'elemento entra in vista; senza JS tutto resta visibile;
   - chi chiede movimento ridotto vede dissolvenze brevi, niente spostamenti. */

/* Transizione tra le pagine: la barra resta ferma, il contenuto cambia con una dissolvenza che sale */
@view-transition { navigation: auto; }
.barra { view-transition-name: barra; }
::view-transition-old(root) { animation: 180ms cubic-bezier(0.23, 1, 0.32, 1) both vt-esce; }
::view-transition-new(root) { animation: 320ms cubic-bezier(0.16, 1, 0.3, 1) both vt-entra; }
@keyframes vt-esce { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(14px); } }

/* Entrate allo scorrimento: preparate solo se lo script gira (classe .js su <html>) */
.js .entra { opacity: 0; transform: translateY(26px); transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1), transform 760ms cubic-bezier(0.16, 1, 0.3, 1); }
.js .entra.in-vista { opacity: 1; transform: none; }

/* I titoli in Mincho salgono da una maschera */
.js .sale { clip-path: inset(0 0 100% 0); transform: translateY(0.35em); transition: clip-path 760ms cubic-bezier(0.77, 0, 0.175, 1), transform 760ms cubic-bezier(0.16, 1, 0.3, 1); }
.js .sale.in-vista { clip-path: inset(0 0 -0.2em 0); transform: none; }

/* Schermate e foto si svelano dall'alto */
.js .svela-su { clip-path: inset(0 0 100% 0); transition: clip-path 900ms cubic-bezier(0.77, 0, 0.175, 1); }
.js .svela-su.in-vista { clip-path: inset(0 0 0 0); }

/* I timbri timbrano: arrivano grandi e si posano */
.js .timbra-su { opacity: 0; transform: rotate(-4deg) scale(1.4); }
.js .timbra-su.in-vista { animation: timbra-su 460ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes timbra-su { from { opacity: 0; transform: rotate(-4deg) scale(1.4); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }

/* La frase della passione si accende parola per parola mentre scorri */
.parola { display: inline-block; }
@supports (animation-timeline: view()) {
  .accendi { view-timeline-name: --frase; }
  .js .accendi .parola { color: #C9C2BC; animation: accendi linear both; animation-timeline: --frase; }
  @keyframes accendi { to { color: #2B2522; } }
}

/* Risposta al passaggio: pulsanti che si sollevano, timbro del logo che si preme */
.bottone { transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease, box-shadow 200ms ease; }
.hanko { transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
a:active .hanko { transform: rotate(-4deg) scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .bottone:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(43, 37, 34, 0.6); }
  .bottone:active { transform: translateY(0) scale(0.97); }
  a:hover > .hanko { transform: rotate(-9deg) scale(1.06); }
  .evento:hover .segno { transform: rotate(-10deg) scale(1.08); }
}
.evento .segno { transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1); }

/* Il nome in katakana si scrive a pennello: un carattere alla volta, dall'alto, da sfocato a nitido,
   con una linea vermiglia che si traccia accanto. Una volta, all'apertura */
.nome-kana { position: relative; padding-left: 14px; }
.nome-kana::before { content: ""; position: absolute; left: 0; top: 0.2em; bottom: 0.2em; width: 2px; background: #BC002D; transform-origin: top; }
.js .nome-kana::before { transform: scaleY(0); animation: traccia-kana 1100ms var(--kana-ritardo, 0ms) cubic-bezier(0.77, 0, 0.175, 1) forwards; }
@keyframes traccia-kana { to { transform: scaleY(1); } }
.kana { display: inline-block; }
.js .kana { opacity: 0; animation: inchiostro 560ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes inchiostro { from { opacity: 0; filter: blur(5px); transform: translateY(-0.35em) scale(1.12); } to { opacity: 1; filter: blur(0); transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .kana { animation: none; opacity: 1; }
  .js .nome-kana::before { animation: none; transform: none; }
  ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .js .entra, .js .sale, .js .svela-su, .js .timbra-su { transform: none; clip-path: none; transition: opacity 200ms ease; }
  .js .timbra-su.in-vista { animation: none; opacity: 1; transform: rotate(-4deg); }
  .js .accendi .parola { animation: none; color: inherit; }
  .bottone:hover, .bottone:active, a:hover > .hanko, a:active .hanko, .evento:hover .segno { transform: none; }
}