/* Treasures Untold - home app CSS styling (marquee) */
/* 
Marquee CSS used and edited from Ryan Mulligans article and codepen
https://ryanmulligan.dev/blog/css-marquee/
https://codepen.io/hexagoncircle/pen/eYMrGwW
*/
.marquee {
    --gap: 1.8rem;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
}

.marquee__content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: var(--gap);
    min-width: 100%;
}
  
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}
  
/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
    .marquee__content {
        animation-play-state: paused !important;
    }
}
  
/* Enable animation */
.marquee .marquee__content {
    animation: scroll 300s linear infinite;
}

/* Pause on hover */
.marquee--hover-pause:hover .marquee__content {
    animation-play-state: paused;
}