/* ============================================================================
   NONSTOP RECORDS — Estilos
   Estética: premium · cinematográfica · misteriosa · alto contraste.
   Paleta tomada del logo: negros profundos, grises oscuros y dorados.
   ========================================================================== */

/* ---- Reset esencial ---- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Fondo */
  --black:        #050505;   /* negro profundo */
  --black-2:      #0b0b0c;   /* gris casi negro */

  /* Dorados del logo */
  --gold:         #e9a83c;   /* dorado brillante */
  --gold-bright:  #f6d6a6;   /* dorado claro / crema (reflejos) */
  --gold-deep:    #c67e2e;   /* ámbar / bronce */

  /* Texto */
  --text:         #f3efe8;   /* blanco cálido */
  --text-soft:    rgba(243, 239, 232, 0.72);

  /* Tipografía */
  --sans: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html, body { height: 100%; }

body {
  background: var(--black);
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;                 /* sin scroll: es una sola pantalla */
  overscroll-behavior: none;        /* sin "rebote" ni lag al arrastrar en móvil */
  touch-action: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Enlaces (por si se añaden en el futuro): siempre dorados, nunca azul por defecto */
a { color: var(--gold); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--gold-bright); }

/* ============================================================================
   CAPA 1 · Lienzo de fondo animado
   ========================================================================== */
.bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  /* Aparece lentamente al cargar */
  opacity: 0;
  animation: bgFadeIn 2.2s ease forwards;
}

@keyframes bgFadeIn { to { opacity: 1; } }

/* ============================================================================
   CAPA 2 · Grano cinematográfico (ruido SVG muy tenue)
   ========================================================================== */
.grain {
  position: fixed;
  inset: -14%;                      /* margen mínimo que cubre la deriva (menos área = menos GPU) */
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Deriva casi imperceptible para evitar el aspecto de "rejilla" estática */
  animation: grainDrift 8s steps(6) infinite;
}

@keyframes grainDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-6%, 4%); }
}

/* ============================================================================
   CAPA 3 · Viñeta (oscurece los bordes, enfoca el centro)
   ========================================================================== */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 80% at 50% 46%,
      rgba(0, 0, 0, 0) 42%,
      rgba(0, 0, 0, 0.45) 82%,
      rgba(0, 0, 0, 0.72) 100%);
}

/* ============================================================================
   ESCENARIO · contenido centrado
   ========================================================================== */
.stage {
  position: relative;
  z-index: 2;
  height: 100vh;
  height: 100dvh;                   /* respeta la barra de navegador en móvil */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: max(24px, 5vh) 24px;
}

/* ---- Logo (protagonista) ---- */
.logo-wrap {
  position: relative;
  margin: 0;                        /* es un <h1>: anula el margen por defecto */
  font: inherit;
  /* Tamaño responsive acotado por ancho y alto para verse perfecto siempre */
  width: min(560px, 82vw, 62vh);
  aspect-ratio: 1 / 1;
  /* Entrada elegante */
  opacity: 0;
  animation: logoIn 1.9s cubic-bezier(.19, 1, .22, 1) 0.6s forwards;
}

/* Resplandor volumétrico detrás del logo: dos capas que se cruzan y derivan
   muy lento, mutando entre ámbar y dorado. Da sensación de luz volumétrica
   y jamás distrae del logo. */
.logo-wrap::before,
.logo-wrap::after {
  content: "";
  position: absolute;
  inset: -20% -12% -8%;
  z-index: -1;
  border-radius: 50%;
  filter: blur(26px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.logo-wrap::before {
  background:
    radial-gradient(ellipse 58% 52% at 50% 46%,
      rgba(233, 168, 60, 0.22) 0%,
      rgba(198, 126, 46, 0.08) 46%,
      rgba(0, 0, 0, 0) 72%);
  animation: glowAmber 13s ease-in-out infinite;
}
.logo-wrap::after {
  background:
    radial-gradient(ellipse 52% 48% at 50% 52%,
      rgba(246, 214, 166, 0.18) 0%,
      rgba(233, 168, 60, 0.06) 46%,
      rgba(0, 0, 0, 0) 72%);
  animation: glowGold 16s ease-in-out infinite;
}

.logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  /* Resplandor dorado + profundidad */
  filter:
    drop-shadow(0 0 42px rgba(233, 168, 60, 0.16))
    drop-shadow(0 14px 34px rgba(0, 0, 0, 0.55));
  /* Respiración imperceptible (100% → 101%), arranca tras la entrada */
  animation: logoBreath 14s ease-in-out 2.6s infinite;
}

/* Barrido de luz recortado con la forma del logo */
.logo-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* La máscara usa el propio PNG del logo => la luz sólo aparece sobre él */
  -webkit-mask-image: url("assets/logo.png");
          mask-image: url("assets/logo.png");
  -webkit-mask-size: contain;      mask-size: contain;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  /* Franja de luz que se desplaza */
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(255, 246, 224, 0.32) 48%,
    rgba(255, 252, 240, 0.85) 50%,
    rgba(255, 246, 224, 0.32) 52%,
    transparent 58%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  background-position: 175% 0;
  mix-blend-mode: screen;
  opacity: 0;
  animation: sheen 9s ease-in-out 3.4s infinite;
}

/* ---- Textos ---- */
.tagline {
  margin-top: clamp(26px, 4.5vh, 54px);
  font-weight: 300;
  font-size: clamp(15px, 2.3vw, 24px);
  letter-spacing: 0.12em;
  color: var(--text-soft);
  text-wrap: balance;
  opacity: 0;
  animation: textIn 1.6s cubic-bezier(.19, 1, .22, 1) 1.5s forwards;
}

.soon {
  margin-top: clamp(16px, 2.6vh, 26px);
  opacity: 0;
  animation: textIn 1.6s cubic-bezier(.19, 1, .22, 1) 1.9s forwards;
}

.soon span {
  display: inline-block;
  font-weight: 500;
  font-size: clamp(10px, 1.5vw, 13px);
  letter-spacing: 0.46em;
  text-transform: uppercase;
  /* Degradado dorado sutil en el propio texto */
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
  padding-left: 0.46em;            /* compensa el tracking a la derecha */
  /* "Respiración" lenta: sugiere trabajo en curso sin usar un spinner */
  animation: soonPulse 3.6s ease-in-out infinite;
}

/* ============================================================================
   ANIMACIONES
   ========================================================================== */

/* Entrada del logo: desenfoque + escala + brillo hacia el estado final */
@keyframes logoIn {
  0%   { opacity: 0; filter: blur(16px) brightness(1.5); transform: translateY(10px) scale(0.965); }
  60%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0) brightness(1);       transform: translateY(0)    scale(1); }
}

/* Entrada de los textos */
@keyframes textIn {
  0%   { opacity: 0; transform: translateY(12px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* Barrido de luz: recorre el logo y luego descansa (cada cierto tiempo) */
@keyframes sheen {
  0%   { background-position: 175% 0;  opacity: 0; }
  5%   { opacity: 1; }
  17%  { background-position: -75% 0;  opacity: 1; }
  23%  { opacity: 0; }
  100% { background-position: -75% 0;  opacity: 0; }
}

/* Luz volumétrica: ámbar y dorado en fases opuestas => el tono muta muy lento */
@keyframes glowAmber {
  0%, 100% { opacity: 0.70; transform: translate(-2%, 1%)  scale(1); }
  50%      { opacity: 1;    transform: translate(2%, -2%)  scale(1.06); }
}
@keyframes glowGold {
  0%, 100% { opacity: 0.50; transform: translate(2%, -1%)  scale(1.05); }
  50%      { opacity: 0.90; transform: translate(-2%, 2%)  scale(1); }
}

/* Respiración imperceptible del logo (100% → 101%) */
@keyframes logoBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.01); }
}

/* Pulso del texto "Próximamente" */
@keyframes soonPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ============================================================================
   RESPONSIVE · ajustes finos
   ========================================================================== */

/* Móvil vertical: un poco más de aire y tracking algo menor */
@media (max-width: 560px) {
  .stage { padding: 28px 20px; }
  .soon span { letter-spacing: 0.38em; padding-left: 0.38em; }
  /* Menos desenfoque en móvil => menos coste de GPU sin cambiar el aspecto */
  .logo-wrap::before,
  .logo-wrap::after { filter: blur(18px); }
  .logo {
    filter:
      drop-shadow(0 0 30px rgba(233, 168, 60, 0.16))
      drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
  }
}

/* Pantallas apaisadas y bajas (móvil horizontal): prioriza la altura */
@media (max-height: 520px) and (orientation: landscape) {
  .logo-wrap { width: min(360px, 54vh, 48vw); }
  .tagline   { margin-top: clamp(14px, 3vh, 24px); }
}

/* ============================================================================
   ACCESIBILIDAD · respeta "reducir movimiento"
   Se mantiene un fade suave de entrada, pero sin bucles ni desplazamientos.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .grain,
  .logo,
  .logo-wrap::before,
  .logo-wrap::after,
  .logo-sheen,
  .soon span { animation: none !important; }

  .logo-sheen { display: none; }
  .logo-wrap::before { opacity: 0.85; }
  .logo-wrap::after  { opacity: 0.6; }

  /* La entrada se resuelve como un simple fundido, sin movimiento */
  .bg-canvas,
  .logo-wrap,
  .tagline,
  .soon {
    animation: reduceFade 1.2s ease forwards;
    transform: none !important;
    filter: none !important;
  }
  .logo { filter: drop-shadow(0 0 30px rgba(233, 168, 60, 0.14)); }
}

@keyframes reduceFade { from { opacity: 0; } to { opacity: 1; } }