.mobile-hero-art {
  --app-home-hero-base: "/assets/app-home-hero/";
  min-height: 120px;
  overflow: visible !important;
  isolation: isolate;
}

.mobile-cube,
.mobile-art-card {
  border: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
  color: transparent !important;
  text-shadow: none !important;
}

.mobile-cube {
  right: -2px !important;
  top: -4px !important;
  width: 128px !important;
  height: 128px !important;
  background-image: url("/assets/app-home-hero/hero-main.png") !important;
}

.mobile-art-card svg {
  display: none !important;
}

.mobile-art-card-a {
  left: -8px !important;
  bottom: 4px !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 0 !important;
  background-image: url("/assets/app-home-hero/hero-image-card.png") !important;
}

.mobile-art-card-b {
  right: -6px !important;
  top: 16px !important;
  width: 58px !important;
  height: 58px !important;
  clip-path: none !important;
  border-radius: 0 !important;
  background-image: url("/assets/app-home-hero/hero-doc-card.png") !important;
}

.mobile-art-dot {
  left: 43px !important;
  bottom: 5px !important;
}

.mobile-app-hero {
  isolation: isolate;
}

.mobile-app-hero::before,
.mobile-app-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.mobile-app-hero::before {
  z-index: 0;
  inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 28%, rgb(55 133 255 / .10), transparent 26px),
    radial-gradient(circle at 64% 24%, rgb(122 100 255 / .08), transparent 34px),
    radial-gradient(circle at 88% 78%, rgb(56 199 255 / .10), transparent 42px),
    linear-gradient(90deg, rgb(86 124 206 / .06) 1px, transparent 1px),
    linear-gradient(0deg, rgb(86 124 206 / .05) 1px, transparent 1px);
  background-size: auto, auto, auto, 34px 34px, 34px 34px;
  mask-image: linear-gradient(90deg, rgb(0 0 0 / .88), rgb(0 0 0 / .2) 64%, rgb(0 0 0 / .72));
}

.mobile-app-hero::after {
  z-index: 1;
  right: 20px;
  top: 18px;
  width: 148px;
  height: 104px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 52%, rgb(255 160 78 / .26) 0 6px, transparent 7px),
    radial-gradient(circle at 76% 24%, rgb(105 112 255 / .16) 0 4px, transparent 5px),
    linear-gradient(135deg, transparent 26%, rgb(71 122 255 / .11) 27% 29%, transparent 30% 52%, rgb(89 215 220 / .1) 53% 55%, transparent 56%);
  opacity: .72;
  transform: rotate(-9deg);
}

.mobile-app-hero h1,
.mobile-app-hero p,
.mobile-app-hero button,
.mobile-hero-art {
  position: relative;
  z-index: 2;
}

.mobile-app-hero.has-worker-mascot {
  overflow: hidden !important;
}

.mobile-app-hero.has-worker-mascot h1,
.mobile-app-hero.has-worker-mascot p,
.mobile-app-hero.has-worker-mascot button {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .52s ease, transform .52s ease;
  pointer-events: none;
}

.mobile-app-hero.has-worker-mascot.is-mascot-done h1,
.mobile-app-hero.has-worker-mascot.is-mascot-done p,
.mobile-app-hero.has-worker-mascot.is-mascot-done button {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.app-home-mascot {
  position: absolute;
  z-index: 9;
  left: 18px;
  top: 18px;
  width: 118px;
  height: 138px;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: appMascotIntro 6.2s cubic-bezier(.2, .82, .22, 1) forwards;
}

.app-home-mascot__boy {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 3;
  display: block;
  width: 94px;
  height: 138px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 13px 15px rgb(43 81 164 / .18));
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: appMascotSmileOpen 6.2s ease-in-out forwards;
}

.app-home-mascot__lid,
.app-home-mascot__glow {
  position: absolute;
  z-index: 4;
  left: 21px;
  bottom: 36px;
  pointer-events: none;
}

.app-home-mascot__lid {
  width: 34px;
  height: 11px;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(135deg, #6be9ff, #6b68ff);
  box-shadow: inset 0 1px rgb(255 255 255 / .68), 0 8px 15px rgb(36 92 205 / .22);
  opacity: 0;
  transform-origin: 10% 100%;
  animation: appToolboxLidIntro 6.2s ease-in-out forwards;
}

.app-home-mascot__glow {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: radial-gradient(circle, rgb(104 214 255 / .58), rgb(101 103 255 / .2) 46%, transparent 68%);
  opacity: 0;
  transform: translate(-10px, 7px) scale(.3);
  animation: appToolboxGlowIntro 6.2s ease-out forwards;
}

.app-home-mascot__tools {
  position: absolute;
  z-index: 6;
  left: 39px;
  bottom: 49px;
  width: 1px;
  height: 1px;
}

.app-home-tool-particle {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 34px;
  height: 34px;
  opacity: 0;
  filter: drop-shadow(0 9px 13px rgb(44 75 140 / .16));
  transform: translate(0, 0) scale(.24) rotate(0deg);
  animation: appToolFlyIntro 6.2s cubic-bezier(.2, .74, .18, 1) forwards;
  animation-delay: calc(var(--i) * 90ms);
}

.app-home-tool-particle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes appMascotIntro {
  0% {
    opacity: 0;
    transform: translate(-26px, 8px) scale(.86);
  }
  18% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  48% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  84% {
    opacity: 1;
    transform: translate(4px, -2px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(18px, -4px) scale(.92);
  }
}

@keyframes appMascotSmileOpen {
  0%, 22% {
    transform: translateX(-50%) translateY(0) rotate(-2deg);
  }
  34% {
    transform: translateX(-50%) translateY(-4px) rotate(1deg);
  }
  48% {
    transform: translateX(-50%) translateY(0) rotate(-1deg);
  }
  50%, 86% {
    transform: translateX(-50%) translateY(2px) rotate(-7deg) scale(.96);
  }
  100% {
    transform: translateX(-50%) translateY(2px) rotate(-7deg) scale(.92);
  }
}

@keyframes appToolboxLidIntro {
  0%, 34% {
    opacity: 0;
    transform: translateY(0) rotate(0deg);
  }
  44%, 86% {
    opacity: 1;
    transform: translate(-1px, -9px) rotate(-26deg);
  }
  100% {
    opacity: 0;
    transform: translate(-1px, -9px) rotate(-26deg);
  }
}

@keyframes appToolboxGlowIntro {
  0%, 34% {
    opacity: 0;
    transform: translate(-10px, 7px) scale(.3);
  }
  45% {
    opacity: .9;
    transform: translate(-10px, 2px) scale(1);
  }
  86% {
    opacity: .34;
    transform: translate(-10px, 0) scale(1.16);
  }
  100% {
    opacity: 0;
    transform: translate(-10px, 0) scale(.78);
  }
}

@keyframes appToolFlyIntro {
  0%, 35% {
    opacity: 0;
    transform: translate(0, 0) scale(.24) rotate(0deg);
  }
  44% {
    opacity: 1;
    transform: translate(var(--mx), var(--my)) scale(.72) rotate(var(--mr));
  }
  70% {
    opacity: 1;
    transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r));
  }
  86% {
    opacity: 1;
    transform: translate(var(--x), var(--y)) scale(.98) rotate(var(--r));
  }
  100% {
    opacity: 0;
    transform: translate(var(--xe), var(--ye)) scale(.86) rotate(var(--r));
  }
}

@media (max-width: 380px) {
  .mobile-cube {
    right: -8px !important;
    width: 118px !important;
    height: 118px !important;
  }

  .mobile-art-card-a {
    left: -5px !important;
  }

  .app-home-mascot {
    left: 16px;
    top: 16px;
    width: 112px;
    height: 132px;
  }

  .app-home-mascot__boy {
    width: 90px;
    height: 132px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-home-mascot,
  .app-home-mascot__boy,
  .app-home-mascot__lid,
  .app-home-mascot__glow,
  .app-home-tool-particle {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}