.workspace-hero {
  position: relative;
  height: 492px;
  overflow: hidden;
  background: #0e0e0e;
  isolation: isolate;
}

.workspace-hero-background-v2 {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background-image: url("/static/home/assets/workspace-hero-background.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero {
  background-color: #050506;
}

.workspace-hero-background-v2::after {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(180px, 26vh, 240px);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.16) 28%,
    rgba(0, 0, 0, 0.76) 72%,
    #000 100%
  );
  content: '';
}

.workspace-hero-color-bends {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 240ms ease;
}

.workspace-hero-background-v2.is-color-bends-ready {
  background-color: #050506;
  background-image: none;
}

.workspace-hero-background-v2.is-color-bends-ready .workspace-hero-color-bends {
  opacity: 1;
}

.workspace-hero-background-v2.is-color-bends-ready .workspace-hero-glow {
  animation: none;
  opacity: 0;
}

.workspace-hero-content {
  position: relative;
  z-index: 1;
}

.workspace-hero-glow {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.workspace-hero-glow--blue-left {
  top: 20%;
  left: 12%;
  width: 520px;
  height: 420px;
  background: rgba(49, 70, 201, 0.22);
  filter: blur(140px);
  animation-name: workspace-hero-drift-blue-left;
  animation-duration: 17s;
}

.workspace-hero-glow--blue-main {
  top: 18%;
  left: 30%;
  width: 820px;
  height: 260px;
  background: rgba(55, 93, 255, 0.24);
  filter: blur(150px);
  animation-name: workspace-hero-drift-blue-main;
  animation-duration: 19s;
}

.workspace-hero-glow--purple {
  top: 18%;
  left: 50%;
  width: 480px;
  height: 320px;
  background: rgba(90, 73, 214, 0.12);
  filter: blur(150px);
  animation-name: workspace-hero-drift-purple;
  animation-duration: 14s;
}

.workspace-hero-glow--red {
  top: 16%;
  right: -5%;
  width: 420px;
  height: 360px;
  background: rgba(91, 36, 52, 0.08);
  filter: blur(160px);
  animation-name: workspace-hero-drift-red;
  animation-duration: 21s;
}

@keyframes workspace-hero-drift-blue-left {
  0% { transform: translate3d(-24px, -8px, 0) scale(0.98); opacity: 0.86; }
  50% { transform: translate3d(14px, 15px, 0) scale(1.04); opacity: 1; }
  100% { transform: translate3d(32px, -12px, 0) scale(1); opacity: 0.90; }
}

@keyframes workspace-hero-drift-blue-main {
  0% { transform: translate3d(-30px, 4px, 0) scale(0.97); opacity: 0.84; }
  48% { transform: translate3d(22px, -16px, 0) scale(1.045); opacity: 1; }
  100% { transform: translate3d(36px, 10px, 0) scale(1.01); opacity: 0.89; }
}

@keyframes workspace-hero-drift-purple {
  0% { transform: translate3d(22px, 14px, 0) scale(1); opacity: 0.82; }
  54% { transform: translate3d(-17px, -13px, 0) scale(1.05); opacity: 1; }
  100% { transform: translate3d(-30px, 7px, 0) scale(0.98); opacity: 0.88; }
}

@keyframes workspace-hero-drift-red {
  0% { transform: translate3d(10px, -9px, 0) scale(0.98); opacity: 0.84; }
  50% { transform: translate3d(-14px, 14px, 0) scale(1.04); opacity: 1; }
  100% { transform: translate3d(8px, 4px, 0) scale(1); opacity: 0.90; }
}

.hero-copy h1.is-hero-text-prepared .hero-word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, -50px, 0);
  will-change: filter, opacity, transform;
}

.hero-copy h1.is-hero-text-animating .hero-word {
  animation: hero-word-focus-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-copy h1 strong .hero-word {
  background: var(--soft-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes hero-word-focus-in {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, -50px, 0);
  }

  55% {
    opacity: 0.5;
    filter: blur(5px);
    transform: translate3d(0, 5px, 0);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 768px) {
  .workspace-hero {
    height: auto;
    min-height: 500px;
  }

  .workspace-hero-glow--blue-left {
    width: 390px;
    height: 320px;
    filter: blur(105px);
  }

  .workspace-hero-glow--blue-main {
    left: 18%;
    width: 560px;
    height: 220px;
    filter: blur(115px);
  }

  .workspace-hero-glow--purple {
    width: 320px;
    height: 260px;
    filter: blur(110px);
  }

  .workspace-hero-glow--red {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-hero-glow {
    animation: none;
  }

  .hero-copy h1.is-hero-text-prepared .hero-word {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}