/* A quiet, layered motion treatment for the public business introduction. */
.business-hero .hero-motion {
  isolation: isolate;
}
.hero-motion-scene {
  position: relative;
  width: 124%;
  margin-left: -9%;
  flex: 0 0 auto;
  aspect-ratio: 1;
  pointer-events: none;
  transform-origin: 52% 48%;
}
.hero-motion-scene > img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  opacity: .94;
  filter: saturate(.78);
  -webkit-mask-image: radial-gradient(ellipse 66% 65% at 50% 49%, #000 52%, transparent 86%);
  mask-image: radial-gradient(ellipse 66% 65% at 50% 49%, #000 52%, transparent 86%);
}
.hero-ambient {
  position: absolute;
  inset: 4% -17% 1% -23%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 51% 42%, #bf945236, transparent 56%),
    radial-gradient(ellipse at 71% 74%, #9372aa26, transparent 61%);
  opacity: .65;
}
.hero-orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hero-orbits .orbit-line {
  stroke: #dec399;
  stroke-width: 1;
  opacity: .22;
}
.hero-orbits .orbit-line-secondary { opacity: .14; }
.hero-orbits .orbit-trail {
  stroke: #efce96;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 28 972;
  stroke-dashoffset: 120;
  opacity: .65;
}
.hero-orbits .orbit-point {
  stroke: #fff0d6;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: .1 999.9;
  stroke-dashoffset: 120;
  filter: drop-shadow(0 0 5px #efc780);
}
.hero-orbits .orbit-b { stroke-dashoffset: 610; }
.hero-motion .art-caption,
.hero-motion .floating-file {
  z-index: 2;
}
.hero-motion .art-caption span + span { color: #c3b0ca; }
.hero-motion .floating-file {
  box-shadow: 0 26px 70px #10091666, 0 1px 0 #fffdf7 inset;
}
.hero-motion-toggle {
  position: absolute;
  z-index: 3;
  right: 8px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid #a98f6b80;
  border-radius: 100px;
  background: #211c2de8;
  color: #e7d2b0;
  font-size: 12px;
  line-height: 1.4;
  transition: border-color .2s, background .2s;
}
.hero-motion-toggle:hover {
  background: #352a3e;
  border-color: #d4b98c;
}
.hero-motion-toggle svg {
  display: block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-motion-toggle .motion-play-icon { display: none; }
.hero-motion-toggle[data-paused="true"] .motion-pause-icon { display: none; }
.hero-motion-toggle[data-paused="true"] .motion-play-icon { display: block; }
.hero-motion.is-motion-ready .hero-motion-scene {
  animation: business-globe-drift 18s ease-in-out infinite alternate;
}
.hero-motion.is-motion-ready .hero-ambient {
  animation: business-ambient-drift 14s ease-in-out infinite alternate;
}
.hero-motion.is-motion-ready .orbit-a {
  animation: business-orbit-a 22s linear infinite;
}
.hero-motion.is-motion-ready .orbit-b {
  animation: business-orbit-b 29s linear infinite;
}
.hero-motion.is-motion-ready .floating-file {
  animation: business-file-float 9s ease-in-out infinite alternate;
}
.hero-motion.is-motion-paused *,
.hero-motion.is-motion-paused *::before,
.hero-motion.is-motion-paused *::after {
  animation-play-state: paused !important;
}
@keyframes business-globe-drift {
  from { transform: translate3d(0, 4px, 0) rotate(-.4deg) scale(1); }
  to { transform: translate3d(0, -9px, 0) rotate(.7deg) scale(1.022); }
}
@keyframes business-ambient-drift {
  from { transform: translate3d(-2%, 1%, 0) scale(.98); opacity: .5; }
  to { transform: translate3d(2%, -2%, 0) scale(1.04); opacity: .8; }
}
@keyframes business-orbit-a { from { stroke-dashoffset: 120; } to { stroke-dashoffset: -880; } }
@keyframes business-orbit-b { from { stroke-dashoffset: 610; } to { stroke-dashoffset: -390; } }
@keyframes business-file-float {
  from { transform: translate3d(0, 0, 0) rotate(-2deg); }
  to { transform: translate3d(0, -6px, 0) rotate(-1.5deg); }
}
@media (min-width: 1500px) {
  .hero-motion-scene { width: 118%; margin-left: -5%; }
}
@media (max-width: 900px) {
  .hero-motion-scene { width: 142%; margin-left: -18%; }
}
@media (max-width: 700px) {
  .business-hero .hero-motion { height: 430px; }
  .hero-motion-scene { width: 116%; margin-left: -8%; margin-top: -38px; }
  .hero-motion .floating-file { bottom: 67px; }
  .hero-motion .art-caption { top: 20px; }
  .hero-motion-toggle { right: 0; bottom: 10px; }
}
@media (max-width: 380px) {
  .business-hero .hero-motion { height: 375px; }
  .hero-motion .floating-file { bottom: 65px; }
  .hero-motion .art-caption { top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-motion .hero-motion-scene,
  .hero-motion .hero-ambient,
  .hero-motion .floating-file,
  .hero-motion .hero-orbits use { animation: none !important; }
  .hero-motion-toggle { display: none !important; }
}