/* Galene - pagina in costruzione. Nessun JavaScript, font ospitato in locale (niente Google Fonts, nessun IP inviato a terzi) */
@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/jost-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --carta: #F4F5F3;
  --inchiostro: #141719;
  --grigio: #5A6264;   /* 5.9:1 su --carta, AA */
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }
body {
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--carta); color: var(--inchiostro);
  font-family: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  font-weight: 300; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.attesa {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 3rem 1.5rem;
}
.marchio { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; font-weight: inherit; }
.marchio img { width: clamp(72px, 14vw, 104px); height: auto; opacity: 0; animation: appari 1.4s ease .2s forwards; }
/* Il logotipo ha una spaziatura molto larga: la compenso a destra per centrarlo davvero */
.marchio span {
  font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 300;
  text-transform: uppercase; letter-spacing: .42em; margin-right: -.42em;
  opacity: 0; animation: appari 1.4s ease .5s forwards;
}
.onda { width: min(240px, 60vw); height: 16px; margin: 2.4rem 0 2.2rem; color: var(--inchiostro); }
.onda path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: traccia 2.2s cubic-bezier(.65,0,.35,1) .9s forwards; }
.claim { font-size: clamp(1.05rem, 2.4vw, 1.3rem); font-weight: 400; line-height: 1.5; opacity: 0; animation: appari 1.2s ease 1.8s forwards; }
.stato { margin-top: 1.1rem; color: var(--grigio); font-size: .98rem; opacity: 0; animation: appari 1.2s ease 2.1s forwards; }
.stato--en { margin-top: .4rem; font-size: .9rem; }
.piede { padding: 1.5rem; text-align: center; font-size: .82rem; color: var(--grigio); }

@keyframes appari { to { opacity: 1; } }
@keyframes traccia { to { stroke-dashoffset: 0; } }

/* Animazione unica e breve (sotto i 5 s): nessun controllo di pausa necessario */
@media (prefers-reduced-motion: reduce) {
  .marchio img, .marchio span, .claim, .stato { animation: none; opacity: 1; }
  .onda path { animation: none; stroke-dashoffset: 0; }
}