/* Mascots form three staggered rails, kept behind the interactive product. */
.mascot-stream {
  --mascot-size:clamp(64px,8.4vh,82px);
  position:absolute;
  z-index:0;
  inset:9% -2% 9% 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(20px,3vh,30px);
  overflow:hidden;
  pointer-events:none;
}
.mascot-row {
  width:100%;
  overflow:hidden;
  opacity:.94;
  filter:saturate(1.08) contrast(1);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
}
.mascot-row:nth-child(2) {width:98%;align-self:flex-end}
.mascot-row:nth-child(3) {width:91%;align-self:flex-start}
.mascot-track {display:flex;width:max-content;animation:mascot-left 42s linear infinite;will-change:transform}
.mascot-group {display:flex;flex:none;gap:22px;padding-right:22px}
.mascot-tile {
  display:block;flex:none;position:relative;
  width:var(--mascot-size);height:var(--mascot-size);
  border-radius:30%;overflow:hidden;
  box-shadow:0 6px 18px rgba(45,65,90,.1);
  background:#eef3fa;
}
.mascot-tile img {display:block;width:100%;height:100%;object-fit:cover}
.mascot-sticker {background:#d8eafa}
.mascot-sticker.tone-1 {background:#d9eee4}
.mascot-sticker.tone-2 {background:#e8e8f3}
.mascot-sticker img {height:auto;transform:scale(1.22) translateY(-6%);transform-origin:center top}
.mascot-row:nth-child(2) .mascot-track {animation-duration:47s;animation-direction:reverse}
.mascot-row:nth-child(3) .mascot-track {animation-duration:40s;animation-delay:-15s}
@keyframes mascot-left {to {transform:translateX(-50%)}}
.showcase .phone.demo-launch {z-index:2}
.showcase .mock-label {z-index:4}
@media(max-width:700px) {
  .mascot-stream {--mascot-size:62px;inset:5% 0 8%;gap:15px}
  .mascot-group {gap:16px;padding-right:16px}
  .mascot-row {opacity:.88}
  .mascot-row:nth-child(2) {width:100%}
  .mascot-row:nth-child(3) {width:94%}
  .showcase .phone.demo-launch {z-index:2}
  .showcase::after {z-index:3}
}
@media(max-width:360px) {
  .mascot-stream {--mascot-size:54px;gap:14px}
  .mascot-group {gap:13px;padding-right:13px}
}
@media(prefers-reduced-motion:reduce) {
  .mascot-track {animation:none;will-change:auto}
  .mascot-row:nth-child(even) .mascot-track {transform:translateX(-12%)}
}