/* A shallow perspective keeps the benefit text calm and readable. */
.herogrid{perspective:1400px;perspective-origin:75% 50%}
.heroart{
  --card-pitch:0deg;--card-yaw:0deg;--light-x:30%;--light-y:15%;
  overflow:visible;transform-style:preserve-3d;
  transform:rotateX(var(--card-pitch)) rotateY(var(--card-yaw));
  transition:transform 650ms cubic-bezier(.2,.7,.25,1),box-shadow 650ms ease;
  box-shadow:0 2px 3px #78691408,0 18px 40px -26px #78691445,inset 0 1px 0 #ffffff80;
}
.heroart::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse at var(--light-x) var(--light-y),#ffffff42,transparent 68%);
  border:1px solid #ffffff35;transform:translateZ(1px);
}
.heroart .arttop{transform:translateZ(12px)}
.heroart .artmain{transform-style:preserve-3d}
.heroart .artcopy{transform:translateZ(18px)}
.heroart .mascot{
  transform:translateZ(34px);animation:algo-float 7s cubic-bezier(.45,0,.55,1) infinite;
  box-shadow:0 15px 25px -13px #71651855,0 3px 8px #71651812,inset 0 1px 0 white;
}
.heroart .mascot img{animation:algo-breathe 7s cubic-bezier(.45,0,.55,1) infinite;transform-origin:50% 65%}
.heroart .artbottom{
  transform:translateZ(24px);box-shadow:0 8px 18px -13px #77691855,inset 0 1px 0 white;
}
.heroart> .artnote{position:relative;transform:translateZ(6px)}
.heroart.motion-paused .mascot,.heroart.motion-paused .mascot img{animation-play-state:paused}
@keyframes algo-float{
  0%,100%{transform:translate3d(0,2px,34px)}
  50%{transform:translate3d(0,-5px,34px)}
}
@keyframes algo-breathe{
  0%,100%{transform:rotate(-.6deg)}
  50%{transform:rotate(.6deg)}
}
@media(hover:hover) and (pointer:fine){
  .heroart.is-tilting{transition:transform 160ms ease-out,box-shadow 650ms ease;box-shadow:0 4px 8px #78691408,0 24px 42px -25px #78691455,inset 0 1px 0 #ffffff80}
}
@media(max-width:760px){
  .heroart{transform:none;transform-style:flat}
  .heroart .arttop,.heroart .artcopy,.heroart .artbottom,.heroart>.artnote{transform:none}
  .heroart::before{transform:none}
  .heroart .mascot{animation-name:algo-float-mobile}
}
@keyframes algo-float-mobile{
  0%,100%{transform:translateY(1px)}
  50%{transform:translateY(-3px)}
}
@media(prefers-reduced-motion:reduce){
  .heroart,.heroart.is-tilting{transform:none;transition:none;transform-style:flat}
  .heroart .mascot,.heroart .mascot img{animation:none;transform:none}
  .heroart .arttop,.heroart .artcopy,.heroart .artbottom,.heroart>.artnote,.heroart::before{transform:none}
}