/* Interaction scale is independent of positioning and entrance transforms. */
:root {
  --button-motion-duration: 280ms;
  --button-motion-ease: cubic-bezier(.22, 1.5, .36, 1);
}
:is(.hero-cta, .contact-back, .contact-confirm, .grid-toggle, .film-controls button),
.media-control img, .control-surface::before {
  scale: 1;
  transition: scale var(--button-motion-duration) var(--button-motion-ease);
}
.hero-cta { transition: scale var(--button-motion-duration) var(--button-motion-ease), opacity 160ms ease-out; }
.contact-confirm { transition: scale var(--button-motion-duration) var(--button-motion-ease), opacity 180ms ease; }
.film-controls button { transition: scale var(--button-motion-duration) var(--button-motion-ease), background-color 160ms ease-out; }
.grid-toggle:active { transform: none; }
.grid-toggle { transition: scale var(--button-motion-duration) var(--button-motion-ease), color 160ms ease-out; }
.media-control img {
  transition: opacity 220ms ease, filter 260ms ease, scale var(--button-motion-duration) var(--button-motion-ease);
  transition-delay: calc(80ms + var(--slot) * 25ms), calc(80ms + var(--slot) * 25ms), 0ms;
}
@media (hover: hover) and (pointer: fine) {
  .media-stage:not(:hover):not(:has(.media-control:focus-visible)) .media-control img {
    transition-duration: 120ms, 120ms, var(--button-motion-duration);
  }
  :is(.hero-cta, .contact-back, .contact-confirm, .grid-toggle, .film-controls button):hover:not(:disabled):not([aria-disabled="true"]),
  .media-control:hover:not(:disabled):not([aria-disabled="true"]) img { scale: 1.08; }
  .media-controls:has([data-action="sound"]:hover:not(:disabled):not([aria-disabled="true"])) .control-surface:nth-child(1)::before,
  .media-controls:has([data-action="play"]:hover:not(:disabled):not([aria-disabled="true"])) .control-surface:nth-child(2)::before,
  .media-controls:has([data-action="next"]:hover:not(:disabled):not([aria-disabled="true"])) .control-surface:nth-child(3)::before,
  .media-controls:has([data-action="previous"]:hover:not(:disabled):not([aria-disabled="true"])) .control-surface:nth-child(4)::before { scale: 1.08; }
}
:is(.hero-cta, .contact-back, .contact-confirm, .grid-toggle, .film-controls button):active:not(:disabled):not([aria-disabled="true"]),
.media-control:active:not(:disabled):not([aria-disabled="true"]) img,
.media-controls:has([data-action="sound"]:active:not(:disabled):not([aria-disabled="true"])) .control-surface:nth-child(1)::before,
.media-controls:has([data-action="play"]:active:not(:disabled):not([aria-disabled="true"])) .control-surface:nth-child(2)::before,
.media-controls:has([data-action="next"]:active:not(:disabled):not([aria-disabled="true"])) .control-surface:nth-child(3)::before,
.media-controls:has([data-action="previous"]:active:not(:disabled):not([aria-disabled="true"])) .control-surface:nth-child(4)::before {
  scale: .96;
  --button-motion-duration: 100ms;
  --button-motion-ease: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  :is(.hero-cta, .contact-back, .contact-confirm, .grid-toggle, .film-controls button),
  .media-control img, .control-surface::before { scale: 1 !important; transition: none !important; }
}