/*
 * Motion polish for every page except the homepage (the homepage has its own motion block in home-bundle.css).
 * render-page.ts links this last, after the hashed bundles under /assets/seo/css/ (cached as immutable) and after
 * a11y.css / mobile-fixes.css. Every rule is scoped to body:not(.home-page).
 */

:root {
  /* Same curve as the homepage's --motion-ease: moves immediately, settles softly. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- Easing ---------- */

/* Was 0.25s on the default curve for every property. */
body:not(.home-page) .button {
  transition:
    background-color 250ms ease,
    color 250ms ease,
    transform 200ms var(--ease-out);
}

body:not(.home-page) .header-cta {
  transition:
    background-color 200ms ease,
    color 200ms ease,
    transform 160ms var(--ease-out);
}

body:not(.home-page) #hubbly-voice-assistant .hubbly-voice-launch {
  transition: transform 160ms var(--ease-out);
}

/* ---------- Hover on touch screens ---------- */

/* A tap counts as a hover and stays on until the next tap elsewhere. (.button's lift already has this guard.) */
@media (hover: none), (pointer: coarse) {
  body:not(.home-page) .header-cta:hover {
    background: transparent;
    color: inherit;
  }
}

/* ---------- Press feedback ---------- */

body:not(.home-page) .button:active,
body:not(.home-page) .header-cta:active {
  transform: scale(0.97);
}

/* The docked voice orb is large, so it gets a smaller press. */
body:not(.home-page) #hubbly-voice-assistant .hubbly-voice-launch:active {
  transform: scale(0.98);
}

/* ---------- Related links: slide with transform, not padding ---------- */

/* The bundle animated padding-left on hover, which lays the card out again on every frame. Keep the padding
   fixed and move the contents instead. Same distances as before: the first card moves 23px right, the others
   5px left (desktop); on phones every card starts at 0, so only the first one moves. */
body:not(.home-page) .related-grid a {
  transition:
    background-color 250ms ease,
    color 250ms ease;
}

body:not(.home-page) .related-grid a > * {
  transition: transform 250ms var(--ease-out);
}

body:not(.home-page) .related-grid a:hover,
body:not(.home-page) .related-grid a:focus-visible {
  padding-left: 0;
}

body:not(.home-page) .related-grid a:not(:first-child):hover,
body:not(.home-page) .related-grid a:not(:first-child):focus-visible {
  padding-left: 28px;
}

body:not(.home-page) .related-grid a:focus-visible > * {
  transform: translateX(23px);
}

body:not(.home-page) .related-grid a:not(:first-child):focus-visible > * {
  transform: translateX(-5px);
}

@media (hover: hover) and (pointer: fine) {
  body:not(.home-page) .related-grid a:hover > * {
    transform: translateX(23px);
  }

  body:not(.home-page) .related-grid a:not(:first-child):hover > * {
    transform: translateX(-5px);
  }
}

@media (max-width: 600px) {
  body:not(.home-page) .related-grid a:not(:first-child):hover,
  body:not(.home-page) .related-grid a:not(:first-child):focus-visible {
    padding-left: 0;
  }

  body:not(.home-page) .related-grid a:not(:first-child):hover > *,
  body:not(.home-page) .related-grid a:not(:first-child):focus-visible > * {
    transform: none;
  }
}

/* ---------- Reduced motion ---------- */

/* Last, so it beats the transitions above. Pressed controls change state with no movement. */
@media (prefers-reduced-motion: reduce) {
  body:not(.home-page) .button,
  body:not(.home-page) .header-cta,
  body:not(.home-page) #hubbly-voice-assistant .hubbly-voice-launch,
  body:not(.home-page) .related-grid a,
  body:not(.home-page) .related-grid a > * {
    transition: none;
  }

  body:not(.home-page) .button:active,
  body:not(.home-page) .header-cta:active,
  body:not(.home-page) #hubbly-voice-assistant .hubbly-voice-launch:active,
  body:not(.home-page) .related-grid a:hover > *,
  body:not(.home-page) .related-grid a:focus-visible > *,
  body:not(.home-page) .related-grid a:not(:first-child):hover > *,
  body:not(.home-page) .related-grid a:not(:first-child):focus-visible > * {
    transform: none;
  }
}