/**
 * Boost Theme Framework - Scroll Effects
 *
 * Scroll-triggered and scroll-linked effects.
 * Loaded only when [data-boost-scroll] is present on page.
 *
 * Effects (all JS-powered):
 * - parallax: Element moves at different scroll speed
 * - scale: Element scales based on scroll position
 * - rotate: Element rotates based on scroll position
 * - opacity: Element fades based on scroll position
 * - blur: Element blurs based on scroll position
 * - progress: Reading progress bar
 * - pin: Element stays fixed while section scrolls
 *
 * @package BoostThemeFramework\Effects
 */

/* /assets/css/effects/effects-scroll.css */

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    [data-boost-scroll] {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
}

/* =============================================================================
   BASE SCROLL EFFECT STYLES
   ============================================================================= */

[data-boost-scroll] {
    will-change: transform;
}

/* =============================================================================
   PARALLAX
   ============================================================================= */

[data-boost-scroll="parallax"] {
    will-change: transform;
}

/* =============================================================================
   SCALE
   ============================================================================= */

[data-boost-scroll="scale"] {
    will-change: transform;
}

/* =============================================================================
   ROTATE
   ============================================================================= */

[data-boost-scroll="rotate"] {
    will-change: transform;
}

/* =============================================================================
   OPACITY
   ============================================================================= */

[data-boost-scroll="opacity"] {
    will-change: opacity;
}

/* =============================================================================
   BLUR
   ============================================================================= */

[data-boost-scroll="blur"] {
    will-change: filter;
}

/* =============================================================================
   PROGRESS BAR
   ============================================================================= */

[data-boost-scroll="progress"] {
    position: fixed;
    top: 0;
    left: 0;
    height: var(--boost-progress-height, 3px);
    background: var(--boost-accent, #6366f1);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 9999;
    will-change: transform;
}

/* Variants */
[data-boost-scroll="progress"][data-boost-scroll-position="bottom"] {
    top: auto;
    bottom: 0;
}

[data-boost-scroll="progress"][data-boost-scroll-gradient="true"] {
    background: linear-gradient(
        90deg,
        var(--boost-gradient-start, #6366f1),
        var(--boost-gradient-end, #8b5cf6)
    );
}

/* =============================================================================
   PIN / STICKY
   ============================================================================= */

[data-boost-scroll="pin"] {
    position: relative;
}

[data-boost-scroll="pin"].is-pinned {
    position: fixed;
    top: var(--boost-pin-top, 0);
}

/* =============================================================================
   HORIZONTAL SCROLL SECTION
   ============================================================================= */

[data-boost-scroll="horizontal"] {
    position: relative;
    height: var(--boost-horizontal-height, 300vh);
}

[data-boost-scroll="horizontal"] .boost-horizontal-track {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

[data-boost-scroll="horizontal"] .boost-horizontal-content {
    display: flex;
    height: 100%;
    will-change: transform;
}

/* =============================================================================
   REVEAL LINE BY LINE
   ============================================================================= */

[data-boost-scroll="reveal-line"] {
    overflow: hidden;
}

[data-boost-scroll="reveal-line"] .boost-line {
    display: block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.6s ease;
}

[data-boost-scroll="reveal-line"] .boost-line.is-visible {
    transform: translateY(0);
    opacity: 1;
}

/* =============================================================================
   COLOR CHANGE ON SCROLL
   ============================================================================= */

[data-boost-scroll="color-change"] {
    transition: background-color 0.5s ease;
}

/* =============================================================================
   LAYERS (Multi-speed parallax)
   ============================================================================= */

[data-boost-scroll="layers"] {
    position: relative;
}

[data-boost-scroll="layers"] [data-boost-layer] {
    position: absolute;
    inset: 0;
    will-change: transform;
}

/* -- Text Reveal ------------------------------- */
[data-boost-scroll="text-reveal"] {
    visibility: hidden;
}

/* -- Draw SVG ---------------------------------- */
[data-boost-scroll="draw-svg"] svg {
    overflow: visible;
}
[data-boost-scroll="draw-svg"] path,
[data-boost-scroll="draw-svg"] line,
[data-boost-scroll="draw-svg"] circle,
[data-boost-scroll="draw-svg"] polyline {
    fill: none;
}

/* -- Sticky Fade ------------------------------- */
[data-boost-scroll="sticky-fade"] {
    position: sticky;
    top: 0;
    min-height: 100vh;
}

/* -- Blur Scroll ------------------------------- */
[data-boost-scroll="blur-scroll"] {
    will-change: filter;
    transition: filter 0.1s linear;
}

/* -- Counter Scroll (multi-speed parallax) ----- */
[data-boost-scroll="counter-scroll"] {
    position: relative;
}
[data-boost-scroll="counter-scroll"] > * {
    will-change: transform;
}