/* Página de espera · BucalArt Odontología. Sin JS. Las letras del logotipo
   entran una a una, luego «Odontología», luego «Próximamente».
   Con movimiento reducido, todo visible desde el principio. */

@font-face { font-family: "Instrument Serif"; src: url("fuentes/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fuentes/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fuentes/Jost-Variable.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }

:root {
  --tuxedo: #25262a;
  --fondo: #f4f2ef;
  --piedra: #cbc4bc;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;

  --logo-ancho: clamp(14rem, 34vw, 24rem);
  --espera: 800ms;
  --letra-duracion: 1100ms;
  --letra-escalonado: 180ms;
  --letra-desenfoque: 6px;
  --odontologia-espera: 400ms;
  --odontologia-entrada: 1200ms;
  --fin-marca: calc(var(--espera) + 7 * var(--letra-escalonado) + var(--letra-duracion));
  --fin-odontologia: calc(var(--fin-marca) + var(--odontologia-espera) + var(--odontologia-entrada));
  --pronto-espera: 700ms;
  --pronto-entrada: 1200ms;
}

* { box-sizing: border-box; }
html { background: var(--tuxedo); color: var(--fondo); font-family: var(--sans); font-synthesis: none; -webkit-font-smoothing: antialiased; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }

.espera {
  flex: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  padding: 3rem 1.5rem;
  text-align: center;
}

.espera__marca { margin: 0; line-height: 0; }
.logo { width: var(--logo-ancho); height: auto; display: block; }

/* Letra a letra: cada letra es un path; el orden es el de la intro de la web. */
.logo path { --orden: 0; opacity: 1; filter: blur(0); }
.logo path:nth-child(2) { --orden: 1; }
.logo path:nth-child(3) { --orden: 2; }
.logo path:nth-child(4) { --orden: 3; }
.logo path:nth-child(5) { --orden: 4; }
.logo path:nth-child(6) { --orden: 5; }
.logo path:nth-child(8) { --orden: 6; }
.logo path:nth-child(7) { --orden: 7; }

.espera__pronto {
  margin: 2.25rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.6vw + 0.8rem, 1.875rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.espera__pronto em { font-style: italic; }
.espera__pronto--ca { margin-top: 0.3rem; font-size: clamp(0.95rem, 0.8vw + 0.65rem, 1.125rem); opacity: 0.72; }


.espera__pie { padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--piedra); }

/* --- La entrada, solo si el usuario no pide movimiento reducido --- */
@media (prefers-reduced-motion: no-preference) {
  .logo path:nth-child(-n + 8) {
    opacity: 0;
    filter: blur(var(--letra-desenfoque));
    animation: letra var(--letra-duracion) cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--espera) + var(--orden) * var(--letra-escalonado)) forwards;
  }
  .logo path:nth-child(n + 9) {
    opacity: 0;
    animation: aparece var(--odontologia-entrada) ease calc(var(--fin-marca) + var(--odontologia-espera)) forwards;
  }
  .espera__pronto, .espera__pie {
    opacity: 0;
    animation: aparece var(--pronto-entrada) ease calc(var(--fin-odontologia) + var(--pronto-espera)) forwards;
  }
  .espera__pronto--ca { animation-delay: calc(var(--fin-odontologia) + var(--pronto-espera) + 200ms); }
  .espera__pie { animation-delay: calc(var(--fin-odontologia) + var(--pronto-espera) + 900ms); }
}

@keyframes letra { to { opacity: 1; filter: blur(0); } }
@keyframes aparece { to { opacity: 1; } }