/* Presentation only: this layer does not read or change assignment data. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-quick: 160ms;
  --motion-settle: 320ms;
}

.button, .icon-button, .small-button, .inline-button,
.nav-item, .teacher-item, .empty-state button, .assignment-actions button {
  transition: background-color var(--motion-quick) ease,
    border-color var(--motion-quick) ease, color var(--motion-quick) ease,
    box-shadow 220ms ease, translate 220ms var(--motion-ease),
    scale var(--motion-quick) var(--motion-ease);
}
.button:active:not(:disabled), .icon-button:active:not(:disabled),
.small-button:active:not(:disabled), .empty-state button:active {
  scale: .97;
  translate: 0 0;
}
.nav-item:active, .teacher-item:active { scale: .985; }
.button.primary { box-shadow: 0 3px 8px #5b45e019; }
.assignment-card, .progress-card, .teacher-card {
  transition: border-color 220ms ease, box-shadow 220ms ease,
    translate 260ms var(--motion-ease);
}
.control-field input, .control-field select,
.form-field input, .form-field select, .form-field textarea, .search-box {
  transition: border-color var(--motion-quick) ease, box-shadow var(--motion-quick) ease;
}
.control-field input:focus, .control-field select:focus,
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: #9384ed;
  box-shadow: 0 0 0 3px #eeeaff;
}
.assignment-title { transition: color 180ms ease; }
.task input { transition: background-color 160ms ease, border-color 160ms ease; }
#progress-ring-fill { transition: stroke-dashoffset 520ms var(--motion-ease); }
.card-list, .view-tabs { position: relative; }
.view-tabs button { transition: color 180ms ease; }
.view-tabs button > span { transition: background-color 180ms ease, color 180ms ease; }
.motion-tab-indicator {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--purple);
  pointer-events: none;
  transform-origin: left center;
}
.motion-tabs-ready button[aria-selected=true]::after { display: none; }

@media (hover: hover) and (pointer: fine) {
  .button:hover:not(:disabled), .icon-button:hover:not(:disabled),
  .small-button:hover:not(:disabled), .empty-state button:hover { translate: 0 -1px; }
  .button.primary:hover:not(:disabled) { box-shadow: 0 6px 16px #5b45e02b; }
  .assignment-card:hover { translate: 0 -2px; box-shadow: 0 8px 24px #39306309; }
  .teacher-item:hover .teacher-avatar { background: #e9e2ff; }
  .brand:hover .brand-mark { rotate: -4deg; scale: 1.04; }
  .brand-mark { transition: rotate 260ms var(--motion-ease), scale 260ms var(--motion-ease); }
}

@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: hallnote-dialog-in 240ms var(--motion-ease); }
  dialog[open]::backdrop { animation: hallnote-backdrop-in 200ms ease; }
  .toast:not([hidden]) { animation: hallnote-toast-in 240ms var(--motion-ease); }
  .form-error:not([hidden]) { animation: hallnote-message-in 180ms ease-out; }
}
@keyframes hallnote-dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hallnote-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hallnote-toast-in {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes hallnote-message-in { from { opacity: .25; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .button, .icon-button, .small-button, .nav-item, .teacher-item,
  .empty-state button, .assignment-card, .brand-mark {
    translate: none !important;
    scale: none !important;
    rotate: none !important;
  }
}