/* ==========================================================================
   Lumify Stream — Scroll & Interactive Animations
   High-performance GPU-accelerated CSS Transitions & Keyframes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base Reveal Classes (Initial Hidden State)
   -------------------------------------------------------------------------- */
.reveal,
.reveal-up {
    opacity: 0;
    transform: translate3d(0, 44px, 0);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-left {
    opacity: 0;
    transform: translate3d(-48px, 0, 0);
    transition: opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-right {
    opacity: 0;
    transform: translate3d(48px, 0, 0);
    transition: opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-scale {
    opacity: 0;
    transform: scale3d(0.90, 0.90, 1);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* --------------------------------------------------------------------------
   2. Active / Visible States (Triggered via JS IntersectionObserver)
   -------------------------------------------------------------------------- */
.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

.reveal-scale.is-visible {
    opacity: 1 !important;
    transform: scale3d(1, 1, 1) !important;
}

/* --------------------------------------------------------------------------
   3. Stagger Animations for Child Containers
   -------------------------------------------------------------------------- */
.reveal-stagger > * {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    transition: opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-stagger.is-visible > * {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.06s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.16s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.36s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.46s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.56s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.66s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.76s; }

/* --------------------------------------------------------------------------
   4. Manual Delay Utility Modifiers
   -------------------------------------------------------------------------- */
.delay-100 { transition-delay: 0.1s !important; }
.delay-200 { transition-delay: 0.2s !important; }
.delay-300 { transition-delay: 0.3s !important; }
.delay-400 { transition-delay: 0.4s !important; }
.delay-500 { transition-delay: 0.5s !important; }
.delay-600 { transition-delay: 0.6s !important; }

/* --------------------------------------------------------------------------
   5. Dynamic Header Scroll Blur & Shadow
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   5. Dynamic Header Scroll Blur & Shadow
   -------------------------------------------------------------------------- */
.site-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: transform 0.3s ease;
}

.site-header.scrolled {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.site-header.scrolled .header-inner {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(25, 28, 33, 0.15) !important;
    background: rgba(255, 253, 249, 0.94) !important;
}

/* --------------------------------------------------------------------------
   6. Keyframe Highlights (Pills & Badges)
   -------------------------------------------------------------------------- */
@keyframes floatSubtle {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
}

@keyframes pulseGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.9); }
}

.pulse-dot {
    animation: pulseGlow 2s infinite ease-in-out;
}

.mockup-floating-badge {
    animation: floatSubtle 4s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   7. Card Hover Dynamics
   -------------------------------------------------------------------------- */
.feature-card,
.bento-card,
.about-card,
.feat-card-primary,
.pillar-card,
.contact-channel-card,
.step-card {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.28s ease !important;
}

/* --------------------------------------------------------------------------
   8. Reduced Motion Accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-up,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    .mockup-floating-badge,
    .pulse-dot {
        animation: none !important;
    }
}