/* Propuesta B · animación al estilo de la referencia industrial.
   Pantalla de carga con nuestros dibujos de línea, bloques que se barren de arriba abajo,
   titulares que aparecen letra a letra y textos de sistema (mono) que se descifran. */

/* Pantalla de carga */
.ldr{position:fixed;inset:0;z-index:200;background:var(--gra);color:#9a9a96;display:grid;place-items:center;
  clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.83,0,.17,1)}
.ldr.out{clip-path:inset(0 0 100% 0)}
.ldr.gone{display:none}
.ldr__in{display:flex;flex-direction:column;align-items:center;gap:22px}
.ldr__fig{width:168px;height:168px;overflow:visible}
.ldr__fig line{stroke:#d6d5d0;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linecap:square}
.ldr__txt{font-family:'Azeret Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;display:flex;gap:18px;min-width:180px;justify-content:space-between}
.ldr__dots::after{content:"";display:inline-block;width:3ch;text-align:left;animation:ldrDots 1.2s steps(4) infinite}
@keyframes ldrDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.no-motion .ldr{display:none}

/* Mientras la carga tapa la página, la portada se queda en su estado inicial */
.ldr-hold .hero [data-reveal],.ldr-hold .phead [data-reveal],.ldr-hold .pimg[data-reveal],.ldr-hold .hdr{transition:none!important}
.ldr-hold .hero [data-reveal="wipe"],.ldr-hold .phead [data-reveal="wipe"]{clip-path:inset(0 0 100% 0)!important}
.ldr-hold .hero [data-reveal="img"],.ldr-hold .phead [data-reveal="img"],.ldr-hold .pimg[data-reveal]{clip-path:inset(0 0 100% 0)!important}

/* Bloques e imágenes: barrido de arriba abajo, en cascada */
.motion-b.has-motion [data-reveal="wipe"],.motion-b.has-motion [data-reveal="img"]{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.83,0,.17,1)}
.motion-b.has-motion [data-reveal="wipe"].in,.motion-b.has-motion [data-reveal="img"].in{clip-path:inset(0 0 0 0)}
.motion-b.has-motion .hero__main,.motion-b.has-motion .phead > *{transition:clip-path 1s cubic-bezier(.83,0,.17,1)}

/* Cabecera: baja al terminar la carga */
.motion-b.has-motion .hdr{transform:translateY(-100%);transition:transform .8s cubic-bezier(.16,1,.3,1),background .45s ease}
.motion-b.has-motion.ldr-done .hdr{transform:none}

/* Titulares letra a letra: primero tenues, luego sólidas */
.motion-b.has-motion [data-split] .mw{overflow:visible}
.motion-b.has-motion [data-split] .mw-i{transform:none!important;transition:none!important}
.motion-b.has-motion [data-split] .ch{opacity:0}
.motion-b.has-motion [data-split].in .ch{animation:chIn .5s linear both;animation-delay:var(--cd)}
@keyframes chIn{0%{opacity:0}1%{opacity:.25}45%{opacity:.25}100%{opacity:1}}
.motion-b.has-motion .hero [data-split].in .ch,.motion-b.has-motion .phead [data-split].in .ch{animation-play-state:paused}
.motion-b.has-motion.ldr-done .hero [data-split].in .ch,.motion-b.has-motion.ldr-done .phead [data-split].in .ch{animation-play-state:running}

/* Textos de lectura: entran por líneas con un fundido corto, sin desplazamiento */
.motion-b.has-motion [data-lines] .mw-i{transform:none!important}
.motion-b.has-motion [data-lines] .mw-i{transition:opacity .5s ease!important}

/* Textos de sistema que se descifran */
[data-scramble]{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .ldr{display:none}
  .motion-b.has-motion .hdr{transform:none}
}