/* Amanecí — capa de movimiento sutil.
   Nada aquí oculta contenido: si el JS no corre, la página se ve completa. */

:root {
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
}

/* Scroll suave (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Navegación: transparente arriba, píldora de vidrio flotante al bajar */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav, 50);
  max-width: 1160px; margin: 0 auto; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 40px;
  border: 1px solid transparent; border-radius: 999px;
  transition: top .8s var(--ease-out-quint), padding .8s var(--ease-out-quint), max-width .8s var(--ease-out-quint),
              background-color .8s var(--ease-out-quint), border-color .8s var(--ease-out-quint);
}
.nav.scrolled {
  top: 14px; max-width: 1040px; padding: 10px 10px 10px 26px;
  background-color: rgba(10, 13, 26, .55);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-color: rgba(255, 255, 255, .12);
}
.hero { padding-top: 106px; }

/* Luz muy tenue que sigue al cursor */
.cursor-glow {
  position: fixed; left: 0; top: 0; z-index: var(--z-glow, 1);
  width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%;
  pointer-events: none; opacity: 0; transition: opacity 1s ease; will-change: transform;
  background: radial-gradient(circle, rgba(214, 206, 255, .055) 0%, rgba(214, 206, 255, .018) 40%, rgba(214, 206, 255, 0) 70%);
  mix-blend-mode: screen;
}
.cursor-glow.on { opacity: 1; }

/* Ondas */
.waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; pointer-events: none; display: block; }
.hero-waves { height: 340px; }
.dawn-waves { height: 280px; }
.hero-bg { will-change: transform; transform: scale(1.08); }

/* Superficies que reciben la luz del cursor */
.glass, .panel, .tilt { position: relative; }
.glass::before, .panel::before, .tilt::after {
  content: ""; position: absolute; inset: 0; z-index: var(--z-lit, 2); border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .8s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .055), transparent 45%);
}
.glass::after, .panel::after {
  content: ""; position: absolute; inset: 0; z-index: var(--z-lit, 2); border-radius: inherit; pointer-events: none;
  padding: 1px; opacity: 0; transition: opacity .8s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .32), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.glass:hover::before, .glass:hover::after, .panel:hover::before, .panel:hover::after, .tilt:hover::after { opacity: 1; }

/* Las fotos se acercan apenas al pasar el mouse */
.tilt img, .soon img { transition: transform 2s var(--ease-out-quint); }
.tilt:hover img, .soon:hover img { transform: scale(1.035); }

/* Botón "Escucha un despertar": anillo que respira */
.pulse { position: relative; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
.pulse::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(244, 245, 250, .5);
  animation: breathe 5s var(--ease) infinite;
}
@keyframes breathe { 0% { transform: scale(.75); opacity: 0; } 35% { opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }

/* Mini reproductor */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; margin-right: 8px; }
.eq i { width: 2px; height: 100%; border-radius: 1px; background: rgba(244, 245, 250, .7); transform-origin: bottom; animation: eq 1.6s ease-in-out infinite; }
.eq i:nth-child(2) { animation-duration: 2s; animation-delay: -.5s; }
.eq i:nth-child(3) { animation-duration: 1.4s; animation-delay: -.2s; }
.eq i:nth-child(4) { animation-duration: 2.3s; animation-delay: -.9s; }
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.prog-fill { width: 100%; transform-origin: left center; transform: scaleX(.34); }
.quote { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .9s ease, filter .9s ease, transform .9s ease; }
.quote.out { opacity: 0; filter: blur(4px); transform: translateY(-3px); }

/* Entrada de la portada: el texto "despierta" desde el desenfoque.
   Animación CSS: no depende de JS y siempre termina visible. */
@keyframes wake {
  from { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
.intro > *, .intro-late { animation: wake 1.7s var(--ease-out-quint) both; }
.intro > :nth-child(1) { animation-delay: .15s; }
.intro > :nth-child(2) { animation-delay: .35s; }
.intro > :nth-child(3) { animation-delay: .55s; }
.intro > :nth-child(4) { animation-delay: .75s; }
.intro-late { animation-delay: 1.05s; }

@media (max-width: 900px) {
  .nav { padding: 18px 20px; }
  .nav.scrolled { top: 10px; left: 12px; right: 12px; padding: 8px 8px 8px 18px; }
  .hero { padding-top: 84px; }
  .hero-waves { height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}