.hero-image {
  inset: -36px;
  background: url('assets/geophyz-geology.jpg') center 49% / cover no-repeat;
  filter: saturate(.76) contrast(1.08) brightness(.84);
  animation: none;
  transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) scale(1.055);
  will-change: transform;
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 14, 22, .91) 0%, rgba(4, 14, 22, .76) 35%, rgba(4, 14, 22, .32) 75%, rgba(4, 14, 22, .16) 100%),
              linear-gradient(0deg, rgba(4, 12, 18, .76) 0%, transparent 38%);
}

.hero-grid { z-index: 1; }
.hero-topline, .hero-side, .hero-content, .signal-path { z-index: 2; }

.hero-photo-credit {
  position: absolute;
  right: clamp(24px, 4.3vw, 80px);
  bottom: 94px;
  z-index: 3;
  color: rgba(255, 255, 255, .78);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-align: right;
  transition: color .2s ease;
}
.hero-photo-credit:hover, .hero-photo-credit:focus-visible { color: var(--lime); }

@media (max-width: 760px) {
  .hero-image { background-position: 58% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(4, 14, 22, .86), rgba(4, 14, 22, .53) 75%), linear-gradient(0deg, rgba(4, 12, 18, .8), transparent 40%); }
  .hero-photo-credit { bottom: 88px; left: 24px; right: auto; max-width: 250px; text-align: left; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image { transform: none; will-change: auto; }
  .hero-photo-credit { transition: none; }
}