/**
 * GPLinkIT Theme — Scroll Reveal & Scroll Animation Engine
 * Smooth, lightweight, 60fps hardware-accelerated animations on scroll across all pages.
 * Supports prefers-reduced-motion for full accessibility.
 */

/* ==========================================================================
   1. Base Reveal Classes & Properties
   ========================================================================== */

.gplinkit-reveal,
[data-reveal],
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* Revealed State */
.gplinkit-reveal.is-revealed,
[data-reveal].is-revealed,
.reveal-on-scroll.is-revealed {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* ==========================================================================
   2. Directional Variations
   ========================================================================== */

.gplinkit-reveal[data-reveal-direction="up"],
.reveal-up {
    transform: translateY(32px);
}

.gplinkit-reveal[data-reveal-direction="down"],
.reveal-down {
    transform: translateY(-32px);
}

.gplinkit-reveal[data-reveal-direction="left"],
.reveal-left {
    transform: translateX(36px);
}

.gplinkit-reveal[data-reveal-direction="right"],
.reveal-right {
    transform: translateX(-36px);
}

.gplinkit-reveal[data-reveal-direction="zoom"],
.reveal-zoom {
    transform: scale(0.92) translateY(20px);
}

.gplinkit-reveal[data-reveal-direction="fade"],
.reveal-fade {
    transform: none;
}

/* Revealed reset for directional variations */
.gplinkit-reveal.is-revealed[data-reveal-direction="left"],
.gplinkit-reveal.is-revealed[data-reveal-direction="right"],
.reveal-left.is-revealed,
.reveal-right.is-revealed {
    transform: translateX(0) !important;
}

.gplinkit-reveal.is-revealed[data-reveal-direction="zoom"],
.reveal-zoom.is-revealed {
    transform: scale(1) translateY(0) !important;
}

/* ==========================================================================
   3. Staggered Delays
   ========================================================================== */

.reveal-delay-1, [data-reveal-delay="100"] { transition-delay: 100ms; }
.reveal-delay-2, [data-reveal-delay="200"] { transition-delay: 200ms; }
.reveal-delay-3, [data-reveal-delay="300"] { transition-delay: 300ms; }
.reveal-delay-4, [data-reveal-delay="400"] { transition-delay: 400ms; }
.reveal-delay-5, [data-reveal-delay="500"] { transition-delay: 500ms; }
.reveal-delay-6, [data-reveal-delay="600"] { transition-delay: 600ms; }

/* ==========================================================================
   4. Floating & Ambient Micro-Animations
   ========================================================================== */

@keyframes gplinkit-float-subtle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.animate-float-subtle {
    animation: gplinkit-float-subtle 4s ease-in-out infinite;
}

/* ==========================================================================
   5. Reading Progress Indicator (Header Top Bar)
   ========================================================================== */

#gplinkit-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #10b981 0%, #059669 50%, #34d399 100%);
    width: 0%;
    z-index: 99999;
    pointer-events: none;
    transition: width 0.1s cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* ==========================================================================
   6. Accessibility & Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .gplinkit-reveal,
    [data-reveal],
    .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    #gplinkit-scroll-progress {
        display: none !important;
    }
}