.hero-art {
  pointer-events: auto;
}

.mechanism-stage {
  position: relative;
  width: 100%;
  transform: none;
}

.hero-art .mechanism-base {
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  transform: none;
  mix-blend-mode: lighten;
  user-select: none;
  pointer-events: none;
}

.mechanism-sector {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #e7e3da;
  text-decoration: none;
  text-align: center;
  text-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.mechanism-sector::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255, 221, 139, .22), rgba(255, 207, 91, .09) 38%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .85s ease;
}

.mechanism-sector.is-active::before,
.mechanism-sector:hover::before,
.mechanism-sector:focus-visible::before { opacity: 1; }

.mechanism-sector:focus-visible {
  outline: none;
  background: radial-gradient(ellipse at center, rgba(255, 222, 148, .3), transparent 70%);
}

.sector-apps {
  left: 18.3%;
  top: 8.2%;
  width: 21.3%;
  height: 29%;
  clip-path: polygon(22% 0, 100% 0, 100% 68%, 75% 100%, 0 100%, 0 20%);
}

.sector-rsoc {
  left: 56.8%;
  top: 8.2%;
  width: 21.3%;
  height: 29%;
  clip-path: polygon(0 0, 78% 0, 100% 20%, 100% 100%, 25% 100%, 0 68%);
}

.sector-rewards {
  left: 16.7%;
  top: 53.4%;
  width: 22.8%;
  height: 30.2%;
  clip-path: polygon(0 0, 74% 0, 100% 27%, 100% 100%, 22% 100%, 0 77%);
}

.sector-ai {
  left: 56.2%;
  top: 53.4%;
  width: 22.8%;
  height: 30.2%;
  clip-path: polygon(26% 0, 100% 0, 100% 77%, 78% 100%, 0 100%, 0 27%);
}

.mechanism-hub {
  position: absolute;
  z-index: 3;
  left: 47.8%;
  top: 46.5%;
  display: grid;
  width: 11.5%;
  aspect-ratio: 1;
  place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.mechanism-pointer {
  width: 82%;
  height: 82%;
  transform: rotate(var(--pointer-turn, -45deg));
  transform-origin: 50% 53%;
  transition: transform 1.25s cubic-bezier(.48, .02, .2, 1);
  filter: drop-shadow(0 3px 2px rgba(70, 43, 0, .48));
}

@media (max-width: 900px) {
  .mechanism-stage {
    width: 100%;
    transform: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  .mechanism-pointer,
  .mechanism-sector::before {
    transition: none;
  }
}
/* The image preserves the approved finish; Blender-authored meshes articulate its plates. */
.mechanism-stage{mix-blend-mode:lighten}
.mechanism-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.has-model .mechanism-base{visibility:hidden}
.mechanism-pointer{width:100%;height:100%;transform-origin:50% 50%;transition:none;filter:drop-shadow(0 1px 1px #74571b)}
.mechanism-pause{position:absolute;z-index:5;bottom:0;right:20%;min-height:44px;border:0;border-bottom:1px solid #727474;background:#151617;color:#d5d6d6;padding:8px 10px;font:inherit;font-size:12px;cursor:pointer}
.mechanism-sector:focus-visible{outline:3px solid #ffe155;outline-offset:-8px;background:#ffe15522;clip-path:none;border-radius:16px}
.mechanism-pause:focus-visible{outline:2px solid #ffe155;outline-offset:4px}