/* ===================================
   INDEX.HTML - Specific Styles
   Stili specifici per la homepage
   =================================== */

/* Hero Video Transition */
#hero-video {
    transition: transform 0.2s ease-out;
}

/* ===================================
   MARQUEE ANIMATION (Pacman Style)
   =================================== */

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marquee-container {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}

.marquee-container:hover {
    animation-play-state: paused;
}

.marquee-wrapper {
    touch-action: pan-y;
    overflow: hidden !important;
    -webkit-overflow-scrolling: auto;
    pointer-events: auto;
}

.marquee-container div:hover,
.marquee-container div:active {
    filter: grayscale(0);
}

.marquee-wrapper::before,
.marquee-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.marquee-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #0d0d0d, transparent);
}

.marquee-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #0d0d0d, transparent);
}

/* ===================================
   EQUALIZER ANIMATION (Music Player)
   =================================== */

@keyframes eq-anim {
    0% { height: 20%; }
    50% { height: 100%; }
    100% { height: 20%; }
}

.eq-bar {
    animation: eq-anim 0.6s ease-in-out infinite;
    animation-play-state: paused;
}

.eq-bar:nth-child(2) {
    animation-delay: 0.2s;
}

.eq-bar:nth-child(3) {
    animation-delay: 0.4s;
}

.is-playing .eq-bar {
    animation-play-state: running;
}

/* ===================================
   HERO ANIMATIONS (Entrance)
   =================================== */

/* Slide From Left */
@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide From Right */
@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Zoom In */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Hero Initial State */
.hero-left {
    opacity: 0;
}

.hero-right {
    opacity: 0;
}

.hero-center {
    opacity: 0;
}

/* Hero Active Animations */
.hero-left.active {
    animation: slideFromLeft 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-right.active {
    animation: slideFromRight 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-center.active {
    animation: zoomIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.4s;
}

/* Additional Animation Variants for Index */
.animate-section.zoom-in {
    animation: zoomIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}