/* Desktop hero atmosphere: frame-0 poster underpaint → deferred video */

.hero-bg-loop {
  display: none;
}

@media screen and (min-width: 768px) {
  .hero-bg-loop {
    display: block;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  .landing-content-section > .hero-bg-loop {
    position: absolute;
    inset: 0;
  }

  .rich-text-landing-content-section > .hero-bg-loop,
  body > .hero-bg-loop {
    position: fixed;
    inset: 0;
  }

  html[data-theme="dark"] .landing-content-section > .hero-bg-loop,
  html.hero-bg-loop-active .landing-content-section > .hero-bg-loop {
    position: absolute !important;
    inset: 0;
    z-index: 0 !important;
  }

  /*
   * Underpaint only on the SECTION (behind .hero-bg-loop).
   * Never on .top-container — that layer is z-index:2 above the video, so a
   * poster background there completely hides motion (static plate forever).
   */
  html:not([data-theme="dark"]) .landing-content-section {
    background-image: url("../images/clouds-light-loop-poster.jpg") !important;
    background-position: 50% 0 !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }

  html.hero-bg-loop-active
    .landing-content-section
    > .landing-content-section-container.top-container {
    background-image: none !important;
    background-color: transparent !important;
  }

  html.hero-bg-loop-playing .hero-bg-loop__poster {
    opacity: 0 !important;
  }

  html[data-theme="dark"] .landing-content-section {
    background-image: url("../images/underwater-godrays-loop-poster.jpg") !important;
    background-position: 50% 0 !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-color: #010106;
  }

  .rich-text-landing-content-section > .top-container {
    background-image: none !important;
    background-color: transparent !important;
  }

  .rich-text-landing-content-section > .hero-bg-loop {
    opacity: calc(0.25 * (1 - var(--section-t, 0)));
    /* Opacity tracks --section-t from JS; no CSS transition (avoids theme-toggle lag). */
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 30%,
      transparent 100%
    );
    mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 100%);
  }

  .hero-bg-loop__poster,
  .hero-bg-loop__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
  }

  .hero-bg-loop__poster {
    object-fit: fill;
    object-position: 50% 0;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 0;
  }

  .hero-bg-loop__poster[src] {
    opacity: 1;
  }

  .hero-bg-loop__poster--dark {
    display: none;
    object-fit: cover;
  }

  html[data-theme="dark"] .hero-bg-loop__poster--light {
    display: none;
  }

  html[data-theme="dark"] .hero-bg-loop__poster--dark {
    display: block;
  }

  .hero-bg-loop__video {
    display: block;
    object-fit: fill;
    object-position: 50% 0;
    opacity: 0;
    transition: opacity 0.45s ease;
    background: transparent;
    z-index: 1;
  }

  html[data-theme="dark"] .hero-bg-loop__video {
    object-fit: cover;
  }

  .hero-bg-loop__video.is-playing {
    opacity: 1;
  }

  /* Theme flip: no poster/video crossfade (paired with .nb-theme-switching) */
  html.nb-theme-switching .hero-bg-loop__poster,
  html.nb-theme-switching .hero-bg-loop__video {
    transition: none !important;
  }

  .landing-content-section > .landing-content-section-container,
  .rich-text-landing-content-section > .landing-content-section-container {
    position: relative;
    z-index: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-loop__video {
    display: none !important;
  }
}