@layer components {
    .books-marquee {
        position: relative;
        overflow: hidden;
        padding: var(--spacing-12) 0 var(--spacing-24);
    }

    .books-marquee::before,
    .books-marquee::after {
        content: "";
        position: absolute;
        top: 0;
        width: clamp(60px, 6vw, 140px);
        height: 100%;
        pointer-events: none;
        z-index: 2;
    }

    .books-marquee::before {
        left: 0;
        background: linear-gradient(
            90deg,
            var(--color-surface) 0%,
            transparent 100%
        );
    }

    .books-marquee::after {
        right: 0;
        background: linear-gradient(
            270deg,
            var(--color-surface) 0%,
            transparent 100%
        );
    }

    .books-marquee-track {
        display: flex;
        gap: var(--spacing-12);
        width: max-content;
        animation: books-marquee-scroll 70s linear infinite;
        will-change: transform;
    }

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

    @keyframes books-marquee-scroll {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50%);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .books-marquee-track {
            animation: none;
        }
    }
}