/* A decorative layer behind the hero, bounded to the viewport in both directions. */
.hero { position: relative; isolation: isolate; }
.hero > .hero-copy, .hero > .hero-art { position: relative; z-index: 1; }
.hero-atmosphere {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: min(1680px, calc(100vw - 32px));
  max-width: none;
  transform: translateX(-50%);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  color: #4d7fb9;
}
.hero-float {
  --float-tilt: -10deg;
  --float-turn: 8deg;
  --float-x: 12px;
  --float-y: -28px;
  --float-duration: 7s;
  --float-delay: -4s;
  position: absolute;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  padding: 12px;
  border: 1px solid #638cb32e;
  border-radius: 23px;
  background: #719bd508;
  opacity: .48;
  transform: rotate(var(--float-tilt));
}
.hero-float svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero-float-accent { color: #198e9b; stroke: currentColor; }
.hero-float-grid { opacity: .22; stroke-width: 1; }
.hero-float--camera { left: 2%; top: 14%; }
.hero-float--edit { left: 2%; bottom: 12%; width: 110px; height: 78px; --float-tilt: 9deg; --float-turn: -7deg; --float-duration: 8s; --float-delay: -2s; }
.hero-float--design { right: 1.5%; top: 18%; --float-tilt: 12deg; --float-turn: -9deg; --float-x: -12px; --float-duration: 6.5s; --float-delay: -4s; }
.hero-float--growth { right: 5%; bottom: 12%; width: 112px; height: 82px; --float-tilt: -8deg; --float-x: -10px; --float-duration: 9s; --float-delay: -6s; }
.hero-float--layers { left: 48%; top: 4%; width: 62px; height: 62px; padding: 14px; border: 0; background: none; --float-tilt: 10deg; --float-turn: -10deg; --float-y: -18px; --float-duration: 6s; --float-delay: -1s; }
.hero-float--reach { left: 4%; top: 54%; width: 64px; height: 64px; padding: 16px; border: 0; background: none; --float-tilt: -16deg; --float-duration: 7.5s; --float-delay: -3s; }
.hero-float--layers svg, .hero-float--reach svg { stroke-width: 1.25; }
html[data-theme="dark"] .hero-atmosphere { color: #91bbf2; }
html[data-theme="dark"] .hero-float { border-color: #91bbf230; background-color: #91bbf208; opacity: .4; }
html[data-theme="dark"] .hero-float-accent { color: #77cfda; }
html[data-theme="dark"] :is(.hero-float--layers,.hero-float--reach) { background: none; }
@keyframes hero-background-float {
  0%,100% { transform: translate3d(0,0,0) rotate(var(--float-tilt)); }
  50% { transform: translate3d(var(--float-x),var(--float-y),0) rotate(calc(var(--float-tilt) + var(--float-turn))); }
}
@media (prefers-reduced-motion: no-preference) {
  /* Start immediately, independently of scroll-reveal observers. */
  html:not(.motion-disabled) .hero-float { animation: hero-background-float var(--float-duration) ease-in-out var(--float-delay) infinite; }
  html.motion-paused .hero-float { animation-play-state: paused; }
}
@media (max-width: 1240px) {
  .hero-float { width: 64px; height: 64px; padding: 10px; border-radius: 17px; --float-x: 6px; --float-y: -12px; --float-turn: 5deg; }
  .hero-float--camera { left: 4%; top: 4%; }
  .hero-float--design { right: 5%; top: 4%; }
  .hero-float--edit { left: 8%; bottom: 2%; width: 80px; height: 58px; }
  .hero-float--growth { right: 4%; bottom: 2%; width: 82px; height: 60px; }
  .hero-float--layers { left: 47%; top: 46%; width: 44px; height: 44px; padding: 8px; }
  .hero-float--reach { display: none; }
}
@media (max-width: 650px) {
  .hero-atmosphere { width: calc(100vw - 20px); }
  .hero-float--camera, .hero-float--layers { display: none; }
  .hero-float { --float-x: 4px; --float-y: -10px; }
  .hero-float--design { top: 3%; right: 3%; width: 48px; height: 48px; }
  .hero-float--growth { top: 42%; bottom: auto; right: 1%; width: 68px; height: 50px; }
  .hero-float--edit { left: 3%; bottom: 1%; width: 68px; height: 50px; }
}
@media (forced-colors: active), print { .hero-atmosphere { display: none; } }