/* Hero crew (js/hero-crew.js) */
html.crew-build .hero-tag,
html.crew-build .hero-h1,
html.crew-build .hero-sub,
html.crew-build .hero-actions > a,
html.crew-build .hero-trust > li { opacity: 0; animation: none; }
html.crew-build .hero-actions,
html.crew-build .hero-trust { animation: none; }

.crew { position: absolute; inset: 0; pointer-events: none; }
.crew-s {
  position: absolute; left: 0; top: 0; z-index: 3;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  will-change: transform;
}
.crew-back, .crew-crane .crew-s { z-index: 1; }
.crew-mid { z-index: 3; }
.crew-front { z-index: 4; }
.crew-fx { z-index: 5; }

.crew-slings {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; overflow: visible;
}
.crew-slings line { stroke: #8a8a8a; stroke-width: 2; shape-rendering: crispEdges; }

.crew-crane {
  position: absolute; z-index: 1;
  transform: scaleX(-1);
}
.crew-tower, .crew-base { position: absolute; image-rendering: pixelated; }
.crew-tower {
  width: 22px;
  background: url("/images/crew/crane-tower.png") 0 0 / 22px 32px repeat-y;
}
.crew-base {
  left: 8px; width: 54px; height: 20px;
  background: url("/images/crew/crane-base.png") 0 0 / 54px 20px no-repeat;
}

.crew-ground {
  position: absolute; left: 0; right: 0; height: 36px; z-index: 1;
  background: url("/images/crew/fence.png") 0 0 / 64px 36px repeat-x;
  image-rendering: pixelated;
}

.crew-plank {
  position: absolute; left: 0; top: 0; z-index: 3; height: 24px;
  display: flex; will-change: transform;
}
.crew-plank i { display: block; height: 24px; image-rendering: pixelated; }
.crew-plank i:nth-child(1) { width: 32px; background: url("/images/crew/plank-left.png") 0 0 / 32px 24px; }
.crew-plank i:nth-child(2) { flex: 1; background: url("/images/crew/plank-mid.png") 0 0 / 64px 24px repeat-x; }
.crew-plank i:nth-child(3) { width: 32px; background: url("/images/crew/plank-right.png") 0 0 / 32px 24px; }

.crew-hat {
  position: absolute; left: 0; top: 0; z-index: 5;
  width: 24px; height: 10px; padding: 0; border: 0;
  background: url("/images/crew/hard-hat.png") 0 0 / 24px 10px no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
  transition: filter 0.2s;
}
.crew-hat::before { content: ''; position: absolute; inset: -12px -10px; }
.crew-hat:hover { filter: brightness(1.2); }
.crew-hat:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.crew-hat.crew-flying { pointer-events: none; }

.hero .btn-primary.crew-lit {
  box-shadow: 0 0 0 6px rgba(245, 183, 49, 0.35), 0 0 48px rgba(245, 183, 49, 0.35);
}