/* v0.012 — picture/video wrappers + no-js first-screen fallback */

/* <picture> as transparent box so .hero-slide img / .hero-stage-bg img rules still apply */
.hero-stage-bg > picture,
.hero-slide > picture,
.lineup-card picture,
.product-mini-card picture,
.arch-layer-media > picture,
.apps-composite,
.scene-card > picture {
  display: contents;
}
.series-gate-card > picture.series-gate-bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Fallback if a browser mishandles display:contents */
@supports not (display: contents) {
  .hero-stage-bg > picture,
  .hero-slide > picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .hero-stage-bg > picture img,
  .hero-slide > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* slogan background image (cover) */
.hero-slogan-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* no-js: show first hero text without waiting for main.js */
html.no-js .hero-banner-title,
html.no-js .hero-immersive,
html.no-js .hero-banner-media .hero-slide.is-on,
html.no-js .hero-stage-bg.is-on {
  opacity: 1;
  visibility: visible;
}
html.no-js .hero-banner-title {
  transform: none;
}
html.no-js .hero-banner-title.is-text-on,
html.no-js .hero-banner-title {
  opacity: 1;
}
html.no-js .hero-immersive {
  opacity: 1;
}
html.no-js .hero-immersive .hero-slogan-bg {
  opacity: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Inner pages: never leave content invisible if JS stalls */
html.no-js [data-reveal],
body.is-inner [data-reveal] {
  opacity: 1;
  transform: none;
}
body.is-inner [data-reveal].visible {
  opacity: 1;
  transform: none;
}