/**
 * DataPilot CDN — Supplemental Styles
 * Complements Tailwind CDN with custom animations and
 * effects not easily expressed as utility classes.
 */

/* ── Smooth scroll offset for fixed header ────────── */
html { scroll-padding-top: 72px; }

/* ── Hero dot-grid background ─────────────────────── */
.dot-grid {
  background-image: radial-gradient(rgba(255,255,255,0.065) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ── Animated gradient text sweep ─────────────────── */
@keyframes gradient-x {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
.animate-gradient-x {
  background-size: 200% auto;
  animation: gradient-x 4s ease infinite;
}

/* ── Marquee logo strip ────────────────────────────── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 30s linear infinite;
  will-change: transform;
}
/* Pause on hover */
.marquee-wrapper:hover .animate-marquee {
  animation-play-state: paused;
}

/* ── Feature card gradient border glow on hover ───── */
.feature-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(25,125,246,0.0), rgba(25,206,246,0.0));
  z-index: -1;
  transition: background 0.3s;
  pointer-events: none;
}
.feature-card:hover::after {
  background: linear-gradient(135deg, rgba(25,125,246,0.18), rgba(25,206,246,0.12));
}

/* ── Fade-up animation used in hero ───────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.opacity-anim { opacity: 0; }
.animate-fade-up { animation: fadeUp 0.65s ease forwards; }

.delay-100 { animation-delay: 0.10s; }
.delay-200 { animation-delay: 0.22s; }
.delay-300 { animation-delay: 0.36s; }
.delay-450 { animation-delay: 0.50s; }

/* ── Float animation for hero badge ───────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.animate-float { animation: float 5s ease-in-out infinite; }

/* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #09090b; }
::-webkit-scrollbar-thumb { background: #272729; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3c; }

/* ── Selection color ───────────────────────────────── */
::selection { background: rgba(25,125,246,0.35); color: #fff; }