/* ─── Rapid Fusion motion & depth layer ─────────────────────────────────────
 *
 * Small, shared visual layer that fights the "flat AI page" look without
 * changing the Rapid Fusion palette. Everything here is additive; nothing
 * here changes brand colour, font, or copy.
 *
 * Provides five things:
 *   1. A whisper-thin grain overlay (fixed, pointer-events: none)
 *   2. Purple-tinted shadow tokens
 *   3. Reveal-on-scroll transitions for [data-reveal] elements
 *   4. Card spotlight (cursor-following soft radial) for [data-spotlight]
 *   5. Ambient glow helper for hero-style panels
 *
 * The behavioural pieces (reveal-on-scroll.js, card-spotlight.js) drive the
 * class toggles and CSS variables that this stylesheet listens for.
 */

:root {
    --rf-accent: #A74E9E;
    --rf-accent-light: #BB6DB3;

    /* Purple-tinted shadow ramp – replaces generic black shadows on brand
       surfaces. Sizes are named by intent, not by pixel value. */
    --rf-shadow-sm: 0 2px 10px rgba(10, 6, 14, 0.35),
                    0 1px 0 rgba(255, 255, 255, 0.03) inset;
    --rf-shadow-md: 0 10px 30px rgba(10, 6, 14, 0.45),
                    0 6px 18px rgba(167, 78, 158, 0.10),
                    0 1px 0 rgba(255, 255, 255, 0.04) inset;
    --rf-shadow-lg: 0 20px 60px rgba(10, 6, 14, 0.55),
                    0 12px 36px rgba(167, 78, 158, 0.16),
                    0 1px 0 rgba(255, 255, 255, 0.05) inset;

    --rf-reveal-duration: 620ms;
    --rf-reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ─── 1. Grain overlay ──────────────────────────────────────────────────────
 * A single fixed SVG-noise layer sits over the page content and under any
 * modal / lightbox surface. `pointer-events: none` keeps every click and
 * scroll passing straight through to what's underneath. `mix-blend-mode:
 * overlay` blends into the page so the grain reads as micro-texture on the
 * surfaces themselves, not as a haze in front of them.
 *
 * z-index sits above the landing page's sticky nav (100) and below the
 * signup modal (1000), so the modal card stays crisp. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

/* ─── 2. Reveal on scroll ───────────────────────────────────────────────────
 * Elements marked [data-reveal] start slightly lower and transparent, then
 * rise into place when reveal-on-scroll.js adds .is-visible. Delay is
 * driven by the CSS custom property --reveal-delay so groups can be
 * staggered from HTML without extra CSS rules. */
[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
        opacity var(--rf-reveal-duration) var(--rf-reveal-ease),
        transform var(--rf-reveal-duration) var(--rf-reveal-ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ─── 3. Card spotlight ─────────────────────────────────────────────────────
 * Cards marked [data-spotlight] gain a soft purple radial that follows the
 * cursor. card-spotlight.js updates --spot-x and --spot-y (0-100%) on hover
 * and toggles .is-spotlit. The gradient lives on a ::before pseudo so the
 * card's own background is untouched. */
[data-spotlight] {
    position: relative;
    isolation: isolate;
}

[data-spotlight]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        320px circle at var(--spot-x, 50%) var(--spot-y, 0%),
        rgba(187, 109, 179, 0.16),
        rgba(167, 78, 158, 0.06) 40%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: none;
    z-index: 1;
}

[data-spotlight].is-spotlit::before {
    opacity: 1;
}

/* Cards need their real content to sit above the spotlight layer. */
[data-spotlight] > * {
    position: relative;
    z-index: 2;
}

/* ─── 4. Ambient glow (hero-style panels) ───────────────────────────────────
 * Slow, low-amplitude pulse that lives behind hero content. Applied via the
 * .rf-ambient class on the wrapping element. */
.rf-ambient {
    position: relative;
    isolation: isolate;
}

.rf-ambient::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: -1;
    background:
        radial-gradient(60% 55% at 30% 30%, rgba(167, 78, 158, 0.22), transparent 60%),
        radial-gradient(45% 40% at 80% 70%, rgba(187, 109, 179, 0.14), transparent 65%);
    filter: blur(24px);
    animation: rf-ambient-drift 14s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes rf-ambient-drift {
    0%   { transform: translate3d(-1%, -1%, 0) scale(1); opacity: 0.9; }
    100% { transform: translate3d(2%,  2%,  0) scale(1.06); opacity: 1; }
}

/* ─── 5. Reduced motion ─────────────────────────────────────────────────────
 * Users who ask for less motion get the depth (grain, shadows, spotlight
 * gradient) but not the movement. */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .rf-ambient::before {
        animation: none;
    }
}