/* Photon video: full-width opening frame without eager video playback. */
@media (min-width: 761px) {
  .hero.section-panel {
    position: relative;
    display: flex !important;
    align-items: flex-end !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: min(82svh, 900px) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
    padding: clamp(40px, 6vw, 88px) !important;
    overflow: hidden !important;
    isolation: isolate;
    background: #09040f;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .hero > #heroCanvas {
    display: none !important;
  }

  .hero > .hero-visual {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    perspective: none !important;
  }

  .hero .hero-frame {
    position: absolute !important;
    inset: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #09040f !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .hero .hero-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 48% !important;
    transform: none !important;
    filter: saturate(1.06) contrast(1.04) brightness(.86) !important;
  }

  .hero .hero-frame::after {
    background:
      linear-gradient(90deg, rgba(8, 3, 15, .76) 0%, rgba(8, 3, 15, .40) 38%, rgba(8, 3, 15, .04) 72%),
      linear-gradient(0deg, rgba(8, 3, 15, .62) 0%, transparent 48%) !important;
  }

  .hero::after {
    z-index: 1 !important;
    background: transparent !important;
  }

  .hero > .hero-copy {
    z-index: 3 !important;
    width: min(610px, 48vw) !important;
    max-width: 610px !important;
    margin: 0 !important;
  }

  .hero .hero-frame figcaption,
  .hero .hero-hud,
  .hero > .hero-status {
    display: none !important;
  }

  .hero .hero-video-launch {
    pointer-events: auto !important;
  }
}

@media (max-width: 760px) {
  .hero .hero-frame img {
    object-position: 57% 50% !important;
    filter: brightness(.78) saturate(1.08) contrast(1.05) !important;
  }

  .hero .hero-mobile-video-launch {
    z-index: 5 !important;
    top: 28% !important;
    right: 9% !important;
    background: rgba(244, 255, 47, .96) !important;
    box-shadow: 0 0 0 9px rgba(244, 255, 47, .13), 0 0 32px rgba(244, 255, 47, .7) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-video-play,
  .hero .hero-mobile-video-launch {
    animation: none !important;
  }
}