/*
 * Seasonal Theme Engine: how a theme dresses the shell.
 *
 * Everything here keys on what template/header.php puts on <body>, and what
 * js/theme.js rewrites in place when the theme changes in an open tab:
 *   body.vt-themed                     any theme is live
 *   body[data-vt-theme="halloween"]    which one
 *   body.vt-theme-has-<slot>           that artwork slot has an image
 *   body.vt-theme-anim-<name>          the set's "animation" (currently unused)
 *   --vt-theme-accent / -accent-soft   the theme's colours
 *   --vt-theme-<slot>                  url("...") of each artwork slot
 *
 * Decoration only. Buttons, links, the active-item orange and the original
 * VTLOG wordmark, mark and slogan are never recoloured or replaced; a theme
 * tints the chrome around them (sidebar head, rail, top bar, tooltips,
 * flyouts, the homepage banner). With no theme, or a slot left empty, the
 * matching layer is simply not drawn.
 */

/* ---- Accent tint ------------------------------------------------------------ */
body.vt-themed .sidebar-brand {
    border-top-color: var(--vt-theme-accent, #ff9900);
    background: linear-gradient(180deg, var(--vt-theme-accent-soft, rgba(255,153,0,.12)) 0%, transparent 100%);
}
body.vt-themed .topbar {
    border-top-color: var(--vt-theme-accent, #ff9900);
    background: linear-gradient(180deg, var(--vt-theme-accent-soft, rgba(255,153,0,.12)) 0%, #232323 45px) !important;
}
body.vt-themed #sidebar.collapsed .sidebar-brand-short { text-shadow: 0 0 12px var(--vt-theme-accent-soft, transparent); }

/* ---- Sidebar icons ------------------------------------------------------------ */
/* Colour only: the same glyphs, sizes and positions, in the active theme's icon
   palette (--vt-theme-icon / -hover / -active, plus -2 / -3 cycled down the
   menu for the multi-colour themes). body.vt-theme-icons is set by
   Theme\Engine::bodyClasses only when the theme has a palette, so with no theme
   every rule here is inert and the default styling stands. Server-rendered on
   <body> from the first byte (no flash), switched in place by js/theme.js.
   Not themed: the Twitch and Discord logos and the Premium ticket keep their
   brand colours, and the client's Online / Offline dot and word are signal
   colours (css/shell.css) that no theme may change. The cycle selectors sit in
   :where() so they never outrank the hover and active rules below. */
body.vt-theme-icons #sidebar .sidebar-link > i:not(.fa-twitch):not(.fa-discord):not(.premium-icon),
body.vt-theme-icons #sidebar .sidebar-client-icon > i,
body.vt-theme-icons .vt-rail-flyout .sidebar-link > i {
    color: var(--vt-theme-icon) !important;
}
body.vt-theme-icons #sidebar .sidebar-nav > :where(:nth-child(3n+2 of .sidebar-item)) > .sidebar-link > i:not(.fa-twitch):not(.fa-discord):not(.premium-icon) {
    color: var(--vt-theme-icon-2, var(--vt-theme-icon)) !important;
}
body.vt-theme-icons #sidebar .sidebar-nav > :where(:nth-child(3n of .sidebar-item)) > .sidebar-link > i:not(.fa-twitch):not(.fa-discord):not(.premium-icon) {
    color: var(--vt-theme-icon-3, var(--vt-theme-icon-2, var(--vt-theme-icon))) !important;
}
body.vt-theme-icons #sidebar .sidebar-link:hover > i:not(.fa-twitch):not(.fa-discord):not(.premium-icon),
body.vt-theme-icons #sidebar .sidebar-link:focus-visible > i:not(.fa-twitch):not(.fa-discord):not(.premium-icon),
body.vt-theme-icons .vt-rail-flyout .sidebar-link:hover > i,
body.vt-theme-icons .vt-rail-flyout .sidebar-link:focus-visible > i {
    color: var(--vt-theme-icon-hover, var(--vt-theme-icon)) !important;
}
body.vt-theme-icons #sidebar .sidebar-link.active > i:not(.fa-twitch):not(.fa-discord):not(.premium-icon),
body.vt-theme-icons #sidebar .sidebar-item.active > .sidebar-link > i:not(.fa-twitch):not(.fa-discord):not(.premium-icon),
body.vt-theme-icons #sidebar.collapsed .sidebar-item:has(.sidebar-dropdown .sidebar-link.active) > .sidebar-link > i,
body.vt-theme-icons #sidebar .sidebar-link.vt-flyout-open > i,
body.vt-theme-icons .vt-rail-flyout .sidebar-link.active > i {
    color: var(--vt-theme-icon-active, var(--vt-theme-icon)) !important;
}

/* ---- Artwork layers ----------------------------------------------------------- */
.vt-theme-deco,
.vh-hero-theme { display: none; }

.sidebar-brand > .sidebar-brand-text,
.sidebar-brand > .sidebar-brand-short { position: relative; z-index: 1; }
/* Art sits right behind the wordmark / VTL: a soft dark halo keeps them legible. */
body.vt-theme-has-sidebar-expanded .sidebar-brand-text,
body.vt-theme-has-sidebar-collapsed .sidebar-brand-short {
    text-shadow: 0 0 10px rgba(0, 0, 0, .95), 0 0 3px rgba(0, 0, 0, .9), 0 1px 2px #000;
}
body.vt-theme-has-sidebar-expanded .vt-theme-deco--sidebar {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--vt-theme-sidebar-expanded) center / cover no-repeat;
    pointer-events: none;
}
/* Rail emblem: a theme's own badge in place of "VTL" on the collapsed 64px
   rail. The full sidebar keeps the VTLOG wordmark, styled in the theme's
   colours. The emblem is always the complete image (contain, aspect kept,
   never cropped), centred on the rail's 32px axis in the 74px header. It fades
   in over the second half of the slide while the wordmark slides out behind the
   64px boundary, so the two never overlap. Desktop only: the drawer below
   1200px is a full sidebar and keeps the wordmark. Without the file the layer
   is not drawn and the normal VTL shows. */
.vt-theme-emblem { display: none; }
@media (min-width: 1200px) {
    body.vt-theme-has-emblem #sidebar .vt-theme-emblem {
        display: block;
        position: absolute;
        z-index: 1;
        top: 9px;
        bottom: 9px;
        left: 6px;
        width: 52px;
        background: var(--vt-theme-emblem) center / contain no-repeat;
        opacity: calc(var(--vt-p, 0) * 2 - 1);
        pointer-events: none;
    }
    body.vt-theme-has-emblem #sidebar .sidebar-brand-short { visibility: hidden; }
}
/* The wordmark in the theme's colours while an emblem theme is live: VT in the
   icon colour, LOG in its light tone, a soft glow in the accent. */
body.vt-theme-has-emblem .sidebar-brand-text { color: var(--vt-theme-icon, #ff9900) !important; text-shadow: 0 0 14px var(--vt-theme-accent-soft, transparent); }
body.vt-theme-has-emblem .sidebar-brand-text .sidebar-brand-dot { color: var(--vt-theme-icon-active, #f2f2f2); }

/* Theme display face for the live wordmark / VTL (manifest "brand_font", e.g.
   Metal Mania for Halloween; loaded in template/head.php). Weight 400: these
   faces have no bold, and a synthesised one smears. Colours from the theme
   palette, with a restrained glow in the theme accent. */
body.vt-theme-brand-font .sidebar-brand-text,
body.vt-theme-brand-font #sidebar .sidebar-brand-short {
    font-family: var(--vt-theme-brand-font), 'Rajdhani', system-ui, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    color: var(--vt-theme-icon, #ff9900) !important;
    text-shadow: 0 0 7px color-mix(in srgb, var(--vt-theme-accent, #ff9900) 45%, transparent), 0 0 2px rgba(0, 0, 0, .9), 0 1px 2px #000;
}
body.vt-theme-brand-font .sidebar-brand-text .sidebar-brand-dot,
body.vt-theme-brand-font .sidebar-brand-short .sidebar-brand-dot { color: var(--vt-theme-icon-active, #f2f2f2); }

/* On the rail: its own narrow art, never the wide picture squeezed. The two
   layers crossfade with the sidebar's slide progress (--vt-p, css/shell.css)
   rather than swapping, and only opacity changes, so nothing moves. */
@media (min-width: 1200px) {
    body #sidebar .vt-theme-deco--sidebar { opacity: calc(1 - var(--vt-p, 0)); }
    /* No rail art of its own: the header art (264px, fixed under the slide)
       simply stays, so the rail shows its left 64px - the same scene. */
    body.vt-theme-has-sidebar-expanded:not(.vt-theme-has-sidebar-collapsed) #sidebar .vt-theme-deco--sidebar { opacity: 1; }
    body.vt-theme-has-sidebar-collapsed .vt-theme-deco--rail {
        display: block;
        position: absolute;
        inset: 0 auto 0 0;
        width: var(--vt-rail-desk-w, 64px);
        z-index: 0;
        background: var(--vt-theme-sidebar-collapsed) center / cover no-repeat;
        pointer-events: none;
        opacity: var(--vt-p, 0);
    }
}

/* Sidebar background ("overlay"): the theme's art behind the menu. The 2026
   Halloween piece has a column of navigation icons baked into its middle, so
   only its decorated outer edges may show: a band in the sidebar's own colour
   covers the centre (where the real icons and labels are), and the art is
   faint by design (alpha at most .57). On desktop it keeps a fixed 264px width
   under the slide and a veil closes over it as the sidebar becomes the rail
   (--vt-p), so the rail stays clean. */
body.vt-theme-has-overlay .sidebar-content {
    background:
        linear-gradient(90deg, rgba(15, 15, 16, 0) 0, rgba(15, 15, 16, 0) 5%, #0f0f10 11%, #0f0f10 89%, rgba(15, 15, 16, 0) 95%),
        var(--vt-theme-overlay) top center / 100% auto no-repeat,
        #0f0f10 !important;
}
@media (min-width: 1200px) {
    body.vt-theme-has-overlay #sidebar .sidebar-content {
        background:
            linear-gradient(rgba(15, 15, 16, var(--vt-p, 0)), rgba(15, 15, 16, var(--vt-p, 0))),
            linear-gradient(90deg, rgba(15, 15, 16, 0) 0, rgba(15, 15, 16, 0) 14px, #0f0f10 30px, #0f0f10 234px, rgba(15, 15, 16, 0) 250px) left top / 264px 100% no-repeat,
            var(--vt-theme-overlay) left top / 264px auto no-repeat,
            #0f0f10 !important;
    }
}

/* Top bar art: painted as a background layer of the bar's own .navbar, whose
   solid #0d0d0e (style.css) would otherwise cover anything behind it. The
   strip is shown complete at the bar's height, centred; its own edges fade out
   (alpha in the file), and a light veil keeps every control crisp. Desktop
   only; the bar's height and layout are untouched. */
@media (min-width: 1200px) {
    body[data-theme="dark"].vt-theme-has-topbar .topbar > .navbar {
        background:
            linear-gradient(rgba(13, 13, 14, .25), rgba(13, 13, 14, .25)),
            var(--vt-theme-topbar) center center / auto 100% no-repeat,
            #0d0d0e !important;
    }
}

/* Homepage banner: the theme's picture replaces the photo but stays UNDER the
   hero's own scrim (z-index 0, after the photo in the markup), so the welcome
   copy keeps exactly the contrast it has today. Positioned so the truck sits
   centre-right, clear of the copy, like the regular photo. */
body.vt-theme-has-banner .vh-hero-theme {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--vt-theme-banner) 79% center / cover no-repeat;   /* cab between the copy and the totals card */
    filter: brightness(1.12);
    pointer-events: none;
}
@media (max-width: 767.98px) {
    body.vt-theme-has-banner .vh-hero-theme { background-position: 68% center; }
}
/* Wider than the art itself (6.3 : 1, ultrawide screens): show the WHOLE
   picture at full height on the right instead of cropping it top and bottom,
   and let the space on the left, behind the welcome copy, fade to the page's
   dark. */
body.vt-theme-has-banner .vh-hero { container: vh-hero / inline-size; }
@container vh-hero (min-width: 1921px) {
    body.vt-theme-has-banner .vh-hero-theme {
        background:
            linear-gradient(90deg, #0b0b0c calc(100% - 1920px), rgba(11, 11, 12, 0) calc(100% - 1680px)),
            var(--vt-theme-banner) right center / auto 100% no-repeat,
            #0b0b0c;
    }
}
/* Lower homepage background ("bottom"): replaces the closing band's photo
   (.vh-floor, css/pages/home.css - shown only on screens 1100px+ wide and
   1200px+ tall). It covers the MAIN column only: the band stops short of the
   right-hand column (320px + the wrap's 1.25rem padding + half its gap), which
   no theme may decorate, and fades out towards it. Page colour fades in from
   the top so nothing meets a hard edge. Sized at least 135% wide and anchored
   right, which keeps the art's own truck (its left quarter) out of view - the
   banner already has the truck. */
body.vt-theme-has-bottom .vh-floor { right: calc(320px + 1.25rem + .625rem); }
body.vt-theme-has-bottom .vh-floor .vh-band-photo,
body.vt-theme-has-bottom .vh-floor .vh-band-fade { display: none; }
body.vt-theme-has-bottom .vh-floor {
    background:
        linear-gradient(180deg, #0d0d0e 0%, rgba(13, 13, 14, .85) 22%, rgba(13, 13, 14, .38) 55%, rgba(13, 13, 14, .28) 85%, rgba(13, 13, 14, .6) 100%),
        linear-gradient(90deg, rgba(13, 13, 14, .55) 0%, rgba(13, 13, 14, 0) 30%, rgba(13, 13, 14, 0) 82%, #0d0d0e 100%),
        var(--vt-theme-bottom) 100% 55% / max(135%, calc(var(--vh-floor) * 2.6667)) auto no-repeat,
        #0d0d0e;
}

/* The hero's scrim is tuned for the dark dock photo; the Halloween art is
   darker already, so a lighter one keeps the copy's contrast while letting the
   truck, moon and castle through. */
body.vt-theme-has-banner .vh-hero-scrim {
    background:
        linear-gradient(90deg, rgba(9,9,10,.86) 0%, rgba(9,9,10,.55) 34%, rgba(9,9,10,.08) 62%, rgba(9,9,10,.18) 100%),
        linear-gradient(180deg, rgba(9,9,10,.12) 0%, rgba(9,9,10,0) 45%, rgba(9,9,10,.40) 100%);
}
/* Phones stack the copy across the full width of the hero, so the side-to-
   side scrim leaves it over the brightest part of the art; there the scrim
   runs top to bottom, darkest where the text is. */
@media (max-width: 767.98px) {
    body.vt-theme-has-banner .vh-hero-scrim {
        background: linear-gradient(180deg, rgba(9,9,10,.84) 0%, rgba(9,9,10,.76) 42%, rgba(9,9,10,.45) 70%, rgba(9,9,10,.55) 100%);
    }
}
.vh-hero-greeting[hidden] { display: none; }
.vh-hero-greeting {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: .45rem;
    margin-top: .6rem;
    padding: .3rem .65rem;
    background: rgba(13, 13, 14, .7);
    border-left: 2px solid var(--vt-theme-accent, #ff9900);
    font: 600 .82rem/1.25 'Rajdhani', system-ui, sans-serif;
    letter-spacing: .04em;
    color: #f2f2f2;
}
.vh-hero-greeting i { color: var(--vt-theme-accent, #ff9900); }

/* A theme change in an open tab fades the art instead of snapping it. */
.vt-theme-deco,
.vh-hero-theme { transition: opacity .5s ease; }
body.vt-theme-switching .vt-theme-deco,
body.vt-theme-switching .vh-hero-theme { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .vt-theme-deco,
    .vh-hero-theme { transition: none; }
}

/* ---- Animations ---------------------------------------------------------------
   None on the sidebar branding: the VTLOG / VTL wordmark stays still in every
   theme (the flicker / sparkle / snow / drift layers behind it were removed).
   A manifest's "animation" still reaches <body> as vt-theme-anim-<name>, but
   nothing styles it. */

/* ---- Management preview bar (js/theme.js) -------------------------------------- */
.vt-theme-preview-bar {
    position: fixed;
    z-index: 1090;
    left: 50%;
    bottom: calc(12px + var(--vt-bottom-offset, 0px));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: calc(100vw - 24px);
    padding: .45rem .5rem .45rem .8rem;
    background: #151516;
    border: 1px solid rgba(255, 255, 255, .12);
    border-left: 3px solid var(--vt-theme-accent, #ff9900);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
    font-size: .75rem;
    color: #e0e0e0;
}
.vt-theme-preview-bar b { color: var(--vt-theme-accent, #ff9900); }
.vt-theme-preview-bar button {
    padding: .3rem .6rem;
    background: #212123;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 0;
    color: #f2f2f2;
    font-size: .72rem;
}
.vt-theme-preview-bar button:hover { border-color: #ff9900; color: #ff9900; }

/* ---- New Year celebration (js/theme.js) ------------------------------------------ */
.vt-fireworks {
    position: fixed;
    z-index: 1088;
    pointer-events: none;
}
.vt-celebration {
    position: fixed;
    z-index: 1089;
    top: calc(var(--vt-topbar-h, 56px) + 16px);
    left: 50%;
    transform: translate(-50%, -8px);
    width: min(440px, calc(100vw - 32px));
    padding: 1rem 2.75rem 1rem 1.1rem;
    background: #151516;
    border: 1px solid rgba(255, 255, 255, .1);
    border-top: 2px solid var(--vt-theme-accent, #ffd166);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .6);
    color: #e0e0e0;
    opacity: 0;
    transition: opacity .35s ease, transform .35s ease;
}
.vt-celebration.is-on { opacity: 1; transform: translate(-50%, 0); }
.vt-celebration h2 {
    margin: 0 0 .3rem;
    font: 700 1.35rem/1.1 'Rajdhani', system-ui, sans-serif;
    letter-spacing: .04em;
    color: var(--vt-theme-accent, #ffd166);
}
.vt-celebration p { margin: 0; font-size: .85rem; line-height: 1.45; }
.vt-celebration button {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 0;
    color: rgba(242, 242, 242, .7);
}
.vt-celebration button:hover,
.vt-celebration button:focus-visible { color: #ff9900; }
@media (prefers-reduced-motion: reduce) {
    .vt-celebration { transition: none; }
}

/* ==========================================================================
   The seasonal scene
   body.vt-fx-on / .vt-fx-off come from the player's Seasonal Theme switch at
   the bottom of the sidebar (template/header.php, js/theme.js). Off carries no
   theme classes or colours at all, so every rule in this file is inert and the
   normal VTLOG look stands; the switch never changes which theme is live.

   ON, when the live theme ships a "backdrop": ONE scene, in ONE fixed layer
   behind the whole page. Every surface that used to be an opaque box of its own
   (main area, sidebar, rail, top bar, footer, tab bar) becomes a tinted glass
   over that same layer, so the sidebar, the top bar and the page all show the
   same picture in the same coordinates: continuity by construction, not by
   lining up separate images. The protected homepage blocks (the News section
   and the whole right-hand column) keep their own opaque card styling; the
   scene only exists behind them.
   ========================================================================== */
.vt-theme-backdrop { display: none; }
/* One picture for every screen (the 2026 art is 1983 x 793, 2.5 : 1): a plain
   cover, so it always fills the viewport with no band and no distortion, and
   crops instead - the sides on 16:9 and narrower, a little top and bottom on
   screens wider than 2.5 : 1. No maximum width: the picture scales with
   whichever side of the viewport needs it. Anchored at 60% across, where the
   art's moon, castle and truck are, and just above the middle, so they stay in
   frame for as long as the screen allows. */
body.vt-fx-on.vt-theme-has-backdrop .vt-theme-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        /* one even veil for readability, a little deeper at the edges */
        radial-gradient(ellipse at 60% 45%, rgba(8, 8, 9, .18) 0%, rgba(8, 8, 9, .42) 100%),
        linear-gradient(rgba(8, 8, 9, .14), rgba(8, 8, 9, .14)),
        var(--vt-theme-backdrop) 60% 30% / cover no-repeat,
        #0b0b0c;
}

/* Where the scene shows. The sidebar and top bar are glass over it on EVERY
   page. Behind the page content it only shows on pages that opt in with a
   data-vt-scene marker (the homepage); everywhere else the content area and
   footer keep the normal VTLOG background, so nothing seasonal shows between
   cards, tables or forms and page designs (profile banners, premium plans)
   stay exactly as they are. Decided by :has() on whatever page is in #content,
   so SPA navigation needs no script, and it holds for every theme. */
body.vt-fx-on.vt-theme-has-backdrop:not(:has(#content [data-vt-scene])) #content,
body.vt-fx-on.vt-theme-has-backdrop:not(:has(#content [data-vt-scene])) .main > .content {
    background: #0d0d0e !important;
}
body.vt-fx-on.vt-theme-has-backdrop:not(:has(#content [data-vt-scene])) :where(.main) > footer.lp-footer { background: #0d0d0e; }

/* Glass instead of opaque boxes (Full + backdrop). */
body.vt-fx-on.vt-theme-has-backdrop .wrapper,
body.vt-fx-on.vt-theme-has-backdrop .main,
body.vt-fx-on.vt-theme-has-backdrop[data-theme="dark"] .wrapper,
body.vt-fx-on.vt-theme-has-backdrop[data-theme="dark"] .main { background: transparent !important; }

body.vt-fx-on.vt-theme-has-backdrop[data-theme="dark"] .sidebar {
    background: linear-gradient(90deg, rgba(9, 9, 10, .56) 0%, rgba(9, 9, 10, .40) 100%) !important;
}
body.vt-fx-on.vt-theme-has-backdrop[data-theme="dark"] .sidebar-content,
body.vt-fx-on.vt-theme-has-backdrop #sidebar [data-simplebar],
body.vt-fx-on.vt-theme-has-backdrop #sidebar .simplebar-wrapper,
body.vt-fx-on.vt-theme-has-backdrop #sidebar .simplebar-mask,
body.vt-fx-on.vt-theme-has-backdrop #sidebar .simplebar-content-wrapper { background: transparent !important; }
/* Local contrast for the menu over the scene: a soft shadow under every label,
   header and icon (the colours themselves are unchanged). */
body.vt-fx-on.vt-theme-has-backdrop #sidebar .sidebar-link,
body.vt-fx-on.vt-theme-has-backdrop #sidebar .sidebar-header,
body.vt-fx-on.vt-theme-has-backdrop #sidebar .sidebar-client,
body.vt-fx-on.vt-theme-has-backdrop .vt-tabbar .vt-tab {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 8px rgba(0, 0, 0, .7);
}
/* The header art and the old sidebar overlay were separate pictures in their
   own rectangles: in Full mode the header shows the scene through the glass,
   like the rest of the sidebar. (The live wordmark / VTL are unchanged.) */
body.vt-fx-on.vt-theme-has-backdrop .vt-theme-deco--sidebar,
body.vt-fx-on.vt-theme-has-backdrop .vt-theme-deco--rail { display: none !important; }

body.vt-fx-on.vt-theme-has-backdrop .topbar {
    background: linear-gradient(180deg, var(--vt-theme-accent-soft, rgba(255,153,0,.12)) 0%, rgba(9, 9, 10, .58) 60%) !important;
}
body.vt-fx-on.vt-theme-has-backdrop[data-theme="dark"] .topbar > .navbar { background: transparent !important; }

body.vt-fx-on.vt-theme-has-backdrop :where(.main) > footer.lp-footer { background: rgba(9, 9, 10, .72); }
@media (max-width: 767.98px) and (min-height: 501px) {
    body.vt-fx-on.vt-theme-has-backdrop .vt-has-tabbar .vt-tabbar,
    body.vt-fx-on.vt-theme-has-backdrop.vt-has-tabbar .vt-tabbar { background: rgba(9, 9, 10, .88); }
}
@media (min-width: 768px) and (max-width: 1199.98px), (max-width: 767.98px) and (max-height: 500px) {
    body.vt-fx-on.vt-theme-has-backdrop.vt-has-rail .vt-tabbar { background: rgba(9, 9, 10, .80); }
}

/* Homepage: the hero keeps its banner as the focal picture but loses its box,
   its edges fading into the scene; the lower band is not a second landscape any
   more - the scene itself is the lower page. */
body.vt-fx-on.vt-theme-has-backdrop .vh-hero { background: transparent; box-shadow: none; }
body.vt-fx-on.vt-theme-has-backdrop .vh-hero-photo { display: none; }
/* No picture of its own (unless a theme also ships a banner): the hero is a
   window onto the scene, with a soft shade behind the welcome copy whose edges
   fade out, so no box is drawn. */
body.vt-fx-on.vt-theme-has-backdrop:not(.vt-theme-has-banner) .vh-hero-scrim {
    background: linear-gradient(90deg, rgba(9, 9, 10, .72) 0%, rgba(9, 9, 10, .45) 38%, rgba(9, 9, 10, 0) 68%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%), linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 6%), linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
    mask-composite: intersect;
}
@media (max-width: 767.98px) {
    body.vt-fx-on.vt-theme-has-backdrop:not(.vt-theme-has-banner) .vh-hero-scrim {
        background: linear-gradient(180deg, rgba(9, 9, 10, .7) 0%, rgba(9, 9, 10, .5) 50%, rgba(9, 9, 10, .35) 100%);
    }
}
body.vt-fx-on.vt-theme-has-backdrop.vt-theme-has-banner .vh-hero-theme {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
    mask-composite: intersect;
}
@container vh-hero (min-width: 1921px) {
    /* Wider than the picture: it sits whole on the right and its own left edge
       fades into the scene (no dark fill any more). */
    body.vt-fx-on.vt-theme-has-backdrop.vt-theme-has-banner .vh-hero-theme {
        background: var(--vt-theme-banner) right center / auto 100% no-repeat;
        -webkit-mask-image: linear-gradient(90deg, transparent calc(100% - 1920px), #000 calc(100% - 1620px), #000 97%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent calc(100% - 1920px), #000 calc(100% - 1620px), #000 97%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
    }
}
body.vt-fx-on.vt-theme-has-backdrop .vh-floor { display: none; }