section.hero {
  isolation: isolate;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow: clip;
}

section.hero .hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: none;
}

section.hero .hero-backdrop,
section.hero .hero-flow {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
}

section.hero .hero-backdrop { z-index: 0; }
section.hero .hero-flow { z-index: 1; opacity: 0; }
section.hero .hero-flow[data-rendered="true"] { opacity: 1; }
section.hero[data-motion-state="fallback"] .hero-flow { opacity: 0; }
section.hero .hero-visual::after { z-index: 2; }
section.hero .hero-inner { position: relative; z-index: 2; min-width: 0; max-width: 100%; }

section.hero .hero-motion-toggle {
  position: absolute;
  right: clamp(14px, 2.5vw, 36px);
  bottom: clamp(14px, 2.5vw, 30px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: calc(100% - 28px);
  padding: 9px 15px;
  border: 1px solid #e7d4ff55;
  border-radius: 999px;
  background: #110d24df;
  box-shadow: 0 4px 16px #08041644;
  color: #f0e9ff;
  font: inherit;
  font-size: .75rem;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  touch-action: manipulation;
}

section.hero .hero-motion-toggle:hover:not(:disabled) {
  border-color: #a7eaf5bb;
  background: #211936f2;
}

section.hero .hero-motion-toggle:focus-visible {
  outline: 2px solid #a7eaf5;
  outline-offset: 4px;
}

section.hero .hero-motion-toggle:disabled {
  color: #cec4dc;
  cursor: default;
}

@media (max-width: 600px) {
  section.hero .hero-motion-toggle {
    right: 14px;
    bottom: 14px;
    padding: 8px 12px;
    font-size: .6875rem;
  }
}