/* Animate the original illustration; preserve the existing hero layout and colours. */
.hero-illustrated .hero-image { animation: none; }
.living-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.has-living-photo .hero-image { opacity: 0; }
.hair-animation-toggle { position: absolute; right: 22px; bottom: 22px; z-index: 3; width: 42px; height: 42px; border: 1px solid #d1bf95; border-radius: 50%; background: #203c34cc; color: #fff1d6; font: inherit; cursor: pointer; }
.hair-animation-toggle:focus-visible { outline: 3px solid #ffe2c9; outline-offset: 4px; }
.hair-animation-paused::before, .hair-animation-paused::after, .hair-animation-paused .hero-motion { animation-play-state: paused; }
body[data-theme="zen"] .living-photo { visibility: hidden; }
body[data-theme="zen"] .has-living-photo .hero-image { opacity: 1; }
body[data-theme="zen"] .hair-animation-toggle { display: none; }
@media(prefers-reduced-motion: reduce) {
  .living-photo, .hair-animation-toggle { display: none; }
  .has-living-photo .hero-image { opacity: 1; }
}