/* Overlay de pantalla completa */
#nepf-preloader {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

:root {
  --gold: #E6B65B;
  --white: #ffffff;
  --bg: #000000;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
}

.light-glow {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 250%;
  transform: translate(-50%, -50%) scale(0.8);
  background: radial-gradient(circle at center,
    rgba(230,182,91,0.25) 0%,
    rgba(230,182,91,0.1) 25%,
    rgba(0,0,0,0.85) 80%);
  filter: blur(100px);
  opacity: 0;
  animation: lightFade 3.5s ease-in-out forwards;
  z-index: 1;
}

.container {
  position: relative;
  width: min(80vw, 480px);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.logo {
  position: relative;
  width: 100%;
  height: auto;
  opacity: 0;
  animation: fadeIn 0.8s ease-out 0.2s forwards,
             fadeOut 1s ease-in 4s forwards; /* logo termina ~5.2s con delays */
  filter: drop-shadow(0 0 15px rgba(230,182,91,0.5));
}

.ring {
  position: absolute;
  width: 150%;
  height: 150%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gold), #ffdfa0, var(--gold));
  mask: radial-gradient(circle, transparent 58%, black 59%);
  -webkit-mask: radial-gradient(circle, transparent 58%, black 59%);
  filter: drop-shadow(0 0 8px rgba(230,182,91,0.5));
  animation: spin 6s linear infinite, glow 2s ease-in-out infinite alternate;
  opacity: 0;
  animation-delay: 0.3s;
  animation-fill-mode: both;
  z-index: 2;
}

.tagline {
  position: fixed;
  top: 100vh;
  width: 100%;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;                /* Montserrat Light */
  font-synthesis-weight: none;     /* evita falsos bolds */
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: clamp(16px, 2.8vw, 28px);
  background: linear-gradient(120deg, var(--white) 0%, var(--white) 40%, var(--gold) 50%, var(--white) 60%, var(--white) 100%);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translateY(0);
  /* Empieza DESPUÉS de que el logo desaparece (logo ~5.0s): */
  animation:
    textRise 1.2s cubic-bezier(0.25, 1, 0.5, 1) 5.1s forwards,
    textShine 1s ease-in-out 6.4s forwards,
    fadeOut 0.5s ease-out 7.5s forwards; /* termina ~8.0s */
  z-index: 10;
}

/* Animaciones */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes glow {
  0% { filter: drop-shadow(0 0 6px rgba(230,182,91,0.3)); }
  100% { filter: drop-shadow(0 0 20px rgba(230,182,91,0.8)); }
}
@keyframes lightFade {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes textShine {
  0% { background-position: 0% 0%; }
  100% { background-position: 400% 0%; }
}
@keyframes textRise {
  0% { opacity: 0; top: 100vh; }
  70% { opacity: 1; top: 52vh; transform: translateY(-50%); }
  100% { opacity: 1; top: 50vh; transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  #nepf-preloader * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}