#sprite .boks-hero,
#ghost .boks-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform: rotate(var(--sprite-rotation, 0deg));
  transform-origin: 50% 50%;
}

#sprite .boks-hero {
  position: absolute;
  inset: 0;
}

#sprite .boks-hero.hero-transition-in,
#sprite .boks-hero.hero-transition-out {
  transition: opacity 0.17s ease;
}

#sprite .boks-hero.hero-transition-in {
  opacity: 0;
}

#sprite .boks-hero.hero-transition-in.hero-transition-ready {
  opacity: 1;
}

#sprite .boks-hero.hero-transition-out {
  opacity: 1;
}

#sprite .boks-hero.hero-transition-out.hero-transition-ready {
  opacity: 0;
}

.boks-hero__art {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  will-change: transform;
}

.boks-hero__fit {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(var(--hero-fit-offset-x, 0px), var(--hero-fit-offset-y, 0px)) scale(var(--hero-fit-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}

.boks-hero__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

.boks-hero__inline-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.boks-hero__html {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.boks-hero__inline-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.boks-eye-white,
.boks-eye-pupil {
  transform-box: fill-box;
  transform-origin: center center;
}

.boks-eye-white {
  animation: boksEyeBlink 5.8s infinite ease-in-out;
}

.boks-eye-pupil {
  animation: boksPupilBlink 5.8s infinite ease-in-out;
}

body.low-end-device .boks-eye-white,
body.low-end-device .boks-eye-pupil {
  animation: none;
}

.boks-hero[data-bee-near="true"] .boks-eye-white {
  animation-duration: 1.8s;
}

.boks-hero[data-bee-near="true"] .boks-eye-pupil {
  animation-duration: 1.8s;
}

#sprite .boks-hero[data-touch-rebuke="true"] {
  animation: boksTouchRebuke 0.56s cubic-bezier(.22,1,.36,1);
}

#sprite .boks-hero[data-obstacle-struggle="true"] {
  animation: boksObstacleStruggle 0.34s cubic-bezier(.22,1,.36,1);
}

#sprite .boks-hero[data-touch-rebuke="true"] .boks-eye-white,
#sprite .boks-hero[data-touch-rebuke="true"] .boks-eye-pupil,
#sprite .boks-hero[data-obstacle-struggle="true"] .boks-eye-white,
#sprite .boks-hero[data-obstacle-struggle="true"] .boks-eye-pupil,
#sprite .boks-hero[data-goal-bubble-impact="true"] .boks-eye-white,
#sprite .boks-hero[data-goal-bubble-impact="true"] .boks-eye-pupil {
  animation: none;
}

#sprite .boks-hero[data-touch-rebuke="true"] .boks-eye-white,
#sprite .boks-hero[data-obstacle-struggle="true"] .boks-eye-white,
#sprite .boks-hero[data-goal-bubble-impact="true"] .boks-eye-white {
  transform: scaleY(0.08) translateY(4%);
}

#sprite .boks-hero[data-touch-rebuke="true"] .boks-eye-pupil,
#sprite .boks-hero[data-obstacle-struggle="true"] .boks-eye-pupil,
#sprite .boks-hero[data-goal-bubble-impact="true"] .boks-eye-pupil {
  transform: scaleY(0.08);
  opacity: 0;
}

@keyframes boksEyeBlink {
  0%, 45%, 47%, 100% {
    transform: scaleY(1);
  }
  46% {
    transform: scaleY(0.08);
  }
}

@keyframes boksPupilBlink {
  0%, 45%, 47%, 100% {
    transform: scaleY(1);
    opacity: 1;
  }
  46% {
    transform: scaleY(0.08);
    opacity: 0.7;
  }
}

@keyframes boksTouchRebuke {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  18% {
    transform: translate3d(-4%, 0, 0) rotate(-8deg) scale(0.98, 1.02);
  }
  36% {
    transform: translate3d(5%, -1%, 0) rotate(7deg) scale(1.01, 0.99);
  }
  56% {
    transform: translate3d(-3%, 0, 0) rotate(-5deg) scale(0.99, 1.01);
  }
  78% {
    transform: translate3d(2%, 0, 0) rotate(3deg) scale(1);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes boksObstacleStruggle {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  16% {
    transform: translate3d(-2.4%, 0, 0) rotate(-3deg) scale(0.992, 1.01);
  }
  32% {
    transform: translate3d(2.8%, -0.6%, 0) rotate(2.6deg) scale(1.006, 0.994);
  }
  48% {
    transform: translate3d(-2.2%, 0, 0) rotate(-2.2deg) scale(0.994, 1.008);
  }
  66% {
    transform: translate3d(2.2%, -0.4%, 0) rotate(1.8deg) scale(1.004, 0.996);
  }
  84% {
    transform: translate3d(-1.4%, 0, 0) rotate(-1.2deg) scale(0.998, 1.002);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

.boks-hero__lottie-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.boks-hero__lottie {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
  transition: opacity 0.08s linear;
}

.boks-hero__img--fallback {
  position: absolute;
  inset: 0;
}

#sprite .boks-hero__img--fallback {
  display: block;
  opacity: 1;
  transition: opacity 0.12s ease;
}

#sprite .boks-hero__lottie-wrap.is-failed .boks-hero__img--fallback,
#sprite .boks-hero__lottie-wrap.is-unavailable .boks-hero__img--fallback {
  display: block;
}

#sprite .boks-hero__lottie-wrap.is-ready .boks-hero__img--fallback {
  opacity: 0;
}

#ghost .boks-hero__img--fallback {
  display: block;
  opacity: 0.92;
}

/* Temporary fallback until dedicated directional artwork exists. */
.boks-hero[data-transform-fallback="mirror-x"] .boks-hero__art {
  transform: scaleX(-1);
}

.boks-hero[data-transform-fallback="rotate-left"] .boks-hero__art {
  transform: rotate(-90deg) scale(0.98);
}

.boks-hero[data-transform-fallback="rotate-right"] .boks-hero__art {
  transform: rotate(90deg) scale(0.98);
}

#ghost .boks-hero__img {
  animation: none;
  opacity: 0.92;
}

.boks-cube3d {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.boks-cube3d__shadow {
  position: absolute;
  left: 50%;
  top: 72%;
  width: 46%;
  height: 14%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(82, 62, 33, 0.34) 0%, rgba(82, 62, 33, 0.18) 58%, rgba(82, 62, 33, 0) 100%);
  filter: blur(4px);
}

.boks-cube3d__scene {
  position: relative;
  width: 52%;
  height: 52%;
  perspective: 220px;
  perspective-origin: 50% 44%;
  transform-style: preserve-3d;
  transition: transform 140ms ease;
}

.boks-cube3d__cube {
  position: absolute;
  left: 50%;
  top: 53%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}

.boks-cube3d__face {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 3px solid rgba(43, 114, 53, 0.82);
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.boks-cube3d__face--front {
  background: linear-gradient(180deg, #63d86d 0%, #39af4a 100%);
  transform: translateZ(18px);
}

.boks-cube3d__face--right {
  background: linear-gradient(180deg, #38a74a 0%, #27773a 100%);
  transform: rotateY(90deg) translateZ(18px);
  transform-origin: center;
}

.boks-cube3d__face--top {
  background: linear-gradient(180deg, #9bf194 0%, #73d771 100%);
  transform: rotateX(90deg) translateZ(18px);
  transform-origin: center;
}

.boks-cube3d__eye {
  position: absolute;
  right: 8px;
  top: 16px;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.boks-cube3d__pupil {
  position: absolute;
  right: 2px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #121614;
}

.boks-hero[data-direction="right"] .boks-cube3d__scene,
.boks-hero[data-direction="down"] .boks-cube3d__scene {
  transform: rotateX(-28deg) rotateY(-38deg);
}

.boks-hero[data-direction="left"] .boks-cube3d__scene {
  transform: rotateX(-28deg) rotateY(38deg);
}

.boks-hero[data-direction="up"] .boks-cube3d__scene {
  transform: rotateX(-34deg) rotateY(0deg);
}