/* ═══════════════════════════════════════════════════════════════════════════
   EL ARRANQUE — lo primero que se ve de BUHOS

   QUÉ SE RECUPERA. El chasis V3 estrenó seis zonas y se dejó por el camino la
   entrada: la ventana pasó a abrirse directamente sobre el panel, en frío. La
   secuencia seguía viva en el `index.html` anterior (commit bd2fb7c) y de allí
   sale esto — el campo de partículas que converge, la marca que se materializa,
   el pulso de energía y los pasos del arranque.

   QUÉ CAMBIA respecto al original. Dos cosas, y las dos importan:

   · EL COLOR. El splash viejo era cian/azul/morado, de cuando BUHOS no tenía
     paleta propia. Ahora la tiene y SIGNIFICA algo: dorado = BUHOS, azul = lo
     que tú accionas, morado = la IA. La entrada usa las tres, empezando por el
     dorado, porque lo que se está presentando es la marca.

   · EL TIEMPO. El original imponía un mínimo de cinemática y hacía esperar aun
     cuando la aplicación ya estaba lista. Aquí la animación NO retrasa nada:
     corre ENCIMA del arranque real, que va por debajo a toda velocidad, y se
     cierra en cuanto el escritorio está montado.

     Por eso la coreografía está COMPRIMIDA a ~1,35 s: el arranque real termina
     en algo más de un segundo, y con los tiempos heredados —la marca empezaba a
     los 0,35 s y el nombre a los 1,35 s— la entrada se apartaba con el búho a
     medio dibujar. Aquí manda el arranque; la animación cabe dentro de él.
     El suelo de 1.500 ms vive en `cine.js`, con su motivo.

   ACCESIBILIDAD. Con `prefers-reduced-motion` no hay animación ni partículas:
   se ve la marca quieta y se entra. No es una versión degradada — es la misma
   pantalla sin movimiento.
═══════════════════════════════════════════════════════════════════════════ */

/* LA ENTRADA SIGUE AL TEMA, y no por purismo: una entrada siempre oscura
   terminaba en un fogonazo blanco al abrirse un escritorio en tema claro. Lo
   que cambia entre temas no es sólo el fondo — las partículas se dibujan a
   mano en un canvas y sobre blanco no se veían: 90 puntos al 10 % de alfa
   sobre `#0B0C0F` son una constelación; sobre `#FFF` no hay nada. `--cine-alfa`
   es lo que las hace legibles en los dos, y lo lee el JS (no hay un segundo
   sitio donde decidir el color). */
:root{ --cine-alfa:1; --cine-aurora-o:.5; }
:root[data-tema="claro"]{ --cine-alfa:2.6; --cine-aurora-o:.85; }
@media (prefers-color-scheme: light){
  :root:not([data-tema]){ --cine-alfa:2.6; --cine-aurora-o:.85; }
}

#cine{
  position:fixed; inset:0; z-index:9000; display:grid; place-items:center;
  background:var(--bg); overflow:hidden;
  transition:opacity 520ms var(--curva-sal), visibility 0s linear 520ms;
}
#cine.fuera{ opacity:0; visibility:hidden; pointer-events:none; }
/* El chasis no se ve hasta que la entrada se aparta: sin esto, el escritorio
   asoma por detrás medio montado durante la transición. */
body.arrancando #shell{ opacity:0; }
#shell{ transition:opacity 420ms var(--curva); }

#cine-cv{ position:absolute; inset:0; pointer-events:none; }

/* La aurora: tres manchas de color que respiran. Es lo único del fondo que no
   es canvas, y va en CSS porque una animación de gradiente la hace la GPU. */
#cine-aurora{
  position:absolute; inset:-20%; pointer-events:none; opacity:var(--cine-aurora-o);
  background:
    radial-gradient(ellipse 46% 38% at 30% 42%, rgba(224,178,82,.13), transparent 70%),
    radial-gradient(ellipse 40% 34% at 70% 60%, rgba(161,117,255,.11), transparent 70%),
    radial-gradient(ellipse 30% 26% at 52% 30%, rgba(76,134,255,.09), transparent 70%);
  animation:cineAurora 8s ease-in-out infinite;
}
@keyframes cineAurora{
  0%,100%{ transform:translate(0,0) scale(1) }
  33%    { transform:translate(2.5%,-2%) scale(1.06) }
  66%    { transform:translate(-2%,2.5%) scale(.97) }
}

.cine-centro{
  position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; text-align:center;
}

/* ── LA MARCA ───────────────────────────────────────────────────────────────
   El mismo hexágono con dos ojos que lleva la barra de título: es la marca de
   BUHOS, no un dibujo de bienvenida. Se materializa desde el desenfoque y
   después respira. */
#cine-marca{
  width:96px; height:96px; margin-bottom:20px; color:var(--dorado);
  opacity:0; filter:blur(14px); transform:scale(.55);
  animation:cineMarca 1s var(--curva) .05s forwards,
            cineBrillo 3.2s ease-in-out 1.1s infinite;
}
@keyframes cineMarca{
  0%  { opacity:0; filter:blur(14px); transform:scale(.55) }
  55% { opacity:1; filter:blur(3px) }
  100%{ opacity:1; filter:blur(0);   transform:scale(1) }
}
@keyframes cineBrillo{
  0%,100%{ filter:drop-shadow(0 0 12px rgba(224,178,82,.30)) }
  50%    { filter:drop-shadow(0 0 30px rgba(224,178,82,.65)) }
}
/* El hexágono se DIBUJA, no aparece: el trazo se recorre en 1,4 s.
   52 = el perímetro real de ESTE hexágono (seis lados de 8,4 en un viewBox de
   20). El valor heredado era 300, que es el del logo antiguo en un viewBox de
   100: con él la animación terminaba con cinco sextos del trazo todavía
   escondidos y en pantalla se veía un garabato dorado en vez de la marca. */
#cine-marca .hex{ stroke-dasharray:52; stroke-dashoffset:52;
  animation:cineTrazo 1s cubic-bezier(.6,0,.3,1) .1s forwards; }
@keyframes cineTrazo{ to{ stroke-dashoffset:0 } }
#cine-marca .ojos{ opacity:0; animation:cineOjos 420ms ease .78s forwards; }
@keyframes cineOjos{ to{ opacity:1 } }

/* El pulso: la onda que sale del búho justo cuando termina de materializarse. */
#cine-pulso{
  position:absolute; top:0; left:50%; width:96px; height:96px; margin-left:-48px;
  border-radius:50%; pointer-events:none; z-index:1; opacity:0; transform:scale(.6);
  border:1.5px solid rgba(224,178,82,.5);
  box-shadow:0 0 40px rgba(224,178,82,.22), inset 0 0 30px rgba(76,134,255,.14);
  animation:cinePulso 1.4s cubic-bezier(.2,.6,.3,1) .85s;
}
#cine-pulso::after{
  content:''; position:absolute; inset:-2px; border-radius:50%;
  border:1px solid rgba(161,117,255,.38); animation:inherit; animation-delay:1.05s;
}
@keyframes cinePulso{
  0%  { opacity:0; transform:scale(.6) }
  12% { opacity:1 }
  100%{ opacity:0; transform:scale(7) }
}

#cine-nombre{
  font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.2;
  background:linear-gradient(135deg,var(--dorado2),var(--azul2),var(--morado2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:cineSube 560ms var(--curva) .62s both;
}
#cine-lema{
  font-size:var(--fz-1); color:var(--t3); letter-spacing:var(--rotulo-esp);
  text-transform:uppercase; margin:7px 0 24px;
  animation:cineSube 560ms var(--curva) .76s both;
}
@keyframes cineSube{
  from{ opacity:0; transform:translateY(9px) }
  to  { opacity:1; transform:translateY(0) }
}

/* ── LOS PASOS ──────────────────────────────────────────────────────────────
   No son decorativos: cada uno se marca cuando la fase correspondiente del
   arranque TERMINA de verdad. Un paso que se pinta solo con un temporizador es
   una barra de carga falsa, y eso ya lo hace todo el mundo. */
#cine-pasos{
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  min-width:250px; margin-bottom:18px; min-height:76px;
}
.cine-paso{
  display:flex; align-items:center; gap:9px; font-size:var(--fz-1);
  font-family:var(--mono); color:var(--t4);
  animation:cineSube 260ms ease both;
}
.cine-paso .p-ic{ width:13px; text-align:center; color:var(--t4); }
.cine-paso.yendo{ color:var(--t2); }
.cine-paso.yendo .p-ic{ color:var(--azul); }
.cine-paso.hecho{ color:var(--t3); }
.cine-paso.hecho .p-ic{ color:var(--verde); }

.cine-via{
  width:260px; height:2px; background:var(--s2); border-radius:2px;
  overflow:hidden; animation:cineSube 420ms ease .5s both;
}
#cine-barra{
  height:100%; width:0; border-radius:2px;
  background:linear-gradient(90deg,var(--dorado),var(--azul));
  box-shadow:0 0 12px rgba(76,134,255,.5);
  transition:width 380ms var(--curva);
}
#cine-nota{
  font-size:var(--fz-1); font-family:var(--mono); color:var(--t4);
  margin-top:11px; min-height:15px;
}
#cine-saltar{
  position:absolute; bottom:26px; left:0; right:0; text-align:center;
  font-size:var(--fz-1); font-family:var(--mono); color:var(--t4);
  letter-spacing:.1em; z-index:2; animation:cineSube 700ms ease 1.1s both;
}

/* ── SIN MOVIMIENTO ─────────────────────────────────────────────────────────
   Quien pide menos animación ve la marca quieta y entra igual. Las partículas
   ni se dibujan (lo comprueba también el JS: no se gasta un canvas). */
@media (prefers-reduced-motion: reduce){
  #cine-marca, #cine-marca .hex, #cine-marca .ojos, #cine-nombre, #cine-lema,
  #cine-pulso, #cine-saltar, .cine-paso, .cine-via, #cine-aurora{
    animation:none !important; opacity:1 !important; transform:none !important;
    filter:none !important; stroke-dashoffset:0 !important;
  }
  #cine-pulso{ opacity:0 !important; }
  #cine-cv{ display:none; }
  #cine{ transition:opacity 120ms linear; }
}