/* ===== SCROLL-TRIGGERED ANIMATIONS ===== */
/* Data attribute-based scroll effects system */
/* Uses IntersectionObserver for performance */

/* === BASE SCROLL ANIMATION SETUP === */
[data-scroll] {
    opacity: 0;
    transition:
        opacity var(--duration-slow, 500ms) var(--ease-smooth, cubic-bezier(0.25, 0.1, 0.25, 1)),
        transform var(--duration-slow, 500ms) var(--ease-smooth, cubic-bezier(0.25, 0.1, 0.25, 1));
    will-change: opacity, transform;
}

[data-scroll].in-view,
[data-scroll].scroll-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1) !important;
}

/* === FADE ANIMATIONS === */

/* Fade Up */
[data-scroll="fade-up"] {
    transform: translateY(40px);
}

/* Fade Down */
[data-scroll="fade-down"] {
    transform: translateY(-40px);
}

/* Fade Left */
[data-scroll="fade-left"] {
    transform: translateX(40px);
}

/* Fade Right */
[data-scroll="fade-right"] {
    transform: translateX(-40px);
}

/* Fade In (No movement) */
[data-scroll="fade-in"] {
    transform: none;
}

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

/* Scale In */
[data-scroll="scale-in"] {
    transform: scale(0.8);
}

/* Scale In Up */
[data-scroll="scale-up"] {
    transform: scale(0.8) translateY(40px);
}

/* Scale In Down */
[data-scroll="scale-down"] {
    transform: scale(0.8) translateY(-40px);
}

/* Zoom In */
[data-scroll="zoom-in"] {
    transform: scale(0.5);
}

/* Zoom Out (starts big) */
[data-scroll="zoom-out"] {
    transform: scale(1.2);
    opacity: 0.5;
}

/* === SLIDE ANIMATIONS === */

/* Slide Left */
[data-scroll="slide-left"] {
    transform: translateX(100px);
}

/* Slide Right */
[data-scroll="slide-right"] {
    transform: translateX(-100px);
}

/* Slide Up */
[data-scroll="slide-up"] {
    transform: translateY(100px);
}

/* Slide Down */
[data-scroll="slide-down"] {
    transform: translateY(-100px);
}

/* === FLIP ANIMATIONS === */

/* Flip Up */
[data-scroll="flip-up"] {
    transform: perspective(2500px) rotateX(-30deg);
    transform-origin: center bottom;
}

/* Flip Down */
[data-scroll="flip-down"] {
    transform: perspective(2500px) rotateX(30deg);
    transform-origin: center top;
}

/* Flip Left */
[data-scroll="flip-left"] {
    transform: perspective(2500px) rotateY(30deg);
    transform-origin: left center;
}

/* Flip Right */
[data-scroll="flip-right"] {
    transform: perspective(2500px) rotateY(-30deg);
    transform-origin: right center;
}

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

/* Rotate In */
[data-scroll="rotate-in"] {
    transform: rotate(-15deg) scale(0.9);
}

/* Rotate In Left */
[data-scroll="rotate-left"] {
    transform: rotate(-30deg) translateX(-40px);
    transform-origin: left center;
}

/* Rotate In Right */
[data-scroll="rotate-right"] {
    transform: rotate(30deg) translateX(40px);
    transform-origin: right center;
}

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

[data-scroll="blur-in"] {
    filter: blur(10px);
    transition:
        opacity var(--duration-slow, 500ms) var(--ease-smooth),
        transform var(--duration-slow, 500ms) var(--ease-smooth),
        filter var(--duration-slow, 500ms) var(--ease-smooth);
}

[data-scroll="blur-in"].in-view {
    filter: blur(0);
}

[data-scroll="blur-up"] {
    transform: translateY(40px);
    filter: blur(10px);
    transition:
        opacity var(--duration-slow, 500ms) var(--ease-smooth),
        transform var(--duration-slow, 500ms) var(--ease-smooth),
        filter var(--duration-slow, 500ms) var(--ease-smooth);
}

[data-scroll="blur-up"].in-view {
    filter: blur(0);
}

/* === CLIP PATH ANIMATIONS === */

[data-scroll="reveal-up"] {
    clip-path: inset(100% 0 0 0);
    transform: none;
    opacity: 1;
    transition: clip-path var(--duration-slow, 500ms) var(--ease-smooth);
}

[data-scroll="reveal-up"].in-view {
    clip-path: inset(0 0 0 0);
}

[data-scroll="reveal-down"] {
    clip-path: inset(0 0 100% 0);
    transform: none;
    opacity: 1;
    transition: clip-path var(--duration-slow, 500ms) var(--ease-smooth);
}

[data-scroll="reveal-down"].in-view {
    clip-path: inset(0 0 0 0);
}

[data-scroll="reveal-left"] {
    clip-path: inset(0 100% 0 0);
    transform: none;
    opacity: 1;
    transition: clip-path var(--duration-slow, 500ms) var(--ease-smooth);
}

[data-scroll="reveal-left"].in-view {
    clip-path: inset(0 0 0 0);
}

[data-scroll="reveal-right"] {
    clip-path: inset(0 0 0 100%);
    transform: none;
    opacity: 1;
    transition: clip-path var(--duration-slow, 500ms) var(--ease-smooth);
}

[data-scroll="reveal-right"].in-view {
    clip-path: inset(0 0 0 0);
}

/* Circle reveal */
[data-scroll="reveal-circle"] {
    clip-path: circle(0% at 50% 50%);
    transform: none;
    opacity: 1;
    transition: clip-path var(--duration-slower, 800ms) var(--ease-smooth);
}

[data-scroll="reveal-circle"].in-view {
    clip-path: circle(100% at 50% 50%);
}

/* === STAGGERED CHILDREN ANIMATIONS === */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity var(--duration-normal, 300ms) var(--ease-smooth),
        transform var(--duration-normal, 300ms) var(--ease-smooth);
}

[data-stagger].in-view > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].in-view > *:nth-child(2) { transition-delay: 100ms; }
[data-stagger].in-view > *:nth-child(3) { transition-delay: 200ms; }
[data-stagger].in-view > *:nth-child(4) { transition-delay: 300ms; }
[data-stagger].in-view > *:nth-child(5) { transition-delay: 400ms; }
[data-stagger].in-view > *:nth-child(6) { transition-delay: 500ms; }
[data-stagger].in-view > *:nth-child(7) { transition-delay: 600ms; }
[data-stagger].in-view > *:nth-child(8) { transition-delay: 700ms; }
[data-stagger].in-view > *:nth-child(9) { transition-delay: 800ms; }
[data-stagger].in-view > *:nth-child(10) { transition-delay: 900ms; }

[data-stagger].in-view > * {
    opacity: 1;
    transform: translateY(0);
}

/* Faster stagger */
[data-stagger="fast"].in-view > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger="fast"].in-view > *:nth-child(2) { transition-delay: 50ms; }
[data-stagger="fast"].in-view > *:nth-child(3) { transition-delay: 100ms; }
[data-stagger="fast"].in-view > *:nth-child(4) { transition-delay: 150ms; }
[data-stagger="fast"].in-view > *:nth-child(5) { transition-delay: 200ms; }
[data-stagger="fast"].in-view > *:nth-child(6) { transition-delay: 250ms; }
[data-stagger="fast"].in-view > *:nth-child(7) { transition-delay: 300ms; }
[data-stagger="fast"].in-view > *:nth-child(8) { transition-delay: 350ms; }
[data-stagger="fast"].in-view > *:nth-child(9) { transition-delay: 400ms; }
[data-stagger="fast"].in-view > *:nth-child(10) { transition-delay: 450ms; }

/* Slower stagger */
[data-stagger="slow"].in-view > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger="slow"].in-view > *:nth-child(2) { transition-delay: 150ms; }
[data-stagger="slow"].in-view > *:nth-child(3) { transition-delay: 300ms; }
[data-stagger="slow"].in-view > *:nth-child(4) { transition-delay: 450ms; }
[data-stagger="slow"].in-view > *:nth-child(5) { transition-delay: 600ms; }
[data-stagger="slow"].in-view > *:nth-child(6) { transition-delay: 750ms; }

/* === PARALLAX LAYERS === */
[data-parallax] {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* Parallax speeds - controlled via JS */
[data-parallax="slow"] {
    --parallax-speed: 0.1;
}

[data-parallax="medium"] {
    --parallax-speed: 0.3;
}

[data-parallax="fast"] {
    --parallax-speed: 0.5;
}

[data-parallax="reverse"] {
    --parallax-speed: -0.2;
}

/* === ANIMATION DURATION MODIFIERS === */
[data-scroll-duration="fast"] {
    transition-duration: var(--duration-fast, 200ms) !important;
}

[data-scroll-duration="normal"] {
    transition-duration: var(--duration-normal, 300ms) !important;
}

[data-scroll-duration="slow"] {
    transition-duration: var(--duration-slow, 500ms) !important;
}

[data-scroll-duration="slower"] {
    transition-duration: var(--duration-slower, 800ms) !important;
}

[data-scroll-duration="dramatic"] {
    transition-duration: var(--duration-dramatic, 1200ms) !important;
}

/* === ANIMATION DELAY MODIFIERS === */
[data-scroll-delay="100"] { transition-delay: 100ms; }
[data-scroll-delay="200"] { transition-delay: 200ms; }
[data-scroll-delay="300"] { transition-delay: 300ms; }
[data-scroll-delay="400"] { transition-delay: 400ms; }
[data-scroll-delay="500"] { transition-delay: 500ms; }
[data-scroll-delay="600"] { transition-delay: 600ms; }
[data-scroll-delay="700"] { transition-delay: 700ms; }
[data-scroll-delay="800"] { transition-delay: 800ms; }

/* === ANIMATION EASING MODIFIERS === */
[data-scroll-ease="elastic"] {
    transition-timing-function: var(--ease-elastic, cubic-bezier(0.68, -0.55, 0.265, 1.55)) !important;
}

[data-scroll-ease="bounce"] {
    transition-timing-function: var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)) !important;
}

[data-scroll-ease="smooth"] {
    transition-timing-function: var(--ease-smooth, cubic-bezier(0.25, 0.1, 0.25, 1)) !important;
}

[data-scroll-ease="dramatic"] {
    transition-timing-function: var(--ease-dramatic, cubic-bezier(0.77, 0, 0.175, 1)) !important;
}

/* === SCROLL-LINKED ANIMATIONS (Continuous) === */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gradient-primary, linear-gradient(90deg, #E63946, #FF2E63));
    transform-origin: left;
    transform: scaleX(0);
    z-index: var(--z-max, 9999);
    transition: transform 0.1s linear;
}

.scroll-progress.active {
    transform: scaleX(var(--scroll-progress, 0));
}

/* === SCROLL INDICATOR === */
.scroll-indicator {
    position: absolute;
    bottom: var(--space-8, 2rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    color: var(--text-on-dark-muted, rgba(255, 255, 255, 0.7));
    animation: scrollIndicatorBounce 2s ease-in-out infinite;
}

.scroll-indicator-text {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: var(--font-size-micro, 0.625rem);
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: var(--letter-spacing-widest, 0.2em);
    text-transform: uppercase;
}

.scroll-indicator-icon {
    width: 30px;
    height: 50px;
    border: 2px solid currentColor;
    border-radius: var(--radius-full, 9999px);
    position: relative;
}

.scroll-indicator-icon::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    height: 10px;
    background: currentColor;
    border-radius: var(--radius-full, 9999px);
    transform: translateX(-50%);
    animation: scrollIndicatorDot 2s ease-in-out infinite;
}

@keyframes scrollIndicatorBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

@keyframes scrollIndicatorDot {
    0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
    50% { opacity: 0.5; transform: translateX(-50%) translateY(12px); }
}

/* === COUNTER ANIMATION === */
[data-counter] {
    display: inline-block;
}

[data-counter].counting {
    animation: counterPulse 0.3s ease-out;
}

@keyframes counterPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* === TEXT SPLIT ANIMATION === */
[data-text-split] .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--duration-normal, 300ms) var(--ease-smooth),
        transform var(--duration-normal, 300ms) var(--ease-smooth);
}

[data-text-split].in-view .char {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered character animation */
[data-text-split].in-view .char:nth-child(1) { transition-delay: 0ms; }
[data-text-split].in-view .char:nth-child(2) { transition-delay: 30ms; }
[data-text-split].in-view .char:nth-child(3) { transition-delay: 60ms; }
[data-text-split].in-view .char:nth-child(4) { transition-delay: 90ms; }
[data-text-split].in-view .char:nth-child(5) { transition-delay: 120ms; }
[data-text-split].in-view .char:nth-child(6) { transition-delay: 150ms; }
[data-text-split].in-view .char:nth-child(7) { transition-delay: 180ms; }
[data-text-split].in-view .char:nth-child(8) { transition-delay: 210ms; }
[data-text-split].in-view .char:nth-child(9) { transition-delay: 240ms; }
[data-text-split].in-view .char:nth-child(10) { transition-delay: 270ms; }
[data-text-split].in-view .char:nth-child(n+11) { transition-delay: 300ms; }

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    [data-scroll],
    [data-stagger] > *,
    [data-parallax],
    [data-text-split] .char {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
        animation: none !important;
    }

    .scroll-indicator,
    .scroll-progress {
        animation: none !important;
    }
}

/* === END OF SCROLL ANIMATIONS === */