/* The existing gradient sits above the video and below every content layer. */
body.theo-home-depth { --theo-video-wash: rgba(250, 247, 246, .93); }
.theo-page-video { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; opacity: 0; background: #161616; }
.theo-page-video video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
body.theo-video-ready .theo-page-video { opacity: 1; }
body.theo-home-depth.theo-video-ready::before {
  background:
    radial-gradient(ellipse at 72% 28%, var(--theo-depth-gold), transparent 58%),
    radial-gradient(ellipse at 100% 85%, var(--theo-depth-purple), transparent 65%),
    radial-gradient(ellipse at 2% 5%, var(--theo-depth-light), transparent 62%),
    var(--theo-video-wash);
}
[color-scheme="dark"] body.theo-home-depth { --theo-video-wash: rgba(22, 22, 22, .92); }
[color-scheme="dark"] body.theo-video-ready { --theo-depth-purple: rgba(135, 108, 215, .12); --theo-depth-gold: rgba(188, 139, 59, .08); --theo-depth-light: rgba(96, 91, 113, .08); }
@media (prefers-color-scheme: dark) {
  :root:not([color-scheme="light"]) body.theo-home-depth { --theo-video-wash: rgba(22, 22, 22, .92); }
  :root:not([color-scheme="light"]) body.theo-video-ready { --theo-depth-purple: rgba(135, 108, 215, .12); --theo-depth-gold: rgba(188, 139, 59, .08); --theo-depth-light: rgba(96, 91, 113, .08); }
}
.theo-background-toggle {
  position: relative; flex: 0 0 auto; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.6rem; height: 4.6rem; padding: 0;
  border: 1px solid var(--st-muted); border-radius: 50%;
  background: var(--base); color: var(--t-bright); cursor: pointer;
}
.theo-background-toggle[hidden] { display: none; }
.theo-background-toggle:focus-visible { outline: 2px solid var(--t-bright); outline-offset: 4px; }
.theo-background-toggle-icon { display: block; width: 2rem; height: 2rem; }
@media (prefers-reduced-motion: reduce) { .theo-page-video, .theo-background-toggle { display: none !important; } }

/* Match the requested desktop position while retaining the mobile card layout. */
@media (min-width: 1200px) {
  .hero-09-objects__item.item-01 { top: 22rem; right: -8rem; }
}

@media (max-width: 389px) {
  .theo-home-depth .mxd-header { flex-wrap: wrap; row-gap: 1.6rem; }
  .theo-home-depth .mxd-header__controls { margin-left: auto; }
}

/* Freeze the hero at its current animation frame, then resume from that frame. */
.theo-home-depth.theo-motion-paused #theo-hero-geometry {
  animation-play-state: paused;
}