/* Interaction feedback only; teaching diagrams retain their own motion. */
:root{
 --interaction-fast:160ms;
 --interaction-duration:240ms;
 --interaction-ease:cubic-bezier(.22,1,.36,1);
 --interaction-border:color-mix(in srgb,var(--color-accent) 48%,var(--color-border));
 --interaction-shadow:0 10px 28px rgb(24 24 27 / 8%),0 2px 6px rgb(24 24 27 / 4%);
}
:root[data-theme=dark]{--interaction-shadow:0 10px 28px rgb(0 0 0 / 28%),0 2px 6px rgb(0 0 0 / 18%)}

.term-card,.problem-grid.enriched .problem-card,.learning-task-card{
 transition:transform var(--interaction-duration) var(--interaction-ease),
  box-shadow var(--interaction-duration) var(--interaction-ease),
  border-color var(--interaction-duration) ease,background-color var(--interaction-duration) ease;
}
.term-card:focus-within,.problem-card:focus-visible,.learning-task-card:focus-visible{border-color:var(--color-accent)}
.card-head h3,.problem-card h2,.learning-task-card h3,.method-card-foot,.learning-task-start{
 transition:color var(--interaction-fast) ease;
}
:is(.nav-link,.catalog-page .group-tab,.style-filter-link,.catalog-page .role-item,
 .button,.icon-button,.favorite,.header-saved,.menu summary,.menu-panel button,
 .segmented button,.method-search button,.method-clear,.related-term,.source-links a,
 .format-start-links a,.style-neighbours a){
 transition:transform var(--interaction-fast) var(--interaction-ease),
  background-color var(--interaction-fast) ease,color var(--interaction-fast) ease,
  border-color var(--interaction-fast) ease,box-shadow var(--interaction-fast) ease,
  filter var(--interaction-fast) ease;
}
:is(.favorite,.icon-button,.text-link,.related-term,.source-links a) svg,
.method-card-foot svg,.problem-bottom>span:last-child svg,.learning-task-start svg{
 transition:transform var(--interaction-duration) var(--interaction-ease);
}
.text-link,.text-button,.detail-toc a,.style-related a,.footer a:not(.footer-brand){transition:color var(--interaction-fast) ease}

@media(hover:hover) and (pointer:fine){
 .term-card:hover,.problem-grid.enriched .problem-card:hover,.learning-task-card:hover{
  transform:translateY(-4px);border-color:var(--interaction-border);box-shadow:var(--interaction-shadow);
 }
 .term-card:hover .card-head h3,.problem-card:hover h2,.learning-task-card:hover h3,
 .term-card:hover .method-card-foot{color:var(--color-accent)}
 /* Keep the star target stationary when it is the hovered action. */
 .term-card:has(.favorite:hover){transform:none}
 .term-card:active,.problem-grid.enriched .problem-card:active,.learning-task-card:active{
  transform:translateY(-1px);box-shadow:var(--shadow-card);
 }
 :is(.nav-link,.catalog-page .group-tab,.style-filter-link,.catalog-page .role-item):hover{
  transform:translateY(-1px);background:var(--color-accent-soft);color:var(--color-accent);
 }
 :is(.nav-link.active,.catalog-page .group-tab.selected,.style-filter-link.selected,.catalog-page .role-item.selected):hover{
  background:var(--color-accent-soft);
 }
 :is(.button,.icon-button,.header-saved,.menu summary,.method-search button,.method-clear):not(:disabled):hover{
  transform:translateY(-1px);box-shadow:0 3px 8px var(--color-shadow);
 }
 .button:not(:disabled):hover{border-color:var(--interaction-border)}
 .button.primary:hover{filter:brightness(1.06)}
 :is(.icon-button,.favorite,.header-saved):not(:disabled):hover{background:var(--color-accent-soft);color:var(--color-accent)}
 .favorite:hover svg,.icon-button[data-favorite]:hover svg{transform:rotate(-10deg) scale(1.12)}
 .icon-button[data-action=theme]:hover svg{transform:rotate(12deg)}
 .menu-panel button:not(:disabled):hover{transform:translateX(2px)}
 .segmented button:not(:disabled):hover{color:var(--color-accent);background:var(--color-accent-soft)}
 .related-term:hover,.source-links a:hover,.format-start-links a:hover{
  transform:translateY(-2px);border-color:var(--interaction-border);box-shadow:var(--shadow-card);
 }
 .term-card:hover .method-card-foot svg,.problem-card:hover .problem-bottom>span:last-child svg,
 .learning-task-card:hover .learning-task-start svg,.text-link:hover svg,
 .related-term:hover>svg,.source-links a:hover>svg{transform:translateX(4px)}
 :is(.text-link,.text-button,.detail-toc a,.style-related a,.footer a:not(.footer-brand)):hover{color:var(--color-accent)}
 .text-link:hover{text-decoration:underline;text-underline-offset:4px}
 :is(.nav-link,.group-tab,.style-filter-link,.role-item,.button,.icon-button,.favorite,
 .header-saved,.menu summary,.menu-panel button,.segmented button,.method-search button,.method-clear):not(:disabled):active{
  transform:translateY(0) scale(.98);box-shadow:none;
 }
}

/* Override older unconditional hover transforms on touch devices. */
@media(hover:none),(pointer:coarse){
 .term-card:hover,.term-card:active,.problem-grid.enriched .problem-card:hover,
 .problem-grid.enriched .problem-card:active,.learning-task-card:hover,.learning-task-card:active{
  transform:none;box-shadow:none;
 }
 .term-card:hover{border-color:var(--color-border)}
 .method-card:hover .method-card-foot svg,.style-neighbours a:hover{transform:none}
}

/* Reduced motion keeps colour and focus cues without instantaneous jumps. */
@media(prefers-reduced-motion:reduce){
 :is(.term-card,.problem-grid.enriched .problem-card,.learning-task-card,
  .nav-link,.group-tab,.style-filter-link,.role-item,.button,.icon-button,.favorite,
  .header-saved,.menu summary,.menu-panel button,.segmented button,.method-search button,
  .method-clear,.related-term,.source-links a,.format-start-links a,.style-neighbours a),
 :is(.favorite,.icon-button,.text-link,.related-term,.source-links a) svg,
 .method-card-foot svg,.problem-bottom>span:last-child svg,.learning-task-start svg{
  transform:none!important;transition:none!important;
 }
}