/**
 * SCROLL & REVEAL EFFECTS - Bimmer Modular
 * =========================================
 * Animaciones que se disparan al hacer scroll
 * Parallax, reveal, fade-in effects
 */

/* ==================== SCROLL REVEAL ANIMATIONS ==================== */

/* Elementos con clase reveal se animan al entrar en viewport */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-up {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-down {
    opacity: 0;
    transform: translateY(-60px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-down.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

.reveal-rotate {
    opacity: 0;
    transform: rotate(-10deg) scale(0.8);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-rotate.active {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* ==================== STAGGER REVEAL ==================== */

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-stagger.active > * {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger.active > :nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.active > :nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.active > :nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger.active > :nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger.active > :nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger.active > :nth-child(6) { transition-delay: 0.3s; }
.reveal-stagger.active > :nth-child(n+7) { 
    transition-delay: calc(0.05s * (var(--index, 7) - 6));
}

/* ==================== PARALLAX SCROLL EFFECTS ==================== */

.parallax-container {
    position: relative;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    transform: translateZ(-1px) scale(2);
    z-index: -1;
}

/* Parallax suave sin background-attachment (mejor compatibilidad) */
.parallax-smooth {
    position: relative;
    transition: transform 0.5s ease-out;
}

.parallax-smooth.parallax-slow {
    transform: translateY(var(--parallax-offset, 0px));
}

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

.progress-scroll {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        var(--color-secondary) 50%,
        var(--color-primary) 100%
    );
    background-size: 200% 100%;
    animation: textGradientFlow 2s ease-in-out infinite;
    width: 0%;
    z-index: 9999;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
    transition: width 0.1s ease;
}

/* ==================== SCROLL TRIGGERED COUNTER ==================== */

.counter {
    transition: all 0.3s ease;
}

.counter.counting {
    animation: scalePulse 0.6s ease-in-out;
}

/* ==================== FLOATING ELEMENTS ON SCROLL ==================== */

.scroll-float {
    transition: transform 0.5s ease-out;
}

.scroll-float.scrolled-past {
    transform: translateY(calc(var(--scroll-offset, 0px) * 0.1));
}

/* ==================== FADE ON SCROLL ==================== */

.fade-scroll {
    transition: opacity 0.6s ease;
}

.fade-scroll.scrolled-far {
    opacity: 0.3;
}

.fade-scroll.scrolled-past {
    opacity: 0.1;
}

/* ==================== TEXT REVEAL ON SCROLL ==================== */

.text-reveal {
    position: relative;
    overflow: hidden;
}

.text-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: white;
    transform: translateX(-100%);
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.text-reveal.active::after {
    transform: translateX(100%);
}

body.dark-mode .text-reveal::after {
    background: var(--color-dark-surface);
}

/* ==================== LINE DRAW ANIMATION ==================== */

.line-draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.line-draw.active {
    stroke-dashoffset: 0;
}

/* ==================== BLUR SCROLL EFFECT ==================== */

.blur-scroll {
    transition: filter 0.6s ease;
}

.blur-scroll.scrolled-past {
    filter: blur(4px);
}

/* ==================== ROTATING ELEMENTS ON SCROLL ==================== */

.rotate-scroll {
    transition: transform 0.6s ease-out;
}

.rotate-scroll.scrolled-past {
    transform: rotate(var(--scroll-rotation, 5deg));
}

/* ==================== SCALE EFFECT ON SCROLL ==================== */

.scale-scroll {
    transition: transform 0.6s ease-out;
    transform-origin: center;
}

.scale-scroll.scrolled-past {
    transform: scale(var(--scroll-scale, 1.05));
}

/* ==================== GRADIENT SHIFT ON SCROLL ==================== */

.gradient-scroll {
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-secondary) 100%
    );
    background-size: 200% 100%;
    transition: background-position 0.6s ease;
}

.gradient-scroll.scrolled-past {
    background-position: var(--gradient-position, 100% 0%);
}

/* ==================== REVEAL WORDS ==================== */

.words-reveal {
    display: inline;
}

.words-reveal .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-right: 0.3em;
}

.words-reveal.active .word {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== INTERSECTING ELEMENTS ==================== */

.intersect {
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: translateY(30px);
}

.intersect.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== SCROLL SHADOW HEADER ==================== */

.header {
    transition: box-shadow 0.3s ease;
    box-shadow: none;
}

.header.scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.dark-mode .header.scrolled {
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.1);
}

/* ==================== STICKY SCROLL ANIMATION ==================== */

.sticky-animate {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: all 0.3s ease;
}

.sticky-animate.stuck {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.dark-mode .sticky-animate.stuck {
    background: rgba(30, 30, 30, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ==================== HORIZONTAL SCROLL REVEAL ==================== */

.h-scroll-reveal {
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.h-scroll-reveal.active {
    opacity: 1;
    transform: translateX(0);
}

/* ==================== PERFORMANCE OPTIMIZATION ==================== */

/* Use will-change para optimización */
.will-scroll {
    will-change: transform, opacity;
}

.will-scroll:not(.active) {
    will-change: auto;
}

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

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-up,
    .reveal-down,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-rotate,
    .parallax-smooth,
    .scroll-float,
    .fade-scroll,
    .text-reveal,
    .blur-scroll,
    .rotate-scroll,
    .scale-scroll,
    .gradient-scroll,
    .words-reveal,
    .intersect,
    .h-scroll-reveal {
        transition: none;
        opacity: 1;
        transform: none;
    }

    .reveal.active,
    .intersect.in-view {
        opacity: 1;
        transform: none;
    }

    .parallax-bg {
        background-attachment: scroll;
    }
}