/* The clock uses the portfolio's warm, green palette. */
.hero-clock {
  --hc-ink: var(--text);
  --hc-display-accent: #a5cbb1;
  margin: 0;
  min-width: 0;
  width: 100%;
  max-width: 440px;
  justify-self: center;
  position: relative;
}
.hero-clock > svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-clock .hc-gear {
  transform-box: fill-box;
  transform-origin: center;
  animation: hc-spin var(--duration, 90s) linear infinite;
  animation-direction: var(--direction, normal);
}
.hero-clock .hc-balance {
  transform-box: fill-box;
  transform-origin: center;
  animation: hc-balance 1.2s ease-in-out infinite;
}
.hero-clock .hc-anchor {
  transform-box: fill-box;
  transform-origin: 3px 22px;
  animation: hc-anchor .6s steps(2, end) infinite;
}
.hero-clock .hc-escapement { animation-timing-function: steps(48, end); }
.hero-clock .hc-beat {
  transform-box: fill-box;
  transform-origin: center;
  animation: hc-beat 1.25s ease-in-out infinite;
}
.hero-clock.is-paused :is(.hc-gear, .hc-balance, .hc-anchor, .hc-beat) {
  animation-play-state: paused;
}
@keyframes hc-spin { to { transform: rotate(360deg); } }
@keyframes hc-balance { 0%, 100% { transform: rotate(-32deg); } 50% { transform: rotate(32deg); } }
@keyframes hc-anchor { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes hc-beat { 0%, 75%, 100% { scale: 1; } 85% { scale: 1.06; } 92% { scale: 1.01; } }
/* On About me the clock floats left of the second section, mirroring the
   photo on the right in the first one: movement outside, digital side
   towards the text. */
.hero-clock.life__uhr {
  float: left;
  width: 240px;
  margin: 2px 32px 8px -6px;
}
/* Text beside the clock keeps its own column instead of wrapping underneath it. */
.life--uhr > p { overflow: hidden; }
@media (max-width: 680px) {
  .hero-clock.life__uhr {
    float: none;
    width: 100%;
    max-width: 260px;
    margin: 0 auto 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-clock :is(.hc-gear, .hc-balance, .hc-anchor, .hc-beat) { animation: none; }
}