/* =============================================================================
   Soft Imperio — Capa cinemática (inspirada en Lusion/oryzo, adaptada al sitio)
   · Cursor propio (punto + anillo con inercia)
   · Botones magnéticos
   · Parallax del hero reactivo a scroll + cursor
   · Titular que sube palabra a palabra
   · Reveals con más cine (desenfoque + desplazamiento)
   Solo MEJORA lo existente. Se desactiva con prefers-reduced-motion y en táctil.
   ============================================================================= */

/* ---------------------------------------------------------- Cursor propio --- */
.has-cc, .has-cc * { cursor: none !important; }
.cc-dot, .cc-ring {
  position: fixed; top: 0; left: 0; z-index: 700;
  pointer-events: none; border-radius: 50%; opacity: 0; will-change: transform;
}
.cc-dot {
  width: 7px; height: 7px; background: oklch(0.85 0.17 156);
  box-shadow: 0 0 10px oklch(0.8 0.17 156 / 0.7);
  transition: width .2s var(--ease-out), height .2s var(--ease-out), opacity .3s;
}
.cc-ring {
  width: 40px; height: 40px; border: 1.5px solid oklch(0.78 0.16 156 / 0.6);
  transition: width .28s var(--ease-out), height .28s var(--ease-out),
              border-color .28s, background-color .28s, opacity .3s;
}
.cc-hot .cc-ring { width: 66px; height: 66px; border-color: oklch(0.82 0.16 156 / 0.95); background: oklch(0.78 0.16 156 / 0.1); }
.cc-hot .cc-dot { width: 0; height: 0; }
.cc-down .cc-ring { width: 25px; height: 25px; border-color: oklch(0.85 0.17 156); }

/* ------------------------------------------------------- Botones magnéticos --- */
[data-magnetic] { transition: transform .3s var(--ease-out); will-change: transform; }

/* ------------------------------------------------ Titular palabra a palabra --- */
.split .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.split .word__in { display: inline-block; transform: translateY(115%); transition: transform .85s var(--ease-out); }
.split.is-revealed .word__in { transform: translateY(0); }

/* --------------------------------------------------- Reveals con más cine ---- */
.has-reveal .r-up { opacity: 0; transform: translateY(42px); filter: blur(7px); }
.has-reveal .r-up.is-in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out), filter .8s var(--ease-out);
}

/* ----------------------------------------------------------- Hero parallax --- */
.hero__stage { will-change: transform; }
.hero__content { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .split .word__in { transform: none; transition: none; }
  [data-magnetic] { transition: none; }
  .has-reveal .r-up { opacity: 1; transform: none; filter: none; }
}
@media (hover: none), (pointer: coarse) {
  .has-cc, .has-cc * { cursor: auto !important; }
  .cc-dot, .cc-ring { display: none; }
}