/* ═══════════════════════════════════════════
   E Basic TI · Animaciones: blobs, marquees, reveal, tilt y demás
   ═══════════════════════════════════════════ */

/* ── Blobs animados del hero ── */
@keyframes float-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px,-40px) scale(1.15); } }
@keyframes float-b { 0%,100% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(-60px,30px) scale(.95); } }
.blob { position: absolute; border-radius: 9999px; filter: blur(90px); opacity: .5; pointer-events: none; }
.blob-a { background: var(--grad-a); animation: float-a 14s ease-in-out infinite; }
.blob-b { background: var(--grad-b); animation: float-b 18s ease-in-out infinite; }
.blob-c { background: var(--grad-c); animation: float-a 22s ease-in-out infinite reverse; }

/* ── Rejilla técnica de fondo ── */
.grid-bg {
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 60% at 50% 40%, black, transparent);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, black, transparent);
}

/* ── Marquees ── */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track  { animation: marquee 26s linear infinite; }
.marquee-cards  { animation: marquee 48s linear infinite; }
.marquee-wrap:hover .marquee-track,
.marquee-wrap:hover .marquee-cards { animation-play-state: paused; }

/* ── Reveal al hacer scroll (varias direcciones + escalonado) ── */
.reveal        { opacity: 0; transform: translateY(34px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal-left   { opacity: 0; transform: translateX(-46px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal-right  { opacity: 0; transform: translateX(46px);  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal-zoom   { opacity: 0; transform: scale(.9);         transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.in { opacity: 1 !important; transform: none !important; }
[data-stagger] > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ── Cards con efecto tilt 3D ── */
.tilt { transform-style: preserve-3d; transition: transform .18s ease-out, box-shadow .3s; will-change: transform; }
.tilt:hover { box-shadow: 0 24px 60px -18px var(--glow); }
.tilt-inner { transform: translateZ(28px); }

/* ── Borde de gradiente animado ── */
@keyframes border-run { to { background-position: 300% 0; } }
.grad-border { position: relative; background: var(--card); }
.grad-border::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; z-index: -1;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c), var(--grad-a));
  background-size: 300% 100%; animation: border-run 6s linear infinite;
}

/* ── Anillo orbital del hero ── */
@keyframes spin-slow { to { transform: rotate(360deg); } }
.circuit-ring   { animation: spin-slow 42s linear infinite; }
.circuit-ring-2 { animation: spin-slow 28s linear infinite reverse; }

/* ── Botón play con pulso ── */
@keyframes pulse-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }
.pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background: var(--primary); animation: pulse-ring 1.8s ease-out infinite; z-index: -1;
}

/* ── Barra de progreso de scroll ── */
#progress { transform-origin: left; transform: scaleX(0); }

/* ── Chips flotantes del hero ── */
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.bob   { animation: bob 5s ease-in-out infinite; }
.bob-2 { animation: bob 6.5s ease-in-out infinite .8s; }
.bob-3 { animation: bob 7.5s ease-in-out infinite 1.6s; }

/* ── Movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .marquee-cards, .blob, .circuit-ring, .circuit-ring-2, .bob, .bob-2, .bob-3, .grad-border::before, .pulse::after, .fab-wa { animation: none !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-zoom { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}