/* Interaction motion is brief, interruptible and separate from the page's narrative. */
:root { --ui-ease: cubic-bezier(.23, 1, .32, 1); }

.conviction-visual > img {
  position: absolute;
  inset: 0;
}

.button,
.circle-button,
.menu-toggle,
.video-toggle {
  transition: transform 140ms var(--ui-ease), background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.button:active,
.circle-button:not(:disabled):active,
.menu-toggle:active,
.video-toggle:active { transform: scale(.98); }

.button .arrow,
.text-link .arrow,
.circle-button .arrow,
.explore-link .down-arrow {
  transition: transform 200ms var(--ui-ease);
}

.plus:after,
.menu-toggle span,
.desktop-nav a:after { transition-timing-function: var(--ui-ease); }

.leader-photo { transition: transform 220ms var(--ui-ease); }
.leader:after { transition: opacity 220ms var(--ui-ease); }
.team-gallery.is-instant { scroll-behavior: auto; }
.team-gallery.is-instant .leader-photo,
.team-gallery.is-instant .leader:after { transition: none; }

@media (hover: hover) and (pointer: fine) {
  .button:hover .arrow,
  .text-link:hover .arrow { transform: translateX(4px); }
  .circle-button:not(:disabled):hover .arrow { transform: translateX(2px); }
  .circle-button:not(:disabled):hover .arrow-back { transform: translateX(-2px) rotate(180deg); }
  .explore-link:hover .down-arrow { transform: translateY(3px); }
}

/* A touch does not leave a mouse-only visual state behind. */
@media (hover: none), (pointer: coarse) {
  .button:hover { background: var(--red); border-color: var(--red); }
  .button-light:hover { background: var(--cream); border-color: var(--cream); }
  .circle-button:not(:disabled):hover { background: transparent; border-color: var(--line); color: inherit; }
}

/* Keyboard changes remain immediate, including native detail/button activation. */
.is-keyboard-input { scroll-behavior: auto; }
.is-keyboard-input :is(.button, .circle-button, .menu-toggle, .video-toggle, .team-roster button, .leader-photo, .arrow, .down-arrow),
.is-keyboard-input .leader:after,
.is-keyboard-input .plus:after,
.is-keyboard-input .menu-toggle span,
.is-keyboard-input .desktop-nav a:after { transition: none; }

.is-keyboard-input :is(.button, .circle-button, .menu-toggle, .video-toggle):active { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .button:active,
  .circle-button:not(:disabled):active,
  .menu-toggle:active,
  .video-toggle:active,
  .button:hover .arrow,
  .text-link:hover .arrow,
  .circle-button:not(:disabled):hover .arrow,
  .explore-link:hover .down-arrow { transform: none; }
  .circle-button:not(:disabled):hover .arrow-back { transform: rotate(180deg); }
}