.hero-scenes .orbital-image {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  animation: none;
}

.hero-camera {
  position: absolute;
  inset: 0;
  transform: translate3d(var(--pan-x, 0px), var(--pan-y, 0px), 0) scale(var(--zoom, 1));
}

.hero-scenes .hero-camera img {
  position: absolute;
  top: -7%;
  left: -8%;
  width: 114%;
  height: 114%;
  opacity: 0;
  transform: none;
  transform-origin: 62% 50%;
  object-position: 72% 50%;
  transition: opacity .35s ease;
}

.hero-scenes .hero-camera img.is-current { opacity: 1; }
.hero-scenes.is-interactive img.is-current[data-scene="0"] { animation: hero-nebula 2.8s ease-in-out infinite alternate; }
.hero-scenes.is-interactive img.is-current[data-scene="1"] { animation: hero-rings 2.6s ease-in-out infinite alternate; }
.hero-scenes.is-interactive img.is-current[data-scene="2"] { animation: hero-earth-pass 2.8s ease-in-out infinite alternate; }
.hero-scenes.is-interactive img.is-current[data-scene="3"] { animation: hero-network 2.4s ease-in-out infinite alternate; }
.hero-scenes.is-interactive img.is-current[data-scene="4"] { animation: hero-robot-pass 2.6s ease-in-out infinite alternate; }

.hero-scenes.is-interactive .hero-camera:is([data-active="3"], [data-active="4"])::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.hero-scenes.is-interactive .hero-camera[data-active="3"]::after {
  background: radial-gradient(ellipse at 74% 52%, #fff2, transparent 35%);
  animation: hero-network-pulse 1.3s ease-in-out infinite alternate;
}

.hero-scenes.is-interactive .hero-camera[data-active="4"]::after {
  background: linear-gradient(108deg, transparent 57%, #fff2 70%, transparent 84%);
  animation: hero-light-pass 2.4s ease-in-out infinite;
}

.hero-scenes.offscreen .hero-camera img,
.hero-scenes.offscreen .hero-camera::after,
.motion-paused .hero-scenes .hero-camera::after {
  animation-play-state: paused !important;
}

.motion-paused .hero-camera img { transition: none; }

.hero-scenes.is-interactive :is(.hero-shade, .hero-content, .hero-foot) { pointer-events: none; }
.hero-scenes :is(.text-link, .scroll-cue) { pointer-events: auto; }
.hero-scenes .hero-motion { width: 44px; height: 44px; }

.pan-surface {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.pan-surface.is-zoomed { touch-action: none; }
.pan-surface.is-dragging { cursor: grabbing; }

.hero-scene-toolbar:not([hidden]) {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 24px;
  padding-inline: var(--gutter);
  border-top: 1px solid #f3f1eb33;
}

.scene-picker, .view-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.scene-picker { gap: 0 16px; }
.view-controls { gap: 4px; }

.hero-scene-toolbar button {
  position: relative;
  min-height: 44px;
  padding-inline: 3px;
  font-size: 12px;
  color: #c4c5c0;
}

.hero-scene-toolbar button[aria-pressed="true"] { color: var(--paper); }
.hero-scene-toolbar button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  bottom: 6px;
  inset-inline: 3px;
  height: 1px;
  background: currentColor;
}

.view-controls button { min-width: 44px; }
.view-controls button:disabled { opacity: .45; }
.view-controls output { min-width: 4ch; text-align: center; font: 12px var(--sans); font-variant-numeric: tabular-nums; }
.view-controls label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 12px; }
.view-controls input { accent-color: var(--paper); }

@media (max-width: 540px) {
  .view-controls { width: 100%; border-top: 1px solid #f3f1eb33; }
  .hero-scenes .hero-camera img { object-position: 74% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scenes .hero-camera img, .hero-scenes .hero-camera::after {
    animation: none !important;
    transition: none;
  }
}

@keyframes hero-nebula {
  from { transform: translate(-3.5%, 1.5%) rotate(-1deg) scale(1.03); }
  to { transform: translate(3%, -2%) rotate(1.5deg) scale(1.09); }
}
@keyframes hero-rings {
  from { transform: translate(-3%, 1%) rotate(-3deg) scale(1.04); }
  to { transform: translate(3%, -1%) rotate(3.5deg) scale(1.04); }
}
@keyframes hero-earth-pass {
  from { transform: translate(4%, 2%) rotate(-.8deg) scale(1.04); }
  to { transform: translate(-4%, -2%) rotate(1deg) scale(1.08); }
}
@keyframes hero-network {
  from { transform: translate(-2.5%, 1%) scale(1.03); filter: grayscale(1) brightness(.85); }
  to { transform: translate(2.5%, -1%) scale(1.09); filter: grayscale(1) brightness(1.13); }
}
@keyframes hero-robot-pass {
  from { transform: translate(3%, 1.5%) rotate(1.5deg) scale(1.04); }
  to { transform: translate(-3.5%, -1.5%) rotate(-2deg) scale(1.09); }
}
@keyframes hero-network-pulse { from { opacity: .15; } to { opacity: 1; } }
@keyframes hero-light-pass {
  0%, 100% { opacity: 0; transform: translateX(-12%); }
  18% { opacity: .75; }
  62% { opacity: 0; transform: translateX(22%); }
}