/* Motion layer: theme change, login page entrances, and button / tab feedback.
   Everything here is decoration — the reduced-motion block at the end turns it off. */

/* ---------- Theme change ---------- */
/* The new theme is revealed by a circle the script grows from the toggle; the old one stays put beneath it. */
:root[data-vt="theme"]::view-transition-old(root),
:root[data-vt="theme"]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
:root[data-vt="theme"]::view-transition-old(root) { z-index: 0; }
:root[data-vt="theme"]::view-transition-new(root) { z-index: 1; }
/* Fallback for browsers without view transitions: colours ease across instead of snapping. */
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after {
  transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease), fill .6s var(--ease), stroke .6s var(--ease), box-shadow .6s var(--ease) !important;
}
.theme-toggle .icon { transition: transform .5s var(--ease); }
.theme-toggle:hover .icon { transform: rotate(-18deg); }
.theme-toggle.spun .icon { animation: theme-spin .7s var(--ease); }
@keyframes theme-spin { from { transform: rotate(-120deg) scale(.4); opacity: 0; } }

/* ---------- Route change to / between the login pages ---------- */
:root[data-vt="page"] .site-header,
:root[data-vt="forward"] .site-header,
:root[data-vt="back"] .site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation-duration: .5s; }

:root[data-vt="page"]::view-transition-old(root) { animation: vt-out .32s cubic-bezier(.4, 0, 1, 1) both; }
:root[data-vt="page"]::view-transition-new(root) { animation: vt-in .5s var(--ease) .08s both; }
:root[data-vt="forward"]::view-transition-old(root) { animation: vt-out-left .4s cubic-bezier(.4, 0, 1, 1) both; }
:root[data-vt="forward"]::view-transition-new(root) { animation: vt-in-right .6s var(--ease) .06s both; }
:root[data-vt="back"]::view-transition-old(root) { animation: vt-out-right .4s cubic-bezier(.4, 0, 1, 1) both; }
:root[data-vt="back"]::view-transition-new(root) { animation: vt-in-left .6s var(--ease) .06s both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); filter: blur(2px); } }
@keyframes vt-in { from { opacity: 0; } }
@keyframes vt-out-left { to { opacity: 0; transform: translateX(-6%); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(6%); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(6%); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(-6%); } }

/* Pieces of the page rise in one after another. --enter-t lets a re-render continue mid-animation. */
.auth-enter :is(.auth-student-top, .auth-intro > *, .auth-card, .auth-help, .auth-teacher-kicker, .auth-teacher-banner > h1, .auth-teacher-banner > p, .auth-teacher-aside > *) {
  animation: rise .9s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms + 60ms + var(--enter-t, 0ms));
}
.auth-enter .auth-teacher-banner { animation: banner-in 1s var(--ease) both; animation-delay: var(--enter-t, 0ms); }
.auth-enter .auth-card { animation-name: card-in; }
.auth-enter .auth-student-top, .auth-enter .auth-teacher-kicker { --i: 0; }
.auth-enter .auth-intro > :nth-child(1), .auth-enter .auth-teacher-banner > h1 { --i: 1; }
.auth-enter .auth-intro > :nth-child(2), .auth-enter .auth-teacher-banner > p { --i: 2; }
.auth-enter .auth-intro > :nth-child(3) { --i: 3; }
.auth-enter .auth-intro > :nth-child(4), .auth-enter .auth-card { --i: 4; }
.auth-enter .auth-intro > :nth-child(5), .auth-enter .auth-teacher-aside > :nth-child(1) { --i: 5; }
.auth-enter .auth-help, .auth-enter .auth-teacher-aside > :nth-child(2) { --i: 6; }
.auth-enter .auth-teacher-aside > :nth-child(n+3) { --i: 7; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes card-in { from { opacity: 0; transform: translateY(34px) scale(.98); } }
@keyframes banner-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

.auth-switch { transition: color .3s var(--ease), border-color .3s var(--ease), gap .4s var(--ease); }
.auth-switch:hover { color: var(--red); border-color: var(--red); gap: 18px; }

/* ---------- Create / Sign in slider ---------- */
.auth-tabs { position: relative; isolation: isolate; }
.auth-tabs::before {
  content: ''; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--surface); box-shadow: 0 1px 0 var(--line-strong), 0 0 0 1px var(--line);
  transition: transform .5s var(--ease);
}
.auth-tabs:has(button:last-child.on)::before { transform: translateX(100%); }
.auth-tabs[data-from="create"]::before { animation: pill-right .5s var(--ease); }
.auth-tabs[data-from="signin"]::before { animation: pill-left .5s var(--ease); }
@keyframes pill-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes pill-left { from { transform: translateX(100%); } to { transform: translateX(0); } }
.auth-tabs button, .auth-tabs button.on { position: relative; overflow: hidden; background: transparent; box-shadow: none; transition: color .35s var(--ease); }
.auth-pane { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.auth-pane.swapped > * { animation: rise .55s var(--ease) both; }
.auth-pane.swapped > :nth-child(2) { animation-delay: .04s; }
.auth-pane.swapped > :nth-child(n+3) { animation-delay: .08s; }
.auth-tabs[data-from="signin"] + .auth-pane.swapped > * { animation-name: slide-from-left; }
.auth-tabs[data-from="create"] + .auth-pane.swapped > * { animation-name: slide-from-right; }
@keyframes slide-from-right { from { opacity: 0; transform: translateX(18px); } }
@keyframes slide-from-left { from { opacity: 0; transform: translateX(-18px); } }

/* Other segmented filters get eased highlight changes. */
.filter-tabs button { position: relative; overflow: hidden; transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease); }
.filter-tabs button:active { transform: scale(.96); }
.filter-tabs button.selected { animation: tab-pick .4s var(--ease); }
@keyframes tab-pick { from { box-shadow: 0 2px 0 0 transparent; } }

/* ---------- Buttons ---------- */
.button { overflow: hidden; isolation: isolate; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.button:not(:disabled):hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 22px -12px color-mix(in srgb, var(--b-bg) 70%, #000); }
.button.secondary:not(:disabled):hover { box-shadow: 0 10px 22px -14px rgba(17, 18, 20, .35); }
.button:not(:disabled):active { transform: translateY(0) scale(.97); transition-duration: .1s; }
.icon-button { position: relative; overflow: hidden; transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.icon-button:hover { transform: scale(1.06); border-color: var(--ink-2); }
.icon-button:active { transform: scale(.92); transition-duration: .1s; }
.text-button { transition: color .3s var(--ease); }
:is(.button, .icon-button, .auth-tabs button, .filter-tabs button):focus-visible { transition: outline-offset .2s var(--ease); outline-offset: 3px; }

.ripple {
  position: absolute; z-index: 0; width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%; background: currentColor; opacity: .22; pointer-events: none;
  transform: scale(0); animation: ripple .65s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* Form fields ease into focus. */
.auth-card .field :is(input, select) { transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease); }
.auth-card .field :is(input, select):focus { box-shadow: 0 0 0 4px var(--red-soft); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .ripple { display: none; }
}