.hero-art { position: relative; background-image: none; overflow: hidden; }
.hero-art::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, var(--ink) 0%, transparent 38%); pointer-events: none; }
.gear-frame { position: absolute; inset: 0; opacity: 0; background-image: url('gear-grid.png'); background-size: 300% 200%; background-repeat: no-repeat; filter: saturate(.7); animation: sg-gear-fade 24s ease-in-out infinite; }
.gear-frame-1 { background-position: 0 0; animation-delay: 0s; }
.gear-frame-2 { background-position: 50% 0; animation-delay: 4s; }
.gear-frame-3 { background-position: 100% 0; animation-delay: 8s; }
.gear-frame-4 { background-position: 0 100%; animation-delay: 12s; }
.gear-frame-5 { background-position: 50% 100%; animation-delay: 16s; }
.gear-frame-6 { background-position: 100% 100%; animation-delay: -4s; }

@keyframes sg-gear-fade {
  0% { opacity: 0; transform: scale(1.015); }
  4.16%, 16.66% { opacity: .85; transform: scale(1); }
  20.83%, 100% { opacity: 0; transform: scale(.995); }
}

@media (prefers-reduced-motion: reduce) {
  .gear-frame { display: none; animation: none; }
  .gear-frame-1 { display: block; opacity: .85; transform: none; }
}