/* ═══════════════════════════════════════════════════════════
   NEXUS PRIME OS — GENESIS INTRO v10 · Estilos cinemáticos
   ═══════════════════════════════════════════════════════════ */

html.gx-lock, html.gx-lock body { overflow: hidden; }

#genesis {
  position: fixed; inset: 0; z-index: 9999;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, #0b0d18 0%, #05060b 55%, #030407 100%);
  display: grid; place-items: center;
  overflow: hidden;
  contain: strict;
}
#genesis.gx-out {
  animation: gxOut .85s cubic-bezier(.7,.02,.3,1) forwards;
  pointer-events: none;
}
@keyframes gxOut {
  0%   { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); }
  40%  { opacity: 1; filter: blur(0) brightness(1.55); transform: scale(1.015); }
  100% { opacity: 0; filter: blur(22px) brightness(2.2); transform: scale(1.16); }
}
#genesis.gx-instant { display: none; }

#gx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.gx-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 62% at 50% 50%, transparent 32%, rgba(2,3,6,.62) 78%, rgba(2,3,6,.94) 100%);
}
/* Barrido de escaneo tipo instrumento óptico */
.gx-scan {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(192,132,252,.045) 0 1px, transparent 1px 3px);
  animation: gxScan 7s linear infinite;
  mix-blend-mode: screen;
}
@keyframes gxScan { to { transform: translateY(3px); } }

.gx-stage {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  gap: 0; text-align: center; padding: 24px;
  transition: transform .9s cubic-bezier(.65,.05,.36,1), opacity .7s ease;
}
#genesis.gx-act-collapse .gx-stage { transform: scale(1.07) translateY(-6px); }

/* ── Sigilo ─────────────────────────────────────────────── */
.gx-sigil {
  width: clamp(112px, 21vw, 176px); aspect-ratio: 1;
  opacity: 0; transform: scale(.55) rotate(-32deg);
  transition: opacity .9s ease, transform 1.15s cubic-bezier(.16,1,.3,1);
  filter: drop-shadow(0 0 26px rgba(192,132,252,.55));
  margin-bottom: clamp(14px, 3vh, 30px);
}
#genesis.gx-act-sigil .gx-sigil { opacity: 1; transform: scale(1) rotate(0); }
.gx-sigil svg { width: 100%; height: 100%; overflow: visible; }

.gx-ring { stroke: rgba(192,132,252,.30); stroke-width: 1; fill: none; transform-origin: 100px 100px; }
.gx-r1 { stroke-dasharray: 30 22; animation: gxSpin 16s linear infinite; stroke: rgba(251,191,36,.42); }
.gx-r2 { stroke-dasharray: 12 9;  animation: gxSpin 10s linear infinite reverse; }
.gx-r3 { stroke-dasharray: 4 7;   animation: gxSpin 6s  linear infinite; stroke: rgba(96,165,250,.42); }
@keyframes gxSpin { to { transform: rotate(360deg); } }

.gx-glyph {
  stroke: url(#none); stroke: #e9d5ff; stroke-width: 5.5; fill: none;
  stroke-linecap: square; stroke-linejoin: miter;
  stroke-dasharray: 300; stroke-dashoffset: 300;
  filter: drop-shadow(0 0 10px rgba(192,132,252,.9));
}
#genesis.gx-act-sigil .gx-glyph { animation: gxDraw 1.25s cubic-bezier(.6,.05,.3,1) .12s forwards; }
@keyframes gxDraw { to { stroke-dashoffset: 0; } }

.gx-tick { stroke: rgba(251,191,36,.75); stroke-width: 2; opacity: 0; }
#genesis.gx-act-sigil .gx-tick { animation: gxTick .5s ease .95s forwards; }
@keyframes gxTick { to { opacity: 1; } }

.gx-nucleus { fill: #fff; opacity: 0; }
#genesis.gx-act-sigil .gx-nucleus { animation: gxNuc 1.9s ease .8s infinite; }
@keyframes gxNuc { 0%,100% { opacity: .45; r: 5; } 50% { opacity: 1; r: 8; } }

/* ── Wordmark ───────────────────────────────────────────── */
.gx-word {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700; margin: 0;
  font-size: clamp(2.1rem, 8.2vw, 5.2rem);
  line-height: .95; letter-spacing: .14em;
  display: flex; gap: clamp(.35rem, 2vw, 1.1rem); flex-wrap: wrap; justify-content: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
#genesis.gx-act-word .gx-word { opacity: 1; transform: none; }
.gx-w1 {
  background: linear-gradient(105deg, #fff 8%, #e9d5ff 34%, #c084fc 62%, #a855f7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  min-width: 1ch;
}
.gx-w2 {
  background: linear-gradient(105deg, #fde68a 6%, #fbbf24 46%, #d97706 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  min-width: 1ch;
}
/* Aberración cromática al aparecer */
#genesis.gx-act-word .gx-word::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
}

.gx-rule {
  width: 0; height: 1px; margin: clamp(14px,2.6vh,26px) 0 clamp(10px,1.8vh,18px);
  background: linear-gradient(90deg, transparent, rgba(192,132,252,.9), rgba(251,191,36,.9), transparent);
  transition: width 1.1s cubic-bezier(.16,1,.3,1) .15s;
  box-shadow: 0 0 14px rgba(192,132,252,.6);
}
#genesis.gx-act-word .gx-rule { width: min(78vw, 460px); }

.gx-tagline {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(.58rem, 1.9vw, .84rem);
  letter-spacing: .58em; text-indent: .58em;
  color: #a5b0c4; margin: 0;
  opacity: 0; filter: blur(6px);
  transition: opacity .8s ease, filter .8s ease, letter-spacing 1.4s cubic-bezier(.16,1,.3,1);
}
#genesis.gx-act-tag .gx-tagline { opacity: 1; filter: blur(0); letter-spacing: .34em; }

/* ── Boot log ───────────────────────────────────────────── */
.gx-boot {
  margin-top: clamp(20px, 4vh, 40px);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(.5rem, 1.55vw, .68rem);
  color: rgba(139,149,169,.85);
  min-height: 5.2em; width: min(90vw, 430px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: .32em;
  text-align: left; letter-spacing: .04em;
}
.gx-line {
  animation: gxLine .45s ease both;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gx-line:last-child { color: #c084fc; text-shadow: 0 0 12px rgba(192,132,252,.5); }
@keyframes gxLine { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* ── Controles ──────────────────────────────────────────── */
.gx-skip {
  position: absolute; bottom: clamp(20px, 4vh, 38px); right: clamp(18px, 4vw, 40px);
  z-index: 6;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em;
  color: rgba(139,149,169,.75);
  background: rgba(13,17,25,.6); border: 1px solid rgba(192,132,252,.2);
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 8px;
  opacity: 0; animation: gxFadeIn .6s ease 1.4s forwards;
  transition: color .2s, border-color .2s, background .2s;
}
.gx-skip:hover { color: #e4e9f2; border-color: rgba(192,132,252,.5); background: rgba(192,132,252,.1); }
.gx-skip:focus-visible { outline: 2px solid #c084fc; outline-offset: 3px; }
.gx-skip kbd {
  font-size: 9px; padding: 1px 5px; border-radius: 4px;
  background: rgba(192,132,252,.14); border: 1px solid rgba(192,132,252,.25); color: #c084fc;
}
@keyframes gxFadeIn { to { opacity: 1; } }

.gx-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px; z-index: 6;
  background: rgba(192,132,252,.08);
}
.gx-progress i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #a855f7, #c084fc 45%, #fbbf24);
  box-shadow: 0 0 12px rgba(192,132,252,.8);
}

/* ── Entrada de la app tras el intro ────────────────────── */
#app { opacity: 0; }
#app.app-in {
  animation: appIn 1s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes appIn {
  from { opacity: 0; transform: scale(.985) translateY(10px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ── Accesibilidad: movimiento reducido ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  #genesis { display: none !important; }
  #app { opacity: 1 !important; animation: none !important; }
  .gx-scan, .gx-r1, .gx-r2, .gx-r3, .gx-nucleus { animation: none !important; }
}