/**
 * Rivulet IQ — Site Animations
 * Parallax Offset + 3D Tilt (Demo 5)
 *
 * Zero dependencies. Uses IntersectionObserver for scroll,
 * CSS custom properties for runtime config, and vanilla JS for tilt.
 *
 * Classes applied by JS:
 *   .riq-reveal            — base scroll-reveal element
 *   .riq-reveal--up        — fade + slide from below (default)
 *   .riq-reveal--left      — fade + slide from left
 *   .riq-reveal--right     — fade + slide from right
 *   .riq-reveal--scale     — fade + scale from 96%
 *   .riq-visible            — element is in view (animation complete state)
 *   .riq-tilt               — 3D tilt hover card
 *   .riq-stagger-child      — child element that staggers
 *   .riq-hero-orb           — floating gradient orb
 */

/* ═══════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES (overridden by JS)
   ═══════════════════════════════════════════ */
:root {
    --riq-reveal-duration: 700ms;
    --riq-reveal-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --riq-stagger-delay: 70ms;
    --riq-tilt-max: 4deg;
    --riq-brand-blue: #0071e3;
}


/* ═══════════════════════════════════════════
   2. SCROLL REVEAL — BASE
   ═══════════════════════════════════════════ */
.riq-reveal {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity var(--riq-reveal-duration) var(--riq-reveal-easing),
        transform var(--riq-reveal-duration) var(--riq-reveal-easing),
        filter var(--riq-reveal-duration) var(--riq-reveal-easing);
}

/* Direction variant — subtle upward only */
.riq-reveal--up {
    transform: translateY(5px);
}

/* Visible state — all variants resolve to same target */
.riq-reveal.riq-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
}


/* ═══════════════════════════════════════════
   3. CARD / BOX REVEAL — SCALE + BLUR CLEAR
   ═══════════════════════════════════════════ */
.riq-box-reveal {
    opacity: 0;
    transform: scale(0.97);
    filter: blur(2px);
    transition:
        opacity calc(var(--riq-reveal-duration) * 0.7) ease,
        transform calc(var(--riq-reveal-duration) * 0.7) cubic-bezier(0.25, 0.46, 0.45, 0.94),
        filter calc(var(--riq-reveal-duration) * 0.6) ease;
    transition-delay: var(--riq-child-delay, 0ms);
}

.riq-visible > .riq-box-reveal,
.riq-visible .riq-box-reveal,
.riq-box-reveal.riq-visible {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}


/* ═══════════════════════════════════════════
   3b. STAGGER CHILDREN (legacy compat)
   ═══════════════════════════════════════════ */
.riq-stagger-child {
    opacity: 0;
    transform: scale(0.97);
    filter: blur(2px);
    transition:
        opacity calc(var(--riq-reveal-duration) * 0.8) ease,
        transform calc(var(--riq-reveal-duration) * 0.8) ease,
        filter calc(var(--riq-reveal-duration) * 0.6) ease;
}

/* Delay is set inline by JS via --riq-child-delay */
.riq-stagger-child {
    transition-delay: var(--riq-child-delay, 0ms);
}

/* When parent becomes visible, children animate */
.riq-visible > .riq-stagger-child,
.riq-visible .riq-stagger-child {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}


/* ═══════════════════════════════════════════
   4. CARD HOVER — LIFT + SHADOW
   ═══════════════════════════════════════════ */
.riq-hover-card {
    transition:
        box-shadow 0.4s ease,
        transform 0.4s ease;
}

.riq-hover-card:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}


/* ═══════════════════════════════════════════
   5. 3D TILT (transform set by JS)
   ═══════════════════════════════════════════ */
.riq-tilt {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.15s ease-out, box-shadow 0.4s ease;
}

.riq-tilt:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}


/* ═══════════════════════════════════════════
   6. HERO FLOATING ORBS
   ═══════════════════════════════════════════ */
.riq-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: riqOrbFloat 8s ease-in-out infinite;
}

.riq-hero-orb--1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 113, 227, 0.15), transparent 70%);
    top: -120px;
    right: -120px;
}

.riq-hero-orb--2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 113, 227, 0.1), transparent 70%);
    bottom: -100px;
    left: -100px;
    animation-delay: 4s;
}

@keyframes riqOrbFloat {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(20px, -20px); }
}


/* ═══════════════════════════════════════════
   7. CTA / BUTTON HOVER
   ═══════════════════════════════════════════ */
.riq-btn-hover {
    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.riq-btn-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.3);
}


/* ═══════════════════════════════════════════
   8. LINK / TEXT HOVER — UNDERLINE EXPAND
   ═══════════════════════════════════════════ */
.riq-link-hover {
    position: relative;
    text-decoration: none;
}

.riq-link-hover::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--riq-brand-blue);
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.riq-link-hover:hover::after {
    width: 100%;
    left: 0;
}


/* ═══════════════════════════════════════════
   9. IMAGE / VISUAL BLOCK HOVER
   ═══════════════════════════════════════════ */
.riq-img-hover {
    overflow: hidden;
    border-radius: inherit;
}

.riq-img-hover img {
    transition: transform 0.5s ease;
    display: block;
    width: 100%;
}

.riq-img-hover:hover img {
    transform: scale(1.03);
}


/* ═══════════════════════════════════════════
   10. STAT / NUMBER HOVER
   ═══════════════════════════════════════════ */
.riq-stat-hover {
    transition: transform 0.3s ease;
}

.riq-stat-hover:hover {
    transform: translateY(-4px);
}


/* ═══════════════════════════════════════════
   11. REDUCED MOTION — RESPECT USER PREFERENCE
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .riq-reveal,
    .riq-box-reveal,
    .riq-stagger-child,
    .riq-tilt,
    .riq-hover-card,
    .riq-btn-hover,
    .riq-img-hover img,
    .riq-stat-hover,
    .riq-hero-orb {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}


/* ═══════════════════════════════════════════
   12. PRINT — DISABLE ALL ANIMATIONS
   ═══════════════════════════════════════════ */
@media print {
    .riq-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
    .riq-hero-orb {
        display: none !important;
    }
}