/* L'intro di Opsona: public/intro.js decide se c'è (html[data-intro]). Sul blu del marchio, in
   tutti e due i temi: è lo stesso colore della schermata d'avvio del telefono (il manifest), quindi
   niente lampo bianco di sera. Si muovono solo trasparenza e posizione; i fotogrammi dicono solo da
   dove si parte, così senza animazione (meno movimento) il disegno è già completo. */

#intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  padding-bottom: 8vh;
  background: #0F4C8A;
  transition: opacity 0.2s ease-out;
  cursor: pointer;
}
html:not([data-intro='lunga']):not([data-intro='breve']) #intro { display: none; }
#intro.esce { opacity: 0; pointer-events: none; }

.intro-simbolo { display: block; width: 120px; height: auto; overflow: visible; }
.intro-nome { display: block; width: 200px; height: auto; }
.intro-claim {
  margin: 0;
  font: 600 15px/1.3 'Atkinson Hyperlegible Next Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: rgb(255 255 255 / 0.85);
  text-align: center;
}
html[data-intro='breve'] .intro-claim { display: none; }

/* l'anello si disegna da destra a sinistra intorno, partendo dall'apertura in alto */
.intro-giro { stroke-dasharray: 870 870; stroke-dashoffset: 0; }
.intro-foglia { transform-box: fill-box; transform-origin: 50% 100%; }

html { --k: 1; }
html[data-intro='lunga'] { --k: 2.2; }

@media (prefers-reduced-motion: no-preference) {
  .intro-giro { animation: intro-giro calc(0.3s * var(--k)) cubic-bezier(0.4, 0, 0.2, 1) backwards; }
  .intro-crema { animation: intro-su calc(0.24s * var(--k)) calc(0.1s * var(--k)) cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .intro-oro { animation: intro-giu calc(0.22s * var(--k)) calc(0.18s * var(--k)) cubic-bezier(0.2, 0.9, 0.3, 1.25) backwards; }
  .intro-foglia { animation: intro-cresce calc(0.2s * var(--k)) calc(0.3s * var(--k)) cubic-bezier(0.2, 0.9, 0.3, 1.3) backwards; }
  .intro-nome { animation: intro-su calc(0.24s * var(--k)) calc(0.38s * var(--k)) ease-out backwards; }
  .intro-claim { animation: intro-su 0.3s 1.3s ease-out backwards; }
}

@keyframes intro-giro { from { stroke-dashoffset: 870; } }
@keyframes intro-su { from { opacity: 0; transform: translateY(16px); } }
@keyframes intro-giu { from { opacity: 0; transform: translateY(-20px); } }
@keyframes intro-cresce { from { opacity: 0; transform: scale(0.2) rotate(-14deg); } }