/* Animations & Micro-interactions */

/* Fade In Up Observer Class */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for children */
.stagger-1 {
    transition-delay: 100ms;
}

.stagger-2 {
    transition-delay: 200ms;
}

.stagger-3 {
    transition-delay: 300ms;
}

.stagger-4 {
    transition-delay: 400ms;
}

/* Background Canvas Container */
#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background-color: var(--bg-primary);
    /* Base fallback */
}

/* Subtle Gradient overlay for Hero */
.hero-gradient-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at top right, rgba(219, 234, 254, 0.5) 0%, transparent 40%),
        radial-gradient(circle at bottom left, rgba(241, 245, 249, 0.8) 0%, transparent 40%);
    pointer-events: none;
}

/* Marquee / Infinite Scroll */
.marquee-container {
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--space-8);
    /* Elegant fade on edges */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    min-width: 100%;
    gap: var(--space-8);
    animation: scroll-x 30s linear infinite;
}

@keyframes scroll-x {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* Image/Logo desaturation */
.logo-grey {
    filter: grayscale(100%) opacity(0.4);
    transition: filter var(--transition-normal);
}

.logo-grey:hover {
    filter: grayscale(0%) opacity(1);
}