/* =============================================================
   Virtual Check — Global Stylesheet
   Shared utilities, animations, and design tokens.
   ============================================================= */

/* ---------- Self-hosted Inter (latin) ----------
   font-display: swap → text renders in fallback font immediately, swaps when Inter loads. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter-800.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/inter-900.woff2') format('woff2');
}

/* ---------- Base ----------
   overflow-x: clip prevents horizontal scroll without breaking position: sticky
   (overflow: hidden would create a scroll container and kill sticky on the navbar). */
html, body {
    overflow-x: clip;
}
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Background utilities ---------- */
.bg-mesh-light {
    background-color: #ffffff;
    background-image:
        radial-gradient(at 20% 0%,   rgba(125, 211, 252, 0.25) 0px, transparent 50%),
        radial-gradient(at 80% 0%,   rgba(199, 210, 254, 0.30) 0px, transparent 50%),
        radial-gradient(at 0%  50%,  rgba(186, 230, 253, 0.20) 0px, transparent 50%),
        radial-gradient(at 100% 60%, rgba(221, 214, 254, 0.25) 0px, transparent 50%);
}

.bg-mesh-soft {
    background-color: #f8fafc;
    background-image:
        radial-gradient(at 0%   0%,  rgba(125, 211, 252, 0.20) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(196, 181, 253, 0.20) 0px, transparent 50%);
}

.bg-dot-grid {
    background-image: radial-gradient(circle at 1px 1px, rgba(15, 23, 42, 0.07) 1px, transparent 0);
    background-size: 24px 24px;
}

.bg-line-grid {
    background-image:
        linear-gradient(to right,  rgba(15, 23, 42, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
}

.bg-dot-grid-dark {
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
    background-size: 22px 22px;
}

/* ---------- Text utilities ---------- */
.text-gradient {
    background: linear-gradient(90deg, #0284c7 0%, #6366f1 60%, #8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-gradient-warm {
    background: linear-gradient(90deg, #f97316 0%, #ec4899 60%, #8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Animations ---------- */
@keyframes blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, -50px) scale(1.1); }
    66%      { transform: translate(-20px, 20px) scale(0.9); }
}
.animate-blob              { animation: blob 7s infinite; }
.animation-delay-2000      { animation-delay: 2s; }
.animation-delay-4000      { animation-delay: 4s; }

@keyframes float-slow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes float-tilt {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-8px) rotate(0.4deg); }
}
.animate-float        { animation: float-slow 6s ease-in-out infinite; }
.animate-float-delay  { animation: float-slow 7s ease-in-out infinite; animation-delay: 1.5s; }
.animate-float-tilt   { animation: float-tilt 8.5s ease-in-out infinite; animation-delay: 0.8s; }

@keyframes soft-pulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}
.animate-soft-pulse { animation: soft-pulse 2.5s ease-in-out infinite; }

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 35s linear infinite; }

@keyframes flow {
    0%   { stroke-dashoffset: 24; }
    100% { stroke-dashoffset: 0; }
}
.flow-line { animation: flow 1.8s linear infinite; }

/* Draw an SVG path on mount (used for hero chart line). */
@keyframes draw-line {
    from { stroke-dashoffset: 1000; }
    to   { stroke-dashoffset: 0; }
}
.animate-draw-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw-line 2s ease-out 0.3s forwards;
}

/* Subtle 3D tilt (used on hero stack cards). */
.tilt-back {
    transform: perspective(1200px) rotateY(-3deg) rotateX(2deg);
}

/* Ticker that scrolls horizontally inside a clipped container. */
@keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-ticker { animation: ticker 30s linear infinite; }

/* Animated conic gradient orb (background ornament). */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.animate-spin-slow { animation: spin-slow 22s linear infinite; }

@keyframes shine {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}
.animate-shine::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: shine 3s ease-in-out infinite;
    pointer-events: none;
}

/* ---------- Reveal on scroll ----------
   Gated by .js on <html> so non-JS users see content immediately. */
html.js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease-out, transform .8s ease-out;
}
html.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* legacy alias used elsewhere */
html.js .fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s ease, transform .55s ease;
}
html.js .fade-up.visible { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .animate-blob,
    .animate-float,
    .animate-float-delay,
    .animate-float-tilt,
    .animate-soft-pulse,
    .animate-marquee,
    .flow-line,
    .animate-shine::after {
        animation: none !important;
    }
    html.js .reveal,
    html.js .fade-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ---------- Card patterns ---------- */
.card-hover {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.10);
}

/* Hairline divider grid (used in Why Choose / stat strips) */
.divider-grid {
    background-color: rgb(226, 232, 240);
    gap: 1px;
}
.divider-grid > * {
    background-color: white;
}

/* ──────────────────────────────────────────────────────────────────────
   Reduced motion — kill animations for users who've opted out at the OS
   level. Helps users with vestibular disorders and saves CPU on phones.
   ────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .animate-blob,
    .animate-ping,
    .animate-spin-slow,
    .animate-float,
    .animate-float-delay,
    .animate-float-tilt,
    .animate-ticker,
    .animate-soft-pulse,
    .animate-draw-line,
    .animation-delay-2000,
    .animation-delay-4000 {
        animation: none !important;
    }
    /* Also disable :hover transforms and arbitrary transitions */
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}