/* ZENKIDS Enterprise Motion System v18.1.6
   Global premium motion for every visual page.
   Principles: calm hierarchy, slightly longer transitions, accessibility,
   compositor-first animation, and a branded navigation/refresh loader. */
:root{
  --motion-instant:120ms;
  --motion-fast:250ms;
  --motion-ui:390ms;
  --motion-standard:520ms;
  --motion-slow:720ms;
  --motion-page:900ms;
  --motion-enter:980ms;
  --motion-chart:1420ms;
  --motion-stagger:78ms;
  --motion-loader-exit:520ms;
  --motion-ease-standard:cubic-bezier(.2,0,0,1);
  --motion-ease-emphasized:cubic-bezier(.2,.8,.2,1);
  --motion-ease-exit:cubic-bezier(.4,0,1,1);
  --motion-ease-spring:cubic-bezier(.16,1,.3,1);
}

html{scroll-behavior:smooth}
body{--motion-lift:-2px}

/* Long-form sections keep anchor targets clear of sticky navigation. */
[id]{scroll-margin-top:96px}

/* Header state changes happen only around the scroll threshold, so a slightly
   longer transition is visually calmer without adding per-frame layout work. */
body.motion-enabled .site-header{
  transition:background-color 520ms var(--motion-ease-standard),box-shadow 620ms var(--motion-ease-standard),transform 620ms var(--motion-ease-standard);
}

/* --------------------------------------------------------------------------
   GLOBAL PAGE LOADER
   The class is present in server-rendered HTML so refreshes have immediate
   feedback before the application JS is fully parsed. No layout shift.
   -------------------------------------------------------------------------- */
html.zk-loader-ready{--zk-loader-opacity:0}
html.zk-loader-ready.zk-loading{--zk-loader-opacity:1;cursor:progress}
html.zk-loader-ready.zk-loading body{overflow:hidden}

html.zk-loader-ready::before,
html.zk-loader-ready::after,
html.zk-loader-ready body::before,
html.zk-loader-ready body::after{
  pointer-events:none;
  position:fixed;
  opacity:var(--zk-loader-opacity);
  transition:opacity var(--motion-loader-exit) var(--motion-ease-standard),transform var(--motion-loader-exit) var(--motion-ease-standard);
}
html.zk-loader-ready::before{
  content:"";
  inset:0;
  z-index:2147483000;
  background:
    radial-gradient(circle at 50% 43%,rgba(14,145,138,.075),transparent 31%),
    rgba(246,250,249,.982);
}
html.zk-loader-ready::after{
  content:"";
  z-index:2147483002;
  left:50%;top:50%;
  width:82px;height:82px;
  border-radius:24px;
  transform:translate3d(-50%,-62%,0) scale(.965);
  background:#fff url('zenkids-logo.png') center/52px auto no-repeat;
  border:1px solid rgba(10,111,108,.12);
  box-shadow:0 22px 65px rgba(7,59,76,.16),0 5px 16px rgba(7,59,76,.08);
}
html.zk-loader-ready.zk-loading::after{transform:translate3d(-50%,-62%,0) scale(1)}
html.zk-loader-ready body::before{
  content:"";
  z-index:2147483003;
  left:50%;top:50%;
  width:104px;height:104px;
  border-radius:999px;
  transform:translate3d(-50%,-59%,0);
  background:conic-gradient(from 25deg,rgba(13,145,138,0),rgba(13,145,138,.12) 28%,rgba(13,145,138,.88) 72%,rgba(143,208,82,.92));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  animation:none;
}
html.zk-loader-ready.zk-loading body::before{animation:zk-loader-spin 1.35s linear infinite}
html.zk-loader-ready body::after{
  content:attr(data-loading-label);
  z-index:2147483003;
  left:50%;top:calc(50% + 64px);
  transform:translate3d(-50%,0,0);
  color:#3e5c65;
  font:700 11px/1.4 Inter,Manrope,"Segoe UI",Arial,sans-serif;
  letter-spacing:.085em;
  text-transform:uppercase;
  white-space:nowrap;
}
@keyframes zk-loader-spin{to{transform:translate3d(-50%,-59%,0) rotate(360deg)}}

/* Slim progress accent for navigation/form submission before the next page paints. */
html.zk-navigating::before{background:rgba(246,250,249,.94)}
html.zk-navigating body::after{content:attr(data-loading-label)}

/* Progressive cross-document transition. Browsers without it ignore this. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:zk-page-out 320ms var(--motion-ease-exit) both}
::view-transition-new(root){animation:zk-page-in var(--motion-page) var(--motion-ease-standard) both}
@keyframes zk-page-out{to{opacity:.78}}
@keyframes zk-page-in{from{opacity:.72}to{opacity:1}}

/* Global page shell animation hooks. GPU hints are applied only while an
   element is actually moving; permanent will-change on a long page wastes
   compositor memory and can itself cause jank. */
body.motion-enabled .zk-page-root,
body.motion-enabled .zk-page-block{backface-visibility:hidden}

/* Interactive surfaces */
body.motion-enabled .motion-interactive{
  transition:
    transform var(--motion-standard) var(--motion-ease-standard),
    border-color var(--motion-ui) var(--motion-ease-standard),
    background-color var(--motion-ui) var(--motion-ease-standard),
    opacity var(--motion-ui) var(--motion-ease-standard);
}
@media (hover:hover) and (pointer:fine){
  body.motion-enabled .motion-interactive:hover{transform:translate3d(0,var(--motion-lift),0)}
}
body.motion-save-data .premium-hover:after{display:none!important}

/* Buttons: deliberate, smooth, and not bouncy. */
body.motion-enabled .btn,
body.motion-enabled button,
body.motion-enabled .primary,
body.motion-enabled .secondary,
body.motion-enabled .danger,
body.motion-enabled .submit,
body.motion-enabled .top-btn,
body.motion-enabled .access-role-btn{
  transition:
    transform var(--motion-fast) var(--motion-ease-standard),
    background-color var(--motion-ui) var(--motion-ease-standard),
    border-color var(--motion-ui) var(--motion-ease-standard),
    color var(--motion-ui) var(--motion-ease-standard),
    opacity var(--motion-ui) var(--motion-ease-standard);
  -webkit-tap-highlight-color:transparent;
}
body.motion-enabled .btn:active,
body.motion-enabled button:active,
body.motion-enabled .primary:active,
body.motion-enabled .secondary:active,
body.motion-enabled .danger:active,
body.motion-enabled .submit:active{transform:translate3d(0,0,0) scale(.982)}
body.motion-enabled button:disabled,
body.motion-enabled .btn[aria-disabled="true"],
body.motion-enabled input:disabled,
body.motion-enabled select:disabled{cursor:not-allowed;opacity:.62}

/* Navigation / shell polish */
body.motion-enabled .admin-sidebar nav a,
body.motion-enabled .side-nav a,
body.motion-enabled .role-switch a,
body.motion-enabled .footer-links a,
body.motion-enabled .legal-list>a,
body.motion-enabled .desktop-nav a,
body.motion-enabled .mobile-nav a,
body.motion-enabled .links a,
body.motion-enabled .actions a{
  transition:
    background-color var(--motion-ui) var(--motion-ease-standard),
    color var(--motion-ui) var(--motion-ease-standard),
    border-color var(--motion-ui) var(--motion-ease-standard),
    transform var(--motion-ui) var(--motion-ease-standard),
    opacity var(--motion-ui) var(--motion-ease-standard);
}
@media (hover:hover) and (pointer:fine){
  body.motion-enabled .admin-sidebar nav a:hover,
  body.motion-enabled .side-nav a:hover{transform:translate3d(2px,0,0)}
}

/* Mobile drawer: compositor-based, with a real scrim controlled by app-shell.js. */
.shell-scrim{
  position:fixed;inset:0;z-index:45;background:rgba(3,29,42,.42);
  opacity:0;pointer-events:none;
  transition:opacity var(--motion-slow) var(--motion-ease-standard);
}
body.sidebar-open{overflow:hidden}
body.sidebar-open .shell-scrim{opacity:1;pointer-events:auto}
@media(max-width:900px){
  body.motion-enabled .portal-sidebar{
    left:0!important;
    transform:translate3d(-104%,0,0);
    transition:transform var(--motion-slow) var(--motion-ease-emphasized)!important;
    will-change:auto;
  }
  body.motion-enabled.sidebar-open .portal-sidebar,
  body.motion-enabled .portal-sidebar.open{transform:translate3d(0,0,0);will-change:transform}
}
@media(max-width:800px){
  body.motion-enabled .admin-sidebar{
    transform:translate3d(-104%,0,0);
    transition:transform var(--motion-slow) var(--motion-ease-emphasized)!important;
    will-change:auto;
  }
  body.motion-enabled.sidebar-open .admin-sidebar,
  body.motion-enabled .admin-sidebar.open{transform:translate3d(0,0,0);will-change:transform}
}

/* Landing mobile navigation: compositor-only dropdown. Avoid max-height and
   padding animation because both trigger layout on every frame. */
@media(max-width:980px){
  body.motion-enabled .site-header{overflow:visible}
  body.motion-enabled .mobile-nav{
    display:flex!important;
    position:absolute;left:0;right:0;top:100%;
    max-height:calc(100vh - 76px);overflow:auto;
    opacity:0;visibility:hidden;pointer-events:none;
    transform-origin:50% 0;
    transform:translate3d(0,-12px,0) scaleY(.985);
    transition:
      opacity var(--motion-ui) var(--motion-ease-standard),
      transform var(--motion-slow) var(--motion-ease-emphasized),
      visibility 0s linear var(--motion-slow);
    box-shadow:0 18px 42px rgba(5,38,59,.10);
  }
  body.motion-enabled .mobile-nav.open{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translate3d(0,0,0) scaleY(1);
    transition-delay:0s;
  }
  body.motion-enabled .menu-toggle span{
    transform-origin:center;
    transition:transform var(--motion-ui) var(--motion-ease-emphasized),opacity var(--motion-fast) ease;
  }
  body.motion-enabled .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.motion-enabled .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.35)}
  body.motion-enabled .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* Charts: final geometry always exists; reveal is compositor-only. */
body.motion-enabled .bar,
body.motion-enabled .fbar,
body.motion-enabled .finance-bars i,
body.motion-enabled .chart-bars i{transform-origin:50% 100%}
body.motion-enabled .origin-bar i,
body.motion-enabled .progress i,
body.motion-enabled .live-progress i,
body.motion-enabled .funding-progress i,
body.motion-enabled .mini-progress i{transform-origin:0 50%}
body.motion-enabled .team-donut,
body.motion-enabled .funds-donut{transform-origin:50% 50%}

/* Live progress bars should glide to fresh API values. */
body.motion-enabled .progress i,
body.motion-enabled .live-progress i,
body.motion-enabled .funding-progress i,
body.motion-enabled .mini-progress i{
  transition:transform var(--motion-slow) var(--motion-ease-emphasized);
}

/* Forms: precise and calm. */
body.motion-enabled input,
body.motion-enabled select,
body.motion-enabled textarea{
  transition:
    border-color var(--motion-fast) var(--motion-ease-standard),
    box-shadow var(--motion-ui) var(--motion-ease-standard),
    background-color var(--motion-ui) var(--motion-ease-standard),
    transform var(--motion-fast) var(--motion-ease-standard);
}
body.motion-enabled input:focus,
body.motion-enabled select:focus,
body.motion-enabled textarea:focus{transform:translate3d(0,-1px,0)}

/* Dense enterprise data remains calm. */
body.motion-enabled .table-wrap tbody tr,
body.motion-enabled .data-table tbody tr,
body.motion-enabled table tbody tr{
  transition:background-color var(--motion-fast) var(--motion-ease-standard);
}
@media (hover:hover) and (pointer:fine){
  body.motion-enabled .table-wrap tbody tr:hover,
  body.motion-enabled .data-table tbody tr:hover,
  body.motion-enabled table tbody tr:hover{background-color:rgba(16,145,138,.035)}
}

/* Status changes and flash messages. */
body.motion-enabled .alert,
body.motion-enabled .message,
body.motion-enabled .portal-alert,
body.motion-enabled .form-status,
body.motion-enabled .msg,
body.motion-enabled .ok,
body.motion-enabled .err{
  transition:opacity var(--motion-ui) var(--motion-ease-standard),transform var(--motion-ui) var(--motion-ease-standard),background-color var(--motion-ui) var(--motion-ease-standard);
}

/* Stable fallback: animation may fail; content must not. */
.motion-done{opacity:1!important;transform:none!important}
.motion-running{backface-visibility:hidden;will-change:transform,opacity}

@media(max-width:760px){
  :root{--motion-page:780ms;--motion-enter:860ms;--motion-chart:1220ms;--motion-stagger:64ms}
  body{--motion-lift:-1px}
  html.zk-loader-ready::after{width:74px;height:74px;border-radius:22px;background-size:46px}
  html.zk-loader-ready body::before{width:94px;height:94px}
  html.zk-loader-ready body::after{top:calc(50% + 58px);font-size:10px}
}
/* --------------------------------------------------------------------------
   PERFORMANCE OVERRIDES
   -------------------------------------------------------------------------- */
/* Sticky backdrop blur forces repaints while scrolling. Use a nearly opaque
   surface instead; visually equivalent, materially cheaper to render. */
body.motion-enabled .site-header{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:rgba(255,255,255,.985);
  backface-visibility:hidden;
}
body.motion-enabled .admin-top,
body.motion-enabled .topbar,
body.motion-enabled .head{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  backface-visibility:hidden;
}

/* Scroll progress is transform-based: no layout / width recalculation per frame. */
body.motion-enabled .scroll-progress i{
  width:100%!important;
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:none!important;
  will-change:transform;
}

/* Pointer spotlight moves a pre-rasterized radial layer rather than repainting
   a gradient whose center changes on every pointermove. */
body.motion-enabled .premium-hover:after{
  inset:auto!important;right:auto!important;bottom:auto!important;
  left:0!important;top:0!important;width:320px;height:320px;
  background:radial-gradient(circle at 50% 50%,rgba(25,195,189,.09),transparent 64%)!important;
  transform:translate3d(calc(var(--mx,160px) - 160px),calc(var(--my,160px) - 160px),0);
  transition:opacity var(--motion-ui) var(--motion-ease-standard)!important;
}
@media (hover:hover) and (pointer:fine){
  body.motion-enabled .premium-hover:hover:after{will-change:transform,opacity}
}
body.motion-lite .premium-hover:after,
body.motion-save-data .premium-hover:after{display:none!important}

/* Avoid expensive filter work while a page is entering. */
body.motion-enabled .zk-page-root,
body.motion-enabled .zk-page-block{transform-style:flat}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .motion-done{opacity:1!important;transform:none!important}
  .mobile-nav{transform:none!important}
  html.zk-loader-ready::before,
  html.zk-loader-ready::after,
  html.zk-loader-ready body::before,
  html.zk-loader-ready body::after{transition:opacity 1ms linear!important}
}