/* FRANK motion: quick response, firm landings, a single blood-red accent. */
@view-transition { navigation: auto; }

::view-transition-group(root) { animation-duration: 280ms; }
::view-transition-old(root) {
  animation: frank-page-out 170ms var(--ease) both;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  animation: frank-page-in 280ms var(--ease) both;
  mix-blend-mode: normal;
}
::view-transition { pointer-events: none; }
::view-transition-group(record-sleeve) {
  animation-duration: 340ms;
  animation-timing-function: var(--ease);
}
::view-transition-old(record-sleeve), ::view-transition-new(record-sleeve) {
  width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal;
}
::view-transition-old(record-sleeve) { animation: frank-sleeve-out 120ms ease both; }
::view-transition-new(record-sleeve) { animation: none; }
@keyframes frank-sleeve-out { to { opacity: 0; } }
@keyframes frank-page-out {
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes frank-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.button, .text-link { position: relative; }
.button {
  transition: transform 140ms var(--ease), background-color 160ms ease,
    color 160ms ease, border-color 160ms ease;
}
.button::after, .text-link::after {
  content: ''; position: absolute; pointer-events: none;
  left: -1px; right: -1px; bottom: -1px; height: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: right;
  transition: transform 240ms var(--ease);
}
.text-link::after { left: 0; right: 0; height: 2px; }
.cta-label { display: block; position: relative; overflow: hidden; }
.cta-label-text, .cta-label-echo {
  display: block; transition: transform 240ms var(--ease);
}
.cta-label-echo { position: absolute; inset: 0; transform: translateY(115%); }
.button > svg, .text-link > svg { transition: transform 220ms var(--ease); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.frank-motion-off) :is(.button,.text-link):not(:disabled):not([aria-disabled=true]):hover:not(:focus-visible)::after {
    transform: scaleX(1); transform-origin: left;
  }
  html:not(.frank-motion-off) :is(.button,.text-link):not(:disabled):not([aria-disabled=true]):hover:not(:focus-visible) .cta-label-text {
    transform: translateY(-115%);
  }
  html:not(.frank-motion-off) :is(.button,.text-link):not(:disabled):not([aria-disabled=true]):hover:not(:focus-visible) .cta-label-echo {
    transform: translateY(0);
  }
  html:not(.frank-motion-off) a:is(.button,.text-link):hover:not(:focus-visible) > svg { transform: translateX(4px); }
  html:not(.frank-motion-off) a:is(.button,.text-link)[target=_blank]:hover:not(:focus-visible) > svg { transform: translate(3px,-3px); }
  html:not(.frank-motion-off) button:is(.button,.text-link):hover:not(:focus-visible) > svg { transform: scale(1.1); }
}

:is(.button,.text-link):focus-visible :is(.cta-label-text,.cta-label-echo),
:is(.button,.text-link):focus-visible > svg,
:is(.button,.text-link):focus-visible::after { transition: none; }

html.frank-motion-off :is(.button,.text-link),
html.frank-motion-off :is(.button,.text-link)::after,
html.frank-motion-off :is(.button,.text-link) :is(.cta-label-text,.cta-label-echo,svg) { transition: none; }
html.frank-motion-off .button:active { transform: none; }
html.frank-motion-off::view-transition-group(*),
html.frank-motion-off::view-transition-old(*),
html.frank-motion-off::view-transition-new(*) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}