/* Wiederverwendbare Styles fuer den Scroll-Hero jeder Buchseite (index.html, aron.html, ...).
   Bild-Anzahl und Delays werden dynamisch von book-hero.js gesetzt - hier nur die Mechanik. */

.hero-layer {
  position: absolute;
  will-change: transform, opacity;
}

.hero-photo {
  will-change: opacity, transform;
  transform-origin: center center;
  animation: kenBurns 22s ease-in-out infinite alternate;
}

@keyframes kenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

@keyframes sphereSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
#layer-sphere-spin {
  animation: sphereSpin 40s linear infinite;
}

/* Beat-Navigation: kleine runde Symbol-Buttons am rechten Rand des Heros */
.beat-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9999px;
  border: 1px solid rgba(217, 178, 92, 0.35);
  background: rgba(6, 10, 28, 0.45);
  color: rgba(243, 217, 154, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.beat-dot svg {
  width: 1.05rem;
  height: 1.05rem;
}
.beat-dot:hover {
  border-color: rgba(217, 178, 92, 0.8);
  color: #f3d99a;
  transform: scale(1.1);
}
.beat-dot.is-active {
  border-color: #d9b25c;
  background: rgba(217, 178, 92, 0.25);
  color: #f3d99a;
}