/* ==========================================================================
   WOW3D 2.0 — capa de animación 3D compartida (Animal Business Holding)
   Una personalidad por marca. Vanilla CSS, sin dependencias.
   ========================================================================== */

:root{
  --w3-ease:        cubic-bezier(.16,1,.3,1);
  --w3-ease-soft:   cubic-bezier(.25,.46,.45,.94);
  --w3-ease-snap:   cubic-bezier(.2,.9,.25,1);
  --w3-ease-bounce: cubic-bezier(.34,1.4,.5,1);
  --w3-speed: 1;
}

/* --- Lienzo 3D de fondo ------------------------------------------------- */
#wow3d-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}
#wow3d-bg canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Respaldo sin WebGL: degradado animado, distinto según la marca */
#wow3d-bg.w3-fallback{
  background:
    radial-gradient(60% 50% at 20% 12%, var(--w3-c1-a) 0%, transparent 62%),
    radial-gradient(55% 45% at 82% 22%, var(--w3-c2-a) 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 96%, var(--w3-c3-a) 0%, transparent 64%),
    var(--w3-base, transparent);
  animation: w3-drift 26s var(--w3-ease-soft) infinite alternate;
}
#wow3d-bg.w3-fallback.w3-brand-hawk,
#wow3d-bg.w3-fallback.w3-brand-lion{
  background:
    linear-gradient(115deg, var(--w3-c2-a) 0%, transparent 42%),
    linear-gradient(285deg, var(--w3-c1-a) 0%, transparent 48%),
    var(--w3-base, transparent);
}
#wow3d-bg.w3-fallback.w3-brand-kangaroo{
  background:
    repeating-linear-gradient(0deg, var(--w3-c1-a) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--w3-c1-a) 0 1px, transparent 1px 64px),
    var(--w3-base, transparent);
  animation: none;
}
@keyframes w3-drift{
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
  100% { background-position: 12% 8%, 86% 12%, 44% 88%; }
}

/* --- Modo superpuesto (fondo de página no liberable) -------------------- */
#wow3d-bg.w3-over{ z-index: 2147481000; opacity: .62; }
#wow3d-bg.w3-over-dark{ mix-blend-mode: screen; }
#wow3d-bg.w3-over-light{ mix-blend-mode: multiply; }

/* --- Capa de efectos por encima del contenido --------------------------- */
#wow3d-fx{
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  pointer-events: none;
}
#wow3d-spot{
  position: absolute;
  width: 46rem; height: 46rem;
  left: 0; top: 0;
  margin: -23rem 0 0 -23rem;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .5s ease;
  will-change: transform;
}
#wow3d-fx.w3-dark  #wow3d-spot{
  background: radial-gradient(circle closest-side, var(--w3-c1-a) 0%, transparent 70%);
  mix-blend-mode: screen;
}
#wow3d-fx.w3-light #wow3d-spot{
  background: radial-gradient(circle closest-side, var(--w3-c1-a) 0%, transparent 70%);
  mix-blend-mode: multiply;
}
#wow3d-fx.w3-on #wow3d-spot{ opacity: 1; }

/* El foco cambia de tamaño y forma según la marca */
#wow3d-fx.w3-brand-hawk  #wow3d-spot{ width: 60rem; height: 60rem; margin: -30rem 0 0 -30rem; }
#wow3d-fx.w3-brand-wolf  #wow3d-spot{ width: 34rem; height: 34rem; margin: -17rem 0 0 -17rem; }
#wow3d-fx.w3-brand-kangaroo #wow3d-spot{ width: 30rem; height: 30rem; margin: -15rem 0 0 -15rem; }

#wow3d-progress{
  position: absolute;
  left: 0; top: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--w3-c2) 0%, var(--w3-c1) 45%, var(--w3-c3) 100%);
  box-shadow: 0 0 12px var(--w3-c1-a);
}
#wow3d-fx.w3-brand-hawk #wow3d-progress,
#wow3d-fx.w3-brand-lynx #wow3d-progress{ height: 1px; }
#wow3d-fx.w3-brand-wolf #wow3d-progress{ height: 3px; }

/* ==========================================================================
   Aparición al hacer scroll — nueve gramáticas distintas
   ========================================================================== */
.w3-rv{
  opacity: 0;
  will-change: transform, opacity;
}
.w3-rv.w3-in{ opacity: 1; transform: none; }

/* Barracuda — entra lateral, decidido */
.w3-rv-slide{
  transform: perspective(1200px) translate3d(-38px, 18px, -50px) rotateY(7deg);
  transition: opacity .7s var(--w3-ease) var(--w3-d,0ms),
              transform .8s var(--w3-ease) var(--w3-d,0ms);
}
/* Hawk — solo se funde y asciende un pelo; nada de acrobacias */
.w3-rv-fade{
  transform: translate3d(0, 22px, 0);
  transition: opacity 1.5s var(--w3-ease-soft) var(--w3-d,0ms),
              transform 1.6s var(--w3-ease-soft) var(--w3-d,0ms);
}
/* Lynx — gira como una carta de navegación */
.w3-rv-turn{
  transform: perspective(1400px) rotateY(-14deg) translate3d(26px, 16px, -70px);
  transition: opacity 1.1s var(--w3-ease) var(--w3-d,0ms),
              transform 1.25s var(--w3-ease) var(--w3-d,0ms);
}
/* Polar Hub — asciende lento, como hielo que emerge */
.w3-rv-rise{
  transform: perspective(1200px) translate3d(0, 52px, -60px) rotateX(8deg);
  transition: opacity 1.2s var(--w3-ease) var(--w3-d,0ms),
              transform 1.35s var(--w3-ease) var(--w3-d,0ms);
}
/* Wolf — vuelca en 3D, rápido y técnico */
.w3-rv-flip{
  transform: perspective(900px) rotateX(-26deg) translate3d(0, 40px, -110px);
  transform-origin: 50% 100%;
  transition: opacity .55s var(--w3-ease-snap) var(--w3-d,0ms),
              transform .7s var(--w3-ease-snap) var(--w3-d,0ms);
}
/* Hippo — cascada breve, en tandas */
.w3-rv-stagger{
  transform: translate3d(0, 34px, 0) scale(.985);
  transition: opacity .5s var(--w3-ease-snap) var(--w3-d,0ms),
              transform .62s var(--w3-ease-snap) var(--w3-d,0ms);
}
/* Kangaroo — encaja en su sitio, sin florituras */
.w3-rv-snap{
  transform: translate3d(0, 20px, 0);
  transition: opacity .42s var(--w3-ease-snap) var(--w3-d,0ms),
              transform .5s var(--w3-ease-snap) var(--w3-d,0ms);
}
/* Lion — se acerca con rebote suave */
.w3-rv-zoom{
  transform: perspective(1000px) scale(.93) translate3d(0, 26px, -40px);
  transition: opacity .8s var(--w3-ease-bounce) var(--w3-d,0ms),
              transform .95s var(--w3-ease-bounce) var(--w3-d,0ms);
}
/* Octopus — florece desde el centro */
.w3-rv-bloom{
  transform: perspective(1100px) scale(.96) translate3d(0, 30px, -30px);
  filter: blur(6px);
  transition: opacity 1s var(--w3-ease) var(--w3-d,0ms),
              transform 1.1s var(--w3-ease) var(--w3-d,0ms),
              filter .9s var(--w3-ease) var(--w3-d,0ms);
}
.w3-rv-bloom.w3-in{ filter: none; }

/* --- Tarjetas con inclinación 3D ---------------------------------------- */
.w3-tilt{
  transition: transform .3s var(--w3-ease), box-shadow .3s var(--w3-ease);
  transform-style: preserve-3d;
}
.w3-tilt.w3-glare::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(
    16rem circle at var(--w3-mx,50%) var(--w3-my,50%),
    var(--w3-glare, rgba(255,255,255,.16)) 0%, transparent 62%);
}
.w3-tilt.w3-glare.w3-hot::after{ opacity: 1; }

/* Hawk y Kangaroo: reflejo lineal, no un foco redondo */
[data-wow3d-scene="silk"] .w3-tilt.w3-glare::after,
[data-wow3d-scene="ledger"] .w3-tilt.w3-glare::after{
  background: linear-gradient(105deg, transparent 30%,
    var(--w3-glare, rgba(255,255,255,.16)) 50%, transparent 70%);
}
[data-wow3d-scene="silk"] .w3-tilt{ transition-duration: .7s; }
[data-wow3d-scene="ledger"] .w3-tilt{ transition-duration: .18s; }
[data-wow3d-scene="neural"] .w3-tilt{ transition-duration: .16s; }

/* --- Botones magnéticos -------------------------------------------------- */
.w3-mag{ transition: transform .35s var(--w3-ease), box-shadow .35s var(--w3-ease); }
.w3-mag.w3-hot{ box-shadow: 0 .75rem 2.2rem -.6rem var(--w3-c1-a); }
[data-wow3d-scene="silk"] .w3-mag{ transition-duration: .6s; }
[data-wow3d-scene="neural"] .w3-mag,
[data-wow3d-scene="ledger"] .w3-mag{ transition-duration: .18s; }

/* --- Accesibilidad ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  #wow3d-bg{ animation: none !important; }
  #wow3d-bg.w3-over{ opacity: .35; }
  #wow3d-spot{ display: none; }
  .w3-rv{ opacity: 1 !important; transform: none !important;
          filter: none !important; transition: none !important; }
  .w3-tilt, .w3-mag{ transition: none !important; }
}