/* One continuously looping video behind the entire page, at encoded 2x speed. */
html body.as-cosmic-motion {
  isolation: isolate;
  background: #020817 !important;
}

.as-cosmic-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background: #020817 url('/backgrounds/astrix-stars-desktop.jpg?v=2') center / cover no-repeat;
}

.as-cosmic-background > .as-cosmic-video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.as-cosmic-background[data-motion="static"] > .as-cosmic-video,
.as-cosmic-background[data-motion="fallback"] > .as-cosmic-video {
  visibility: hidden;
}

/* Open the page surfaces to the movie. Card surfaces and all photographs
   retain their existing backgrounds and styling for clear, readable content. */
html body.as-cosmic-motion .v3,
html body.as-cosmic-motion main {
  background: transparent !important;
}

html body.as-cosmic-motion main > section,
html[data-as-profile="true"] body.as-cosmic-motion main > section,
html body.as-cosmic-motion .planet-hero,
html body.as-cosmic-motion .hero.full-scene {
  background: rgba(2, 8, 23, .10) !important;
}

html body.as-cosmic-motion :is(.footer3, .planet-footer, .site-footer),
html[data-as-profile="true"] body.as-cosmic-motion .footer3 {
  background: rgba(2, 8, 23, .24) !important;
}

/* Keep the original blue-and-gold planet artwork in the first homepage
   section. The continuous movie remains visible in every section below it. */
html body.as-cosmic-motion main > section.hero3 {
  background: #020819 !important;
}

html body.as-cosmic-motion .hero3::before {
  background: url('/astrix-hero-gold-desktop-v3.png?v=1') center / cover no-repeat !important;
  opacity: 1 !important;
}

html body.as-cosmic-motion .hero3::after {
  background: linear-gradient(90deg, rgba(1, 6, 20, .82) 0%, rgba(1, 6, 20, .60) 31%, rgba(1, 6, 20, .20) 58%, transparent 78%) !important;
}

html body.as-cosmic-motion .planet-hero > .hero-content,
html body.as-cosmic-motion .planet-hero > .division-hero-visual,
html body.as-cosmic-motion .hero.full-scene > .hero-content,
html body.as-cosmic-motion .hero.full-scene > .hero-media {
  position: relative;
  z-index: 1;
}

.as-cosmic-motion .next-error-h1,
.as-cosmic-motion .next-error-h1 + div {
  color: #f7f3e9 !important;
  border-right-color: rgba(226, 189, 115, .28) !important;
}

@media (max-width: 800px) {
  .as-cosmic-background { background-image: url('/backgrounds/astrix-stars-mobile.jpg?v=2'); }
  html body.as-cosmic-motion .hero3::before {
    background-image: url('/astrix-hero-gold-mobile-v3.png?v=1') !important;
  }
  html body.as-cosmic-motion .hero3::after {
    background: linear-gradient(180deg, rgba(1, 5, 18, .66) 0%, rgba(1, 5, 18, .30) 50%, rgba(1, 5, 18, .64) 100%) !important;
  }
}