/* ════════════════════════════════════════════════════════════
   eInventiva · Animations & Ambient
   Sistema de fondos, micro-interacciones y motion para landings.
   Todo respeta prefers-reduced-motion.
   ════════════════════════════════════════════════════════════ */

/* ──────────────────── BACKGROUNDS · AMBIENT ──────────────────── */

/* Wrapper para fondos posicionados absolutos en una sección
   con position: relative. Los gradientes/grids viven detrás del contenido. */
.bg-stage { position: relative; overflow: hidden; isolation: isolate; }
.bg-stage > *:not([class*="bg-"]) { position: relative; z-index: 1; }

/* ─── 1 · Dot grid · estático, sutil ─── */
.bg-dots {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--text-muted);
  opacity: 0.18;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 80%);
}

/* ─── 2 · Líneas de cuadrícula · Linear-style ─── */
.bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right,  var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 25%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 25%, black 20%, transparent 75%);
  opacity: 0.7;
}

/* ─── 3 · Aurora · gradiente vivo, lentísimo, baja saturación ─── */
.bg-aurora {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden;
}
.bg-aurora::before,
.bg-aurora::after {
  content: ""; position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  will-change: transform;
}
.bg-aurora::before {
  background: var(--accent);
  top: -240px; left: -140px;
  animation: aurora-1 22s var(--ease-in-out) infinite alternate;
}
.bg-aurora::after {
  background: var(--accent-light);
  bottom: -240px; right: -140px;
  animation: aurora-2 28s var(--ease-in-out) infinite alternate;
}
@keyframes aurora-1 { to { transform: translate(140px, 80px) scale(1.15); } }
@keyframes aurora-2 { to { transform: translate(-120px, -60px) scale(1.2); } }

/* Variante "soft": para CTAs y bloques, menos intenso */
.bg-aurora--soft::before { opacity: 0.22; width: 500px; height: 500px; }
.bg-aurora--soft::after  { opacity: 0.18; width: 500px; height: 500px; }

/* ─── 4 · Beam · línea diagonal animada (Vercel-style) ─── */
.bg-beam {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden;
}
.bg-beam::before {
  content: ""; position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      var(--accent-glow) 60deg,
      transparent 120deg,
      transparent 360deg);
  animation: beam-spin 18s linear infinite;
  opacity: 0.6;
}
@keyframes beam-spin { to { transform: rotate(360deg); } }

/* ─── 5 · Spotlight · sigue al cursor (JS gestiona --mx/--my) ─── */
.bg-spotlight {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(
    500px circle at var(--mx, 50%) var(--my, 50%),
    var(--accent-glow),
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.bg-stage:hover > .bg-spotlight,
.bg-stage:focus-within > .bg-spotlight { opacity: 1; }

/* ─── 6 · Noise · grano premium (data-URI SVG) ─── */
.bg-noise {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNDAnIGhlaWdodD0nMjQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMC42IDAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCglMjNuKScvPjwvc3ZnPg==");
  mix-blend-mode: overlay;
}
[data-theme="light"] .bg-noise { opacity: 0.04; mix-blend-mode: multiply; }

/* ─── 7 · Gradient fade en bordes · top/bottom ─── */
.bg-fade-top {
  position: absolute; inset: 0 0 auto 0; height: 200px; z-index: 0;
  background: linear-gradient(to bottom, var(--bg-primary), transparent);
  pointer-events: none;
}
.bg-fade-bottom {
  position: absolute; inset: auto 0 0 0; height: 200px; z-index: 0;
  background: linear-gradient(to top, var(--bg-primary), transparent);
  pointer-events: none;
}

/* ──────────────────── SCROLL PROGRESS ──────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 100; pointer-events: none;
  background: color-mix(in srgb, var(--bg-primary) 95%, transparent);
}
.scroll-progress__bar {
  height: 100%;
  background: var(--gradient-accent);
  width: var(--p, 0%);
  box-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent-glow);
  transition: width 80ms linear;
}

/* ──────────────────── NUMBER COUNTER ──────────────────── */
.counter {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  display: inline-block;
}

/* ──────────────────── MAGNETIC BUTTON ──────────────────── */
.magnetic {
  transition: transform 0.4s var(--ease-out);
  will-change: transform;
}

/* ──────────────────── TILT (3D · sutil) ──────────────────── */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-out);
  will-change: transform;
}
.tilt > * { transform: translateZ(0); }
.tilt__lift { transform: translateZ(24px); }

/* ──────────────────── SHIMMER · hover sweep ──────────────────── */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg,
    transparent 35%,
    rgba(255,255,255,0.10) 50%,
    transparent 65%);
  transform: translateX(-110%);
  transition: transform 0.9s var(--ease-out);
}
.shimmer:hover::after { transform: translateX(110%); }
[data-theme="light"] .shimmer::after {
  background: linear-gradient(120deg, transparent 35%, rgba(0,0,0,0.06) 50%, transparent 65%);
}

/* ──────────────────── TEXT REVEAL · línea por línea ──────────────────── */
.reveal-line {
  display: inline-block; overflow: hidden; vertical-align: bottom;
}
.reveal-line > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.8s var(--ease-out), opacity 0.6s var(--ease-out);
}
.reveal-line.visible > span { transform: translateY(0); opacity: 1; }

/* ──────────────────── BORDER GLOW · gradient rotation on hover ──────────────────── */
.border-glow {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  isolation: isolate;
}
.border-glow::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--a, 0deg),
    var(--accent), var(--accent-light), var(--accent-dark), var(--accent));
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.border-glow:hover::before { opacity: 1; animation: border-rotate 4s linear infinite; }
@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes border-rotate { to { --a: 360deg; } }

/* ──────────────────── PULSE DOT · status indicator ──────────────────── */
.pulse-dot {
  position: relative; display: inline-block;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--success);
}
.pulse-dot::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; background: inherit;
  animation: pulse 2s var(--ease-out) infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* ──────────────────── REDUCED MOTION ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bg-aurora::before, .bg-aurora::after,
  .bg-beam::before, .pulse-dot::before,
  .border-glow:hover::before { animation: none !important; }
  .shimmer::after { display: none; }
  .scroll-progress__bar { transition: none; }
  .magnetic, .tilt { transition: none !important; }
}