/* ========== SCROLL REVEAL ANIMATIONS ========== */
/* All sections with .scroll-section start hidden */
.scroll-section {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1),
        transform 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    will-change: opacity, transform;
}

/* When revealed, they become visible */
.scroll-section.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Different animation variants you can use */
.scroll-section.fade-left {
    transform: translateX(-50px);
}

.scroll-section.fade-left.revealed {
    transform: translateX(0);
}

.scroll-section.fade-right {
    transform: translateX(50px);
}

.scroll-section.fade-right.revealed {
    transform: translateX(0);
}

.scroll-section.zoom-in {
    transform: scale(0.95);
}

.scroll-section.zoom-in.revealed {
    transform: scale(1);
}

.scroll-section.blur-up {
    filter: blur(10px);
}

.scroll-section.blur-up.revealed {
    filter: blur(0);
}

/* Stagger animations for cards/grid items */
.stagger-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.stagger-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for multiple items */
.stagger-item:nth-child(1) {
    transition-delay: 0.05s;
}

.stagger-item:nth-child(2) {
    transition-delay: 0.15s;
}

.stagger-item:nth-child(3) {
    transition-delay: 0.25s;
}

.stagger-item:nth-child(4) {
    transition-delay: 0.35s;
}

.stagger-item:nth-child(5) {
    transition-delay: 0.45s;
}

.stagger-item:nth-child(6) {
    transition-delay: 0.55s;
}

.stagger-item:nth-child(7) {
    transition-delay: 0.65s;
}

.stagger-item:nth-child(8) {
    transition-delay: 0.75s;
}

/* Scroll progress indicator */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #06b6d4, #6366f1);
    z-index: 10000;
    transition: width 0.1s ease-out;
    pointer-events: none;
}

/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {

    .scroll-section,
    .stagger-item {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}