/* Guide Animations — React Bits inspired, vanilla CSS + IntersectionObserver */
/* Все элементы начинают скрытыми и появляются при скролле */

/* === Base: скрытое состояние === */
.ga-hidden {
    opacity: 0;
    will-change: opacity, transform, filter;
}

/* === 1. Fade In === */
.ga-fade-in {
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.ga-fade-in.ga-visible {
    opacity: 1;
}

/* === 2. Slide Up === */
.ga-slide-up {
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.ga-slide-up.ga-visible {
    opacity: 1;
    transform: translateY(0);
}

/* === 3. Blur to Focus === */
.ga-blur-in {
    filter: blur(8px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.ga-blur-in.ga-visible {
    opacity: 1;
    filter: blur(0);
}

/* === 4. Scale In (для изображений) === */
.ga-scale-in {
    transform: scale(0.92);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ga-scale-in.ga-visible {
    opacity: 1;
    transform: scale(1);
}

/* === 5. Slide from Left === */
.ga-slide-left {
    transform: translateX(-50px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.ga-slide-left.ga-visible {
    opacity: 1;
    transform: translateX(0);
}

/* === 6. Slide from Right === */
.ga-slide-right {
    transform: translateX(50px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.ga-slide-right.ga-visible {
    opacity: 1;
    transform: translateX(0);
}

/* === 7. Gradient Text (для заголовков) === */
.ga-gradient-text {
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* === 8. Glow Border (для скриншотов) === */
.ga-glow-border {
    position: relative;
    transition: box-shadow 0.5s ease;
}
.ga-glow-border.ga-visible {
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.15), 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* === 9. Stagger delay (для списков) === */
.ga-stagger-1 { transition-delay: 0.1s; }
.ga-stagger-2 { transition-delay: 0.2s; }
.ga-stagger-3 { transition-delay: 0.3s; }
.ga-stagger-4 { transition-delay: 0.4s; }
.ga-stagger-5 { transition-delay: 0.5s; }

/* === 10. Подсветка CTA-блока === */
.ga-cta-glow {
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.6s ease;
    transform: translateY(20px);
}
.ga-cta-glow.ga-visible {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 0 60px rgba(99, 102, 241, 0.2);
}

/* === Prefers reduced motion === */
@media (prefers-reduced-motion: reduce) {
    .ga-hidden { opacity: 1; transform: none; filter: none; }
    [class*="ga-"] { transition: none !important; animation: none !important; }
}