/* Shared banner framing: artwork spans the viewport and fades into the wallpaper. */
body.site-wallpaper {
  --banner-rgb: 244, 247, 251;
  --banner-fade: clamp(110px, 10vw, 220px);
  --banner-wash: linear-gradient(90deg, rgba(var(--banner-rgb), .9), rgba(var(--banner-rgb), .76) 28%, rgba(var(--banner-rgb), .34) 48%, transparent 72%);
}
html[data-theme="dark"] body.site-wallpaper { --banner-rgb: 16, 28, 46; }
html[data-theme="dark"] body.home-page { --banner-rgb: 22, 27, 30; }

html[data-theme] body.site-wallpaper :is(.portal-hero, .release-detail-hero, .download-hero) {
  --banner-art: url('/assets/backgrounds/hd-20261017/mir-ice-ruins-73d5d97591-1942.webp');
  min-height: clamp(520px, 41.667vw, 1200px);
  margin-top: 78px;
  background: transparent;
  isolation: isolate;
}
html[data-theme] body.site-wallpaper .portal-updates .portal-hero,
html[data-theme] body.site-wallpaper .release-detail-hero { --banner-art: url('/assets/backgrounds/hd-20261017/mir-fortress-siege-084b3c1af8-1942.webp'); }
html[data-theme] body.site-wallpaper .download-hero { --banner-art: url('/assets/backgrounds/hd-20261017/mir-city-heroes-cf9c847578-1942.webp'); }
html[data-theme] body.site-wallpaper .portal-protection .portal-hero { --banner-art: url('/assets/backgrounds/hd-20261017/mir-red-moon-temple-0ed6a0643d-1942.webp'); }
html[data-theme] body.site-wallpaper .portal-security .portal-hero { --banner-art: url('/assets/backgrounds/hd-20261017/mir-fortress-siege-084b3c1af8-1942.webp'); }

html[data-theme] body.site-wallpaper :is(.portal-hero, .release-detail-hero)::before,
html[data-theme] body.site-wallpaper .download-hero-bg {
  display: block;
  position: absolute;
  z-index: 0;
  inset: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: var(--banner-art) center top / cover no-repeat;
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--banner-fade)), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--banner-fade)), transparent);
}
html[data-theme] body.site-wallpaper :is(.portal-hero, .release-detail-hero, .download-hero)::after {
  display: block;
  position: absolute;
  z-index: 1;
  inset: 0;
  content: '';
  pointer-events: none;
  background: var(--banner-wash);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--banner-fade)), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--banner-fade)), transparent);
}
html[data-theme] body.site-wallpaper .portal-hero-grid,
html[data-theme] body.site-wallpaper .download-hero-bg::after { display: none; }
html[data-theme] body.site-wallpaper :is(.portal-hero-inner, .release-detail-hero-inner, .download-hero-inner) {
  position: relative;
  z-index: 2;
  padding-block: 60px 100px;
}
html[data-theme] body.site-wallpaper .portal-hero-meta,
html[data-theme] body.site-wallpaper .download-guide {
  padding: 18px 22px;
  border: 1px solid rgba(var(--banner-rgb), .65);
  border-radius: 12px;
  background: rgba(var(--banner-rgb), .88);
  backdrop-filter: blur(8px);
}

/* Bring the release list closer to its introductory banner. */
html[data-theme] body.site-wallpaper .portal-updates .portal-hero + .portal-section {
  padding-top: 36px;
}
/* Keep directories and news close to their banners without losing the fade. */
html[data-theme] body.site-wallpaper .portal-security .portal-hero + .portal-section,
html[data-theme] body.site-wallpaper .portal-ai .portal-hero + .portal-section,
html[data-theme] body.site-wallpaper .portal-news .portal-hero + .portal-section,
html[data-theme] body.site-wallpaper .portal-protection .portal-hero + .protection-showcase {
  padding-top: 28px;
}
@media (min-width: 761px) {
  html[data-theme] body.site-wallpaper .portal-updates .portal-hero {
    min-height: clamp(380px, 28vw, 460px);
  }
  html[data-theme] body.site-wallpaper .portal-updates .portal-hero-inner {
    padding-block: 40px 44px;
  }
  html[data-theme] body.site-wallpaper .portal-security .portal-hero,
  html[data-theme] body.site-wallpaper .portal-ai .portal-hero,
  html[data-theme] body.site-wallpaper .portal-news .portal-hero,
  html[data-theme] body.site-wallpaper .portal-protection .portal-hero {
    min-height: 380px;
  }
  html[data-theme] body.site-wallpaper .portal-security .portal-hero-inner,
  html[data-theme] body.site-wallpaper .portal-ai .portal-hero-inner,
  html[data-theme] body.site-wallpaper .portal-news .portal-hero-inner,
  html[data-theme] body.site-wallpaper .portal-protection .portal-hero-inner {
    padding-block: 36px 40px;
  }
  html[data-theme] body.site-wallpaper .portal-security .portal-hero::before {
    background-position: center top;
  }
}

/* Keep uploaded AI slides and their existing crossfade and playback controls. */
html[data-theme] body.site-wallpaper .portal-ai .portal-hero::before { display: none; }
html[data-theme] body.site-wallpaper .portal-ai .ai-page-hero-art { z-index: 0; }
html[data-theme] body.site-wallpaper .portal-ai .ai-page-hero-art img {
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--banner-fade)), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--banner-fade)), transparent);
}
html[data-theme] body.site-wallpaper .portal-ai .ai-page-hero-controls { top: 22px; }

/* Product banners keep each product's own artwork. */
html[data-theme] body.site-wallpaper .ac-product-detail .ac-hero {
  min-height: clamp(420px, 32vw, 840px);
  padding-block: 48px 70px;
  border-bottom: 0;
  background: transparent;
}
html[data-theme] body.site-wallpaper .ac-product-detail .ac-hero::before {
  z-index: -1;
  inset: 0;
  width: 100%;
  transform: none;
  background: var(--banner-wash), var(--ac-hero-art) center top / cover no-repeat;
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent);
  mask-image: linear-gradient(180deg, #000 65%, transparent);
}

/* The homepage already scales panoramas with the viewport; soften its text wash. */
html[data-theme] body.home-page .hero-artwork-slide img {
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
  mask-image: linear-gradient(180deg, #000 72%, transparent);
}
html[data-theme] body.home-page .hero-artwork::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: '';
  pointer-events: none;
  background: var(--banner-wash);
}

@media (max-width: 760px) {
  body.site-wallpaper { --banner-fade: 85px; }
  html[data-theme] body.site-wallpaper :is(.portal-hero, .release-detail-hero, .download-hero) {
    min-height: 0;
    margin-top: 68px;
    align-items: flex-start;
  }
  html[data-theme] body.site-wallpaper :is(.portal-hero, .release-detail-hero)::before,
  html[data-theme] body.site-wallpaper .download-hero-bg {
    height: clamp(210px, 56vw, 420px);
    background-size: cover;
    background-position: 70% top;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
  }
  html[data-theme] body.site-wallpaper :is(.portal-hero, .release-detail-hero, .download-hero)::after { display: none; }
  html[data-theme] body.site-wallpaper :is(.portal-hero-inner, .release-detail-hero-inner, .download-hero-inner) {
    display: block;
    padding-block: clamp(190px, 49vw, 370px) 48px;
  }
  html[data-theme] body.site-wallpaper :is(.portal-hero, .release-detail-hero, .download-hero) h1 {
    font-size: clamp(32px, 6vw, 46px);
    line-height: 1.2;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
  html[data-theme] body.site-wallpaper :is(.portal-hero-meta, .download-guide) { width: fit-content; max-width: 100%; min-width: 0; margin-top: 24px; }
  html[data-theme] body.site-wallpaper .portal-updates .portal-hero-inner { padding-bottom: 28px; }
  html[data-theme] body.site-wallpaper .portal-updates .portal-hero + .portal-section { padding-top: 24px; }
  html[data-theme] body.site-wallpaper .portal-security .portal-hero-inner,
  html[data-theme] body.site-wallpaper .portal-ai .portal-hero-inner,
  html[data-theme] body.site-wallpaper .portal-news .portal-hero-inner,
  html[data-theme] body.site-wallpaper .portal-protection .portal-hero-inner { padding-bottom: 28px; }
  html[data-theme] body.site-wallpaper .portal-security .portal-hero + .portal-section,
  html[data-theme] body.site-wallpaper .portal-ai .portal-hero + .portal-section,
  html[data-theme] body.site-wallpaper .portal-news .portal-hero + .portal-section,
  html[data-theme] body.site-wallpaper .portal-protection .portal-hero + .protection-showcase { padding-top: 24px; }
  html[data-theme] body.site-wallpaper .portal-ai .ai-page-hero-art img {
    height: clamp(210px, 56vw, 420px);
    object-position: 70% top;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
  }
  html[data-theme] body.site-wallpaper .portal-ai .ai-page-hero-controls { top: 12px; }
  html[data-theme] body.site-wallpaper .ac-product-detail .ac-hero {
    min-height: 0;
    padding-block: clamp(190px, 49vw, 370px) 36px;
  }
  html[data-theme] body.site-wallpaper .ac-product-detail > main:not(.ac-pending-state) { padding-top: 68px; }
  html[data-theme] body.site-wallpaper .ac-product-detail .ac-hero::before {
    height: clamp(210px, 56vw, 420px);
    background-image: var(--ac-hero-art);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 70% top;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
  }
}

/* Smaller artwork for phone banners; keep the same framing and fades. */
@media (max-width: 760px) {
  html[data-theme] body.site-wallpaper :is(.portal-hero, .release-detail-hero, .download-hero) { --banner-art: image-set(url('/assets/backgrounds/hd-20261017/mir-ice-ruins-73d5d97591-1024.webp') 1x, url('/assets/backgrounds/hd-20261017/mir-ice-ruins-73d5d97591-1942.webp') 2x); }
  html[data-theme] body.site-wallpaper .portal-updates .portal-hero, html[data-theme] body.site-wallpaper .release-detail-hero { --banner-art: image-set(url('/assets/backgrounds/hd-20261017/mir-fortress-siege-084b3c1af8-1024.webp') 1x, url('/assets/backgrounds/hd-20261017/mir-fortress-siege-084b3c1af8-1942.webp') 2x); }
  html[data-theme] body.site-wallpaper .download-hero { --banner-art: image-set(url('/assets/backgrounds/hd-20261017/mir-city-heroes-cf9c847578-1024.webp') 1x, url('/assets/backgrounds/hd-20261017/mir-city-heroes-cf9c847578-1942.webp') 2x); }
  html[data-theme] body.site-wallpaper .portal-protection .portal-hero { --banner-art: image-set(url('/assets/backgrounds/hd-20261017/mir-red-moon-temple-0ed6a0643d-1024.webp') 1x, url('/assets/backgrounds/hd-20261017/mir-red-moon-temple-0ed6a0643d-1942.webp') 2x); }
  html[data-theme] body.site-wallpaper .portal-security .portal-hero { --banner-art: image-set(url('/assets/backgrounds/hd-20261017/mir-fortress-siege-084b3c1af8-1024.webp') 1x, url('/assets/backgrounds/hd-20261017/mir-fortress-siege-084b3c1af8-1942.webp') 2x); }
}