/* Feedback for occasional screenshot opens and frequent controls.
   The taste layer continues to own .btn hover/press motion. */
.hero-overview,
.feature-shot {
  cursor: zoom-in;
  transition:
    transform var(--m-out, 200ms) var(--ease-out),
    border-color var(--m-out, 200ms) ease;
}

:is(.hero-overview, .feature-shot) .image-open {
  transition:
    transform var(--m-in, 140ms) var(--ease-out),
    background-color var(--m-in, 140ms) ease;
}

.feature-tabs > button,
.tour-tabs > button,
.hero-install button {
  transition:
    transform var(--m-in, 140ms) var(--ease-out),
    background-color var(--m-in, 140ms) ease,
    border-color var(--m-in, 140ms) ease,
    color var(--m-in, 140ms) ease;
}

/* Use the existing 140ms response token for this button's taste press. */
.voxarium-back { --m-press: var(--m-in, 140ms); }
.voxarium-back > svg { transition: transform var(--m-in, 140ms) var(--ease-out); }

.footer-bottom a {
  position: relative;
  transition: color var(--m-in, 140ms) ease;
}
.footer-bottom a::after {
  content: '';
  position: absolute;
  inset: auto 0 -3px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--m-in, 140ms) ease;
}

@media (hover: hover) and (pointer: fine) {
  :is(.hero-overview, .feature-shot):hover:not(:focus-visible) {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--action) 70%, transparent);
    box-shadow: 0 12px 28px -18px #000a;
    transition-duration: var(--m-in, 140ms);
  }
  :is(.hero-overview, .feature-shot):hover:not(:focus-visible) .image-open {
    transform: translate(1px, -1px);
    background-color: color-mix(in srgb, var(--action) 88%, white);
  }
  .feature-tabs > button:hover {
    background-color: color-mix(in srgb, var(--feature-hover) 90%, var(--action));
    color: var(--ink);
  }
  .tour-tabs > button:hover {
    color: var(--ink);
    background-color: color-mix(in srgb, var(--action) 7%, transparent);
  }
  .tour-tabs > button:not([aria-selected='true']):hover {
    border-bottom-color: color-mix(in srgb, var(--action) 45%, transparent);
  }
  .hero-install button:hover {
    background-color: #48305f;
    border-color: #cbb0ff80;
  }
  .voxarium-back:hover {
    background-color: #372449;
    border-color: #cbb0ff;
  }
  .voxarium-back:hover:not(:focus-visible) > svg { transform: translateX(-2px); }
  .footer-bottom a:hover::after { opacity: 1; }
}

/* :active is also a real touch press; no hover state is required. */
:is(.hero-overview, .feature-shot):active:not(:focus-visible) {
  transform: scale(.998);
  border-color: var(--action);
  transition-duration: var(--m-in, 140ms);
}
:is(.feature-tabs > button, .tour-tabs > button):active:not(:focus-visible) {
  transform: scale(.99);
  background-color: color-mix(in srgb, var(--action) 12%, var(--bg));
}
.hero-install button:active:not(:focus-visible) {
  transform: scale(.97);
  background-color: #48305f;
  border-color: #cbb0ff;
}
.footer-bottom a:active { color: #573177; }
.footer-bottom a:active::after { opacity: 1; }

/* Keyboard focus is immediate, including the taste layer's focus-ring animation. */
html:not([data-motion='off']) :is(
  .hero-overview, .feature-shot, .feature-tabs > button, .tour-tabs > button,
  .hero-install button, .voxarium-back, .footer-bottom a
):focus-visible {
  animation: none;
  transition: none;
  transform: none;
}
:is(.hero-overview, .feature-shot):focus-visible .image-open,
.voxarium-back:focus-visible > svg {
  transition: none;
  transform: none;
}
.footer-bottom a:focus-visible::after { opacity: 1; transition: none; }

@media (prefers-reduced-motion: reduce) {
  :is(.hero-overview, .feature-shot, .feature-tabs > button, .tour-tabs > button, .hero-install button),
  :is(.hero-overview, .feature-shot):is(:hover, :active):not(:focus-visible),
  :is(.feature-tabs > button, .tour-tabs > button, .hero-install button):active:not(:focus-visible) {
    transform: none;
    transition: none;
  }
  :is(.hero-overview, .feature-shot) .image-open,
  :is(.hero-overview, .feature-shot):hover:not(:focus-visible) .image-open,
  .voxarium-back > svg,
  .voxarium-back:hover:not(:focus-visible) > svg {
    transform: none;
    transition: none;
  }
  .footer-bottom a,
  .footer-bottom a::after { transition: none; }
}