/* A restrained motion and polish layer shared by public and staff screens. */
:root {
  --motion-ease: cubic-bezier(.2,.75,.25,1);
  --motion-shadow: 0 20px 55px rgba(0,0,0,.24);
}
html { scroll-behavior: smooth; }
body { isolation: isolate; }
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  opacity: .32; background: radial-gradient(ellipse at 12% 8%, color-mix(in srgb,var(--brand-accent) 14%,transparent),transparent 36%),
    radial-gradient(ellipse at 88% 84%,rgba(46,115,155,.09),transparent 34%);
  animation: ambient-drift 28s ease-in-out infinite alternate;
}
.top { position: relative; z-index: 10; box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.top::after { content:""; position:absolute; bottom:-3px; left:0; width:34%; height:3px; background:linear-gradient(90deg,var(--brand-accent),transparent); animation:line-travel 8s ease-in-out infinite alternate; }
.brand-mark { transition:transform .45s var(--motion-ease),box-shadow .45s,border-radius .45s; }
.brand:hover .brand-mark { transform:rotate(-7deg) scale(1.06); box-shadow:0 0 25px color-mix(in srgb,var(--brand-accent) 28%,transparent); }
.nav { scrollbar-width:thin; scrollbar-color:var(--brand-accent) transparent; }
.nav a { position:relative; transition:color .22s ease,background .22s ease; }
.nav a::after { content:""; position:absolute; height:2px; bottom:0; left:50%; right:50%; background:var(--brand-accent); transition:left .25s var(--motion-ease),right .25s var(--motion-ease); }
.nav a:hover::after,.nav a.on::after { left:0; right:0; }
.nav a:hover { color:#fff; }
.container { animation:page-enter .58s var(--motion-ease) both; }
.page-head { animation:rise-in .55s .04s var(--motion-ease) both; }
.page-head h1 { text-wrap:balance; }
.panel,.stat,.feature,.unit-card,.team-card,.task-card,.service-card,.application-card,.request-card {
  position:relative; overflow:hidden; transform:translateZ(0);
  transition:transform .3s var(--motion-ease),border-color .3s,box-shadow .3s,background-color .3s;
}
.panel::before,.stat::before,.feature::before,.team-card::before,.task-card::before,.service-card::before {
  content:""; position:absolute; top:0; left:0; width:100%; height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand-accent) 62%,transparent),transparent);
  opacity:.45; transform:scaleX(.38); transform-origin:left; transition:transform .4s var(--motion-ease),opacity .3s;
}
.panel:hover,.stat:hover,.feature:hover,.unit-card:hover,.team-card:hover,.task-card:hover,.service-card:hover,.application-card:hover,.request-card:hover {
  transform:translateY(-4px); border-color:color-mix(in srgb,var(--brand-accent) 38%,var(--line)); box-shadow:var(--motion-shadow);
}
.panel:hover::before,.stat:hover::before,.feature:hover::before,.team-card:hover::before,.task-card:hover::before,.service-card:hover::before { transform:scaleX(1); opacity:1; }
.stat { animation:rise-in .55s var(--motion-ease) both; }
.dashboard-stats .stat:nth-child(2),.stats .stat:nth-child(2) { animation-delay:.06s; }
.dashboard-stats .stat:nth-child(3),.stats .stat:nth-child(3) { animation-delay:.12s; }
.dashboard-stats .stat:nth-child(4),.stats .stat:nth-child(4) { animation-delay:.18s; }
.stat strong { transition:color .25s,transform .25s; }
.stat:hover strong { color:var(--brand-accent); transform:translateY(-2px); }
.metric-mark,.stat-icon,.feature>span,.unit-icon,.service-icon,.team-emblem { transition:transform .35s var(--motion-ease),box-shadow .35s,color .25s; }
.panel:hover .metric-mark,.stat:hover .stat-icon,.feature:hover>span,.unit-card:hover .unit-icon,.service-card:hover .service-icon,.team-card:hover .team-emblem { transform:rotate(-7deg) scale(1.1); box-shadow:0 8px 22px color-mix(in srgb,var(--brand-accent) 18%,transparent); }
.btn,.out,.secondary,.theme-toggle,.danger-link { transition:transform .2s var(--motion-ease),filter .2s,box-shadow .2s,border-color .2s; }
.btn:hover,.out:hover,.secondary:hover,.theme-toggle:hover { transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 9px 20px rgba(0,0,0,.2); }
.btn:active,.out:active,.secondary:active,.theme-toggle:active { transform:translateY(0) scale(.98); }
.btn.primary { position:relative; overflow:hidden; }
.btn.primary::after { content:""; position:absolute; inset:-80% auto -80% -35%; width:24%; transform:translateX(-180%) rotate(18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transition:transform .7s var(--motion-ease); }
.btn.primary:hover::after { transform:translateX(650%) rotate(18deg); }
.hero { isolation:isolate; box-shadow:0 24px 70px rgba(0,0,0,.2); animation:hero-in .75s var(--motion-ease) both; }
.hero::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.25; background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.08) 48%,transparent 76%); transform:translateX(-100%); animation:hero-sheen 11s 1s ease-in-out infinite; }
.art-orb { animation:orb-float 8s ease-in-out infinite; }
.art-card { animation:float-card 7s ease-in-out infinite; }
.card-b { animation-delay:-3.4s; }
.art-orb::before,.art-orb::after { animation:orbit 22s linear infinite; }
.hero-search:focus-within { border-color:var(--brand-accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-accent) 14%,transparent); }
.feature-grid .feature:nth-child(2) { animation-delay:.08s; }
.feature-grid .feature:nth-child(3) { animation-delay:.16s; }
.feature { animation:rise-in .6s var(--motion-ease) both; }
.landing-section { animation:rise-in .6s .12s var(--motion-ease) both; }
.public-help { transition:transform .3s var(--motion-ease),border-color .3s,box-shadow .3s; }
.public-help:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--brand-accent) 35%,var(--line)); box-shadow:var(--motion-shadow); }
.status-pill i,.status-pill > i { animation:status-pulse 2.2s ease-in-out infinite; }
.table-scroll tbody tr { transition:background-color .2s,transform .2s; }
.table-scroll tbody tr:hover { transform:translateX(2px); }
.table-scroll th { position:sticky; top:0; z-index:1; backdrop-filter:blur(12px); }
input,select,textarea { transition:border-color .2s,box-shadow .2s,background-color .2s; }
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid color-mix(in srgb,var(--brand-accent) 76%,white); outline-offset:3px; }
.alert,.success,.notice-box { animation:notice-in .38s var(--motion-ease) both; }
.badge-grid .earned-badge { animation:badge-in .55s var(--motion-ease) both; transition:transform .3s,box-shadow .3s; }
.badge-grid .earned-badge:hover { transform:translateY(-5px) rotate(-1deg); box-shadow:0 15px 34px color-mix(in srgb,var(--badge-color) 15%,transparent); }
.earned-badge-icon { animation:badge-glow 4s ease-in-out infinite; }
.task-state.is-progress { animation:status-pulse 1.8s ease-in-out infinite; }
.theme-toggle { cursor:pointer; }
body.motion-enabled .reveal { opacity:0; transform:translateY(18px); transition:opacity .65s var(--motion-ease),transform .65s var(--motion-ease); transition-delay:calc(var(--reveal-order,0) * 34ms); }
body.motion-enabled .reveal.in-view { opacity:1; transform:translateY(0); }
body.theme-light::before { opacity:.54; }
body.theme-light .nav a:hover { color:#173b5c; }
body.theme-light .panel:hover,body.theme-light .stat:hover,body.theme-light .feature:hover,body.theme-light .team-card:hover,body.theme-light .task-card:hover,body.theme-light .service-card:hover { box-shadow:0 20px 45px rgba(23,59,92,.12); }
footer { transition:background-color .3s; }
@keyframes page-enter { from { opacity:0; } to { opacity:1; } }
@keyframes rise-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes hero-in { from { opacity:0; transform:translateY(12px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes ambient-drift { from { transform:translate3d(-1.5%,0,0) scale(1); } to { transform:translate3d(1.5%,1%,0) scale(1.04); } }
@keyframes line-travel { from { transform:translateX(0); opacity:.55; } to { transform:translateX(190%); opacity:1; } }
@keyframes hero-sheen { 0%,55%,100% { transform:translateX(-100%); } 72% { transform:translateX(100%); } }
@keyframes orb-float { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-11px) rotate(2deg); } }
@keyframes float-card { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes orbit { to { transform:rotate(332deg) scaleY(.43); } }
@keyframes status-pulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(83,203,148,0); } 50% { opacity:.72; box-shadow:0 0 0 6px rgba(83,203,148,.08); } }
@keyframes notice-in { from { opacity:0; transform:translateY(-7px); } to { opacity:1; transform:translateY(0); } }
@keyframes badge-in { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes badge-glow { 0%,100% { box-shadow:0 0 0 rgba(0,0,0,0); } 50% { box-shadow:0 0 22px color-mix(in srgb,var(--badge-color) 22%,transparent); } }
@media(max-width:760px) {
  .top { box-shadow:0 5px 18px rgba(0,0,0,.17); }
  .nav { scroll-snap-type:x proximity; }
  .nav a { scroll-snap-align:start; }
  .hero { box-shadow:0 15px 40px rgba(0,0,0,.18); }
  .panel:hover,.stat:hover,.feature:hover,.unit-card:hover,.team-card:hover,.task-card:hover,.service-card:hover,.application-card:hover,.request-card:hover { transform:translateY(-2px); }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  body.motion-enabled .reveal { opacity:1; transform:none; }
}