/* ===========================================================================
   Intro de despegue (preloader). Overlay a pantalla completa con un cohete
   3D construido con CSS 3D (paneles generados por intro.js) que despega
   dejando estela de humo y digitos binarios, y luego se desvanece para
   revelar el sitio. Independiente del dc-runtime: vive como hermano de
   <x-dc> en el body.

   Paleta tomada del cohete del logo (SANVARDEVSCOHETE):
   crema #F6EAD7 · granate #5E211E · dorado #C08A19
   llama #FFC845 -> #F7941D -> #E04E1B
   =========================================================================== */

/* Crítico: fondo oscuro inmediato (styles.css llega después, via helmet). */
body { background: #07080d; }

#sv-launch {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 110%, #2a1408 0%, #141414 45%, #0d0d0d 100%);
  /* Desvanecimiento del overlay completo al final de la secuencia. */
  animation: svIntroFade 0.7s ease-in 2.2s forwards;
}

/* Estrellas/particulas de fondo muy sutiles. */
#sv-launch::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,0.25) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 60%, rgba(255,255,255,0.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 35% 75%, rgba(255,255,255,0.2) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60% 85%, rgba(255,255,255,0.25) 50%, transparent 51%);
  opacity: 0.8;
}

/* Escena centrada que aloja cohete + humo + binarios. */
.sv-launch__scene {
  position: relative;
  width: min(420px, 70vw);
  height: 100%;
}

/* ---- Cohete 3D ----------------------------------------------------------- */
/* Contenedor con perspectiva: la trayectoria de despegue anima este nodo;
   el giro 3D ocurre dentro (.sv-r3-spin). El interior lo genera intro.js. */
.sv-launch__rocket {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 400px;
  perspective: 1000px;
  transform: translate(-50%, -50%) translate(0, 36vh) scale(0.8);
  filter: drop-shadow(0 14px 30px rgba(200, 80, 20, 0.4));
  will-change: transform, opacity;
  animation: svRocketLaunch 2.5s cubic-bezier(0.55, 0, 0.85, 0.35) forwards;
}

.sv-r3-tilt,
.sv-r3-spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
/* Ligera vista desde abajo para que se aprecie el volumen. */
.sv-r3-tilt { transform: rotateX(7deg); }
/* Rodadura del cohete durante el ascenso (revela ventana, aletas y binario).
   Solo en el preloader: el cohete del hero gira por JS de forma interactiva. */
.sv-r3-spin--launch { animation: svRocketSpin 2.5s linear forwards; }

/* Panel base: cada liston vertical del cilindro/cono/tobera.
   La rotacion (rotateY + translateZ) y el sombreado por angulo de luz
   los asigna intro.js en linea. */
.sv-r3-panel {
  position: absolute;
  left: 50%;
  width: 12px;
  margin-left: -6px;
  backface-visibility: hidden;
}

/* Fuselaje: crema con collar dorado bajo el cono, filete dorado y
   banda granate en la cola — como el cuerpo del cohete del logo. */
.sv-r3-body {
  top: 92px;
  height: 160px;
  background: linear-gradient(to bottom,
    #c08a19 0%, #c08a19 5%,
    #f6ead7 5%, #f6ead7 72%,
    #b8791c 72%, #b8791c 76%,
    #5e211e 76%, #5e211e 100%);
}

/* Cono de nariz dorado: facetas triangulares inclinadas hacia el eje. */
.sv-r3-cone {
  top: 6px;
  height: 86px;
  transform-origin: 50% 100%;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(to bottom, #d9a82d, #b07c15);
}

/* Tobera granate oscuro bajo el fuselaje. */
.sv-r3-nozzle {
  top: 252px;
  height: 20px;
  background: linear-gradient(to bottom, #4e1a18, #2f100e);
}

/* Ojo de buey dorado con aro granate, sobre la cara frontal del cilindro. */
.sv-r3-window {
  position: absolute;
  left: 50%;
  top: 124px;
  width: 38px;
  height: 38px;
  margin-left: -19px;
  box-sizing: border-box;
  border: 5px solid #5e211e;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #e8bc4a, #b07c15 72%);
  box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.45);
  backface-visibility: hidden;
}

/* Placa binaria en la cara trasera del fuselaje (guiño al logo). */
.sv-r3-bin {
  position: absolute;
  left: 50%;
  top: 118px;
  width: 34px;
  margin-left: -17px;
  font: 700 12px/1.5 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 3px;
  text-align: center;
  white-space: pre-line;
  color: #b07c15;
  backface-visibility: hidden;
}

/* Aletas granate en barrido, 3 planos radiales alrededor del eje. */
.sv-r3-fin {
  position: absolute;
  left: 50%;
  top: 168px;
  width: 82px;
  height: 106px;
  transform-origin: left center;
  clip-path: polygon(0% 0%, 38% 8%, 78% 38%, 100% 74%, 86% 100%, 52% 86%, 0% 72%);
  background: linear-gradient(135deg, #7b2d24, #55201b 55%, #3f1613);
}

/* Llama: planos cruzados (rotateY via --fa) con parpadeo, mas nucleo claro. */
.sv-r3-flame {
  position: absolute;
  left: 50%;
  top: 264px;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.sv-r3-flame::before {
  content: "";
  position: absolute;
  left: -45px;
  top: -26px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 80, 0.85) 0%, rgba(255, 120, 30, 0.35) 45%, transparent 70%);
  filter: blur(4px);
}
.sv-r3-flame-plane {
  position: absolute;
  left: -23px;
  top: 0;
  width: 46px;
  height: 124px;
  transform-origin: 50% 0;
  clip-path: polygon(30% 0%, 70% 0%, 88% 16%, 78% 38%, 62% 60%, 50% 100%, 38% 60%, 22% 38%, 12% 16%);
  background: linear-gradient(to bottom,
    #fff3c4 0%, #ffc845 22%, #f7941d 48%, #e04e1b 72%, rgba(140, 42, 30, 0) 100%);
  animation: svFlameFlicker 0.16s ease-in-out infinite alternate;
}
.sv-r3-flame-core {
  left: -13px;
  width: 26px;
  height: 82px;
  clip-path: polygon(30% 0%, 70% 0%, 90% 20%, 70% 55%, 50% 100%, 30% 55%, 10% 20%);
  background: linear-gradient(to bottom, #fffbe8 0%, #ffd866 40%, rgba(255, 162, 36, 0) 100%);
}

/* ---- Digitos binarios ascendentes (como en el logo) --------------------- */
.sv-launch__bits {
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 240px;
  height: 50%;
  transform: translateX(-50%);
  color: #c08a19;
  font: 700 18px/1 'JetBrains Mono', ui-monospace, monospace;
}
.sv-launch__bits span {
  position: absolute;
  bottom: 0;
  opacity: 0;
  text-shadow: 0 0 10px rgba(192, 138, 25, 0.55);
  will-change: transform, opacity;
  animation: svBitRise 1.8s ease-out forwards;
}
.sv-launch__bits span:nth-child(1) { left: 12%; animation-delay: 0.30s; font-size: 15px; }
.sv-launch__bits span:nth-child(2) { left: 80%; animation-delay: 0.45s; }
.sv-launch__bits span:nth-child(3) { left: 26%; animation-delay: 0.62s; font-size: 22px; }
.sv-launch__bits span:nth-child(4) { left: 66%; animation-delay: 0.78s; font-size: 14px; }
.sv-launch__bits span:nth-child(5) { left: 6%;  animation-delay: 0.95s; font-size: 20px; }
.sv-launch__bits span:nth-child(6) { left: 88%; animation-delay: 1.10s; font-size: 16px; }
.sv-launch__bits span:nth-child(7) { left: 44%; animation-delay: 1.25s; font-size: 13px; }

/* ---- Resplandor de los motores ----------------------------------------- */
.sv-launch__glow {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 280px;
  height: 280px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 160, 40, 0.55) 0%, rgba(255, 90, 20, 0.25) 35%, transparent 70%);
  filter: blur(6px);
  opacity: 0;
  animation: svGlow 2.5s ease-out forwards;
}

/* ---- Estela de humo ----------------------------------------------------- */
.sv-launch__smoke {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  width: 200px;
  height: 60%;
}
.sv-launch__smoke span {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(220,220,220,0.7) 45%, rgba(180,180,180,0) 72%);
  filter: blur(3px);
  opacity: 0;
  transform: translate(-50%, 0) scale(0.3);
  will-change: transform, opacity;
  animation: svSmoke 1.9s ease-out forwards;
}
/* Stagger: cada bocanada sale un poco despues, con deriva propia. */
.sv-launch__smoke span:nth-child(1)  { --dx:  -34px; animation-delay: 0.18s; }
.sv-launch__smoke span:nth-child(2)  { --dx:   28px; animation-delay: 0.30s; }
.sv-launch__smoke span:nth-child(3)  { --dx:  -18px; animation-delay: 0.42s; width: 60px; height: 60px; }
.sv-launch__smoke span:nth-child(4)  { --dx:   40px; animation-delay: 0.54s; }
.sv-launch__smoke span:nth-child(5)  { --dx:  -46px; animation-delay: 0.66s; width: 64px; height: 64px; }
.sv-launch__smoke span:nth-child(6)  { --dx:   16px; animation-delay: 0.78s; }
.sv-launch__smoke span:nth-child(7)  { --dx:  -28px; animation-delay: 0.90s; width: 70px; height: 70px; }
.sv-launch__smoke span:nth-child(8)  { --dx:   34px; animation-delay: 1.02s; }
.sv-launch__smoke span:nth-child(9)  { --dx:  -12px; animation-delay: 1.14s; width: 74px; height: 74px; }
.sv-launch__smoke span:nth-child(10) { --dx:   42px; animation-delay: 1.26s; }
.sv-launch__smoke span:nth-child(11) { --dx:  -38px; animation-delay: 1.38s; width: 80px; height: 80px; }
.sv-launch__smoke span:nth-child(12) { --dx:   22px; animation-delay: 1.50s; }

/* ---- Boton saltar ------------------------------------------------------- */
.sv-launch__skip {
  position: absolute;
  bottom: 22px;
  right: 22px;
  padding: 8px 16px;
  font: 600 13px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 1px;
  color: #f3d29a;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(243, 210, 154, 0.35);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sv-launch__skip:hover {
  background: rgba(243, 210, 154, 0.16);
  color: #fff;
  border-color: rgba(243, 210, 154, 0.7);
}

/* Estado de salto rapido (clic en saltar / clic en pantalla). */
#sv-launch.is-skipping {
  animation: svIntroFade 0.35s ease-in forwards;
}

/* Pantallas pequenas: encoge el modelo 3D sin tocar la trayectoria. */
@media (max-width: 540px), (max-height: 640px) {
  .sv-r3-tilt { transform: rotateX(7deg) scale3d(0.72, 0.72, 0.72); }
}

/* ===========================================================================
   Escena espacial de fondo (#sv-space, construida por spacefx.js).
   Espacio profundo con nebulosas en la paleta del logo, estrellas en canvas,
   planetas CSS 3D que sobrevuelan con el scroll y el cohete 3D volando.
   El contenido (z-index 1) flota encima en tarjetas de cristal.
   =========================================================================== */
#sv-space {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 78% 10%, rgba(94, 33, 30, 0.26) 0%, rgba(94, 33, 30, 0) 55%),
    radial-gradient(70% 60% at 10% 82%, rgba(192, 138, 25, 0.10) 0%, rgba(192, 138, 25, 0) 60%),
    radial-gradient(120% 100% at 50% 45%, #0b0c12 0%, #07080d 70%, #05060a 100%);
}
.sv-space__stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-space__nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.sv-space__nebula--a { top: -14%; right: -10%; width: 58vw; height: 58vw; background: radial-gradient(circle at 42% 42%, rgba(94, 33, 30, 0.35), rgba(94, 33, 30, 0) 65%); }
.sv-space__nebula--b { bottom: -20%; left: -14%; width: 50vw; height: 50vw; background: radial-gradient(circle at 55% 45%, rgba(192, 138, 25, 0.13), rgba(192, 138, 25, 0) 62%); }

/* ---- Planetas (esferas por gradiente + sombra interna de profundidad) --- */
.sv-planet {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  visibility: hidden;
  will-change: transform;
  z-index: 1;
}
.sv-planet--ring {
  perspective: 640px;
  background:
    radial-gradient(circle at 33% 30%, #9a4a3c 0%, #5e211e 52%, #23100e 100%);
  box-shadow: inset -26px -22px 70px rgba(0, 0, 0, 0.65), 0 0 70px rgba(94, 33, 30, 0.28);
}
.sv-planet__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 172%;
  height: 172%;
  margin: -86% 0 0 -86%;
  border-radius: 50%;
  border: 2px solid rgba(192, 138, 25, 0.55);
  transform: rotateX(74deg);
  box-shadow: 0 0 18px rgba(192, 138, 25, 0.2);
}
.sv-planet__ring--b {
  width: 194%;
  height: 194%;
  margin: -97% 0 0 -97%;
  border-color: rgba(192, 138, 25, 0.24);
}
.sv-planet--gold {
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 243, 205, 0.4) 0%, rgba(255, 243, 205, 0) 46%),
    radial-gradient(circle at 68% 78%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 58%),
    repeating-linear-gradient(174deg, #d9a82d 0 16px, #b07c15 16px 30px, #8c5f12 30px 46px, #b07c15 46px 58px);
  box-shadow: inset -34px -28px 90px rgba(0, 0, 0, 0.6), 0 0 90px rgba(192, 138, 25, 0.16);
}
.sv-planet--moon {
  background:
    radial-gradient(14% 14% at 62% 38%, rgba(0, 0, 0, 0.22) 0 68%, transparent 70%),
    radial-gradient(10% 10% at 34% 60%, rgba(0, 0, 0, 0.2) 0 68%, transparent 70%),
    radial-gradient(8% 8% at 52% 74%, rgba(0, 0, 0, 0.16) 0 68%, transparent 70%),
    radial-gradient(circle at 35% 32%, #f6ead7 0%, #cbbfa8 55%, #837a67 100%);
  box-shadow: inset -14px -12px 40px rgba(0, 0, 0, 0.5), 0 0 44px rgba(246, 234, 215, 0.14);
  z-index: 3; /* pasa por delante del cohete (profundidad) */
}
.sv-planet--dark {
  background:
    radial-gradient(3% 3% at 58% 36%, rgba(192, 138, 25, 0.9) 0 60%, transparent 65%),
    radial-gradient(2.4% 2.4% at 44% 52%, rgba(192, 138, 25, 0.75) 0 60%, transparent 65%),
    radial-gradient(2% 2% at 66% 60%, rgba(192, 138, 25, 0.65) 0 60%, transparent 65%),
    radial-gradient(2.6% 2.6% at 34% 38%, rgba(192, 138, 25, 0.5) 0 60%, transparent 65%),
    radial-gradient(circle at 30% 28%, #3d4257 0%, #171922 58%, #0a0b10 100%);
  box-shadow: inset -30px -26px 80px rgba(0, 0, 0, 0.7), 0 0 70px rgba(61, 66, 87, 0.25);
}

/* ---- Cohete de la escena (fijo, arrastrable) ----------------------------- */
.sv-space__ship {
  position: absolute;
  left: 71%;
  top: 52%;
  width: 240px;
  height: 400px;
  margin: -200px 0 0 -120px;
  z-index: 2;
  pointer-events: auto;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.55));
  will-change: transform, left, top;
}
.sv-space__ship.is-grabbing { cursor: grabbing; }
.sv-space__ship .sv-r3-float {
  position: absolute;
  inset: 0;
  perspective: 1000px;
  animation: svShipFloat 7s ease-in-out infinite;
}
@keyframes svShipFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* ===========================================================================
   Raíles laterales ligados al scroll (#sv-rails, construidos por scrollfx.js).
   Decorativos: trayectoria de vuelo con mini cohete 3D a la derecha y
   órbitas binarias a la izquierda. Solo en pantallas anchas.
   =========================================================================== */
#sv-rails {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  display: none;
}
@media (min-width: 1400px) {
  #sv-rails { display: block; }
}

/* ---- Izquierda: órbitas 3D + chips binarios ----------------------------- */
.sv-rail--left {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 96px;
  height: 300px;
  perspective: 700px;
}
.sv-rail__ring {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.sv-rail__ring--a {
  top: 34%;
  left: 0;
  width: 92px;
  height: 92px;
  border: 1.5px dashed rgba(192, 138, 25, 0.5);
}
.sv-rail__ring--b {
  top: 40%;
  left: 14px;
  width: 64px;
  height: 64px;
  border: 1.5px dotted rgba(94, 33, 30, 0.45);
}
.sv-rail__bit {
  position: absolute;
  font: 700 12px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.08em;
  will-change: transform;
}
.sv-rail__bit--a { top: 16%; left: 20px; color: rgba(192, 138, 25, 0.6); }
.sv-rail__bit--b { bottom: 12%; left: 44px; color: rgba(94, 33, 30, 0.55); }

/* ---- Derecha: trayectoria de vuelo con mini cohete 3D ------------------- */
.sv-rail--right {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translate(50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.sv-rail__track {
  position: relative;
  width: 2px;
  height: 54vh;
}
.sv-rail__line {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg,
    rgba(192, 138, 25, 0.45) 0 6px, transparent 6px 12px);
}
.sv-rail__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: #C08A19;
  box-shadow: 0 0 8px rgba(192, 138, 25, 0.55);
}
/* Caja del modelo (240x400) reducida a escala de la trayectoria. La rueda
   del ascenso (rotateY) la fija scrollfx.js sobre .sv-r3-spin. */
.sv-rail__ship {
  position: absolute;
  left: 50%;
  top: 88%;
  width: 240px;
  height: 400px;
  margin-left: -120px;
  transform: translateY(-50%) scale(0.15);
  perspective: 900px;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3));
  will-change: top;
}
.sv-rail__alt {
  font: 700 10.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: #9a9a9a;
}

/* ===========================================================================
   Keyframes
   =========================================================================== */
@keyframes svRocketLaunch {
  0%   { transform: translate(-50%, -50%) translate(0, 36vh) scale(0.8); opacity: 0; }
  8%   { opacity: 1; }
  /* Rumble en la plataforma antes de despegar. */
  20%  { transform: translate(-50%, -50%) translate(0, 30vh) scale(0.84); }
  24%  { transform: translate(-50%, -50%) translate(-0.6vw, 30.6vh) rotate(1.2deg) scale(0.84); }
  28%  { transform: translate(-50%, -50%) translate(0.6vw, 30vh) rotate(-1.2deg) scale(0.84); }
  32%  { transform: translate(-50%, -50%) translate(-0.3vw, 29.4vh) rotate(0.6deg) scale(0.86); }
  /* Despegue acelerado hacia arriba con leve deriva. */
  100% { transform: translate(-50%, -50%) translate(5vw, -125vh) rotate(-4deg) scale(1.08); opacity: 1; }
}

/* Rodadura sobre el eje: lenta en plataforma, acelera en el ascenso. */
@keyframes svRocketSpin {
  0%   { transform: rotateY(-24deg); }
  32%  { transform: rotateY(4deg); }
  100% { transform: rotateY(210deg); }
}

/* Parpadeo de la llama (la orientacion del plano viene en --fa). */
@keyframes svFlameFlicker {
  from { transform: rotateY(var(--fa, 0deg)) scale3d(1, 1, 1); opacity: 0.95; }
  to   { transform: rotateY(var(--fa, 0deg)) scale3d(0.9, 1.16, 1); opacity: 1; }
}

@keyframes svBitRise {
  0%   { opacity: 0; transform: translateY(0); }
  18%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-46vh); }
}

@keyframes svGlow {
  0%, 18%  { opacity: 0; transform: translateX(-50%) scale(0.6); }
  34%      { opacity: 0.9; transform: translateX(-50%) scale(1); }
  100%     { opacity: 0; transform: translateX(-50%) translateY(40px) scale(1.4); }
}

@keyframes svSmoke {
  0%   { opacity: 0;    transform: translate(-50%, 0) scale(0.3); }
  20%  { opacity: 0.9; }
  100% { opacity: 0;    transform: translate(calc(-50% + var(--dx, 0px)), -260px) scale(1.6); }
}

@keyframes svIntroFade {
  to { opacity: 0; visibility: hidden; }
}

/* Accesibilidad: sin animacion para quien la desactiva. */
@media (prefers-reduced-motion: reduce) {
  #sv-launch { display: none; }
  #sv-rails { display: none !important; }
  #sv-space .sv-r3-float { animation: none; }
  #sv-space .sv-r3-flame-plane { animation: none; }
}