/* animation.css */

/* ===================== HOMEPAGE HERO ANIMATIONS ===================== */

/* Fade In Up for Heading & Button */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slideIn {
    from {
        transform: translateY(-50%);
        transform: scaleY(0);
        opacity: 0;
    }
    to {
        transform: translateY(-50%);
        opacity: 1;
    }
}


/* Slide In for Image */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In for Slider Bars */
/* Set initial state only */
.hero-content h1,
.hero-content .discover-button,
.hero-graphic img,
.slider-bar {
    opacity: 0;
}

/* Trigger animations only when visible */
.hero.is-visible .hero-content h1 {
    animation: fadeInUp 1s ease-out 0.2s forwards;
}

.hero.is-visible .hero-content .discover-button {
    animation: fadeInUp 1s ease-out 0.6s forwards;
}

.hero.is-visible .hero-graphic img {
    animation: slideInRight 1s ease-out 1s forwards;
}

.hero.is-visible .slider-bar {
    animation: slideIn 0.8s ease-out 1.4s forwards;
}



/* ... (about section animations remain the same, using .about-section.is-visible) ... */


/* ===================== ABOUT SECTION ANIMATIONS ===================== */

/* --- Keyframes --- */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes growVertical {
    from {
        transform: scaleY(0);
        opacity: 0;
    }
    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* --- Initial Hidden State --- */
.about-section .vertical-accent-bar .bar-yellow,
.about-section .vertical-accent-bar .bar-blue,
.about-section .about-image,
.about-section .about-text-main .subheading,
.about-section .about-text-main h2,
.about-section .about-text-main .about-button,
.about-section .about-column {
    opacity: 0;
}

/* --- Scroll-triggered Animations --- */
.about-section.is-visible .vertical-accent-bar .bar-yellow {
    animation: growVertical 0.8s ease-out 0.2s forwards;
}

.about-section.is-visible .vertical-accent-bar .bar-blue {
    animation: growVertical 0.8s ease-out 0.4s forwards;
}

.about-section.is-visible .about-image {
    animation: scaleUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

.about-section.is-visible .about-text-main .subheading {
    animation: fadeInRight 0.7s ease-out 0.5s forwards;
}

.about-section.is-visible .about-text-main h2 {
    animation: fadeInRight 0.7s ease-out 0.7s forwards;
}

.about-section.is-visible .about-text-main .about-button {
    animation: fadeInUp 0.7s ease-out 0.9s forwards;
}

.about-section.is-visible .about-column.music-videos {
    animation: fadeInUp 0.8s ease-out 1.1s forwards;
}

.about-section.is-visible .about-column.movies {
    animation: fadeInUp 0.8s ease-out 1.3s forwards;
}


/* ===================== Highlight SECTION ANIMATIONS ===================== */

.text-passion, .text-love {
    opacity: 0;
    transform: translateY(20px);
    transition: all 2s ease-out;
}

.text-passion.is-visible, .text-love.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* animation */

.mouse-trail-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Should be below text/buttons (which are often 3-5) */
    width: 100%;
    height: 100%;
    pointer-events: none;
}