@property --tc-liquid {
    syntax: '*';
    inherits: false;
}

:where(.btn-premium.primary, .pf-btn--primary, .sports-btn--primary, .tc-join__cta, .footer-cta) {
    --tc-liquid: fill;
}

:where(.btn-premium.secondary, .dv-act-side .btn-premium, .header-btn,
    .server-select-trigger, .season-select-trigger, .custom-select-trigger,
    .rowsel-trigger, .hm-more, .to-top, .sp-refresh, .settings-reset, .srv-next,
    .sports-chip) {
    --tc-liquid: glass;
}

:where(.srv-tile, .ep-card) {
    --tc-liquid: tile;
}

:where(#nav, .nav, .nav-dropdown, .nav-more-menu, .mnav-panel) :where(button, a, [role="button"]),
:where(.settings-toggle, .sk-toggle, .sports-toggle, [role="switch"], [role="tab"],
    [role="option"], [role="menuitem"], .pf-seg button, .srch-seg button, .sort-chip,
    .settings-seg-btn, .mc-seg button, .time-seg button, .top10-switch button,
    .sk-switch button, .modal-tab-btn, .settings-swatch, .hm-page.is-active),
:where(.modal-close-btn, .actor-modal-close-btn, .sports-icon-btn--close, #settings-close,
    .ai-header-btn, .btn-trailer-link, .btn-trailer-mute, .trailer-sound-btn, .tka-arrow,
    .handle, .cinema-scroll, .card-hover-btn),
:where(.row__poster-container, .cinema-card, .hero-pill, .tka-card, .tka-thumb, .sp-feat,
    .sp-fix, .sp-slide__screen, .sports-card, .cast-card, .modal-rec-card, .top10-slot,
    .season-option),
:where(.ad-native, .ad-native-slot, [data-lazy-banner], [id^="ad-"]) :where(*) {
    --tc-liquid: none;
}

.tc-lq {

    --lq-p: clamp(64px, 40%, 150px);
    --lq-q: clamp(80px, 46%, 190px);

    --lq-a-on: 1;
    --lq-b-on: 1;
    --lq-c: radial-gradient(85% 75% at 50% -12%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 72%);
    --lq-c-on: 0.75;

    --lq-flat: rgba(var(--accent-rgb), 0.38);
}

.tc-lq[data-lq="glass"],
.tc-lq[data-lq="tile"] {
    --lq-a: repeating-radial-gradient(circle at 50% 0%,
        rgba(var(--primary-rgb), 0.5) 0, rgba(var(--primary-rgb), 0) calc(var(--lq-p) * 0.32),
        rgba(var(--primary-rgb), 0) calc(var(--lq-p) * 0.6), rgba(var(--primary-rgb), 0.5) var(--lq-p));
    --lq-a-mode: normal;
    --lq-a-on: 1;

    --lq-b: repeating-radial-gradient(circle at 50% 100%,
        rgba(var(--accent-rgb), 0.62) 0, rgba(var(--accent-rgb), 0.12) calc(var(--lq-q) * 0.32),
        rgba(var(--accent-rgb), 0.12) calc(var(--lq-q) * 0.58), rgba(var(--accent-rgb), 0.62) var(--lq-q));
    --lq-b-mode: normal;
    --lq-b-on: 0.85;
    --lq-c: radial-gradient(85% 75% at 50% -12%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 72%);
    --lq-c-on: 1;
    --lq-flat: rgba(var(--accent-rgb), 0.3);
}

.tc-lq[data-lq="tile"] {
    --lq-a-on: 0.5;
    --lq-b-on: 0.4;
    --lq-c-on: 0.6;
    --lq-flat: rgba(var(--primary-rgb), 0.12);
}

.tc-lq {
    isolation: isolate;
}

.tc-lq-pos {
    position: relative;
}

.tc-lq > tc-liquid {
    position: absolute !important;
    inset: 0 !important;
    z-index: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    pointer-events: none !important;
    transition: none !important;
    animation: none !important;
}

.tc-lq > tc-liquid > tc-lq {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;

    transition: opacity 0.52s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.52s;
}

.tc-lq > tc-liquid > tc-lq.f {
    z-index: -1;
    overflow: hidden;
    isolation: isolate;
}

.tc-lq > tc-liquid > tc-lq.t,
.tc-lq > tc-liquid > tc-lq.f > tc-lq.r {
    display: none;
}

.tc-lq > tc-liquid > tc-lq.f > tc-lq {
    position: absolute;
    display: block;
    pointer-events: none;
}

.tc-lq > tc-liquid > tc-lq.f > tc-lq.a,
.tc-lq > tc-liquid > tc-lq.f > tc-lq.b {
    left: 50%;
    top: 50%;

    width: calc(142% + 12px);
    aspect-ratio: 1;
    translate: -50% -50%;
}

.tc-lq > tc-liquid > tc-lq.f > tc-lq.a { background: var(--lq-a); mix-blend-mode: var(--lq-a-mode, normal); opacity: var(--lq-a-on); }
.tc-lq > tc-liquid > tc-lq.f > tc-lq.b { background: var(--lq-b); mix-blend-mode: var(--lq-b-mode, normal); opacity: var(--lq-b-on); }

.tc-lq > tc-liquid > tc-lq.f > tc-lq.c {
    inset: 0;
    opacity: var(--lq-c-on);
}

.tc-lq > tc-liquid > tc-lq.f > tc-lq.c > tc-lq {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
    background: var(--lq-c);
}

@media (hover: hover) and (pointer: fine) {
    .tc-lq:hover > tc-liquid > tc-lq {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
    }
}

.tc-lq:focus-visible > tc-liquid > tc-lq {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
}

.tc-lq > tc-liquid[data-boot] > tc-lq {
    opacity: 0 !important;
}

.tc-lq {
    --lq-base: #050308;
    --lq-vignette: oklch(from var(--primary) 0.42 0.05 h);
    --lq-ring: radial-gradient(ellipse at 65% 180%,
        var(--primary),
        oklch(from var(--primary) calc(l * 0.82) calc(c * 1.5) calc(h + 60)),
        oklch(from var(--primary) calc(l * 0.82) calc(c * 1.5) calc(h - 45)),
        var(--accent),
        oklch(from var(--primary) calc(l * 0.82) calc(c * 1.5) calc(h - 90)),
        oklch(from var(--primary) calc(l * 0.82) calc(c * 1.5) calc(h + 60)),
        var(--primary),
        oklch(from var(--primary) calc(l * 0.82) calc(c * 1.5) calc(h - 45)),
        oklch(from var(--primary) calc(l * 0.82) calc(c * 1.5) calc(h - 90)),
        oklch(from var(--primary) calc(l * 0.82) calc(c * 1.5) calc(h + 30)),
        var(--primary));
    --lq-ink: color-mix(in srgb, var(--secondary-deep, #3c1ab8) 35%, #05030c);
}

@supports not (color: oklch(from red l c h)) {
    .tc-lq {
        --lq-vignette: var(--secondary-deep, #3c1ab8);
        --lq-ring: radial-gradient(ellipse at 65% 180%,
            var(--primary), var(--accent), var(--secondary), var(--primary-soft), var(--secondary-deep),
            var(--primary), var(--accent), var(--secondary), var(--primary-soft), var(--secondary-deep),
            var(--primary));
    }
}

@media (prefers-reduced-motion: no-preference) {

    html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"] {

        transition: all 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
            color 0.22s ease, -webkit-text-fill-color 0.22s ease, text-shadow 0.22s ease,
            scale 0.14s ease-out;
    }

    html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"] > tc-liquid > tc-lq.f {
        filter: saturate(0.8) brightness(1.6);
        outline: 1px solid #fff;
        outline-offset: -1px;
    }

    html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"] > tc-liquid > tc-lq.f > tc-lq.r {
        display: block;
        inset: 0;
        border-radius: inherit;
        background: var(--lq-base);
        box-shadow: inset 0 0 10px 9px var(--lq-vignette);
    }

    html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"] > tc-liquid > tc-lq.f > tc-lq.a,
    html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"] > tc-liquid > tc-lq.f > tc-lq.b {
        left: -109%;
        top: 50%;
        width: min(500%, 1200px);
        translate: 0 -50%;
        background: var(--lq-ring);
        opacity: 1;
    }
    html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"] > tc-liquid > tc-lq.f > tc-lq.a { mix-blend-mode: difference; }

    html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"] > tc-liquid > tc-lq.f > tc-lq.b { mix-blend-mode: color-dodge; opacity: 0.85; }

    html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"] > tc-liquid > tc-lq.f > tc-lq.c {
        inset: auto;
        left: 10%;
        top: 50%;
        width: 80%;
        height: min(1.9rem, 62%);
        translate: 0 -50%;
        border-radius: 50px;
        filter: blur(5px);
        opacity: 1;
    }
    html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"] > tc-liquid > tc-lq.f > tc-lq.c > tc-lq {
        background: rgba(255, 255, 255, 0.33);
    }

    html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"] > tc-liquid > tc-lq.t {
        display: block;
        z-index: 2;
        box-shadow: inset 0 -4px 4px 0 rgba(0, 0, 0, 0.27);
        transition: opacity 0.52s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.52s, transform 0.3s ease;
    }
    html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"] > tc-liquid > tc-lq.t > tc-lq.ti {
        position: absolute;
        inset: 0;
        box-sizing: border-box;
        color: var(--lq-ink);
        -webkit-text-fill-color: var(--lq-ink);
        text-shadow: 0 0 4px #fff, 0 0 10px rgba(255, 255, 255, 0.55);
    }

    @media (hover: hover) and (pointer: fine) {
        html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"]:hover {
            border-color: #fff !important;
            color: transparent !important;
            -webkit-text-fill-color: transparent !important;
            text-shadow: none !important;
        }

        html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"]:hover > tc-liquid > tc-lq.f {
            transition: opacity 0.5s cubic-bezier(0.33, 0, 0.2, 1), visibility 0s;
        }
        html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"]:hover > tc-liquid > tc-lq.t {
            transform: scale(1.1);
            transition: opacity 0.5s cubic-bezier(0.33, 0, 0.2, 1), visibility 0s, transform 0.3s ease;
        }
        html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"]:active > tc-liquid > tc-lq.t {
            transform: scale(0.95);
        }
    }
    html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"]:focus-visible {
        border-color: #fff !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        text-shadow: none !important;
    }
    html:not(.no-gpu):not(.reduce-motion) .tc-lq[data-lq="fill"]:focus-visible > tc-liquid > tc-lq.t {
        transform: scale(1.1);
        transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s, transform 0.3s ease;
    }
}

@media (hover: hover) {
    .btn-premium.primary.tc-lq::before,
    .btn-premium.primary.tc-lq:hover::before {
        transform: translate3d(-104%, 0, 0) skewX(-28deg) !important;
    }
    .btn-premium.primary.tc-lq:hover,
    .btn-premium.primary.tc-lq:hover .material-symbols-outlined,
    .btn-premium.primary.tc-lq:hover i {
        color: var(--on-primary, #fff) !important;
    }
}

@media (hover: hover) and (pointer: fine) {
    .tc-lq[data-lq="fill"]:hover {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.26);
    }
}
.tc-lq[data-lq="fill"]:focus-visible {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.26);
}

html.no-gpu .tc-lq > tc-liquid > tc-lq.f > tc-lq.a,
html.no-gpu .tc-lq > tc-liquid > tc-lq.f > tc-lq.b {
    display: none;
}
html.no-gpu .tc-lq > tc-liquid > tc-lq.f > tc-lq.c > tc-lq {
    background: var(--lq-flat);
}

html.reduce-motion .tc-lq > tc-liquid > tc-lq.f > tc-lq.a,
html.reduce-motion .tc-lq > tc-liquid > tc-lq.f > tc-lq.b {
    display: none;
}
html.reduce-motion .tc-lq > tc-liquid > tc-lq.f > tc-lq.c > tc-lq {
    background: var(--lq-c), var(--lq-flat);
}
html.reduce-motion .tc-lq > tc-liquid > tc-lq {
    transition-duration: 0.3s, 0s !important;
}
html.reduce-motion .tc-lq:hover > tc-liquid > tc-lq {
    transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
    .tc-lq > tc-liquid > tc-lq.f > tc-lq.a,
    .tc-lq > tc-liquid > tc-lq.f > tc-lq.b {
        display: none;
    }
    .tc-lq > tc-liquid > tc-lq.f > tc-lq.c > tc-lq {
        background: var(--lq-c), var(--lq-flat);
    }
}