/* ===========================================================
   INTRO-PRELOADER — reproduce una vez, a pantalla completa y
   ANTES de nada, la misma escena del barco del HERO (acercándose
   y alejándose hasta fundirse con los circuitos) — ver
   js/intro-preloader.js, que dibuja los mismos fotogramas de
   assets/hero-frames/ con el mismo criterio de encuadre que
   css/hero-scrub.css (contain+fundido en escritorio, ventana con
   paneo en móvil), pero por tiempo (6s fijos) en vez de por scroll.

   Componente aislado: depende solo de las variables ya definidas
   en :root por css/style.css (--color-hero-bg, --ease-out). */

.intro-preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: var(--color-hero-bg, #030303);
  transition: opacity 700ms var(--ease-out, ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.intro-preloader.is-hidden { opacity: 0; pointer-events: none; }

/* El canvas (JS) ya centra y escala el fotograma al tamaño de la
   ventana en cualquier proporción — ver drawFrameImage en
   js/intro-preloader.js (mismo criterio "contain" que el HERO real
   en escritorio, ventana con paneo centrada en móvil). Aquí solo se
   ancla a toda la pantalla. */
.intro-preloader__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Velo simétrico (a diferencia del HERO real, cuyo degradado es
   diagonal porque el texto va a la izquierda): aquí el texto va
   centrado, así que oscurece el centro de la escena por igual a
   ambos lados para que se lea bien encima de cualquier fotograma. */
.intro-preloader__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.05) 70%),
    linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 30%);
}

/* Texto centrado. ESCRITORIO: las dos líneas van juntas, en el mismo
   bloque centrado, a la MITAD del tamaño que .hero__title (clamp con
   cada valor a la mitad: 2.2/5vw/4.2 → 1.1/2.5vw/2.1). MÓVIL (ver
   media query más abajo): se separan, cada una a un extremo de la
   pantalla, y recuperan el tamaño original de .hero__title en móvil
   (clamp 2rem/8vw/2.8rem, ver css/style.css) — aquí no se pidió
   reducirlas, solo repartirlas. */
.intro-preloader__content {
  position: relative;
  z-index: 2;
  /* Ancho generoso a propósito: con el texto centrado y solo dos
     líneas cortas, el límite real que importa es que cada línea
     quepa entera sin partirse, no forzar un ancho de lectura tipo
     párrafo. */
  max-width: 1000px;
  width: 100%;
  padding-inline: var(--space-3, 1.5rem);
  text-align: center;
}
.intro-preloader__line {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-white);
  font-size: clamp(1.1rem, 2.5vw, 2.1rem);
  line-height: 1.08;
  margin: 0;
}
.intro-preloader__line--2 { margin-top: var(--space-2, 1rem); }

/* Salto de línea forzado SOLO en móvil (ver override más abajo) —
   mismo criterio que .hero__subtitle-break en css/hero-scrub.css. En
   escritorio no se pidió partir las frases, así que aquí se ignora. */
.intro-preloader__break { display: none; }

@media (max-width: 768px) {
  .intro-preloader__break { display: inline; }
  /* Cada línea se ancla al borde real del dibujo, no a los extremos
     de la pantalla: --intro-art-top/--intro-art-bottom los calcula y
     actualiza js/intro-preloader.js (drawFrameImage) a partir de las
     mismas dy/dh con las que se dibuja el fotograma en el canvas, así
     que siempre coinciden exactamente con dónde empieza/acaba el
     barco en cada dispositivo (los valores de aquí son solo un
     respaldo por si el JS no llegara a ejecutarse todavía). */
  .intro-preloader__content {
    position: absolute;
    inset: 0;
    max-width: none;
    padding-inline: var(--space-3, 1.5rem);
  }
  .intro-preloader__line {
    position: absolute;
    left: 50%;
    width: calc(100% - 2 * var(--space-3, 1.5rem));
    font-size: clamp(2rem, 8vw, 2.8rem);
  }
  .intro-preloader__line--1 {
    /* +2rem hacia dentro (más cerca de la línea 2) respecto al borde
       real del dibujo, +100px más para bajarla más todavía. */
    top: calc(var(--intro-art-top, 18vh) + 2rem + 100px);
    /* apoyada por su borde inferior, justo encima del dibujo */
    transform: translate(-50%, -100%);
    padding-bottom: 0.6rem;
  }
  .intro-preloader__line--2 {
    /* -2rem hacia dentro (más cerca de la línea 1), -100px más para
       subirla más todavía. */
    top: calc(var(--intro-art-bottom, 82vh) - 2rem - 100px);
    /* apoyada por su borde superior, justo debajo del dibujo */
    transform: translate(-50%, 0);
    margin-top: 0;
    padding-top: 0.6rem;
  }
}

/* Bloquea el scroll de fondo mientras se reproduce (ver
   js/intro-preloader.js, clase añadida/quitada en <html>). */
html.intro-locked,
html.intro-locked body {
  overflow: hidden;
  height: 100%;
}

/* Visita repetida: la marca la pone el script del <head> de index.html. */
html.intro-seen .intro-preloader { display: none; }

@media (prefers-reduced-motion: reduce) {
  .intro-preloader { display: none; }
}