/* Continuous marquee pattern: https://magicui.design/docs/components/marquee */
.studio-marquee{
  --marquee-font-size:16px;
  --marquee-gap:28px;
  --marquee-duration:56s;
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:100%;
  overflow:hidden;
  padding-block:20px;
  border-block:1px solid #8b9dce26;
  background:linear-gradient(110deg,#3b5bdb0a,#7c3aed0d 55%,#3b5bdb05);
}
.studio-marquee:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 30% 100%,#4467de0e,transparent 65%),radial-gradient(ellipse at 80% 0%,#8c60df0c,transparent 60%);
}
/* Match the following services section's responsive top spacing. */
.studio-marquee--directions{margin-top:112px}
.marquee-viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:studio-marquee-loop var(--marquee-duration) linear infinite;
  animation-play-state:paused;
}
.marquee-group{
  display:flex;
  flex-shrink:0;
  align-items:center;
  justify-content:space-around;
  gap:var(--marquee-gap);
  min-width:100vw;
  margin:0;
  padding:0 var(--marquee-gap) 0 0;
  list-style:none;
}
.marquee-direction{
  display:flex;
  flex-shrink:0;
  align-items:center;
  gap:var(--marquee-gap);
  color:#dce4f8;
  font-size:var(--marquee-font-size);
  font-weight:500;
  line-height:1.5;
  letter-spacing:-.3px;
  white-space:nowrap;
}
.marquee-spark{
  color:#a99bf4;
  font-size:1em;
  line-height:1;
  text-shadow:0 0 22px #8b6ee033;
}
.studio-marquee--stack{
  --marquee-gap:40px;
  --marquee-duration:78s;
  background:#13172480;
}
.studio-marquee--stack .marquee-track{animation-direction:reverse}
.marquee-technology{
  display:flex;
  flex-shrink:0;
  align-items:center;
  gap:9px;
  color:#b3bed7;
  font-size:var(--marquee-font-size);
  font-weight:500;
  line-height:1.5;
  letter-spacing:-.3px;
  white-space:nowrap;
  transition:color .2s;
}
.marquee-technology>svg{display:block;width:24px;height:24px;flex-shrink:0}
.studio-marquee[data-playing="true"] .marquee-track{animation-play-state:running}
@media(hover:hover){
  .studio-marquee:hover .marquee-track{animation-play-state:paused}
  .marquee-technology:hover{color:#e4e8ff}
}
@keyframes studio-marquee-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:900px){.studio-marquee--directions{margin-top:80px}}
@media(max-width:760px){
  .studio-marquee{--marquee-font-size:15px;--marquee-gap:20px;padding-block:18px}
  .studio-marquee--directions{margin-top:72px}
  .marquee-viewport{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .studio-marquee--stack{--marquee-gap:26px}
  .marquee-technology{gap:8px}
  .marquee-technology>svg{width:22px;height:22px}
}
/* Keep every item available when movement is disabled or JavaScript is absent. */
.studio-marquee[data-static="true"] .marquee-viewport{mask-image:none;-webkit-mask-image:none}
.studio-marquee[data-static="true"] .marquee-track{width:100%;animation:none}
.studio-marquee[data-static="true"] .marquee-group{min-width:0;width:100%;padding:0 24px;flex-wrap:wrap;justify-content:center;row-gap:16px}
.studio-marquee[data-static="true"] .marquee-group[aria-hidden="true"]{display:none}
@media(prefers-reduced-motion:reduce){
  .studio-marquee .marquee-viewport{mask-image:none;-webkit-mask-image:none}
  .studio-marquee .marquee-track{width:100%;animation:none}
  .studio-marquee .marquee-group{min-width:0;width:100%;padding:0 24px;flex-wrap:wrap;justify-content:center;row-gap:16px}
  .studio-marquee .marquee-group[aria-hidden="true"]{display:none}
  .marquee-technology{transition:none}
}