/* styles/motion.css · Todo el movimiento de la web en un solo archivo */

/* Barra de progreso de lectura */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:95;pointer-events:none}
.progress i{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--wine),var(--gold),var(--sky))}

/* Header: se esconde al bajar y vuelve al subir */
.header{transition:background .3s,padding .3s,transform .45s var(--ease)}
.header.hide{transform:translateY(-110%)}
.nav a.active:not(.btn)::after{transform:scaleX(1)}
.nav a.active:not(.btn){color:var(--gold)}

/* Sistema de aparición (lo activa lib/reveal.js) */
.js [data-reveal]{opacity:0}
.js [data-reveal="split"],.js [data-reveal="stagger"]{opacity:1}
.js [data-reveal="stagger"]>*{opacity:0}
.js [data-reveal]:not([data-reveal="split"]):not([data-reveal="stagger"]).is-in{opacity:1;animation:rise .9s var(--ease) backwards;animation-delay:calc(var(--d,0)*1ms)}
.js [data-reveal="stagger"].is-in>*{opacity:1;animation:rise .9s var(--ease) backwards;animation-delay:calc(var(--i,0)*110ms)}
.js [data-reveal="split"] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.js [data-reveal="split"] .w>span{display:inline-block;transform:translateY(112%);transition:transform 1s var(--ease);transition-delay:calc(var(--i)*70ms)}
.js [data-reveal="split"].is-in .w>span{transform:none}
@keyframes rise{from{opacity:0;transform:translateY(40px)}}

/* Entrada del hero tras el splash */
.js .hero h1 span{opacity:0}
.ready .hero h1 span{animation:heroIn 1.1s var(--ease) forwards}
.ready .hero h1 .l2{animation-delay:.18s}
@keyframes heroIn{from{opacity:0;transform:translateY(70px) skewY(4deg)}to{opacity:1;transform:none}}

/* Hero: partículas y señal de scroll */
.hero{position:relative;overflow:hidden}
.hero>*{position:relative;z-index:1}
.hero>.particles{position:absolute;inset:0;z-index:0;width:100%;height:100%;opacity:.8}
.hero>.cue{position:absolute;left:var(--pad);bottom:1.6rem;display:flex;align-items:center;gap:.8rem;font-size:.8rem;font-weight:500;color:var(--sky)}
.cue span{position:relative;width:22px;height:36px;border:2px solid var(--sky);border-radius:14px}
.cue span::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(12px)}}

/* Tarjetas con inclinación 3D y marquees interactivos */
[data-tilt]{transform-style:preserve-3d;will-change:transform}
.mq:hover .mq-in{animation-play-state:paused}

/* Brillo que recorre los botones principales */
.btn-gold,.btn-wine{position:relative;overflow:hidden}
.btn-gold::after,.btn-wine::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn-gold:hover::after,.btn-wine:hover::after{left:130%}

@media (max-width:900px){.hero>.cue{display:none}}

/* Si el usuario prefiere menos movimiento, todo aparece sin animar */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal]>*,.js .hero h1 span{opacity:1!important;animation:none!important}
  .js [data-reveal="split"] .w>span{transform:none!important;transition:none!important}
  .hero>.particles,.hero>.cue{display:none}
}

/* Red de seguridad: si el JS no arrancó, el contenido se muestra igualmente */
.reveal-all [data-reveal],.reveal-all [data-reveal]>*,.reveal-all .hero h1 span{opacity:1!important;animation:none!important}
.reveal-all [data-reveal="split"] .w>span{transform:none!important}