/* ============================================================
   AKIRA · PRELOADER (boceto 2026-10-15) — 3 variantes: ?v=corte | amanecer | enso
   Todo lo que se mueve es transform / opacity (el compositor lo anima aunque el hilo principal esté ocupado
   preparando el 3D). El orden de los elementos lo arma preloader.js.
   ============================================================ */
#pre{position:fixed;inset:0;z-index:300;overflow:hidden;touch-action:none;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
html.pre-on,html.pre-on body{overflow:hidden}
#pre *{box-sizing:border-box}
.pre-fondo{position:absolute;inset:0;will-change:opacity}
.pre-num{font:500 13px/1 var(--font-m);letter-spacing:.12em;font-variant-numeric:tabular-nums}
.pre-txt{display:block;margin-top:10px;font:500 10px/1.3 var(--font-m);letter-spacing:.2em;text-transform:uppercase}
.pre-txt b{font-weight:500;letter-spacing:.3em;margin-right:.2em}

/* ---------- 1 · CORTE: telón negro, la katana se desenvaina con la carga ---------- */
.v-corte .pre-fondo{background:#0b0b0b}
.pc-mitad{position:absolute;inset:0;background:#0b0b0b;display:none;will-change:transform}
.pc-marca{position:absolute;left:0;right:0;top:34%;text-align:center;color:#f2f2ef;
  font:500 clamp(30px,5.4vw,66px)/1 var(--font-d);letter-spacing:.18em;padding-left:.18em;will-change:opacity,filter}
.pc-katana{position:absolute;left:50%;top:51%;width:min(88vw,860px);aspect-ratio:2/1;
  background:url("/assets/images/akira/katana.svg") center/contain no-repeat;overflow:hidden;transform:translate(-50%,-50%);will-change:transform,opacity}
.pc-cortina{position:absolute;left:0;top:36%;height:30%;width:73.8%;background:#0b0b0b;will-change:transform}
.pc-brillo{position:absolute;left:0;top:0;width:3px;height:16%;border-radius:2px;background:var(--red);
  box-shadow:0 0 14px 3px rgba(255,77,61,.6);will-change:transform,opacity}
.pc-linea{position:absolute;left:0;top:0;width:300vmax;height:2px;background:var(--red);
  box-shadow:0 0 22px 2px rgba(255,77,61,.75);transform-origin:50% 50%;opacity:0;will-change:transform,opacity}
.v-corte .pre-info{position:absolute;left:0;right:0;top:63%;text-align:center;color:rgba(242,242,239,.6)}
.v-corte .pre-num{color:#f2f2ef}

/* ---------- la página detrás: el titular entra cuando abre el telón ---------- */
html.con-pre .h1 .l{transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
html.con-pre .h1 .l:nth-child(2){transition-delay:.07s}
html.con-pre .h1 .l:nth-child(3){transition-delay:.14s}
html.con-pre:not(.abierto) .h1 .l{opacity:0;transform:translateY(.32em)}
html.con-pre .hero-copy{transition:opacity .9s var(--ease) .3s,transform 1s var(--ease) .3s}
html.con-pre:not(.abierto) .hero-copy{opacity:0;transform:translateY(14px)}
html.con-pre .katana-x{transition:opacity .35s linear}
html.con-pre:not(.h1-listo) .katana-x{opacity:0}