/* motion-extras.css — premium animation primitives */

/* Mesh background */
.mesh-bg {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
  border-radius: inherit;
}
.mesh-blob {
  position: absolute; width: 520px; height: 520px; border-radius: 50%;
  filter: blur(80px); opacity: 0.45; will-change: transform;
}
.mesh-blob.b1 { background: var(--accent); top: -10%; left: -10%; animation: mesh-drift-1 22s ease-in-out infinite; }
.mesh-blob.b2 { background: var(--ai); bottom: -15%; right: -15%; animation: mesh-drift-2 26s ease-in-out infinite; }
.mesh-blob.b3 { background: var(--success); top: 30%; left: 40%; animation: mesh-drift-3 30s ease-in-out infinite; opacity: 0.25; }
@keyframes mesh-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, 80px) scale(1.1); }
  66% { transform: translate(-40px, 40px) scale(0.95); }
}
@keyframes mesh-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-80px, -60px) scale(1.15); }
}
@keyframes mesh-drift-3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-30%, -70%) scale(1.2); }
}

/* Marquee */
.marquee {
  position: relative; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  padding: 12px 0;
}
.marquee-track {
  display: flex; gap: 56px; width: max-content;
  animation: marquee-slide var(--mq-speed, 40s) linear infinite;
}
.marquee-item {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--muted); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
}
.marquee-item::before {
  content: '⌬'; color: var(--accent); font-size: 11px;
}
@keyframes marquee-slide {
  to { transform: translateX(-50%); }
}

/* Glow card — cursor-following spotlight */
.glow-card {
  position: relative; border-radius: var(--radius);
  background: linear-gradient(var(--card), var(--card)) padding-box,
              radial-gradient(400px circle at var(--gx, 50%) var(--gy, 50%),
                              color-mix(in oklab, var(--accent), transparent 50%),
                              var(--border) 40%) border-box;
  border: 1px solid transparent;
  transition: transform 0.3s cubic-bezier(.22,.8,.32,1);
}
.glow-card:hover { transform: translateY(-3px); }
.glow-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 50%),
                              color-mix(in oklab, var(--accent), transparent 90%), transparent 40%);
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.glow-card:hover::before { opacity: 1; }
.glow-card-inner { position: relative; z-index: 1; }

/* Animated gradient text */
.grad-text {
  background: linear-gradient(110deg, var(--text) 30%, var(--accent) 50%, var(--text) 70%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: grad-shift 8s linear infinite;
}
@keyframes grad-shift { to { background-position: -200% center; } }

/* Hero subtle entrance for the whole page */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.float-y { animation: float-y 4s ease-in-out infinite; }