/* ==========================================================
   GENIUS MOVIES GLOBAL NOTICE
   Always visible above logo/menu/search
   ========================================================== */

:root {
    --gm-notice-height: 44px;
}

html {
    scroll-padding-top:
        var(--gm-notice-height);
}

.gm-global-notice {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    height: auto;
    min-height: 44px;

    display: flex;
    align-items: stretch;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    z-index: 2147483600 !important;

    background:
        linear-gradient(
            90deg,
            #09090d,
            #181820,
            #09090d
        );

    border-bottom:
        1px solid
        rgba(255,255,255,.15);

    box-shadow:
        0 4px 18px
        rgba(0,0,0,.45);
}


.gm-global-notice-badge {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 46px;
    min-width: 46px;

    font-size: 18px;

    background:
        rgba(255,255,255,.09);

    border-right:
        1px solid
        rgba(255,255,255,.12);
}


.gm-global-notice-window {
    position: relative;

    display: flex;
    align-items: center;

    flex: 1 1 auto;
    min-width: 0;

    overflow: hidden;
}


.gm-global-notice-window::before,
.gm-global-notice-window::after {
    content: "";

    position: absolute;
    z-index: 3;

    top: 0;
    bottom: 0;

    width: 34px;

    pointer-events: none;
}


.gm-global-notice-window::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            #111118,
            rgba(17,17,24,0)
        );
}


.gm-global-notice-window::after {
    right: 0;

    background:
        linear-gradient(
            270deg,
            #111118,
            rgba(17,17,24,0)
        );
}


.gm-global-notice-track {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    width: max-content;
    min-width: max-content;

    white-space: nowrap;

    will-change: transform;

    animation:
        gmNoticePermanentScroll
        45s
        linear
        infinite;
}


.gm-global-notice:hover
.gm-global-notice-track {
    animation-play-state: paused;
}


.gm-global-notice-text {
    display: inline-block;

    padding:
        11px 25px;

    font-size: 13px;
    line-height: 22px;

    font-weight: 600;

    color:
        rgba(255,255,255,.97);

    white-space: nowrap;
}


.gm-global-notice-separator {
    display: inline-block;

    padding: 0 8px;

    font-size: 11px;

    opacity: .65;
}


.gm-global-notice[dir="rtl"]
.gm-global-notice-text {
    direction: rtl;

    unicode-bidi:
        plaintext;
}


/*
 * JS adds this only to TOP-LEVEL
 * sticky/fixed header/navigation.
 *
 * This keeps:
 * Genius Movies logo
 * menu
 * search box
 *
 * BELOW the notice.
 */

.gm-below-global-notice {
    top:
        var(--gm-notice-height)
        !important;
}


@keyframes
gmNoticePermanentScroll {

    from {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    to {
        transform:
            translate3d(
                -50%,
                0,
                0
            );
    }
}


@media (
    max-width: 640px
) {

    :root {
        --gm-notice-height:
            42px;
    }


    .gm-global-notice {
        min-height: 42px;
    }


    .gm-global-notice-badge {
        flex-basis: 40px;
        min-width: 40px;

        font-size: 16px;
    }


    .gm-global-notice-text {
        padding:
            10px 18px;

        font-size: 12px;
        line-height: 22px;
    }


    .gm-global-notice-track {
        animation-duration:
            50s;
    }
}


@media (
    prefers-reduced-motion:
    reduce
) {

    .gm-global-notice-track {
        animation: none;

        transform: none;
    }
}