/* Photo layers move independently so the copy and controls stay still. */
.hero-photo { overflow: hidden; isolation: isolate; }
.hero .hero-inner { pointer-events: none; }
.hero .hero-copy { pointer-events: auto; }
.hero-photo-stage {
  position: absolute;
  inset: -18px;
  transform: perspective(1000px) translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) rotateX(var(--hero-rx, 0deg)) rotateY(var(--hero-ry, 0deg));
  transition: transform 900ms cubic-bezier(.2, .65, .3, 1);
}
.hero-photo-stage img { transform: scale(1.04); transform-origin: 58% 55%; }
.hero-photo::after { z-index: 1; pointer-events: none; }
.hero-glow {
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  opacity: .38;
  background: radial-gradient(ellipse at 70% 25%, rgba(255, 198, 118, .32), transparent 48%);
}
.hero-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  fill: none;
  stroke-linecap: round;
  pointer-events: none;
  opacity: .55;
}
.hero-line-base { stroke: rgba(255, 255, 255, .26); stroke-width: 1; }
.hero-line-flow { stroke: #ffb66a; stroke-width: 1.6; stroke-dasharray: 100 1050; opacity: .65; }
.hero .photo-caption { z-index: 3; left: 170px; }
.hero-motion-toggle {
  position: absolute;
  left: 30px;
  bottom: 23px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 3px;
  color: white;
  background: rgba(18, 38, 46, .78);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}
.hero-motion-toggle:hover { background: #12262e; border-color: #ffb66a; }
.hero-motion-toggle svg { width: 16px; height: 16px; stroke-width: 2; }
.hero-play-icon, .motion-paused .hero-pause-icon { display: none; }
.motion-paused .hero-play-icon { display: block; }
.motion-enabled .hero-photo-stage img { animation: hero-photo-drift 22s ease-in-out infinite alternate; }
.motion-enabled .hero-glow { animation: hero-light-drift 16s ease-in-out infinite alternate; }
.motion-enabled .hero-line-flow { animation: hero-line-travel 14s linear infinite; }
.motion-paused .hero-photo-stage img,
.motion-paused .hero-glow,
.motion-paused .hero-line-flow,
.motion-offscreen .hero-photo-stage img,
.motion-offscreen .hero-glow,
.motion-offscreen .hero-line-flow { animation-play-state: paused; }
.motion-enabled:not(.motion-paused):not(.motion-offscreen) .hero-photo-stage,
.motion-enabled:not(.motion-paused):not(.motion-offscreen) .hero-photo-stage img { will-change: transform; }
@keyframes hero-photo-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.12) translate3d(-.8%, -.6%, 0); }
}
@keyframes hero-light-drift {
  from { transform: translate3d(-4%, 2%, 0); opacity: .3; }
  to { transform: translate3d(4%, -3%, 0); opacity: .6; }
}
@keyframes hero-line-travel { from { stroke-dashoffset: 1150; } to { stroke-dashoffset: 0; } }
@media (max-width: 960px) {
  .hero .photo-caption { bottom: 80px; left: 20px; }
  .hero-motion-toggle { left: 20px; bottom: 20px; }
}
@media (max-width: 720px) {
  .hero-photo-stage { inset: -12px; }
  .hero .photo-caption { left: 158px; right: 20px; bottom: 25px; max-width: none; }
  .hero-motion-toggle { left: 20px; bottom: 16px; font-size: 9px; }
  .hero-lines { opacity: .4; }
  @keyframes hero-photo-drift {
    from { transform: scale(1.03); }
    to { transform: scale(1.08); }
  }
}
@media (max-width: 390px) {
  .hero .photo-caption { left: 20px; bottom: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo-stage { transform: none; transition: none; }
  .hero-photo-stage img { transform: none; animation: none !important; }
  .hero-glow, .hero-line-flow { animation: none !important; }
  .hero-motion-toggle { display: none; }
  .hero .photo-caption { left: 20px; bottom: 25px; }
}
@media print {
  .hero-motion-toggle, .hero-glow, .hero-lines { display: none !important; }
  .hero-photo-stage { transform: none; }
  .hero-photo-stage img { transform: none; animation: none !important; }
}