/* effects.css — movimiento: intro del logo, barrido diagonal entre páginas, entradas al hacer scroll, cursor.
   Reglas de rendimiento (del portafolio): nada de blur animado en elementos grandes, ni backdrop-filter en cosas que se mueven.
   html.anim-off = animaciones apagadas por el visitante; html.lite = equipo lento (se quitan adornos costosos, no animaciones). */

/* ---------- intro: la "S" se dibuja como una cinta de luz ---------- */
.intro{display:none}
html.se-intro .intro{display:flex;position:fixed;inset:0;z-index:300;background:#03060b;align-items:center;justify-content:center;flex-direction:column;gap:22px;
  pointer-events:none;animation:introOut 1.9s var(--ease-out) forwards}
@keyframes introOut{0%,72%{opacity:1}100%{opacity:0;visibility:hidden}}
.intro .halo{position:absolute;width:520px;height:520px;max-width:120vw;background:radial-gradient(50% 50% at 50% 50%,rgba(30,139,255,.35),transparent 70%)}
.intro img{position:relative;width:300px;max-width:70vw;height:200px;object-fit:cover;animation:draw 1.15s var(--ease-out) both}
@keyframes draw{0%{clip-path:inset(0 100% 0 0);filter:blur(10px) brightness(2)}60%{clip-path:inset(0 0 0 0);filter:blur(0) brightness(1.4)}100%{clip-path:inset(0 0 0 0);filter:none}}
.intro .line{position:relative;width:min(220px,50vw);height:1px;background:linear-gradient(90deg,transparent,#66c2ff,transparent);transform:scaleX(0);animation:lineIn 1s .35s var(--ease-out) forwards}
@keyframes lineIn{to{transform:scaleX(1)}}
.intro .word{position:relative;font:500 11px/1 var(--font-mono);letter-spacing:.4em;text-transform:uppercase;color:var(--text-secondary);opacity:0;animation:fadeIn .8s .5s var(--ease-out) forwards}
@keyframes fadeIn{to{opacity:1}}
/* el contenido del héroe entra después de la intro */
html.se-intro .hero [data-rv],html.se-intro .phero [data-rv]{transition-delay:calc(1.35s + var(--d,0s))!important}
html.se-intro .nav{animation:navIn .9s 1.35s var(--ease-out) both}
@keyframes navIn{from{transform:translateY(-120px)}}

/* ---------- barrido diagonal entre páginas (ángulo del logo) ---------- */
.sweep{position:fixed;top:-10vh;bottom:-10vh;left:0;width:160vw;z-index:250;pointer-events:none;visibility:hidden;transform:translateX(-170vw) skewX(-40deg);
  background:linear-gradient(90deg,rgba(0,71,255,0),#0047ff 18%,#0099ff 52%,rgba(234,242,255,.95) 72%,#03060b 73%,#03060b)}
.sweep.cover{visibility:visible;pointer-events:auto;animation:swIn .55s var(--ease-in-out) forwards}
@keyframes swIn{from{transform:translateX(-170vw) skewX(-40deg)}to{transform:translateX(-40vw) skewX(-40deg)}}
html.se-cin .sweep{visibility:visible;animation:swOut .8s .05s var(--ease-in-out) both}
@keyframes swOut{from{transform:translateX(-40vw) skewX(-40deg)}to{transform:translateX(110vw) skewX(-40deg);visibility:hidden}}

/* ---------- entradas al hacer scroll ---------- */
html.js [data-rv]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out);transition-delay:var(--d,0s)}
html.js [data-rv="blur"]{filter:blur(8px)}
html.js [data-rv="left"]{transform:translateX(-36px)}
html.js [data-rv="scale"]{transform:scale(.94)}
html.js [data-rv].rv-in{opacity:1;transform:none;filter:none}
/* titulares palabra por palabra */
.w-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.w-in{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease-out);transition-delay:calc(var(--i) * 55ms + var(--d,0s))}
.split.rv-in .w-in{transform:none}
/* eco "Proyectos" */
.echo .ol{animation:echo 1.4s var(--ease-out) .15s both}
.echo h1{animation:echo 1.1s var(--ease-out) both}
@keyframes echo{from{opacity:0;transform:translateX(12%)}to{opacity:1;transform:none}}
.mega-word{animation:megaIn 1.4s var(--ease-out) both}
@keyframes megaIn{from{opacity:0;transform:translate(-50%,40px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- cursor ---------- */
.cur{position:fixed;left:0;top:0;z-index:400;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;display:none;
  align-items:center;justify-content:center;color:#03060b;font:500 12px var(--font-body);opacity:0;
  transition:width .3s var(--ease-out),height .3s var(--ease-out),margin .3s var(--ease-out),background .3s,opacity .2s}
.cur.on{opacity:1}
.cur.link{width:38px;height:38px;margin:-19px 0 0 -19px;background:rgba(102,194,255,.9)}
.cur.view{width:72px;height:72px;margin:-36px 0 0 -36px;background:#fff;mix-blend-mode:normal}
.cur span{opacity:0;transition:opacity .2s}
.cur.view span{opacity:1}
@media (hover:hover) and (pointer:fine){html.js:not(.anim-off) .cur{display:flex}}

/* ---------- pausas y modos ---------- */
.is-off,.is-off *{animation-play-state:paused!important}
html.viewer-open main *,html.viewer-open main *::before,html.viewer-open main *::after{animation-play-state:paused!important}
html.lite .grain,html.lite .stage .halo,html.lite .cta-final .halo{display:none}
html.lite [data-rv="blur"]{filter:none!important}
html.lite .glass,html.lite .pill-nav,html.lite .mnav,html.lite .wa-float{backdrop-filter:none;-webkit-backdrop-filter:none}
html.lite .pill-nav,html.lite .mnav{background:rgba(12,14,18,.95)}
html.anim-off *,html.anim-off *::before,html.anim-off *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
html.anim-off [data-rv]{opacity:1!important;transform:none!important;filter:none!important}
html.anim-off .w-in{transform:none!important}
html.anim-off .intro,html.anim-off .sweep{display:none!important}

/* ===== v2: rendimiento =====
   barrido: una sola capa preparada en la GPU, sin animar visibility (eso obligaba a repintar en cada cuadro) */
.sweep{width:135vw;will-change:transform;contain:strict;backface-visibility:hidden}
.sweep.cover{animation:swIn2 .5s var(--ease-in-out) forwards}
@keyframes swIn2{from{transform:translate3d(-150vw,0,0) skewX(-40deg)}to{transform:translate3d(-25vw,0,0) skewX(-40deg)}}
html.se-cin .sweep{animation:swOut2 .75s .05s var(--ease-in-out) both}
@keyframes swOut2{from{transform:translate3d(-25vw,0,0) skewX(-40deg)}to{transform:translate3d(120vw,0,0) skewX(-40deg)}}
/* capas propias para lo que se mueve siempre */
.ghost,.hv-ring,.hv-core,.hv-pill,.hv-tile,.hv-thumb,.deco i,.float-chips .chip,.stage .float,.tunnel .ring{will-change:transform}
/* halos que respiran: degradado ancho en lugar de blur animado */
.stage .halo,.cta-final .halo{filter:none!important;background:radial-gradient(50% 50% at 50% 50%,rgba(30,139,255,.34),rgba(30,139,255,.12) 45%,transparent 72%)}
/* v3: transición más rápida (salida 0.32 s, entrada 0.5 s) */
.sweep.cover{animation-duration:.32s}
html.se-cin .sweep{animation-duration:.5s;animation-delay:0s}

/* v4: barrido que también sale por completo en pantallas altas (teléfono).
   La inclinación de 40° desplaza los extremos ±50vh, así que el recorrido suma la altura de la pantalla. */
.sweep{left:0;width:calc(140vw + 90vh)}
.sweep.cover{animation:swIn3 .32s var(--ease-in-out) forwards}
@keyframes swIn3{from{transform:translate3d(calc(-140vw - 150vh),0,0) skewX(-40deg)}to{transform:translate3d(calc(-25vw - 45vh),0,0) skewX(-40deg)}}
html.se-cin .sweep{animation:swOut3 .5s var(--ease-in-out) both}
@keyframes swOut3{from{transform:translate3d(calc(-25vw - 45vh),0,0) skewX(-40deg)}to{transform:translate3d(calc(100vw + 65vh),0,0) skewX(-40deg)}}
/* al terminar se esconde del todo (por si el navegador redondea mal) */
html.se-done .sweep{visibility:hidden!important;animation:none!important}