.dw-hero {
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse 36% 85% at 86% 50%, color-mix(in oklab, var(--dw-accent) 14%, transparent), transparent 70%), linear-gradient(180deg, var(--dw-bg-1), var(--dw-bg-0));
}
.dw-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: max(2rem, calc((100vw - var(--dw-width-page)) / 2 + 3rem));
  width: 16rem;
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: url("img/s3lightfixes-logo.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 2.5rem color-mix(in oklab, var(--dw-accent) 40%, transparent));
  pointer-events: none;
}
@media (max-width: 1100px) {
  .dw-hero::after {
    width: 10rem;
    opacity: .35;
  }
}
@media (max-width: 700px) {
  .dw-hero::after {
    top: 1.1rem;
    right: 1rem;
    width: 4.5rem;
    transform: none;
    opacity: 1;
    filter: drop-shadow(0 0 1rem color-mix(in oklab, var(--dw-accent) 40%, transparent));
  }
}
.dw-hero__art > .s3-hero__canvas {
  opacity: 0;
  transition: opacity .8s var(--dw-ease);
}
.dw-hero__art.is-live > .s3-hero__canvas {
  opacity: 1;
}
.dw-hero--art {
  touch-action: manipulation;
}
.dw-hero--art::after {
  transition: opacity .8s var(--dw-ease);
}
.dw-hero--art:has(> .dw-hero__art.is-live)::after {
  opacity: 0;
}
@media (max-width: 900px) {
  .dw-hero--art .dw-hero__text {
    padding-top: 11rem;
  }
  .dw-hero.dw-hero--art::after {
    top: 1rem;
    right: 50%;
    width: 9rem;
    transform: translateX(50%);
    opacity: 1;
  }
}
.dw-header {
  border-top-color: transparent;
  background-image: linear-gradient(90deg, #45d4dc 0 25%, var(--dw-accent) 25% 50%, #efd35a 50% 75%, var(--dw-line-strong) 75%);
  background-size: 100% 3px;
  background-position: top;
  background-repeat: no-repeat;
  background-origin: border-box;
}