/* ============================================================
   SCADBIM — Animaciones compartidas (scroll reveal, hover, hero)
   Incluido en todas las páginas. No depende de otros estilos.
   ============================================================ */

/* Respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .anim-reveal { opacity: 1 !important; transform: none !important; }
  .anim-hero-deco::before,
  .anim-hero-deco::after { animation: none !important; }
}

/* ── SCROLL REVEAL ──────────────────────────────────────────
   El JS añade .anim-reveal a elementos visibles y .is-in cuando
   entran en viewport. Stagger por --d (delay en ms). */
/* Solo escondemos cuando el JS confirma que está activo (html.js-anim).
   Sin JS, el contenido se ve normal — nunca queda invisible. */
html.js-anim .anim-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--d, 0) * 1ms);
  will-change: opacity, transform;
}
html.js-anim .anim-reveal.is-in { opacity: 1; transform: none; }

/* ── HOVER EN CARDS ─────────────────────────────────────────
   Reforzamos elevación + sombra de forma suave y consistente. */
.feature-card, .feat-card, .sw-item, .sw-card, .about-card,
.why-card, .lic-card, .new-card, .icon-card, .d5-int-card {
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s cubic-bezier(.22,.61,.36,1) !important;
}
.feature-card:hover, .feat-card:hover, .sw-item:hover, .sw-card:hover,
.about-card:hover, .why-card:hover, .lic-card:hover, .new-card:hover,
.icon-card:hover, .d5-int-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(27, 34, 86, .16);
}

/* Imagen interna de cards: leve zoom al hover */
.feature-card img, .feat-card img, .sw-item img, .sw-card img {
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.feature-card:hover img, .feat-card:hover img,
.sw-item:hover img, .sw-card:hover img { transform: scale(1.05); }

/* ── HOVER EN BOTONES ───────────────────────────────────────
   Transición suave + leve subida + brillo. */
.btn-primary, .btn-outline, .sw-btn-primary, .sw-btn-ghost,
.hero-btn-primary, .hero-btn-outline, .d5-btn-primary, .d5-btn-outline {
  transition: transform .22s ease, box-shadow .22s ease,
              background .22s ease, border-color .22s ease, filter .22s ease !important;
}
.btn-primary:hover, .sw-btn-primary:hover,
.hero-btn-primary:hover, .d5-btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 10px 26px rgba(27, 34, 86, .22);
}
.btn-outline:hover, .sw-btn-ghost:hover,
.hero-btn-outline:hover, .d5-btn-outline:hover { transform: translateY(-2px); }

/* Filas de tabla: realce al hover */
.specs-table tbody tr, .compare-table tbody tr { transition: background .25s ease; }

/* ── DECORACIÓN DEL HERO ────────────────────────────────────
   El JS añade .anim-hero-deco al primer hero de la página.
   Añade 2 orbes de luz que flotan suavemente, sin tapar el texto. */
.anim-hero-deco { position: relative; }
.anim-hero-deco::before,
.anim-hero-deco::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
  opacity: .5;
}
.anim-hero-deco::before {
  width: 320px; height: 320px;
  top: -80px; right: -60px;
  background: radial-gradient(circle, rgba(120,160,255,.55), transparent 70%);
  animation: animFloatA 11s ease-in-out infinite alternate;
}
.anim-hero-deco::after {
  width: 260px; height: 260px;
  bottom: -90px; left: -50px;
  background: radial-gradient(circle, rgba(167,139,250,.45), transparent 70%);
  animation: animFloatB 13s ease-in-out infinite alternate;
}
/* El contenido del hero queda por encima de los orbes */
.anim-hero-deco > * { position: relative; z-index: 1; }

@keyframes animFloatA {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-30px, 26px) scale(1.12); }
}
@keyframes animFloatB {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(28px, -22px) scale(1.1); }
}

/* Zoom lento en imágenes de fondo de hero (si aún no lo tienen) */
.anim-hero-deco .hero-bg:not([style*="animation"]),
.anim-hero-deco .d5-hero-bg {
  animation: animHeroZoom 16s ease-in-out infinite alternate;
}
@keyframes animHeroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}