:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
.auth-layout { animation: motion-dialog 420ms var(--motion-ease) backwards; }
.btn, .icon-button, .filter, .chip, .subject-shortcuts button {
  transition: transform 160ms var(--motion-ease), background-color 180ms ease, box-shadow 180ms ease;
}
button:not(:disabled):active { transform: scale(.96); }
button:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover, .icon-button:hover { transform: translateY(-2px); }
  .lesson img { transition: transform 420ms var(--motion-ease); }
  .lesson:hover img { transform: translateY(-5px) rotate(2deg); }
}
.nav-item, .mobile-nav button { position: relative; isolation: isolate; }
.motion-nav-active { background: transparent !important; }
.motion-nav-selection { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: #25243d; pointer-events: none; }
.mobile-nav .motion-nav-selection { background: #fac79f; }
.progress-line > span, .progress > span { transform-origin: left center; }
dialog[open] { animation: motion-dialog 240ms var(--motion-ease) both; }
dialog[open]::backdrop { animation: motion-backdrop 180ms ease both; }
.live-clock, .timer-wrap { position: relative; transition: border-color 200ms ease; }
.live-clock.motion-running { border-color: #ae9ddd; }
.motion-running::after { content: ''; position: absolute; inset: -8px; border: 2px solid #9b8acc; border-radius: 50%; pointer-events: none; opacity: 0; animation: motion-breathe 1600ms ease-out 2; }
.timer-ring .elapsed { transition: stroke-dashoffset 800ms linear; }
.motion-celebration { position: fixed; z-index: 200; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; }
.motion-seal { position: absolute; width: 62px; height: 62px; left: -31px; top: -31px; display: grid; place-items: center; border-radius: 50%; background: #fac79f; color: #25243d; box-shadow: 0 8px 26px #25243d24; }
.motion-seal svg { width: 30px; height: 30px; stroke-width: 2.3; }
.motion-spark { position: absolute; opacity: 0; width: 11px; height: 15px; left: -5px; top: -7px; border-radius: 3px; background: #8a77c8; }
.motion-spark.spark-1 { background: #f2b982; width: 10px; height: 10px; transform: rotate(45deg); }
.motion-spark.spark-2 { background: #73aaa5; }
@keyframes motion-dialog { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes motion-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes motion-breathe { 0% { opacity: .35; transform: scale(.98); } 100% { opacity: 0; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  button:not(:disabled):active, .btn:not(:disabled):hover, .lesson:hover img { transform: none; }
  .motion-celebration { display: none; }
}
@media print { .motion-celebration { display: none !important; } *, *::before, *::after { animation: none !important; transition: none !important; } }