/*
 * FK SCHOOL ERP – motion layer. Adds transitions to the prototype's components without
 * changing their layout, colours or typography. prefers-reduced-motion disables all of it
 * (the base stylesheet already switches animations and transitions off).
 */
:root { --fk-ease: cubic-bezier(.2, .8, .2, 1); --fk-ease-out: cubic-bezier(.16, 1, .3, 1); }

@keyframes fk-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fk-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fk-pop-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes fk-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes fk-shimmer { from { background-position: -320px 0; } to { background-position: 320px 0; } }
@keyframes fk-busy { 0% { transform: translateX(-100%); } 60% { transform: translateX(40%); } 100% { transform: translateX(100%); } }
@keyframes fk-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes fk-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes fk-toast-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes fk-flash { 0% { box-shadow: inset 0 3px 0 var(--sky); } 100% { box-shadow: inset 0 3px 0 transparent; } }

/* ---------- page & card entrance ---------- */
#page.fk-enter > .pagehead, #page.fk-enter > .crumbs { animation: fk-rise .32s var(--fk-ease-out) both; }
#page.fk-enter > .kpis > .kpi,
#page.fk-enter > .card,
#page.fk-enter > .dgrid > .card,
#page.fk-enter > .cgrid > .card,
#page.fk-enter > .filters,
#page.fk-enter > .tabs,
#page.fk-enter > .note,
#page.fk-enter > .locked { animation: fk-rise .42s var(--fk-ease-out) both; animation-delay: calc(var(--fk-i, 0) * 35ms + 40ms); }
.pbody.fk-enter > * { animation: fk-rise .36s var(--fk-ease-out) both; animation-delay: calc(var(--fk-i, 0) * 40ms); }
.login.fk-enter .lbinner { animation: fk-rise .6s var(--fk-ease-out) both; }
.login.fk-enter .lcard { animation: fk-pop .5s var(--fk-ease-out) .08s both; }
.login.fk-enter .creds { animation: fk-rise .5s var(--fk-ease-out) .18s both; }
.login .lbrand::after { transition: transform 1.2s var(--fk-ease); }
.login.fk-enter .lbrand::after { animation: fk-fade 1.2s ease both; }

/* ---------- interactive surfaces ---------- */
.btn, .icon-btn, .chip, .seg, .qa button, .kcard, .clcard, .dorm, .bed, .ttc, .credgrid button, .mquick button, .jgrid button, .kid, .tabs button, .ptabs button, .ngitems a, .nghead {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .16s var(--fk-ease);
}
.btn:active:not(:disabled), .icon-btn:active, .chip:active, .qa button:active, .mquick button:active, .jgrid button:active, .credgrid button:active { transform: scale(.97); }
.kpi[role=button], .clcard, .dorm, .kcard, .credgrid button, .kid, .demo-card { transition: transform .2s var(--fk-ease), border-color .18s ease, box-shadow .2s ease; }
.kpi[role=button]:hover, .clcard:hover, .dorm:hover, .kcard:hover, .credgrid button:hover, .kid:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tbl tr.click td, .list li.click, .notifs li { transition: background-color .15s ease; }
.tabs button { position: relative; }
.ngitems a.on { box-shadow: 0 2px 10px rgba(42, 165, 221, .25); }
.meter span, .hbt span, .fnt span { transition: width .7s var(--fk-ease); }
#page.fk-enter .meter span, #page.fk-enter .hbt span, #page.fk-enter .fnt span { animation: fk-grow .8s var(--fk-ease-out) both; transform-origin: left; }
@keyframes fk-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#page.fk-enter .chart svg { animation: fk-fade .6s ease .15s both; }

/* ---------- navigation ---------- */
.ngroup.fk-opening .ngitems { animation: fk-drop .22s var(--fk-ease-out) both; }
.dropdown:not([hidden]) { animation: fk-drop .16s var(--fk-ease-out); transform-origin: top; }
.shell { transition: grid-template-columns .25s var(--fk-ease); }
.side { transition: transform .25s var(--fk-ease); }

/* ---------- dialogs & toasts ---------- */
.mback { animation: fk-fade .18s ease; }
.mback .modal { animation: fk-pop .26s var(--fk-ease-out); }
.mback.fk-closing { animation: fk-fade .17s ease reverse forwards; }
.mback.fk-closing .modal { animation: fk-pop-out .17s ease forwards; }
.toast { position: relative; overflow: hidden; animation: fk-pop .28s var(--fk-ease-out); }
.toast::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; opacity: .25; transform-origin: left; animation: fk-toast-life 3.6s linear forwards; }

/* ---------- forms: live validation ---------- */
.fld input, .fld select, .fld textarea, .lcard input { transition: border-color .18s ease, box-shadow .18s ease; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .lcard input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input.fk-valid, select.fk-valid, textarea.fk-valid { border-color: color-mix(in srgb, var(--ok) 60%, var(--line-strong)); }
.err.fk-err-in { animation: fk-shake .28s ease; display: inline-block; }

/* ---------- tables ---------- */
.fk-rows-in tbody tr { animation: fk-fade .22s ease both; }
.fk-rows-in .empty { animation: fk-rise .25s var(--fk-ease-out) both; }

/* ---------- notifications ---------- */
.count.fk-pulse { animation: fk-pulse .45s var(--fk-ease); }

/* ---------- theme switch: colours glide instead of snapping ---------- */
html.fk-theme-shift, html.fk-theme-shift * { transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease !important; }

/* ---------- server activity & sync status ---------- */
html.fk-busy::after { content: ""; position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 2px; z-index: 300; background: linear-gradient(90deg, transparent, var(--sky), var(--accent), transparent); animation: fk-busy 1s ease-in-out infinite; pointer-events: none; }
html.fk-live-flash #page { animation: fk-flash .7s ease; }
.demo-ribbon { display: flex; gap: 10px; align-items: center; }
.fk-sync { margin-left: auto; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; opacity: .9; }
.fk-sync:empty { display: none; }
.fk-sync::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.fk-sync.saving::before { background: var(--warn); animation: fk-pulse .9s ease infinite; }
.fk-sync.offline { color: var(--bad); }
.fk-sync.offline::before { background: var(--bad); }

/* ---------- loading skeleton ---------- */
.fk-skel .sk { display: block; height: 12px; margin: 8px 0; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 0, var(--line) 50%, var(--surface-2) 100%); background-size: 640px 100%; animation: fk-shimmer 1.2s linear infinite; }
.fk-skel .side .sk { background: linear-gradient(90deg, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, .05) 100%); background-size: 640px 100%; }
.fk-skel .sk-nav { height: 26px; margin: 10px 4px; }