/* Shared landing visual FX — ambient background, glass cards, 3D tilt, glow.
   Balanced intensity: present but not distracting. Self-contained (served from
   /static — CSP 'self', no external deps). All motion is disabled under
   prefers-reduced-motion. Linked only by the landing pages (/products,
   /products/autoclick), so global element rules here are page-scoped in practice. */

:root {
    --fx-violet: #7c3aed;
    --fx-indigo: #4f46e5;
    --fx-pink:   #ec4899;
    --fx-cyan:   #06b6d4;
    --fx-glow:   rgba(124, 58, 237, 0.30);
}

/* Let the ambient layer (z-index:-1) show through. */
html { background: #ffffff; }
body { background: transparent; }

/* ── Ambient animated background: drifting, blurred gradient blobs ────────── */
.fx-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(1100px 760px at 12% -12%, #f3e8ff 0%, transparent 55%),
        radial-gradient(980px 680px at 112% 8%, #e0f2fe 0%, transparent 52%),
        linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
}
.fx-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.45;
    will-change: transform;
}
.fx-blob.b1 { width: 520px; height: 520px; left: -120px; top: -90px;
    background: radial-gradient(circle at 30% 30%, var(--fx-violet), transparent 70%);
    animation: fx-drift1 26s ease-in-out infinite; }
.fx-blob.b2 { width: 460px; height: 460px; right: -110px; top: 120px;
    background: radial-gradient(circle at 60% 40%, var(--fx-pink), transparent 70%);
    animation: fx-drift2 32s ease-in-out infinite; }
.fx-blob.b3 { width: 420px; height: 420px; left: 42%; bottom: -150px;
    background: radial-gradient(circle at 50% 50%, var(--fx-cyan), transparent 70%);
    animation: fx-drift3 30s ease-in-out infinite; }
@keyframes fx-drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,40px) scale(1.10); } }
@keyframes fx-drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,60px) scale(1.08); } }
@keyframes fx-drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-50px) scale(1.12); } }

/* ── Particle canvas (injected by JS into [data-particles] hosts) ─────────── */
[data-particles] { position: relative; }
[data-particles] > *:not(.fx-particles) { position: relative; z-index: 1; }
.fx-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* ── Glass surface ───────────────────────────────────────────────────────── */
.fx-glass {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
}

/* ── 3D tilt card — JS sets --rx/--ry on pointer move ────────────────────── */
.fx-tilt {
    transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.18s ease, box-shadow 0.25s ease;
    will-change: transform;
}
.fx-tilt:hover { box-shadow: 0 22px 60px var(--fx-glow); }

/* Reusable card body for the products grid (replaces welcome.css .quick-card
   so its :hover transform never fights the tilt). Carries the same flex-column
   layout .quick-card provided, so card spacing is unchanged. */
.fx-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 16px; }

/* ── Gradient animated text ──────────────────────────────────────────────── */
.fx-grad-text {
    background: linear-gradient(90deg, var(--fx-violet), var(--fx-pink), var(--fx-indigo), var(--fx-violet));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: fx-hue 8s linear infinite;
}
@keyframes fx-hue { to { background-position: 300% 0; } }

/* ── Glow button ─────────────────────────────────────────────────────────── */
.fx-glow-btn {
    box-shadow: 0 8px 24px var(--fx-glow);
    transition: box-shadow 0.25s ease, transform 0.15s ease;
}
.fx-glow-btn:hover { box-shadow: 0 14px 40px var(--fx-glow); transform: translateY(-2px); }

/* ── Respect reduced-motion: kill all animation + tilt + particles ───────── */
@media (prefers-reduced-motion: reduce) {
    .fx-blob, .fx-grad-text { animation: none !important; }
    .fx-tilt { transform: none !important; transition: none; }
    .fx-particles { display: none; }
    .fx-glow-btn:hover { transform: none; }
}