/* =========================================================================
   Lo scioglimento del pacco, in quattro tempi.

   1. il bigliettino cade, ruotando appena
   2. le asole della rosetta si stringono una alla volta intorno al nodo,
      mentre le due code si allungano perche' qualcuno sta tirando il capo
   3. rimasto solo il nodo, il nastro si apre a quattro verso l'esterno:
      un lembo in alto, uno in basso, uno a destra, uno a sinistra.
      Non spariscono, restano dove sono.
   4. il coperchio si alza e scivola via verso l'alto, scoprendo l'interno
   5. si scende dentro la scatola: il fondo cresce fino a riempire lo schermo
      e diventa lo sfondo del sito, dove compare la fotocamera

   Come funziona: il JS mette su .gift la classe .is-opening piu' .opening-1,
   aspetta la durata dichiarata in assets/js/opening.js, poi toglie tutto e
   mette .is-open (il pacco aperto, che resta cosi').
   Se cambi i tempi qui, cambia anche la durata li'.
   ========================================================================= */

/* Ogni asola si stringe verso la propria base, cioe' verso il nodo.
   Si chiama .bow-petal e non .petal perche' quel nome e' gia' dei coriandoli
   che cadono dal cielo, e si prenderebbe la loro animazione. */
.gift-bow .bow-petal{
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* Le code partono dal nodo e scendono: allungarle vuol dire tirarle da li'. */
.gift-bow .bow-tails{
  transform-box: fill-box;
  transform-origin: 50% 0;
}

/* Il resto della rosetta gira intorno al centro del nodo. */
.gift-bow .bow-knot{
  transform-box: view-box;
  transform-origin: 110px 106px;
}

.gift.is-opening .card{ pointer-events: none; }

/* Mentre il coperchio vola via niente barre di scorrimento. */
body.is-animating{ overflow: hidden; }

/* --- Il pacco aperto: da qui in poi il coperchio e' la pagina ----------- */

/* A pacco aperto si guarda la vista interna a tutto schermo, e del pacco non
   resta niente da mostrare. */
.gift.is-open{ visibility: hidden; }

/* =========================================================================
   Tempo 1 — il bigliettino cade (0 → 0,6s)
   ========================================================================= */

/* Cade e basta: nessuna dissolvenza. Sparisce solo all'ultimo fotogramma,
   quando ormai e' gia' fuori dal quadro e nessuno lo vede piu'. */
.opening-1 .card{
  animation: sc-biglietto .8s cubic-bezier(.5, .04, .85, .5) both;
}

@keyframes sc-biglietto{
  0%  { transform: rotate(-1.1deg) translateY(0); visibility: visible; }
  99% { visibility: visible; }
  100%{ transform: rotate(-13deg) translateY(680px); visibility: hidden; }
}

/* =========================================================================
   Tempo 2 — le asole si stringono una alla volta, le code si allungano
   (0,5s → 1,9s)

   Ogni asola porta il proprio numero d'ordine nella variabile --i, scritta
   nell'SVG: e' quella a scalare la partenza di ognuna. Gli indici girano
   intorno alla rosetta, quindi le asole si chiudono in cerchio.
   ========================================================================= */

.opening-1 .bow-petal{
  animation: sc-asola .46s cubic-bezier(.5, 0, .65, 1) both;
  animation-delay: calc(500ms + var(--i, 0) * 190ms);
}

@keyframes sc-asola{
  0%  { transform: scale(1); opacity: 1; }
  25% { transform: scale(1.07); }        /* l'ultimo strattone prima di cedere */
  85% { opacity: 1; }
  100%{ transform: scale(.05); opacity: 0; }
}

/* La luce sulla rosetta si spegne mentre la rosetta sparisce. */
.opening-1 .bow-sheen{
  animation: sc-luce 1s .6s ease-out both;
}

@keyframes sc-luce{
  to{ opacity: 0; }
}

/* =========================================================================
   Tempo 3 — resta il nodo, poi il nastro si apre a quattro (1,9s → 2,9s)

   Il nodo si stringe e sparisce portandosi via le code: e' lui che teneva
   tutto. Subito dopo i quattro lembi scivolano verso l'esterno e si fermano.
   ========================================================================= */

.opening-1 .bow-knot{
  animation: sc-nodo .34s 1.75s cubic-bezier(.5, 0, .75, 0) both;
}

@keyframes sc-nodo{
  0%  { transform: scale(1) rotate(0); opacity: 1; }
  100%{ transform: scale(.12) rotate(-70deg); opacity: 0; }
}

/* Le code: prima si allungano tirate, poi seguono il nodo. */
.opening-1 .bow-tails{
  animation:
    sc-code 1.25s .5s cubic-bezier(.4, 0, .5, 1) both,
    sc-code-via .34s 1.75s ease-in both;
}

@keyframes sc-code{
  0%  { transform: scaleY(1); }
  100%{ transform: scaleY(1.95); }
}

@keyframes sc-code-via{
  to{ transform: scaleY(.1); opacity: 0; }
}

/* I quattro lembi dritti si spostano verso l'esterno e, a meta' strada,
   lasciano il posto al nastro sciolto: quello curvo, con le due punte. */
.opening-1 .ribbon-up   { animation: sc-lembo-su  .85s 1.85s cubic-bezier(.25, .9, .3, 1) both; }
.opening-1 .ribbon-down { animation: sc-lembo-giu .85s 1.85s cubic-bezier(.25, .9, .3, 1) both; }
.opening-1 .ribbon-left { animation: sc-lembo-sx  .85s 1.93s cubic-bezier(.25, .9, .3, 1) both; }
.opening-1 .ribbon-right{ animation: sc-lembo-dx  .85s 1.93s cubic-bezier(.25, .9, .3, 1) both; }

/* Il cambio della guardia: i dritti sfumano via, gli sciolti entrano. */
.opening-1 .ribbon{ animation-name: var(--nome-lembo), sc-lembo-sfuma; }
.opening-1 .ribbon-up   { --nome-lembo: sc-lembo-su; }
.opening-1 .ribbon-down { --nome-lembo: sc-lembo-giu; }
.opening-1 .ribbon-left { --nome-lembo: sc-lembo-sx; }
.opening-1 .ribbon-right{ --nome-lembo: sc-lembo-dx; }
.opening-1 .ribbon{
  animation-duration: .85s, .3s;
  animation-delay: 1.85s, 2.15s;
  animation-timing-function: cubic-bezier(.25, .9, .3, 1), ease-out;
  animation-fill-mode: both, both;
}

@keyframes sc-lembo-sfuma{
  to{ opacity: 0; }
}

/* Il nastro sciolto entra mentre i dritti se ne vanno, con un ultimo
   scivolamento verso l'esterno: sembra che si sia disteso da solo. */
.opening-1 .loose{
  animation: sc-sciolto .55s 2.12s cubic-bezier(.25, .8, .35, 1) both;
}

@keyframes sc-sciolto{
  0%  { opacity: 0; }
  100%{ opacity: 1; }
}
.opening-1 .loose-up   { animation-name: sc-sciolto, sc-sciolto-su; }
.opening-1 .loose-down { animation-name: sc-sciolto, sc-sciolto-giu; }
.opening-1 .loose-left { animation-name: sc-sciolto, sc-sciolto-sx; }
.opening-1 .loose-right{ animation-name: sc-sciolto, sc-sciolto-dx; }
.opening-1 .loose{
  animation-duration: .55s, .55s;
  animation-delay: 2.12s, 2.12s;
  animation-timing-function: cubic-bezier(.25, .8, .35, 1), cubic-bezier(.25, .8, .35, 1);
  animation-fill-mode: both, both;
}

@keyframes sc-sciolto-su{
  0%  { transform: translateX(-50%) translateY(24px); }
  100%{ transform: translateX(-50%) translateY(0); }
}
@keyframes sc-sciolto-giu{
  0%  { transform: translateX(-50%) translateY(-24px); }
  100%{ transform: translateX(-50%) translateY(0); }
}
@keyframes sc-sciolto-sx{
  0%  { transform: translateY(-50%) translateX(24px); }
  100%{ transform: translateY(-50%) translateX(0); }
}
@keyframes sc-sciolto-dx{
  0%  { transform: translateY(-50%) translateX(-24px); }
  100%{ transform: translateY(-50%) translateX(0); }
}

@keyframes sc-lembo-su{
  0%  { z-index: 3; transform: translateX(-50%) translateY(0) rotate(0); }
  2%  { z-index: 0; }
  100%{ z-index: 0; transform: translateX(-50%) translateY(-62px) rotate(-1.5deg); }
}
@keyframes sc-lembo-giu{
  0%  { z-index: 3; transform: translateX(-50%) translateY(0) rotate(0); }
  2%  { z-index: 0; }
  100%{ z-index: 0; transform: translateX(-50%) translateY(62px) rotate(1.5deg); }
}
@keyframes sc-lembo-sx{
  0%  { z-index: 3; transform: translateY(-50%) translateX(0) rotate(0); }
  2%  { z-index: 0; }
  100%{ z-index: 0; transform: translateY(-50%) translateX(-62px) rotate(1.5deg); }
}
@keyframes sc-lembo-dx{
  0%  { z-index: 3; transform: translateY(-50%) translateX(0) rotate(0); }
  2%  { z-index: 0; }
  100%{ z-index: 0; transform: translateY(-50%) translateX(62px) rotate(-1.5deg); }
}

/* =========================================================================
   Tempo 4 — il coperchio si alza e se ne va verso l'alto (2,7s → 3,7s)

   Non svanisce: resta pieno fino all'ultimo, e quello che si vede sotto e'
   l'interno della scatola. Prima si stacca appena, poi scivola fuori quadro.

   L'animazione non ce l'ha da subito con un ritardo, ma gliela mette il JS
   (classe .lid-up) nel momento in cui deve partire. Il motivo: un elemento con
   un'animazione di trasformazione *in corso* diventa un piano a se' stante
   anche mentre aspetta il proprio ritardo, e questo trascinerebbe dentro il
   bigliettino facendolo finire sotto al nastro mentre cade.
   ========================================================================= */

.gift.lid-up .gift-lid{
  animation: sc-coperchio 1s cubic-bezier(.42, 0, .58, 1) forwards;
}

@keyframes sc-coperchio{
  0%  { transform: translateY(0) scale(1); }
  20% { transform: translateY(-22px) scale(1.035); }   /* si stacca */
  100%{ transform: translateY(-128%) scale(1.09); }
}

/* =========================================================================
   Tempo 5 — si scende dentro la scatola (3,5s → 4,7s)

   Il pacco intero cresce: pareti e nastro escono dal quadro e resta solo il
   fondo, che a quel punto riempie lo schermo. Anche questa classe la mette il
   JS al momento giusto, per lo stesso motivo del coperchio.
   ========================================================================= */

.gift.zoom-in{
  animation: sc-zoom 1.2s cubic-bezier(.55, 0, .85, .35) forwards;
}

@keyframes sc-zoom{
  0%  { transform: scale(1); }
  100%{ transform: scale(4.2); }
}

/* La vista interna NON entra in dissolvenza: appare gia' piena.
   Se sfumasse, per quel mezzo secondo si vedrebbe attraverso il pacco che nel
   frattempo e' tornato alla sua misura, e sarebbe un lampo dello sfondo
   vecchio. Al suo posto entrano in dissolvenza solo i pezzi che ci stanno
   dentro, che tanto si stagliano su un fondo gia' pieno. */
.inside > *{ animation: sc-dentro-scatola .45s ease-out both; }

@keyframes sc-dentro-scatola{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

.camera{ animation: sc-macchina .7s .2s cubic-bezier(.2, .9, .3, 1.2) both; }

@keyframes sc-macchina{
  0%  { opacity: 0; transform: scale(.72) translateY(18px); }
  100%{ opacity: 1; transform: none; }
}

/* Mentre il coperchio se ne va, l'ombra sotto si allunga: sta salendo. */
.opening-1 .gift-lid{
  box-shadow:
    0 34px 64px -28px var(--shadow),
    0 2px 0 rgba(255,255,255,.9) inset,
    0 -16px 26px -20px rgba(140, 70, 95, .45) inset;
}