/* ============================================================
   VisualWS — effects.css  ·  preloader · cursor · reveals
   ============================================================ */

/* ===================== PRELOADER (claro) ===================== */
.preloader{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper); color:var(--ink);
}
.preloader.is-done{ pointer-events:none; }
.preloader__inner{ display:flex; flex-direction:column; align-items:center; }
.preloader__logo{ height:clamp(36px,6vw,58px); width:auto; opacity:0; transform:translateY(12px); animation:pl-logo .9s var(--ease) .1s forwards; }
@keyframes pl-logo{ to{ opacity:1; transform:none; } }
.preloader__count{
  position:fixed; right:var(--gutter); bottom:clamp(1.2rem,4vh,2.2rem);
  font-weight:600; font-size:clamp(2.6rem,11vw,8rem); line-height:1; letter-spacing:-.03em;
  display:flex; align-items:flex-start; color:var(--ink);
}
.preloader__count i{ font-style:normal; font-size:.3em; color:var(--muted); margin-top:.4em; }

/* ===================== CURSOR (blend-mode: se adapta a claro/oscuro) ===================== */
.cursor{ position:fixed; top:0; left:0; z-index:150; pointer-events:none; mix-blend-mode:difference; will-change:transform; }
.cursor__dot{ position:absolute; top:0; left:0; width:6px; height:6px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); transition:width .3s var(--ease), height .3s var(--ease), opacity .3s; }
.cursor__ring{ position:absolute; top:0; left:0; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.7); transform:translate(-50%,-50%); transition:width .4s var(--ease), height .4s var(--ease), border-color .4s, opacity .3s, background .4s; }
.cursor__label{ position:absolute; top:0; left:0; transform:translate(-50%,-50%); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:#000; opacity:0; white-space:nowrap; transition:opacity .3s; }
.cursor.is-link .cursor__ring{ width:54px; height:54px; background:rgba(255,255,255,.18); border-color:transparent; }
.cursor.is-link .cursor__dot{ opacity:0; }
.cursor.is-view .cursor__ring,.cursor.is-drag .cursor__ring{ width:86px; height:86px; background:#fff; border-color:transparent; }
.cursor.is-view .cursor__dot,.cursor.is-drag .cursor__dot{ opacity:0; }
.cursor.is-view .cursor__label,.cursor.is-drag .cursor__label{ opacity:1; }
.cursor.is-down .cursor__ring{ width:30px; height:30px; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }
body.cursor-active{ cursor:none; }
body.cursor-active a,body.cursor-active button{ cursor:none; }

/* ===================== PROGRESO ===================== */
.scroll-progress{ position:fixed; top:0; left:0; z-index:70; height:2px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:var(--ink); mix-blend-mode:difference; }

/* ===================== REVEALS ===================== */
.split-line{ display:block; overflow:hidden; }
.split-line__inner{ display:block; will-change:transform; }
.split-word{ display:inline-block; overflow:hidden; vertical-align:top; }
.split-word__inner{ display:inline-block; will-change:transform; }

[data-reveal="fade"]{ opacity:0; transform:translateY(26px); will-change:transform,opacity; }
[data-reveal="row"]{ opacity:0; transform:translateY(40px); will-change:transform,opacity; }
[data-reveal="image"]{ clip-path:inset(0 0 100% 0); }
.is-revealed[data-reveal="image"]{ clip-path:inset(0 0 0 0); transition:clip-path 1.1s var(--ease); }
[data-reveal="fade"].is-in,[data-reveal="row"].is-in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }

@media (prefers-reduced-motion: reduce){
  .split-line__inner,.split-word__inner{ transform:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .intro,.scrub{ height:auto !important; }
}