/* ============================================================
   AIXR · WOW LAYER — capa premium de efectos y micro-interacciones
   Se carga DESPUÉS de styles.css y premium.css. Solo añade; no pisa.
   Todo respeta prefers-reduced-motion al final del archivo.
   ============================================================ */

/* ---------- 1 · Textura de grano cinematográfico (toda la página) ---------- */
body::after{
  content:"";position:fixed;inset:-50%;width:200%;height:200%;z-index:2147480000;
  pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 9s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-3%,-2%)} 20%{transform:translate(2%,3%)}
  30%{transform:translate(-2%,1%)} 40%{transform:translate(3%,-3%)} 50%{transform:translate(-1%,2%)}
  60%{transform:translate(2%,-1%)} 70%{transform:translate(-3%,3%)} 80%{transform:translate(1%,-2%)} 90%{transform:translate(-2%,-3%)}
}

/* ---------- 2 · Aura que sigue al cursor (solo desktop) ---------- */
#cursor-aura{
  position:fixed;left:0;top:0;width:560px;height:560px;border-radius:50%;
  pointer-events:none;z-index:2147479000;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,0,210,.10) 0%,rgba(91,43,208,.07) 35%,transparent 70%);
  transform:translate(-50%,-50%);opacity:0;transition:opacity .5s;
  will-change:transform;
}
body.aura-on #cursor-aura{opacity:1}
@media(pointer:coarse){#cursor-aura{display:none}}

/* ---------- 3 · Entrada de página + transición de salida ---------- */
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body{animation:pageIn .65s cubic-bezier(.2,.7,.3,1) both}
#page-veil{
  position:fixed;inset:0;z-index:2147481000;pointer-events:none;opacity:0;
  background:linear-gradient(120deg,#0a0710 30%,#1d1430 50%,#0a0710 70%);
  transition:opacity .26s ease;
}
body.page-leave #page-veil{opacity:1;pointer-events:auto}

/* ---------- 4 · Reveals enriquecidos: desenfoque que se disipa (desktop) ---------- */
@media(pointer:fine){
  .reveal,.reveal-l,.reveal-r,.reveal-scale{filter:blur(9px)}
  .reveal.in,.reveal-l.in,.reveal-r.in,.reveal-scale.in{filter:blur(0)}
  .reveal,.reveal-l,.reveal-r,.reveal-scale{transition-property:opacity,transform,filter}
}
body.revealed-fallback .reveal,body.revealed-fallback .reveal-l,
body.revealed-fallback .reveal-r,body.revealed-fallback .reveal-scale{filter:none!important}

/* ---------- 5 · Titulares hero: entrada palabra por palabra ---------- */
.h1-split .ww{display:inline-block;overflow:visible}
.h1-split .ww>*{display:inline-block}
.h1-split .ww{
  opacity:0;transform:translateY(.55em) rotate(1.5deg);filter:blur(10px);
  animation:wordIn .8s cubic-bezier(.2,.75,.25,1) forwards;
  animation-delay:calc(.12s + var(--wi,0) * .055s);
}
@keyframes wordIn{to{opacity:1;transform:none;filter:blur(0)}}

/* ---------- 6 · Ken Burns sutil en los videos de los heroes ---------- */
.hero-media.hero-feature video,.hero-media.hero-feature img{
  animation:kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}

/* ---------- 7 · Botones: barrido de luz + relieve ---------- */
.btn,.nav-cta{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,filter .25s,border-color .25s,background .25s,color .25s}
.btn::after,.nav-cta::after{
  content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-22deg);transition:left .6s cubic-bezier(.3,.7,.3,1);pointer-events:none;
}
.btn:hover::after,.nav-cta:hover::after{left:170%}
.btn-primary:hover,.nav-cta:hover{box-shadow:0 14px 38px -12px rgba(255,0,210,.55);transform:translateY(-2px)}
.btn-ghost:hover{transform:translateY(-2px)}
.btn-primary{background-size:160% auto}
.btn-primary:hover{background-position:right center}

/* ---------- 8 · Cartas con brillo del cursor + borde luminoso ---------- */
.glow-card{position:relative}
.glow-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,0,210,.085),transparent 65%);
  opacity:0;transition:opacity .4s;
}
.glow-card:hover::before{opacity:1}
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt .media,.tilt img{transform:translateZ(0)}

/* ---------- 9 · Encabezados de sección: línea que se dibuja ---------- */
.h-sec{position:relative}
.kicker{position:relative}
section .kicker::after{
  content:"";display:inline-block;vertical-align:middle;margin-left:12px;height:1px;width:0;
  background:linear-gradient(90deg,var(--magenta),transparent);transition:width 1s cubic-bezier(.2,.7,.3,1) .2s;
}
section .reveal.in .kicker::after,section .kicker.in-line::after{width:64px}

/* ---------- 10 · Marquee de clientes: profundidad al pasar el mouse ---------- */
.marquee{transition:filter .4s}
.mq-track a,.mq-track span{transition:.35s cubic-bezier(.2,.7,.3,1)}
.mq-track a:hover{transform:translateY(-3px) scale(1.04)}

/* ---------- 11 · Footer CTA: aurora viva detrás del titular ---------- */
.footer-cta{position:relative;isolation:isolate}
.footer-cta::before{
  content:"";position:absolute;left:50%;top:-40px;width:620px;height:380px;z-index:-1;
  transform:translateX(-50%);filter:blur(70px);opacity:.32;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,0,210,.5),transparent 70%),
             radial-gradient(closest-side at 70% 60%,rgba(91,43,208,.55),transparent 70%);
  animation:aurora 11s ease-in-out infinite alternate;
}
@keyframes aurora{
  from{transform:translateX(-58%) scale(1) rotate(-4deg)}
  to{transform:translateX(-42%) scale(1.18) rotate(5deg)}
}

/* ---------- 12 · Detalles globales de acabado ---------- */
::selection{background:rgba(255,0,210,.85);color:#fff}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#0a0710}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#5B2BD0,#FF00D2);border-radius:8px;border:3px solid #0a0710}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:6px}
.logo img{transition:filter .35s}
.logo:hover img{filter:drop-shadow(0 0 14px rgba(255,0,210,.55))}

/* iconos y miniaturas con vida */
:where(.icard-thumb,.sol-thumb) img{transition:transform .7s cubic-bezier(.2,.7,.3,1)}
:where(.icard,.sol):hover :where(.icard-thumb,.sol-thumb) img{transform:scale(1.06)}

/* ---------- 13 · Accesibilidad: sin movimiento si el usuario lo pide ---------- */
@media(prefers-reduced-motion:reduce){
  body::after{animation:none}
  body{animation:none}
  #cursor-aura{display:none}
  .reveal,.reveal-l,.reveal-r,.reveal-scale{filter:none}
  .h1-split .ww{opacity:1;transform:none;filter:none;animation:none}
  .hero-media.hero-feature video,.hero-media.hero-feature img{animation:none}
  .btn::after,.nav-cta::after{display:none}
  .footer-cta::before{animation:none}
  .tilt{transform:none!important}
}