/* Balanced Motion: the authored document stays visible with or without JS.
   Entrance transforms exist only for the lifetime of a browser animation. */
.public-page {
  --motion-ease: cubic-bezier(.22, .61, .36, 1);
  --motion-hover: 200ms;
  --motion-photo: 380ms;
}
.studio-nav a { position: relative; transition: color var(--motion-hover) var(--motion-ease); }
.studio-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--motion-hover) var(--motion-ease); }
.studio-nav a:is(:hover, :focus-visible, .is-active, [aria-current])::after { transform: scaleX(1); }
.header-contact, .footer-inner a { transition: color var(--motion-hover), border-color var(--motion-hover); }
.studio-button, .text-link, .public-page .primary-button { transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), transform var(--motion-hover) var(--motion-ease); }
.studio-button:focus-visible, .text-link:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 4px; }
.studio-button span, .text-link span, .header-contact span { transition: transform var(--motion-hover) var(--motion-ease); }
.studio-button:is(:hover, :focus-visible) span, .text-link:is(:hover, :focus-visible) span, .header-contact:is(:hover, :focus-visible) span { transform: translateX(2px); }
.achievement-choice { transition: color var(--motion-hover), text-decoration-color var(--motion-hover); }
.photo-switch-stage img { transition: opacity var(--motion-photo) var(--motion-ease); }
.photo-view-controls button { transition: color var(--motion-hover), border-color var(--motion-hover); }
.recording-preview img { transition: transform 220ms var(--motion-ease); }
.recording-play { transition: background-color var(--motion-hover), color var(--motion-hover), transform var(--motion-hover) var(--motion-ease); }
.recording-preview:focus-visible img { transform: scale(1.02); }
.recording-preview:focus-visible .recording-play { transform: translate(-50%, -50%) scale(1.04); }
.artist-photo .image-button[data-photo] { transition: outline-color var(--motion-hover), transform var(--motion-hover) var(--motion-ease); }
.artist-photo .image-button[data-photo]:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .studio-button:hover { transform: translateY(-1px); }
  .recording-preview:hover img { transform: scale(1.02); }
  .recording-preview:hover .recording-play { transform: translate(-50%, -50%) scale(1.04); }
  .artist-photo .image-button[data-photo]:hover { outline: 1px solid var(--caption-colour, #576157); outline-offset: 3px; }
  .jazz-photos .image-button[data-photo]:hover { transform: translateY(-2px); outline-color: #c6ad7b; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .public-page :is(.studio-button, .text-link, .primary-button, .image-button, .recording-preview img, .studio-button span, .text-link span, .header-contact span) { transform: none !important; transition: none !important; }
  .public-page :is(.recording-play, .photo-view-controls button, .achievement-choice, .studio-nav a), .public-page .studio-nav a::after { transition: none !important; }
  .recording-preview:is(:hover, :focus-visible) .recording-play { transform: translate(-50%, -50%) !important; }
}