/* Feedback: 160 ms press, 280 ms state, 420 ms return. Spatial effects stay local. */
:root {
  --feedback-fast: var(--motion-fast, 160ms);
  --feedback-state: var(--motion-ui, 280ms);
  --feedback-return: 420ms;
  --feedback-ease: var(--motion-ease, cubic-bezier(.22, 1, .36, 1));
}

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background var(--feedback-state), color var(--feedback-state), border-color var(--feedback-state);
}
.button:hover { transform: none; }
.button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  opacity: 0;
  transform: translateY(105%);
  transition: transform var(--feedback-return) var(--feedback-ease), opacity var(--feedback-state);
  pointer-events: none;
}
.button:is(:hover, :focus-visible)::before { opacity: .085; transform: translateY(0); }
.button:active::before { opacity: .16; }
.button-motion-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  max-width: 100%;
  scale: 1;
  transition: scale var(--feedback-state) var(--feedback-ease);
}
.course-preview .button-motion-content { width: 100%; justify-content: space-between; }
:is(.button, .course-preview):active .button-motion-content { scale: .965; transition-duration: var(--feedback-fast); }
.button svg, .student-link svg, .text-link svg, .read-link svg, .catalogue-list a > svg {
  flex-shrink: 0;
  transition: translate var(--feedback-return) var(--feedback-ease), scale var(--feedback-return) var(--feedback-ease);
}
.button:is(:hover, :focus-visible) svg,
.student-link:is(:hover, :focus-visible) svg,
.course-feature:is(:hover, :focus-visible) .text-link svg,
.article:is(:hover, :focus-visible) .read-link svg,
.catalogue-list a:is(:hover, :focus-visible) > svg { translate: 5px 0; }
.button-outline:is(:hover, :focus-visible) svg { translate: 2px 0; scale: 1.08; }
.button-outline:focus-visible { background: var(--paper); color: var(--ink); }
.button-light:focus-visible { background: #fff; }

.desktop-nav a, .mobile-menu a, .site-footer nav a, .underlined-link { position: relative; }
.desktop-nav a::after, .mobile-menu a::after, .site-footer nav a::after, .underlined-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--feedback-return) var(--feedback-ease);
  pointer-events: none;
}
:is(.desktop-nav a, .mobile-menu a, .site-footer nav a, .underlined-link):is(:hover, :focus-visible)::after {
  transform: scaleX(1);
  transform-origin: left;
}
.underlined-link { border-bottom-color: #12121238; transition: color var(--feedback-state); }
.underlined-link::after { bottom: -1px; }
.desktop-nav a:focus-visible, .student-link:focus-visible, .site-footer nav a:focus-visible { color: var(--red); }
.mobile-menu a { width: fit-content; }
.brand img { transition: opacity var(--feedback-state); }
.brand:is(:hover, :focus-visible) img { opacity: .76; }
.brand-dot { transition: transform var(--feedback-return) var(--feedback-ease); }
.brand:is(:hover, :focus-visible) .brand-dot { transform: translateY(-3px); }
.chapter { transition: color var(--feedback-state); }
.chapter:is(:hover, :focus-visible) { color: var(--paper); }
.menu-toggle { border-radius: 3px; transition: background var(--feedback-state); }
.menu-toggle:is(:hover, :focus-visible) { background: #ffffff0e; }

.course-motion-plane { position: relative; width: 100%; height: 100%; }
.pointer-motion-ready .course-feature:hover .course-image img { transform: none; }
.course-motion-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 280px;
  pointer-events: none;
  background: radial-gradient(circle, #fff3 0%, #fff1 30%, transparent 70%);
  opacity: 0;
  transition: opacity var(--feedback-state);
}
.course-image.is-pointer-active .course-motion-light { opacity: 1; }
.course-feature, .course-tile { transition: border-color var(--feedback-state); }
.course-tile:has(.course-feature:hover), .course-tile:focus-within { border-bottom-color: #b62830; }
.course-feature:is(:hover, :focus-visible) { border-bottom-color: #b62830; }
.course-details h3, .text-link, .article h3 { transition: color var(--feedback-state); }
.course-feature:is(:hover, :focus-visible) .text-link,
.article:is(:hover, :focus-visible) h3,
.catalogue-list a:is(:hover, :focus-visible),
.underlined-link:is(:hover, :focus-visible) { color: #a9232b; }
.course-pointer-cue {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid #ffffff80;
  border-radius: 50%;
  background: #121212ed;
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .025em;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--feedback-fast);
}
.course-pointer-cue.is-visible { opacity: 1; }

.article, .catalogue-list a { position: relative; }
.article::after, .catalogue-list a::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: #b62830;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--feedback-return) var(--feedback-ease);
  pointer-events: none;
}
.catalogue-list a::after { top: auto; bottom: -1px; }
.article:is(:hover, :focus-visible)::after, .catalogue-list a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.catalogue-list a > span:not(.sm-rule) { transition: translate var(--feedback-return) var(--feedback-ease); }
.catalogue-list a:is(:hover, :focus-visible) > span:not(.sm-rule) { translate: 5px 0; }
.article:active, .catalogue-list a:active { background: #12121205; }

@media (hover: none), (pointer: coarse) {
  .course-pointer-cue, .course-motion-light { display: none; }
}
:is(.motion-reduced, .pointer-reduced) .button-motion-content,
:is(.motion-reduced, .pointer-reduced) .course-motion-plane,
:is(.motion-reduced, .pointer-reduced) .catalogue-list a > span:not(.sm-rule),
:is(.motion-reduced, .pointer-reduced) .brand-dot,
:is(.motion-reduced, .pointer-reduced) :is(.button, .student-link, .text-link, .read-link, .catalogue-list a) svg {
  transform: none !important;
  scale: 1 !important;
  translate: none !important;
}
:is(.motion-reduced, .pointer-reduced) .course-pointer-cue,
:is(.motion-reduced, .pointer-reduced) .course-motion-light { display: none; }
:is(.motion-reduced, .pointer-reduced) .button::before { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .button-motion-content, .course-motion-plane, .catalogue-list a > span:not(.sm-rule), .brand-dot,
  :is(.button, .student-link, .text-link, .read-link, .catalogue-list a) svg { transform: none !important; scale: 1 !important; translate: none !important; }
  .course-pointer-cue, .course-motion-light { display: none; }
  .button::before { transform: none; }
}