/* ============================================================
   GÉNESIS DE LUZ · Intro cinematográfico v5.0
   Secuencia de 7 fases · 5.6s · Academia de Luz
   ============================================================ */

#genesis {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #04060c;
  overflow: hidden;
  contain: strict;
  will-change: opacity, transform, clip-path;
}

/* ─── Salida: iris wipe + zoom trascendente ─── */
#genesis.gx-out {
  animation: gxTranscend 1150ms cubic-bezier(.76, 0, .24, 1) forwards;
}
@keyframes gxTranscend {
  0%   { opacity: 1; transform: scale(1);    clip-path: circle(150% at 50% 50%); filter: blur(0); }
  35%  { opacity: 1; transform: scale(1.04); clip-path: circle(150% at 50% 50%); }
  100% { opacity: 0; transform: scale(1.55); clip-path: circle(0% at 50% 50%);  filter: blur(14px); }
}
#genesis.gx-gone { display: none !important; }

/* ─── Capa de fondo: nebulosa naciente ─── */
.gx-nebula {
  position: absolute;
  inset: -20%;
  opacity: 0;
  background:
    radial-gradient(ellipse 55% 45% at 32% 38%, rgba(124, 58, 237, .30), transparent 62%),
    radial-gradient(ellipse 50% 40% at 70% 62%, rgba(34, 211, 238, .22), transparent 62%),
    radial-gradient(ellipse 40% 35% at 52% 82%, rgba(244, 114, 182, .16), transparent 62%);
  filter: blur(38px);
  animation: gxNebula 5200ms 900ms cubic-bezier(.22, 1, .36, 1) forwards;
  will-change: opacity, transform;
}
@keyframes gxNebula {
  0%   { opacity: 0; transform: scale(.55) rotate(-6deg); }
  55%  { opacity: .95; transform: scale(1.05) rotate(2deg); }
  100% { opacity: .75; transform: scale(1.14) rotate(5deg); }
}

/* ─── Canvas de partículas (Big Bang) ─── */
#gx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ─── Escenario central ─── */
.gx-stage {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  max-width: min(92vw, 760px);
  text-align: center;
}

/* ─── FASE 1 · Singularidad: el punto primordial ─── */
.gx-singularity {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 12px 4px rgba(255, 255, 255, .95),
    0 0 40px 12px rgba(192, 132, 252, .75),
    0 0 90px 30px rgba(34, 211, 238, .35);
  animation: gxSingularity 2300ms cubic-bezier(.65, 0, .35, 1) forwards;
  will-change: transform, opacity;
  z-index: 4;
}
@keyframes gxSingularity {
  0%   { transform: scale(0);    opacity: 0; }
  12%  { transform: scale(.55);  opacity: 1; }
  26%  { transform: scale(.28);  opacity: 1; }
  38%  { transform: scale(.85);  opacity: 1; }
  50%  { transform: scale(.40);  opacity: 1; }
  70%  { transform: scale(6.5);  opacity: .9; }
  100% { transform: scale(26);   opacity: 0; }
}

/* ─── FASE 2 · Ondas de choque concéntricas ─── */
.gx-shock {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  border: 1.5px solid rgba(192, 132, 252, .8);
  opacity: 0;
  will-change: transform, opacity;
  z-index: 3;
}
.gx-shock.s1 { animation: gxShock 1900ms 1150ms cubic-bezier(.16, 1, .3, 1) forwards; }
.gx-shock.s2 { animation: gxShock 2100ms 1320ms cubic-bezier(.16, 1, .3, 1) forwards; border-color: rgba(34, 211, 238, .7); }
.gx-shock.s3 { animation: gxShock 2300ms 1500ms cubic-bezier(.16, 1, .3, 1) forwards; border-color: rgba(251, 191, 36, .55); }
@keyframes gxShock {
  0%   { transform: scale(0);  opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: scale(58); opacity: 0; }
}

/* ─── FASE 3 · Sello geométrico: Semilla de la Vida ─── */
.gx-seal {
  width: clamp(150px, 30vw, 230px);
  height: clamp(150px, 30vw, 230px);
  margin-bottom: 30px;
  opacity: 0;
  animation: gxSealIn 1500ms 1750ms cubic-bezier(.22, 1, .36, 1) forwards;
  will-change: opacity, transform;
}
@keyframes gxSealIn {
  0%   { opacity: 0; transform: scale(.35) rotate(-40deg); filter: blur(10px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
}
.gx-seal circle,
.gx-seal path,
.gx-seal polygon {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Trazado progresivo de cada figura */
.gx-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: gxDraw 1900ms cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes gxDraw { to { stroke-dashoffset: 0; } }

.gx-seal-rotor  { animation: gxSpin 26s linear infinite; transform-origin: 100px 100px; }
.gx-seal-rotor2 { animation: gxSpin 18s linear infinite reverse; transform-origin: 100px 100px; }
@keyframes gxSpin { to { transform: rotate(360deg); } }

.gx-seal-core {
  opacity: 0;
  animation: gxCorePulse 2600ms 3050ms ease-out infinite;
  transform-origin: 100px 100px;
}
@keyframes gxCorePulse {
  0%   { opacity: 0;   transform: scale(.7); }
  40%  { opacity: 1;   transform: scale(1.06); }
  100% { opacity: .45; transform: scale(.92); }
}

/* ─── FASE 4 · Logotipo: revelado letra por letra ─── */
.gx-title {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 6.2vw, 3.6rem);
  letter-spacing: .16em;
  line-height: 1.08;
  margin: 0 0 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .38em;
  text-transform: uppercase;
}
/* Cada palabra es una unidad indivisible: nunca se parte a mitad */
.gx-title .gx-word {
  display: inline-flex;
  white-space: nowrap;
}
.gx-title .gx-ch {
  display: inline-block;
  opacity: 0;
  background: linear-gradient(115deg, #f5f2ff 0%, #c084fc 26%, #22d3ee 54%, #fbbf24 78%, #f5f2ff 100%);
  background-size: 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation:
    gxChIn 900ms cubic-bezier(.16, 1, .3, 1) forwards,
    gxShimmer 6s 2.4s linear infinite;
  will-change: opacity, transform, filter;
}
@keyframes gxChIn {
  0%   { opacity: 0; transform: translateY(26px) rotateX(-72deg) scale(.82); filter: blur(12px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); filter: blur(0); }
}
@keyframes gxShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 320% 50%; }
}

/* Línea divisoria luminosa */
.gx-rule {
  width: 0;
  height: 1px;
  margin: 16px auto 14px;
  background: linear-gradient(90deg, transparent, #c084fc 22%, #fff 50%, #22d3ee 78%, transparent);
  box-shadow: 0 0 14px rgba(192, 132, 252, .7);
  animation: gxRule 1100ms 3550ms cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes gxRule { to { width: min(340px, 72vw); } }

/* ─── FASE 5 · Tagline con máscara deslizante ─── */
.gx-tag {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(.62rem, 1.9vw, .82rem);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(201, 189, 240, .82);
  opacity: 0;
  animation: gxTagIn 1200ms 3800ms cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes gxTagIn {
  0%   { opacity: 0; transform: translateY(14px); letter-spacing: .6em; filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0);    letter-spacing: .34em; filter: blur(0); }
}

/* ─── FASE 6 · Aro de progreso + estado ─── */
.gx-progress {
  position: absolute;
  bottom: clamp(28px, 7vh, 62px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  opacity: 0;
  animation: gxFadeUp 800ms 4100ms ease-out forwards;
  z-index: 5;
}
@keyframes gxFadeUp {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.gx-track {
  width: min(230px, 58vw);
  height: 2px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .10);
  overflow: hidden;
}
.gx-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #c084fc, #22d3ee, #fbbf24);
  box-shadow: 0 0 12px rgba(34, 211, 238, .8);
  animation: gxFill 1400ms 4150ms cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes gxFill { to { width: 100%; } }
.gx-status {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .58rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(167, 139, 250, .62);
  min-height: 1em;
}

/* ─── Botón omitir (accesibilidad) ─── */
.gx-skip {
  position: absolute;
  top: clamp(16px, 3vh, 30px);
  right: clamp(16px, 3vw, 32px);
  z-index: 10;
  padding: 8px 17px;
  border-radius: 99px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(201, 189, 240, .72);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12);
  cursor: pointer;
  opacity: 0;
  backdrop-filter: blur(8px);
  animation: gxSkipIn 700ms 1600ms ease-out forwards;
  transition: color .25s, border-color .25s, background .25s, transform .25s;
}
@keyframes gxSkipIn { to { opacity: 1; } }
.gx-skip:hover {
  color: #fff;
  border-color: rgba(34, 211, 238, .5);
  background: rgba(34, 211, 238, .10);
  transform: translateY(-1px);
}
.gx-skip:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 3px;
  opacity: 1;
}

/* ─── Viñeta cinematográfica + grano de película ─── */
.gx-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background: radial-gradient(ellipse 78% 68% at 50% 50%, transparent 42%, rgba(4, 6, 12, .82) 100%);
}
.gx-grain {
  position: absolute;
  inset: -100%;
  pointer-events: none;
  z-index: 7;
  opacity: .028;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: gxGrain 700ms steps(4) infinite;
}
@keyframes gxGrain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(0, 0); }
}

/* ─── Destello final (light leak) ─── */
.gx-flash {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .95), rgba(192, 132, 252, .4) 42%, transparent 72%);
  opacity: 0;
}
.gx-flash.gx-burst { animation: gxBurst 900ms cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes gxBurst {
  0%   { opacity: 0;   transform: scale(.3); }
  18%  { opacity: .92; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.1); }
}

/* ─── Bloqueo de scroll durante el intro ─── */
html.gx-lock, html.gx-lock body { overflow: hidden !important; }

/* ============================================================
   Respeto por prefers-reduced-motion — intro esencial y sobrio
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .gx-singularity, .gx-shock, .gx-grain, #gx-canvas { display: none !important; }
  .gx-nebula { animation: gxSoftIn 500ms ease-out forwards; filter: blur(50px); }
  .gx-seal   { animation: gxSoftIn 450ms 60ms ease-out forwards; }
  .gx-seal-rotor, .gx-seal-rotor2, .gx-seal-core { animation: none !important; opacity: 1; }
  .gx-draw   { stroke-dashoffset: 0; animation: none !important; }
  .gx-title .gx-ch { animation: gxSoftIn 400ms 120ms ease-out forwards; }
  .gx-rule   { animation: gxRule 400ms 200ms ease-out forwards; }
  .gx-tag    { animation: gxSoftIn 400ms 240ms ease-out forwards; }
  .gx-progress { animation: gxSoftIn 300ms 300ms ease-out forwards; transform: translateX(-50%); }
  .gx-fill   { animation: gxFill 500ms 320ms linear forwards; }
  .gx-skip   { animation: gxSoftIn 200ms ease-out forwards; }
  #genesis.gx-out { animation: gxSoftOut 350ms ease-in forwards; }
  @keyframes gxSoftIn  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes gxSoftOut { from { opacity: 1; } to { opacity: 0; } }
}

/* ─── Ajustes para pantallas muy cortas ─── */
@media (max-height: 560px) {
  .gx-seal { width: clamp(96px, 20vh, 140px); height: clamp(96px, 20vh, 140px); margin-bottom: 16px; }
  .gx-rule { margin: 10px auto 8px; }
  .gx-progress { bottom: 16px; }
}