/* Load after the existing hero CSS. No markup changes required. */
#hero .section-content .hand-axes {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 7 / 4;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 0 0 90px;
  background: radial-gradient(ellipse at 50% 45%, #ffffff0b, transparent 65%),
	linear-gradient(to bottom, #111, #0f0f0f 45%, #0b0b0b);
}

/* #hero .section-content .hand-axes::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at var(--light-x, 50%) var(--light-y, 45%),
	rgb(229 216 191 / 9%) 0%, rgb(229 216 191 / 3%) 28%, transparent 65%);
  opacity: var(--light-opacity, 0);
} */

#hero .section-content .hand-axes img {
  position: relative;
  flex: 0 1 auto;
  height: 52.5%;
  width: auto;
  max-width: 30%;
  object-fit: contain;
  transform-origin: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 20px 18px rgb(0 0 0 / 35%))
	drop-shadow(0 4px 5px rgb(0 0 0 / 25%));
}

@media (min-width: 481px) and (prefers-reduced-motion: no-preference) {
  #hero .section-content .hand-axes img {
	transform: perspective(900px) translateY(var(--lift, 0px))
	  rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
	filter: brightness(var(--brightness, 1))
	  drop-shadow(var(--shadow-x, 0px) var(--shadow-y, 20px) 18px rgb(0 0 0 / 35%))
	  drop-shadow(0 4px 5px rgb(0 0 0 / 25%));
  }
}

@media (max-width: 480px), (prefers-reduced-motion: reduce) {
  #hero .section-content .hand-axes::before { display: none; }
}