/* Laboratorio 73 — portada "muy pronto". Sin dependencias externas. */
:root {
  --fondo: #05060a;
  --texto: #f2f2f4;
  --suave: #9ea3ad;
  --brillo-a: rgba(79, 59, 242, .16);
  --brillo-b: rgba(0, 210, 230, .07);
  --sombra-hex: drop-shadow(0 0 18px rgba(80, 120, 255, .35));
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --fondo: #f7f7f5;
    --texto: #2b2b2e;
    --suave: #5f6066;
    --brillo-a: rgba(79, 59, 242, .07);
    --brillo-b: rgba(0, 210, 230, .06);
    --sombra-hex: none;
    color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body {
  background:
    radial-gradient(60vmax 45vmax at 50% 42%, var(--brillo-a), transparent 70%),
    radial-gradient(40vmax 30vmax at 58% 60%, var(--brillo-b), transparent 70%),
    var(--fondo);
  background-color: var(--fondo);
  color: var(--texto);
  font-family: "Montserrat", "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 16px;
  text-align: center;
}

.hex {
  width: clamp(130px, 36vmin, 250px);
  height: auto;
  overflow: visible;
  filter: var(--sombra-hex);
  margin-bottom: clamp(1.75rem, 5vmin, 3rem);
}

h1 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(1.15rem, 4.8vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: .34em;
  margin-right: -.34em; /* compensa el espaciado tras la última letra */
  line-height: 1.2;
}

.pronto {
  margin: 1.1rem 0 0;
  font-size: clamp(.95rem, 2.6vw, 1.15rem);
  letter-spacing: .08em;
  color: var(--suave);
}

/* ── Animación: el hexágono se traza y termina en el punto de luz ── */
.lado {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: trazar .42s cubic-bezier(.65, 0, .35, 1) forwards;
}
.lado:nth-child(1) { animation-delay: .20s; }
.lado:nth-child(2) { animation-delay: .52s; }
.lado:nth-child(3) { animation-delay: .84s; }
.lado:nth-child(4) { animation-delay: 1.16s; }
.lado:nth-child(5) { animation-delay: 1.48s; }
.lado:nth-child(6) { animation-delay: 1.80s; }

.punto, .halo {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.punto { animation: encender .5s ease-out 2.2s forwards; }
.halo  { animation: encender .5s ease-out 2.2s forwards, latir 3.2s ease-in-out 2.7s infinite; }

h1, .pronto {
  opacity: 0;
  transform: translateY(8px);
  animation: aparecer .9s ease-out forwards;
}
h1      { animation-delay: 2.4s; }
.pronto { animation-delay: 2.8s; }

@keyframes trazar   { to { stroke-dashoffset: 0; } }
@keyframes encender { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes latir    { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.35); } }
@keyframes aparecer { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .lado, .punto, .halo, h1, .pronto {
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
}