.apertura {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(8px, 2vh, 20px);
  padding: 88px var(--margine) 48px;
  text-align: center;
  background:
    /* Verso il colore di fondo e non verso «transparent»: Safari lo farebbe passare per il grigio. */
    radial-gradient(60% 50% at 50% 46%, var(--carta), var(--fondo) 72%),
    var(--fondo);
}

.logo {
  width: min(880px, 100%);
  height: auto;
  overflow: visible;
}

/* Corona */
.tralcio {
  fill: none;
  stroke: var(--salvia);
  stroke-width: 1.2;
  opacity: .7;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: traccia 2s var(--curva) .2s forwards;
}
.foglia {
  fill: var(--salvia);
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: foglia .7s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(.35s + var(--i) * 48ms);
}
.foglia.chiara { fill: var(--salvia-chiara); }
.nervatura { fill: none; stroke: var(--petalo); stroke-width: .7; opacity: .55; }

.bocciolo { fill: var(--petalo); stroke: var(--oro); stroke-width: .8; }

.boccioli, .ricciolo {
  transform-box: fill-box;
  transform-origin: 0 100%;
  animation: sboccia .7s var(--curva) both;
  animation-delay: calc(.8s + var(--i) * 48ms);
}
.gambo, .ricciolo path { fill: none; stroke: var(--oro); stroke-width: 1.3; stroke-linecap: round; }

.bacca {
  fill: var(--oro);
  transform-box: fill-box;
  transform-origin: center;
  animation: sboccia .5s var(--curva) both;
  animation-delay: calc(.7s + var(--i) * 48ms);
}

.fiore {
  transform-box: fill-box;
  transform-origin: center;
  animation: fiore 1s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(.6s + var(--i) * 48ms);
}
.petalo { fill: var(--petalo); stroke: var(--salvia); stroke-width: .8; }
.pistillo { fill: var(--oro); }

/* Cornici */
.cornice {
  fill: none;
  stroke: var(--salvia);
  stroke-width: 2.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: traccia 1.6s var(--curva) .15s forwards;
}
.puntini {
  fill: none;
  stroke: var(--salvia);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0 10;
  animation: appare .8s ease 1s both;
}
.rombo { fill: var(--salvia); animation: appare .6s ease 1.5s both; }
.rombo-piccolo { animation-delay: 2.1s; }

.filetto {
  fill: none;
  stroke: var(--salvia);
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: traccia 1s var(--curva) 1.9s forwards;
}

/* Nome */
.nome {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 158px;
  letter-spacing: .04em;
  /* Bordo dorato più scuro: lettere piene come quelle a rilievo del logo ricevuto. */
  stroke: var(--oro-scuro);
  stroke-width: 1.4px;
  paint-order: stroke fill;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: nome 1.3s var(--curva) .9s both;
}
.nome-l { font-size: 208px; }

.scritta {
  font-family: var(--firma);
  font-size: 96px;
  fill: var(--salvia);
  stroke: var(--salvia);
  stroke-width: 1.1px;
}
.scrittura-tenda {
  transform-box: fill-box;
  transform-origin: left center;
  animation: scrivi 1.5s cubic-bezier(.5, 0, .3, 1) 1.6s both;
}

/* Frusta e mattarello: compaiono dopo che i caratteri sono pronti. */
.attrezzi { opacity: 0; }
.pronto .attrezzi { animation: appare .8s ease 1.9s both; }
.frusta path { fill: none; stroke: var(--oro-scuro); stroke-width: 1.8; stroke-linecap: round; }
.frusta .manico { stroke-width: 6; stroke: var(--oro); }
.mattarello rect { fill: var(--oro); }
.mattarello rect + rect { fill: var(--oro-scuro); }

.apertura-motto {
  font-family: var(--titoli);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  color: var(--inchiostro-tenue);
  animation: sale 1s var(--curva) 2.4s both;
}

.apertura-indirizzo {
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--salvia-testo);
  animation: sale 1s var(--curva) 2.6s both;
}
@media (hover: hover) { .apertura-indirizzo:hover { color: var(--oro); } }

@keyframes foglia { from { transform: scale(0) rotate(-24deg); opacity: 0; } }
@keyframes sboccia { from { transform: scale(0); } }
@keyframes fiore { from { transform: scale(0) rotate(-120deg); opacity: 0; } }
@keyframes traccia { to { stroke-dashoffset: 0; } }
@keyframes appare { from { opacity: 0; } to { opacity: 1; } }
@keyframes nome { from { opacity: 0; transform: translateY(18px) scale(.94); letter-spacing: .14em; } }
@keyframes scrivi { from { transform: scaleX(0); } }
@keyframes sale { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  .apertura *, .logo * { animation: none !important; }
  .cornice, .filetto, .tralcio { stroke-dashoffset: 0; }
  .attrezzi { opacity: 1; }
}

.cornice-oro { fill: none; stroke: var(--oro); stroke-width: .9; opacity: .7; animation: appare .8s ease 1.2s both; }

/* Invito a scorrere: guscio con una goccia d'oro che scende, cliccabile. */
.apertura-scorri {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 72px;
  color: var(--salvia);
  animation: sale 1s var(--curva) 3s both;
  transition: opacity .4s ease, visibility .4s;
}
.apertura-scorri svg { width: 24px; height: 56px; overflow: visible; }
.scorri-guscio { fill: none; stroke: currentColor; stroke-width: 1.4; }
.scorri-goccia { fill: var(--oro); animation: goccia 2.2s cubic-bezier(.65, 0, .35, 1) 4s infinite; }
.scorri-freccia { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; animation: freccia 2.2s ease-in-out 4s infinite; }
@media (hover: hover) { .apertura-scorri:hover { color: var(--oro); } }
.scorso .apertura-scorri { opacity: 0; visibility: hidden; }

@keyframes goccia {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  70% { transform: translateY(17px); opacity: 1; }
  100% { transform: translateY(17px); opacity: 0; }
}
@keyframes freccia { 0%, 100% { transform: translateY(0); opacity: .5; } 60% { transform: translateY(3px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .apertura-scorri, .scorri-goccia, .scorri-freccia { animation: none !important; }
}

/* Su schermi bassi l'invito non deve coprire l'indirizzo. */
@media (max-height: 640px) { .apertura-scorri { display: none; } }