/* =============================================================================
   Licencia2 — 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 258);
  box-shadow: 0 0 10px oklch(0.8 0.17 258 / 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 258 / 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 258 / 0.95); background: oklch(0.78 0.16 258 / 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 258); }

/* ------------------------------------------------------- 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 ---- */
/* Entrada en 3D: los bloques llegan inclinados en perspectiva (como los íconos
   del hero que descienden) y se enderezan al entrar en la vista. */
.has-reveal .r-up { opacity: 0; transform: perspective(900px) translateY(42px) rotateX(7deg); transform-origin: 50% 100%; 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);
}

/* ------------------------------------------- Tilt 3D que sigue al cursor ----- */
/* cinematic.js añade .is-tilt y pinta --mx/--my; el propio JS escribe el
   transform (perspectiva + inclinación). Aquí: respuesta inmediata + brillo. */
.is-tilt { position: relative; transition: transform .14s ease-out !important; }
.is-tilt::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), oklch(1 0 0 / 0.22), transparent 55%);
}

/* -------------------------------------- Íconos que flotan (eco del hero 3D) -- */
@keyframes fx-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-1.4deg); }
}
.lic-card__glyph { animation: fx-float 5.4s ease-in-out infinite; }
.product-card:nth-child(2n) .lic-card__glyph { animation-duration: 6.2s; animation-delay: -1.7s; }
.product-card:nth-child(3n) .lic-card__glyph { animation-duration: 5.8s; animation-delay: -2.9s; }
.pd-lic__art .lic-card__glyph { animation-duration: 7s; }

/* ----------------------------------------------------------- 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; }
  .is-tilt::after { content: none; }
  .lic-card__glyph { animation: none !important; }
}
@media (hover: none), (pointer: coarse) {
  .has-cc, .has-cc * { cursor: auto !important; }
  .cc-dot, .cc-ring { display: none; }
}