/* ==========================================================================
   Cannoli Project — animations.css
   Sequenza di apertura, rivelazioni allo scorrimento, movimenti continui.
   Ogni movimento e legato al carretto: qualcosa che rotola, si srotola,
   viene spolverato di zucchero.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes scorri-nastro {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes deriva-trama {
  from { background-position: 0 0; }
  to { background-position: 620px 310px; }
}

@keyframes pulsa-alone {
  0% { opacity: .9; transform: scale(.4); }
  70% { opacity: 0; transform: scale(2.1); }
  100% { opacity: 0; transform: scale(2.1); }
}

@keyframes cade-zucchero {
  0% { transform: translateY(-14px) scale(.4); opacity: 0; }
  22% { opacity: .95; }
  100% { transform: translateY(96px) scale(1); opacity: 0; }
}

@keyframes rotola-ruota {
  to { transform: rotate(360deg); }
}

@keyframes srotola-tenda {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes entra-dal-basso {
  from { transform: translateY(46px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes rotola-in-scena {
  from { transform: translateX(-14%) rotate(-4deg); opacity: 0; }
  to { transform: translateX(0) rotate(0); opacity: 1; }
}

@keyframes timbra {
  0% { transform: rotate(-9deg) scale(.2); opacity: 0; }
  70% { transform: rotate(-9deg) scale(1.12); opacity: 1; }
  100% { transform: rotate(-9deg) scale(1); opacity: 1; }
}

@keyframes dondola {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}

/* --------------------------------------------------------------------------
   Trama di fondo che deriva lentamente
   -------------------------------------------------------------------------- */

.trama--in-movimento { animation: deriva-trama 70s linear infinite; }

/* --------------------------------------------------------------------------
   Sequenza di apertura dell'hero
   Un solo momento orchestrato: la tenda si srotola, il titolo si compone,
   il carretto entra rotolando.
   -------------------------------------------------------------------------- */

.js .eroe__riga,
.js .eroe__sottotitolo,
.js .eroe__azioni,
.js .eroe .pillola { opacity: 0; }

.js .eroe__vetrina { opacity: 0; }
.js .eroe__etichetta { opacity: 0; }
.js .eroe .festone { transform: scaleY(0); transform-origin: top; }

.eroe.e-avviata .pillola { animation: entra-dal-basso .7s var(--e-morbido) .1s both; }
.eroe.e-avviata .eroe__riga { animation: entra-dal-basso .85s var(--e-rimbalzo) both; }
.eroe.e-avviata .eroe__riga:nth-child(1) { animation-delay: .18s; }
.eroe.e-avviata .eroe__riga:nth-child(2) { animation-delay: .3s; }
.eroe.e-avviata .eroe__riga:nth-child(3) { animation-delay: .42s; }
.eroe.e-avviata .eroe__sottotitolo { animation: entra-dal-basso .8s var(--e-morbido) .56s both; }
.eroe.e-avviata .eroe__azioni { animation: entra-dal-basso .8s var(--e-morbido) .66s both; }
.eroe.e-avviata .eroe__vetrina { animation: rotola-in-scena 1.1s var(--e-morbido) .74s both; }
.eroe.e-avviata .eroe__etichetta { animation: timbra .7s var(--e-rimbalzo) 1.35s both; }
.eroe.e-avviata .festone { animation: srotola-tenda .6s var(--e-rimbalzo) 1.1s both; }

/* Le righe del titolo mantengono la loro rotazione anche in animazione */
.eroe.e-avviata .eroe__riga:nth-child(2) { rotate: -1.4deg; transform: none; }
.eroe.e-avviata .eroe__riga:nth-child(3) { rotate: .8deg; transform: none; }

/* Zucchero a velo che cade nell'hero */
.zucchero {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.zucchero__granello {
  position: absolute;
  top: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bianco);
  opacity: 0;
  animation: cade-zucchero linear infinite;
}

/* --------------------------------------------------------------------------
   Rivelazioni allo scorrimento
   Il contenuto entra dal lato da cui e arrivato il carretto.
   -------------------------------------------------------------------------- */

.js .rivela {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s var(--e-morbido), transform .9s var(--e-rimbalzo);
  transition-delay: var(--ritardo, 0ms);
  will-change: transform, opacity;
}

.js .rivela[data-da="sinistra"] { transform: translateX(-42px); }
.js .rivela[data-da="destra"] { transform: translateX(42px); }
.js .rivela[data-da="scala"] { transform: scale(.94); }

.js .rivela.e-visibile {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Rivelazione scaglionata per gli elenchi */
.js .rivela-gruppo > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s var(--e-morbido), transform .75s var(--e-rimbalzo);
}

.js .rivela-gruppo.e-visibile > * { opacity: 1; transform: none; }
.js .rivela-gruppo.e-visibile > *:nth-child(1) { transition-delay: 0ms; }
.js .rivela-gruppo.e-visibile > *:nth-child(2) { transition-delay: 80ms; }
.js .rivela-gruppo.e-visibile > *:nth-child(3) { transition-delay: 160ms; }
.js .rivela-gruppo.e-visibile > *:nth-child(4) { transition-delay: 240ms; }
.js .rivela-gruppo.e-visibile > *:nth-child(5) { transition-delay: 320ms; }
.js .rivela-gruppo.e-visibile > *:nth-child(6) { transition-delay: 400ms; }

/* Spilli della mappa: cadono uno dopo l'altro.
   L'animazione agisce sul gruppo interno: quello esterno porta la posizione
   sulla mappa e non va mai toccato, altrimenti gli spilli finiscono tutti
   nell'angolo in alto a sinistra. */
.js .mappa__spillo-moto { opacity: 0; transform: translateY(-34px) scale(.55); }

.js .mappa.e-visibile .mappa__spillo-moto {
  opacity: 1;
  transform: none;
  transition: opacity .4s ease, transform .7s var(--e-rimbalzo);
  transition-delay: calc(var(--indice, 0) * 90ms);
}

/* Ruota decorativa che gira con lo scorrimento (--giro impostato da main.js) */
.ruota { transform: rotate(calc(var(--giro, 0) * 1deg)); }

/* Menu mobile: le voci entrano una alla volta */
body.menu-aperto .menu-mobile__voce:nth-child(1) { transition-delay: .06s; }
body.menu-aperto .menu-mobile__voce:nth-child(2) { transition-delay: .12s; }
body.menu-aperto .menu-mobile__voce:nth-child(3) { transition-delay: .18s; }
body.menu-aperto .menu-mobile__voce:nth-child(4) { transition-delay: .24s; }
body.menu-aperto .menu-mobile__voce:nth-child(5) { transition-delay: .3s; }

/* I cannoli della griglia dondolano appena, come appoggiati sul vassoio.
   Ogni scatto parte con un ritardo diverso, cosi non si muovono all'unisono. */
.gusto__foto img,
.riquadro__foto img,
.speciale__foto img,
.cialde__foto img {
  animation: dondola 7s ease-in-out infinite;
}

.gusto:nth-child(3n+2) .gusto__foto img { animation-delay: -1.8s; }
.gusto:nth-child(3n+3) .gusto__foto img { animation-delay: -3.6s; }
.speciale__voce:nth-child(2) .speciale__foto img,
.cialde__voce:nth-child(2) .cialde__foto img { animation-delay: -2.4s; }

/* --------------------------------------------------------------------------
   Rispetto delle preferenze di movimento ridotto
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .js .eroe__riga,
  .js .eroe__sottotitolo,
  .js .eroe__azioni,
  .js .eroe .pillola,
  .js .eroe__vetrina,
  .js .eroe__etichetta { opacity: 1; }

  .js .eroe .festone { transform: none; }
  .js .rivela { opacity: 1; transform: none; }
  .js .rivela-gruppo > * { opacity: 1; transform: none; }
  .js .mappa__spillo-moto { opacity: 1; transform: none; }
  .zucchero { display: none; }
  .nastro__pista { animation: none; }
  .gusto__foto img,
  .riquadro__foto img,
  .speciale__foto img,
  .cialde__foto img { animation: none; }
}