/* ============================================================
   AI-SOLUTION@X — CSS de la secuencia de arranque
   Se carga por separado y es minúsculo: el intro no puede ser la
   razón por la que la app tarda en pintar.
   ============================================================ */

#aisx-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, #0d1226 0%, #070a16 55%, #04060f 100%);
  overflow: hidden;
  --prog: 0%;
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1);
  /* Evita que el usuario vea la app "detrás" durante el intro */
  contain: strict;
}

#aisx-intro.done {
  opacity: 0;
  /* La cámara "entra" en la escena al disolverse: el usuario atraviesa el logo */
  transform: scale(1.09);
  pointer-events: none;
}

#intro-canvas {
  position: absolute;
  inset: 0;
  transition: opacity .5s linear;
}

/* Viñeta: enfoca la mirada al centro, como una lente de cine */
.intro-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 65% at 50% 50%, transparent 40%, rgba(2, 4, 10, .72) 100%);
}

/* Scanlines sutilísimas: textura de pantalla de mando, no un efecto retro */
.intro-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background: repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, .022) 0 1px,
      transparent 1px 3px);
  mix-blend-mode: overlay;
}

.intro-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 1.5rem;
  text-align: center;
}

/* ---------- ACTO IV · monograma trazado ---------- */
.intro-mark {
  width: clamp(96px, 22vw, 148px);
  height: clamp(96px, 22vw, 148px);
  opacity: 0;
  transform: scale(.82) rotate(-6deg);
  transition: opacity .5s ease-out, transform 1s cubic-bezier(.2, .9, .2, 1);
}

.intro-mark .ms {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}

.intro-mark .md {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.intro-mark.draw {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Cada trazo se dibuja en cascada: se percibe como un circuito montándose */
.intro-mark.draw .ms {
  animation: msDraw .9s cubic-bezier(.65, 0, .35, 1) forwards;
}

.intro-mark.draw .ms:nth-child(1) { animation-delay: 0ms }
.intro-mark.draw .ms:nth-child(2) { animation-delay: 260ms }
.intro-mark.draw .ms:nth-child(3) { animation-delay: 400ms }
.intro-mark.draw .ms:nth-child(4) { animation-delay: 520ms }

.intro-mark.draw .md {
  animation: mdPop .55s cubic-bezier(.2, 1.6, .3, 1) forwards;
}

.intro-mark.draw .md:nth-child(5) { animation-delay: 700ms }
.intro-mark.draw .md:nth-child(6) { animation-delay: 820ms }

@keyframes msDraw {
  from { stroke-dashoffset: 200 }
  to { stroke-dashoffset: 0 }
}

@keyframes mdPop {
  0% { opacity: 0; transform: scale(0) }
  70% { opacity: 1; transform: scale(1.5) }
  100% { opacity: 1; transform: scale(1) }
}

/* ---------- ACTO IV · el nombre, letra a letra ---------- */
.intro-word {
  margin-top: 1.15rem;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 6.6vw, 2.9rem);
  letter-spacing: .012em;
  line-height: 1;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}

.intro-word .iw {
  display: inline-block;
  opacity: 0;
  /* Cada letra llega desde el fondo con un desenfoque que se resuelve:
     lectura de "materializándose", no de "apareciendo" */
  transform: translateY(.5em) scale(.9);
  filter: blur(9px);
  background: linear-gradient(180deg, #ffffff 0%, #c9d2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.intro-word .iw.dash { opacity: 0; color: transparent }
.intro-word .iw.at,
.intro-word .iw.x {
  background: linear-gradient(135deg, #9d7bff 0%, #4c8dff 50%, #2fd58c 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.show-word .intro-word .iw {
  animation: iwIn .72s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: var(--d);
}

@keyframes iwIn {
  from { opacity: 0; transform: translateY(.5em) scale(.9); filter: blur(9px) }
  to { opacity: 1; transform: none; filter: blur(0) }
}

.intro-tag {
  margin-top: .72rem;
  font-size: clamp(.53rem, 2.1vw, .68rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #7d8ab5;
  opacity: 0;
  font-weight: 600;
}

.show-word .intro-tag {
  animation: fadeUp .8s cubic-bezier(.16, 1, .3, 1) .62s forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); letter-spacing: .5em }
  to { opacity: .95; transform: none; letter-spacing: .34em }
}

/* ---------- log de arranque ---------- */
.intro-boot {
  margin-top: 1.5rem;
  min-height: 5.4rem;
  display: flex;
  flex-direction: column;
  gap: .26rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: clamp(.56rem, 2.2vw, .68rem);
  color: #6f7da8;
  text-align: left;
}

.intro-boot .bl {
  display: flex;
  align-items: center;
  gap: .5rem;
  opacity: 0;
  animation: blIn .45s cubic-bezier(.16, 1, .3, 1) forwards;
  white-space: nowrap;
}

.intro-boot .bl .ok {
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: #2fd58c;
  box-shadow: 0 0 8px #2fd58c;
  flex: none;
  animation: okPulse 1.6s ease-in-out infinite;
}

@keyframes blIn {
  from { opacity: 0; transform: translateX(-8px) }
  to { opacity: .92; transform: none }
}

@keyframes okPulse {
  50% { opacity: .45; box-shadow: 0 0 3px #2fd58c }
}

/* ---------- barra de progreso real ---------- */
.intro-bar {
  margin-top: 1.1rem;
  width: min(230px, 56vw);
  height: 2px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}

.intro-bar i {
  display: block;
  height: 100%;
  width: var(--prog);
  border-radius: 99px;
  background: linear-gradient(90deg, #9d7bff, #4c8dff, #2fd58c);
  box-shadow: 0 0 12px rgba(124, 92, 250, .8);
  transition: width .18s linear;
}

/* ---------- ACTO V · barrido de luz ---------- */
.intro-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg,
      transparent 38%,
      rgba(255, 255, 255, .10) 47%,
      rgba(190, 210, 255, .28) 50%,
      rgba(255, 255, 255, .10) 53%,
      transparent 62%);
  transform: translateX(-115%);
}

.sweeping .intro-sweep {
  animation: sweepGo .95s cubic-bezier(.5, 0, .3, 1) forwards;
}

@keyframes sweepGo {
  0% { opacity: 0; transform: translateX(-115%) }
  22% { opacity: 1 }
  100% { opacity: 0; transform: translateX(115%) }
}

/* Latido final: el sistema "arranca" justo antes de disolverse */
.sweeping .intro-stage {
  animation: bootPulse .95s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes bootPulse {
  0% { transform: none }
  28% { transform: scale(1.028); filter: brightness(1.22) }
  100% { transform: scale(1.005); filter: none }
}

/* ---------- salida accesible ---------- */
.intro-skip {
  position: absolute;
  bottom: max(1.15rem, env(safe-area-inset-bottom));
  right: 1.15rem;
  z-index: 4;
  font-size: .68rem;
  color: #7d8ab5;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .10);
  padding: .42rem .78rem;
  border-radius: 99px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .45rem;
  backdrop-filter: blur(8px);
  transition: color .2s, background .2s, border-color .2s;
  opacity: 0;
  animation: fadeIn .5s ease-out 1.2s forwards;
}

.intro-skip:hover,
.intro-skip:focus-visible {
  color: #e6ebff;
  background: rgba(255, 255, 255, .10);
  border-color: rgba(157, 123, 255, .5);
  outline: none;
}

.intro-skip kbd {
  font-family: inherit;
  font-size: .6rem;
  padding: .1rem .32rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .12);
}

@keyframes fadeIn { to { opacity: 1 } }

/* ---------- respeto por prefers-reduced-motion ---------- */
/* No se elimina la marca: se muestra estática. La identidad se mantiene,
   el movimiento desaparece. Eso es accesibilidad bien entendida. */
#aisx-intro.reduced #intro-canvas,
#aisx-intro.reduced .intro-scanlines,
#aisx-intro.reduced .intro-boot,
#aisx-intro.reduced .intro-bar,
#aisx-intro.reduced .intro-skip { display: none }

#aisx-intro.reduced .intro-mark { opacity: 1; transform: none }
#aisx-intro.reduced .intro-mark .ms { stroke-dashoffset: 0 }
#aisx-intro.reduced .intro-mark .md { opacity: 1 }
#aisx-intro.reduced .intro-word .iw { opacity: 1; transform: none; filter: none }
#aisx-intro.reduced .intro-tag { opacity: .95 }

@media (prefers-reduced-motion: reduce) {
  #aisx-intro,
  #aisx-intro * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .15s !important;
  }
}

/* La app queda oculta hasta que el intro termina, así no se ve
   el "salto" de contenido detrás de la animación. */
html:not(.intro-done) #app {
  opacity: 0;
  transform: scale(.985);
}

#app {
  opacity: 1;
  transform: none;
  transition: opacity .55s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}