/* A shared, interruptible motion language. Final layouts and colors stay in styles.css. */
:root {
  --motion-factor: 1;
  --motion-fast: calc(140ms * var(--motion-factor));
  --motion-press: calc(120ms * var(--motion-factor));
  --motion-normal: calc(220ms * var(--motion-factor));
  --motion-slow: calc(280ms * var(--motion-factor));
  --motion-ease: cubic-bezier(.2,0,0,1);
}
.pill,.bookmark,.directory-more,.directory-close,.back-button,.share-button {
  transition: background-color var(--motion-fast) ease-out, color var(--motion-fast) ease-out, scale var(--motion-press) var(--motion-ease);
}
:is(.pill,.bookmark,.directory-more,.directory-close,.back-button,.share-button):active:not(:disabled) { scale: .96; }
.pill:hover { transform: none; }
:is(button,a)[aria-busy=true] { cursor: progress; }
button:disabled { cursor: default; }
.back-button,.share-button { min-height: 40px; }
.pill .icon,.pill > span[aria-hidden],.directory-more > span,.back-button .icon,.text-link .icon,.lab-link h2 .icon {
  transition: translate var(--motion-normal) var(--motion-ease);
}
@media (hover: hover) {
  .pill:hover .icon,.pill:hover > span[aria-hidden] { translate: 2px -2px; }
  .directory-more:hover > span,.text-link:hover .icon,.lab-link:hover h2 .icon { translate: 3px 0; }
  .back-button:hover .icon { translate: -3px 0; }
}
.pill:focus-visible .icon,.pill:focus-visible > span[aria-hidden] { translate: 2px -2px; }
.directory-more:focus-visible > span,.text-link:focus-visible .icon { translate: 3px 0; }
.back-button:focus-visible .icon { translate: -3px 0; }
[data-save] .icon,[data-share] .icon { transform-origin: center; }
.pill[data-save][aria-pressed=true] { background: #edcffc; color: #111; }
[data-save][aria-pressed=true] .icon { fill: currentColor; }
.share-button { min-width: 92px; }
.share-icons { display: inline-grid; width: 18px; height: 18px; }
.share-icons .icon {
  grid-area: 1 / 1;
  transition: opacity var(--motion-normal) ease-out, scale var(--motion-normal) var(--motion-ease), filter var(--motion-normal) ease-out;
}
.share-icons .icon:last-child,.share-button[data-copied=true] .share-icons .icon:first-child { opacity: 0; scale: .25; filter: blur(4px); }
.share-button[data-copied=true] .share-icons .icon:last-child { opacity: 1; scale: 1; filter: blur(0); }
.share-button[data-copied=true] { color: #3f6647; }

/* Preserve the chosen neutral selection and the existing text/arrow transitions. */
.sidebar .sidebar-module,.sidebar .brand,.sidebar .studio-note {
  transition: background-color var(--motion-fast) ease-out, color var(--motion-fast) ease-out, scale var(--motion-press) var(--motion-ease);
}
.sidebar .sidebar-module:active,.sidebar .brand:active,.sidebar .studio-note:has(.studio-about:active) { scale: .96; }
.sidebar .nav-title,.sidebar .nav-summary { transition-duration: var(--motion-normal); }
.nav-motion-arrow svg { transition-duration: var(--motion-normal); }

/* Card feedback stays flat; the cover moves within its existing clipped frame. */
.course-card,.lab-card { overflow: hidden; }
.course-link,.lab-link {
  transform-origin: center;
  transition: scale var(--motion-press) var(--motion-ease), background-color var(--motion-fast) ease-out;
}
.course-cover > img { transition: scale var(--motion-slow) var(--motion-ease); }
@media (hover: hover) {
  .course-link:hover,.lab-link:hover { background-color: #ededed; }
  .course-link:hover .course-cover > img { scale: 1.025; }
}
.course-link:focus-visible,.lab-link:focus-visible { background-color: #ededed; }
.course-link:focus-visible .course-cover > img { scale: 1.025; }
.course-link:active,.lab-link:active { scale: .96; }
.course-link:active .course-cover > img { scale: 1; }
.directory-link { transition: background-color var(--motion-fast) ease-out; }
.directory-link:focus-visible { background: #ebebeb; outline-offset: -2px; }
.directory-link:active { background: #e1e1e1; }
.directory-icon { transition: border-color var(--motion-fast) ease-out; }
.directory-link:is(:hover,:focus-visible) .directory-icon { border-color: #bcbcbc; }
.text-link,.projects-reference-credit a,.project-reference-fallback a {
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: color var(--motion-fast) ease-out, text-decoration-color var(--motion-fast) ease-out;
}
.text-link:is(:hover,:focus-visible),.projects-reference-credit a:is(:hover,:focus-visible) { text-decoration: underline; }

/* Clip displaced cards without extending the scroller during section arrival. */
#view-root.motion-section-entering { overflow: clip; }

/* Only not-yet-visible cards reveal during scroll, once per rendered view. */
.motion-reveal { transition: opacity var(--motion-normal) ease-out, translate var(--motion-normal) var(--motion-ease); }
.motion-await { opacity: 0; translate: 0 10px; }
.motion-image { opacity: 0; transition: opacity var(--motion-normal) ease-out; }
.motion-image-ready { opacity: 1; }

/* Native modal retains focus trapping and Escape support through its exit. */
.motion-enabled .directory-dialog {
  opacity: 0;
  translate: 0 12px;
  scale: .985;
  transition: opacity var(--motion-normal) ease-out, translate var(--motion-normal) var(--motion-ease), scale var(--motion-normal) var(--motion-ease);
}
.motion-enabled .directory-dialog::backdrop { background: #0000; transition: background-color var(--motion-normal) ease-out; }
.motion-enabled .directory-dialog.motion-present { opacity: 1; translate: 0 0; scale: 1; }
.motion-enabled .directory-dialog.motion-present::backdrop { background: #0005; }
.motion-enabled .directory-dialog.motion-closing { translate: 0 6px; scale: .995; transition-duration: var(--motion-fast); }
.motion-enabled .directory-dialog.motion-closing::backdrop { transition-duration: var(--motion-fast); }
.motion-enabled .toast { opacity: 0; translate: 0 10px; transition: opacity var(--motion-fast) ease-out, translate var(--motion-normal) var(--motion-ease); }
.motion-enabled .toast.motion-present { opacity: 1; translate: 0 0; }
@media (pointer: coarse) {
  .pill,.back-button,.share-button,.bookmark { min-height: 44px; }
  .bookmark { min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-await,.motion-image { opacity: 1; translate: none; }
  .motion-enabled .directory-dialog { translate: none; scale: none; }
  .motion-enabled .toast { translate: none; }
  .course-cover > img,.course-link,.lab-link,.sidebar .sidebar-module,.sidebar .brand,.sidebar .studio-note,
  .pill,.bookmark,.directory-more,.directory-close,.back-button,.share-button { scale: none !important; }
  .pill .icon,.pill > span[aria-hidden],.directory-more > span,.back-button .icon,.text-link .icon,.lab-link h2 .icon { translate: none !important; }
}