/* ==========================================================================
   COSMORA · Pagina "in costruzione" (in-costruzione.html)
   Solo composizione della pagina: i componenti sono quelli di components.css.
   ========================================================================== */

/* header: solo il marchio, senza menu */
.soon .navbar__inner {
  justify-content: center;
  padding-right: 1.2rem;
}

/* la pagina sta in una schermata: hero + footer */
.soon .hero {
  min-height: calc(100vh - var(--nav-h) - 12rem);
  min-height: calc(100svh - var(--nav-h) - 12rem);
}

.soon .hero__inner {
  max-width: 40rem;
}

.soon .footer {
  margin-top: 0;
}

/* ---------- Stato dei lavori: una costellazione con l'ultima stella ancora da accendere ---------- */
.build-status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-4);
  max-width: 100%;
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--night-900) 62%, transparent);
  box-shadow: var(--shadow-md);
  text-align: left;
}

@media (max-width: 29.99em) {
  .build-status { text-align: center; }
}

.build-status__glyph {
  width: 6.25rem;
  height: auto;
  flex: none;
  overflow: visible;
}

.build-status__glyph polyline {
  fill: none;
  stroke: var(--aurora-sky);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

.build-status__glyph .is-pending {
  stroke: var(--aurora-peach);
  stroke-dasharray: 3 4;
  opacity: 0.55;
}

.build-status__glyph circle {
  fill: var(--aurora-sky);
  filter: drop-shadow(0 0 4px var(--aurora-sky));
}

.build-status__glyph .is-next {
  fill: var(--aurora-peach);
  filter: drop-shadow(0 0 5px var(--aurora-peach));
  transform-box: fill-box;
  transform-origin: center;
  animation: soon-pulse 2.4s ease-in-out infinite alternate;
}

.build-status__text {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text);
}

.build-status__text strong {
  display: block;
  font-weight: 600;
  color: var(--text-strong);
}

/* i puntini di sospensione "si accendono" uno dopo l'altro */
.dots span {
  animation: soon-dot 1.6s ease-in-out infinite;
}

.dots span:nth-child(2) { animation-delay: 0.25s; }
.dots span:nth-child(3) { animation-delay: 0.5s; }

@keyframes soon-pulse {
  from { transform: scale(0.7); opacity: 0.55; }
  to   { transform: scale(1.5); opacity: 1; }
}

@keyframes soon-dot {
  0%, 100% { opacity: 0.2; }
  40%      { opacity: 1; }
}