/* Motion lives in the portrait's decorative contours; reading stays stable. */
.hero-portrait figcaption { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.motion-toggle { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .45rem .65rem; border: 1px solid #527884; border-radius: 5px; background: #f1f7f6; color: #07545a; font: inherit; font-size: .75rem; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { background: #e3f0ec; }
.motion-toggle:focus-visible { outline: 3px solid #a74d00; outline-offset: 3px; }
.motion-toggle svg { width: 13px; height: 13px; fill: currentColor; }
.motion-toggle .motion-icon-play { display: none; }
.motion-toggle.is-paused .motion-icon-pause { display: none; }
.motion-toggle.is-paused .motion-icon-play { display: block; }

body:is([data-motion="organic"], [data-motion="paused"]) .hero-backdrop::before {
  animation: portrait-field 14s ease-in-out infinite;
  animation-play-state: paused;
  transform-origin: 55% 50%;
}
body:is([data-motion="organic"], [data-motion="paused"]) .hero-backdrop::after {
  border-color: #95b9b4;
  animation: portrait-contour 16s ease-in-out infinite;
  animation-play-state: paused;
  transform-origin: 50% 48%;
}
body[data-motion="organic"] .hero-backdrop.ambient-motion-active::before,
body[data-motion="organic"] .hero-backdrop.ambient-motion-active::after { animation-play-state: running; }

@keyframes portrait-field {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); border-radius: 45% 30% 24% 52%; }
  35% { transform: translate3d(-18px, 12px, 0) rotate(-1.3deg); border-radius: 34% 46% 38% 42%; }
  70% { transform: translate3d(10px, -12px, 0) rotate(1deg); border-radius: 48% 34% 44% 31%; }
}
@keyframes portrait-contour {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); border-radius: 42% 34% 22% 46%; }
  40% { transform: translate3d(16px, -10px, 0) rotate(1.5deg); border-radius: 32% 44% 40% 35%; }
  75% { transform: translate3d(-12px, 14px, 0) rotate(-1deg); border-radius: 47% 28% 34% 48%; }
}
@media (max-width: 760px) {
  .hero-portrait figcaption { font-size: .75rem; }
  .motion-toggle { padding-inline: .5rem; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  body .hero-backdrop::before, body .hero-backdrop::after { animation: none !important; transform: none !important; }
  .motion-toggle { display: none; }
}
@media print {
  .motion-toggle { display: none; }
  body .hero-backdrop::before, body .hero-backdrop::after { animation: none !important; }
}