/*
  Big-screen performance guard for Velora inside Nodecast.
  CSS only: no loading, playback, API, env, or catalogue behavior changes.
*/

@media (min-width: 1024px) {
  .main--velora {
    text-rendering: optimizeSpeed;
  }

  .main--velora .vel-futuristic-bg,
  .main--velora.main--velora-scrolling .vel-futuristic-bg {
    opacity: 0.92 !important;
  }

  .main--velora .grid.vel-packages::before,
  .main--velora.main--velora-scrolling .grid.vel-packages::before {
    opacity: 0.72 !important;
    animation: none !important;
    transition: none !important;
  }

  .main--velora .player-container,
  .main--velora video {
    contain: layout paint;
  }

  .main--velora .vel-package-card,
  .main--velora .vel-package-card::before,
  .main--velora .vel-package-card::after,
  .main--velora .vel-package-card__title,
  .main--velora .vel-package-card__art,
  .main--velora .vel-vod-movie-card,
  .main--velora .vel-vod-movie-card::before,
  .main--velora .vel-vod-movie-card::after,
  .main--velora .vel-vod-movie-card__media,
  .main--velora .vel-vod-movie-card__poster img,
  .main--velora .media-item,
  .main--velora .media-item::before,
  .main--velora .media-item::after,
  .main--velora .media-item__thumb,
  .main--velora .media-info h4,
  .main--velora .vel-media-item-row,
  .main--velora .vel-media-item-row::before,
  .main--velora .vel-media-item-row::after,
  .main--velora .cat-pill,
  .main--velora .vel-sticky-top,
  .main--velora .vel-package-toolbar-sticky,
  .main--velora .vel-content-toolbar,
  .main--velora .vel-header__country .country-select,
  .main--velora .vel-header__country .country-select-trigger,
  .velora-country-select-menu,
  .velora-tv-select-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    text-shadow: none !important;
    transition: none !important;
  }

  .main--velora .vel-package-card,
  .main--velora .vel-vod-movie-card__media,
  .main--velora .media-item,
  .main--velora .vel-media-item-row,
  .main--velora .cat-pill,
  .main--velora .vel-sticky-top,
  .main--velora .vel-package-toolbar-sticky,
  .main--velora .vel-content-toolbar,
  .main--velora .vel-header__country .country-select,
  .main--velora .vel-header__country .country-select-trigger {
    box-shadow: none !important;
  }

  .main--velora .grid.vel-packages::before,
  .main--velora .vel-package-card::before,
  .main--velora .vel-package-card::after,
  .main--velora .vel-vod-movie-card::before,
  .main--velora .vel-vod-movie-card::after,
  .main--velora .media-item::before,
  .main--velora .media-item::after,
  .main--velora .vel-media-item-row::before,
  .main--velora .vel-media-item-row::after {
    animation: none !important;
  }

  .main--velora .vel-package-card:hover,
  .main--velora .vel-package-card:focus-visible,
  .main--velora .vel-vod-movie-card:hover,
  .main--velora .media-item:hover,
  .main--velora .media-item:focus-visible,
  .main--velora .vel-media-item-row:hover,
  .main--velora .cat-pill:hover,
  .main--velora .cat-pill:focus-visible {
    transform: none !important;
    filter: none !important;
  }

}

/*
  Desktop browsers repaint auto-virtualized tiles while scrolling large grids.
  Keep the full tile tree mounted on pointer-driven PC screens to avoid blink.
*/
@media (max-width: 1023.98px) {
  /* Keep the mobile home shell clear so the animated canvas remains visible. */
  .main--velora:has(#packages-view:not(.hidden)):not(.main--velora-adult) {
    background: transparent !important;
  }

  /* Do not leave a dark spacer below the mobile live-channel list. */
  .main--velora-live-package #dynamic-list.item-list:not(.item-list--vod-vertical):not(.item-list--vod-film-detail) {
    padding-bottom: 0 !important;
    scroll-padding-bottom: 0;
  }

  /* A stale promo-height variable must not reserve space when no banner exists. */
  body:not(:has(.vel-promo-banner)) .main--velora-live-package .vel-dashboard {
    height: 100dvh !important;
  }
}

.vel-packages-section-title {
  grid-column: 1 / -1;
  width: min(100% - 2rem, 72rem);
  margin: 0 auto 0.8rem;
  color: #fff;
  font-size: clamp(1.15rem, 3vw, 1.65rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 20px var(--vel-accent-glow, rgba(138, 43, 226, 0.3));
}

.vel-body:has(#packages-view.hidden) > .vel-packages-section-title,
.main--velora-adult .vel-packages-section-title {
  display: none;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .main--velora .vel-package-card,
  .main--velora .vel-vod-movie-card,
  .main--velora .media-item,
  .main--velora .vel-media-item-row,
  .main--velora .channel-card {
    contain: none !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }
}

/*
  TV browsers are much weaker than desktop Chrome. Keep the Velora look, but
  replace expensive live canvas/backdrop animation with static GPU-cheap layers
  only for TV/coarse-pointer screens.
*/
@media (min-width: 1024px) and (pointer: coarse), (min-width: 1024px) and (hover: none) {
  .main--velora {
    background-image:
      radial-gradient(ellipse 70% 42% at 50% -8%, rgba(138, 43, 226, 0.18), transparent 68%),
      radial-gradient(ellipse 46% 34% at 100% 20%, rgba(56, 189, 248, 0.1), transparent 70%),
      linear-gradient(180deg, var(--vel-bg, #06050a), color-mix(in srgb, var(--vel-bg, #06050a) 88%, #101729));
    background-attachment: fixed;
  }

  .vel-futuristic-bg,
  .main--velora .grid.vel-packages::before,
  .main--velora .vel-package-card::before,
  .main--velora .vel-package-card::after,
  .main--velora .vel-vod-movie-card::before,
  .main--velora .vel-vod-movie-card::after,
  .main--velora .media-item::before,
  .main--velora .media-item::after,
  .main--velora .vel-media-item-row::before,
  .main--velora .vel-media-item-row::after {
    display: none !important;
  }

  .main--velora *,
  .main--velora *::before,
  .main--velora *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .main--velora .vel-package-card,
  .main--velora .vel-vod-movie-card__media,
  .main--velora .media-item,
  .main--velora .vel-media-item-row,
  .main--velora .cat-pill,
  .main--velora .vel-sticky-top,
  .main--velora .vel-package-toolbar-sticky,
  .main--velora .vel-content-toolbar,
  .main--velora .vel-header__country .country-select,
  .main--velora .vel-header__country .country-select-trigger,
  .velora-country-select-menu,
  .velora-tv-select-menu {
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .main--velora .vel-package-card:hover,
  .main--velora .vel-package-card:focus-visible,
  .main--velora .vel-package-card.velora-tv-focus,
  .main--velora .vel-vod-movie-card:hover,
  .main--velora .vel-vod-movie-card:focus-visible,
  .main--velora .vel-vod-movie-card.velora-tv-focus,
  .main--velora .media-item:hover,
  .main--velora .media-item:focus-visible,
  .main--velora .media-item.velora-tv-focus,
  .main--velora .vel-media-item-row:hover,
  .main--velora .vel-media-item-row.velora-tv-focus,
  .main--velora .cat-pill:hover,
  .main--velora .cat-pill:focus-visible,
  .main--velora .cat-pill.velora-tv-focus {
    transform: none !important;
    filter: none !important;
  }

  .main--velora img {
    will-change: auto !important;
  }
}

body.velora-tv-mode .main--velora {
  background-image:
    radial-gradient(ellipse 70% 42% at 50% -8%, rgba(138, 43, 226, 0.18), transparent 68%),
    radial-gradient(ellipse 46% 34% at 100% 20%, rgba(56, 189, 248, 0.1), transparent 70%),
    linear-gradient(180deg, var(--vel-bg, #06050a), color-mix(in srgb, var(--vel-bg, #06050a) 88%, #101729));
  background-attachment: fixed;
}

body.velora-tv-mode .vel-futuristic-bg,
body.velora-tv-mode .main--velora .grid.vel-packages::before,
body.velora-tv-mode .main--velora .vel-package-card::before,
body.velora-tv-mode .main--velora .vel-package-card::after,
body.velora-tv-mode .main--velora .vel-vod-movie-card::before,
body.velora-tv-mode .main--velora .vel-vod-movie-card::after,
body.velora-tv-mode .main--velora .media-item::before,
body.velora-tv-mode .main--velora .media-item::after,
body.velora-tv-mode .main--velora .vel-media-item-row::before,
body.velora-tv-mode .main--velora .vel-media-item-row::after {
  display: none !important;
}

body.velora-tv-mode .main--velora *,
body.velora-tv-mode .main--velora *::before,
body.velora-tv-mode .main--velora *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/*
  iOS Safari can skip descendants when nested live rows both use
  content-visibility:auto. Keep mobile channel contents mounted.
*/
@media (max-width: 1023.98px) {
  .main--velora-live-package .vel-media-item-row,
  .main--velora-live-package .media-item {
    contain: none !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }
}