/* Aura v1 · Mascotas (Moly y Lara) · microanimaciones suaves.
   Solo transform y opacity: sin layout shift. Sin librerías.
   Activación: añadir las clases .aura-* al HTML y cargar aura.js. */
:root {
  --aura: #E8735A;
  --aura-soft: rgba(232, 115, 90, .32);
}
/* 1 · Aparición suave al entrar en pantalla (solo cuando JS añade .aura-js a html) */
.aura-reveal {
  transition: opacity .6s ease, transform .6s ease;
}
html.aura-js .aura-reveal {
  opacity: 0;
  transform: translateY(18px);
}
html.aura-js .aura-reveal.is-in {
  opacity: 1;
  transform: none;
}
/* 2 · Resplandor que sigue al mouse + leve inclinación */
.aura-glow { position: relative; isolation: isolate; }
.aura-glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--aura-soft), transparent 70%);
}
.aura-glow:hover::after, .aura-glow.is-touched::after { opacity: 1; }
.aura-tilt {
  transition: transform .25s ease;
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
/* 3 · Zoom lento de imagen */
.aura-zoom { overflow: hidden; }
.aura-zoom img { display: block; width: 100%; height: auto; transition: transform .8s ease; }
.aura-zoom:hover img { transform: scale(1.06); }
/* 3b · Capas del hero a distinta velocidad (JS escribe --px/--py) */
.aura-hero { position: relative; overflow: hidden; }
.aura-hero [data-depth] {
  will-change: transform;
  transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
}
/* 4 · Brillo que recorre el botón */
.aura-btn { position: relative; overflow: hidden; }
.aura-btn::before {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  transition: left .6s ease;
}
.aura-btn:hover::before { left: 130%; }
/* 5 · Celular sin mouse: el resplandor va por toque o entrada en pantalla */
@media (hover: none), (pointer: coarse) {
  .aura-glow::after { opacity: 0; }
  .aura-glow.is-touched::after, .aura-glow.is-in::after { opacity: 1; }
  .aura-tilt { transform: none; }
}
/* Accesibilidad: con movimiento reducido, todo apagado */
@media (prefers-reduced-motion: reduce) {
  .aura-reveal { opacity: 1; transform: none; transition: none; }
  .aura-glow::after, .aura-btn::before { display: none; }
  .aura-zoom img, .aura-tilt, .aura-hero [data-depth] { transition: none; transform: none; }
}