/*
 * Quomya — Arranque de la aplicación (APP_BOOT_SPLASH_V1).
 *
 * Experiencia de apertura aprobada por el propietario:
 *
 *   DESIGN B — QUOMYA PULSE REVEAL
 *   VARIANTE — CONTOURED SHINE SUBTLE
 *
 * Este archivo es la traducción FIEL del laboratorio aprobado
 * (`Quomya-Splash-Lab`, design B) al árbol real del producto. No es un diseño
 * nuevo: reproduce la misma secuencia, la misma geometría y el mismo brillo
 * recortado.
 *
 * -------------------------------------------------------------------------
 * POR QUÉ ES CSS PURO Y SIN CLASE DE ARRANQUE
 * -------------------------------------------------------------------------
 * La pantalla de arranque debe verse en el PRIMER pintado, por delante de
 * cualquier módulo JavaScript. Por eso las animaciones no dependen de ninguna
 * clase que añada un guion: viven en el propio elemento y arrancan solas en
 * cuanto el navegador lo pinta. El único estado que JavaScript controla es la
 * SALIDA (`--ready`, `--gone`), que es lo único que depende de la aplicación.
 *
 * -------------------------------------------------------------------------
 * POR QUÉ NO PUEDE APARECER UNA BANDA RECTANGULAR NI UN REFLEJO
 * -------------------------------------------------------------------------
 * El brillo de contorno NO es un rectángulo de color: es una banda interna
 * recortada por `mask-image` con el PROPIO SVG oficial del lockup. La máscara
 * es estática; lo único que se mueve es la banda interior, de modo que lo
 * pintado queda SIEMPRE dentro de la silueta real del símbolo y de las letras.
 * Se retiró el rectángulo de fondo incrustado del SVG de marca (capa
 * transparente), así que no hay ningún elemento que pueda producir el reflejo
 * ni la marca fantasma que el propietario rechazó.
 *
 * La capa de brillo queda `display:none` por defecto y solo se enciende donde
 * el navegador demuestra soportar `mask-image`: sin máscara no hay brillo, en
 * vez de un rectángulo visible.
 */

html.qy-boot-active {
  /*
   * Fondo de arranque. `styles.css` deja `html` en claro; mientras la pantalla
   * de arranque está activa el hueco antes del primer pintado se rellena con
   * el tinte oscuro de Quomya para que no aparezca ningún destello blanco. La
   * clase la retira el guion de arranque al terminar.
   */
  background-color: #071a26;
}

.qy-boot-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(150deg, #071a26 0%, #0a2130 55%, #0e2c36 100%);
  opacity: 1;

  /*
   * La pantalla es puramente VISUAL: nunca captura el puntero. La navegación
   * ya está oculta hasta que la sesión es privada, así que no hay nada que
   * "proteger" durante el arranque, y tragarse los toques solo añadiría un
   * intervalo muerto —y un modo de fallo real: una superficie que intercepta
   * clics sin mostrarse—. Sin captura, un toque que llegue durante el fundido
   * simplemente alcanza la aplicación que ya está debajo.
   */
  pointer-events: none;
}

.qy-boot-splash--ready {
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.qy-boot-splash--gone {
  display: none;
}

/*
 * Al salir se detienen las animaciones decorativas (incluido el reposo) para
 * que el fundido no herede ningún movimiento.
 */
.qy-boot-splash--ready .qy-boot-logo,
.qy-boot-splash--ready .qy-boot-entrance,
.qy-boot-splash--ready .qy-boot-contour,
.qy-boot-splash--ready .qy-boot-contour-band,
.qy-boot-splash--ready .qy-boot-hairline,
.qy-boot-splash--ready .qy-boot-line-spark {
  animation: none;
}

.qy-boot-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    closest-side at 50% 47%,
    rgba(18, 191, 166, 0.16),
    transparent 72%
  );
  opacity: 0.9;
}

.qy-boot-logo {
  position: relative;
  width: 62%;
  max-width: 320px;
  min-width: 190px;
  transform-origin: center center;
  animation: qyBootBreath 2500ms cubic-bezier(0.4, 0, 0.2, 1) 1000ms infinite;
}

.qy-boot-entrance {
  position: relative;
  transform-origin: center center;
  animation: qyBootRevealB 500ms cubic-bezier(0.22, 1, 0.36, 1) 150ms both;
}

.qy-boot-logo-img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}

/* ---- brillo de contorno: silueta estática + banda interior en movimiento ---- */
.qy-boot-contour {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: url("/assets/brand/quomya-logo-horizontal-light-transparent.svg?v=quomya-boot-splash-v1");
          mask-image: url("/assets/brand/quomya-logo-horizontal-light-transparent.svg?v=quomya-boot-splash-v1");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

@supports (-webkit-mask-image: url("x")) or (mask-image: url("x")) {
  .qy-boot-contour {
    display: block;
    animation: qyBootShineFade 520ms cubic-bezier(0.4, 0, 0.2, 1) 470ms both;
  }
}

.qy-boot-contour-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  background: linear-gradient(
    90deg,
    rgba(127, 233, 218, 0) 0%,
    rgba(127, 233, 218, 0.16) 34%,
    rgba(127, 233, 218, 0.6) 50%,
    rgba(127, 233, 218, 0.16) 66%,
    rgba(127, 233, 218, 0) 100%
  );
  /* translateX en % se resuelve contra el ancho propio de la banda:
     -100% => fuera por la izquierda; +200% => fuera por la derecha. Un solo paso. */
  transform: translateX(-100%);
  will-change: transform;
  animation: qyBootContourSweep 600ms cubic-bezier(0.33, 1, 0.68, 1) 470ms both;
}

/* ---- línea fina bajo el lockup ---- */
.qy-boot-hairline {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  width: 74%;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  animation: qyBootLineFade 350ms cubic-bezier(0.4, 0, 0.2, 1) 650ms both;
}

.qy-boot-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(84, 226, 203, 0.3) 22%,
    rgba(84, 226, 203, 0.62) 50%,
    rgba(84, 226, 203, 0.3) 78%,
    transparent 100%
  );
}

.qy-boot-line-spark {
  position: absolute;
  top: -0.5px;
  left: 0;
  width: 64px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(224, 255, 250, 0.95),
    transparent
  );
  transform: translateX(-80px);
  animation: qyBootSpark 350ms cubic-bezier(0.4, 0, 0.2, 1) 650ms both;
}

/* ==========================================================================
   LÍNEA DE TIEMPO COMPARTIDA (pantalla siempre oscura)
   ========================================================================== */

/* 150–650 ms · aparición de izquierda a derecha + escala .96 → 1 */
@keyframes qyBootRevealB {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: scale(0.96);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
}

/* 470–1070 ms · brillo de contorno, un único paso izquierda → derecha */
@keyframes qyBootShineFade {
  0% {
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  84% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes qyBootContourSweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(200%);
  }
}

/* 650–1000 ms · barrido de la línea fina */
@keyframes qyBootLineFade {
  0% {
    opacity: 0;
  }
  22% {
    opacity: 0.95;
  }
  70% {
    opacity: 0.62;
  }
  100% {
    opacity: 0;
  }
}

@keyframes qyBootSpark {
  0% {
    transform: translateX(-80px);
  }
  100% {
    transform: translateX(260px);
  }
}

/* reposo · respiración muy sutil durante cargas largas (no repite el brillo) */
@keyframes qyBootBreath {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.008);
  }
}

/* ==========================================================================
   MOVIMIENTO REDUCIDO
   ========================================================================== */

/*
 * Sin barrido, sin brillo, sin respiración y sin escala significativa: el
 * lockup aparece con un fundido corto y controlado. La salida sigue siendo un
 * fundido breve. La usabilidad se conserva intacta.
 */
@media (prefers-reduced-motion: reduce) {
  .qy-boot-contour,
  .qy-boot-hairline {
    display: none;
  }

  .qy-boot-logo,
  .qy-boot-entrance {
    animation: none;
  }

  .qy-boot-logo-img {
    animation: qyBootCleanIn 300ms cubic-bezier(0.4, 0, 0.2, 1) 60ms both;
  }

  .qy-boot-splash--ready {
    transition-duration: 190ms;
  }
}

@keyframes qyBootCleanIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}