/**
 * Marquee Layout Styles
 */

.marquee-text-with-media {
    background-color: var(--color-garnet);

    &.cards-overlap {
        margin-top: 0 !important;
        .marquee {
            padding-top: 10.8rem;
        }
    }
    
    /* offset if this thing has a video with overhang */
    &:has(.section-video) .section-video{
        margin-bottom: -2.4rem;
        margin-left: -2.4rem;
        margin-right: -2.4rem;
    }
    @media (min-width: 992px) {
        &:has(.section-video) {
            margin-bottom: 12rem !important;
        }
        &:has(.section-video) .section-video {
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
        }
    }

    .marquee {
        padding: 2.4rem 0 2.4rem 0;
        overflow: hidden;
        width: 100%; 
        --marquee--repeat-count: 6;
        --marquee--base-duration: 1s;
        --marquee--repeat-size: calc(100% / var(--marquee--repeat-count));
        --marquee--double-size: calc(var(--marquee--repeat-size) * 2);
        --marquee--duration: calc(var(--marquee--base-duration) * var(--char-count, 20));   
    }
    
    .marquee--inner {
        width: max-content;
        display: flex;
        font-family: var(--serif);
        font-weight: 700;
        font-size: 4.8rem;
        line-height: 12rem;
        font-style: italic;
        color: #b98085;
        @media (min-width: 992px) {
            font-size: 9.6rem;
        }
      }
        /* Animation without user preference */
        .marquee--inner {
            animation: marquee var(--marquee--duration) infinite linear, reduce-marquee var(--marquee--duration) infinite linear paused;
            animation-composition: add;
        }
        .marquee--inner:hover {
            animation-play-state: running;
        }
        
    .marquee-content-container {
        padding-bottom: 2.4rem;

        /* Desktop styles */
        @media (min-width: 992px) {
            display: flex;
            .marquee-content, .section-video, .section-image {
                flex-basis: 50%;
            }
            .section-video {
                position: absolute;
                right: 2.4rem;
                width: 45%;
                max-width: 52rem;
                z-index: 1;
            }
            .marquee-content {
                padding-right: 2.4rem;
            }
            &:has(.section-video) .marquee-content {
                min-height: 20.4rem;
            }
        }
            
        
        .marquee-content {
            .section-link {
                margin-bottom: 2.4rem;
            }

        }
    }
}

@keyframes marquee {
    from {
      transform: translateX(calc( (1 * var(--marquee--double-size)) - (var(--marquee--double-size) * var(--marquee--direction, 1)) ));
    }
    to {
      transform: translateX(calc(var(--marquee--double-size) * -1));
    }
  }