/* ============================================================
   MMUST CU Motion System — Phase 36.4
   Purpose: polished, restrained, accessible motion across
   Public Website, Member Portal and Admin.
   No gradients. No continuous decorative motion.
   ============================================================ */

:root{
  --motion-fast:180ms;
  --motion-base:420ms;
  --motion-slow:680ms;
  --motion-hero:820ms;
  --motion-ease:cubic-bezier(.22,.78,.22,1);
  --motion-ease-out:cubic-bezier(.16,1,.3,1);
  --motion-ease-in:cubic-bezier(.55,.05,.68,.53);
  --motion-distance:18px;
  --motion-lift:-5px;
  --motion-shadow:0 18px 38px rgba(0,0,0,.12);
  --motion-shadow-soft:0 12px 28px rgba(0,0,0,.09);
}

/* Progressive enhancement: content is never hidden unless JS explicitly
   marks the document as motion-capable. */
html.motion-capable{scroll-behavior:smooth}
html.motion-capable body{
  animation:motion-page-enter var(--motion-base) var(--motion-ease-out) both;
}
html.motion-capable body[data-motion-surface="admin"]{
  animation-duration:300ms;
}

/* Cross-document view transitions where the browser supports them. */
@view-transition{navigation:auto}
::view-transition-old(root){
  animation:motion-view-old 160ms var(--motion-ease-in) both;
}
::view-transition-new(root){
  animation:motion-view-new 360ms var(--motion-ease-out) both;
}

/* Navigation progress accent. Created only during internal navigation. */
.motion-route-progress{
  position:fixed;
  z-index:9999;
  top:0;
  left:0;
  width:100%;
  height:3px;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
}
.motion-route-progress::before{
  content:"";
  display:block;
  width:42%;
  height:100%;
  background:#0099FF;
  transform:translateX(-115%);
}
.motion-route-progress::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:18%;
  height:100%;
  background:#FF9900;
  transform:translateX(115%);
}
.motion-route-progress.is-active{opacity:1}
.motion-route-progress.is-active::before{
  animation:motion-route-blue 760ms var(--motion-ease-out) forwards;
}
.motion-route-progress.is-active::after{
  animation:motion-route-orange 760ms 80ms var(--motion-ease-out) forwards;
}

/* Scroll reveal primitives. */
html.motion-capable .motion-reveal{
  opacity:0;
  transform:translate3d(0,var(--motion-distance),0) scale(.992);
  transition:
    opacity var(--motion-slow) var(--motion-ease-out),
    transform var(--motion-slow) var(--motion-ease-out);
  transition-delay:calc(var(--motion-order,0) * 55ms);
  will-change:opacity,transform;
}
html.motion-capable .motion-reveal.motion-reveal-left{
  transform:translate3d(-22px,0,0);
}
html.motion-capable .motion-reveal.motion-reveal-right{
  transform:translate3d(22px,0,0);
}
html.motion-capable .motion-reveal.motion-reveal-scale{
  transform:translate3d(0,8px,0) scale(.96);
}
html.motion-capable .motion-reveal.motion-reveal-soft{
  transform:translate3d(0,10px,0);
}
html.motion-capable .motion-reveal.is-motion-visible{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* Above-the-fold hero sequence. */
html.motion-capable .motion-hero-item{
  opacity:0;
  transform:translate3d(0,20px,0);
  animation:motion-hero-in var(--motion-hero) var(--motion-ease-out) forwards;
  animation-delay:calc(80ms + (var(--motion-order,0) * 85ms));
}
html.motion-capable .motion-hero-media{
  opacity:0;
  transform:translate3d(18px,0,0) scale(.97);
  animation:motion-hero-media-in 900ms var(--motion-ease-out) forwards;
  animation-delay:220ms;
}

/* Image/media depth. */
.motion-media-card{overflow:hidden}
.motion-media-card img,
.motion-media-card .home-hero-image,
.motion-media-card .community-path-photo,
.motion-media-card .ministry-card-image{
  transition:transform 760ms var(--motion-ease-out),filter 500ms ease;
  transform-origin:center;
}
@media(hover:hover) and (pointer:fine){
  .motion-media-card:hover img{transform:scale(1.028)}
  .motion-media-card:hover .ministry-card-image img{transform:scale(1.035)}
}
.motion-parallax{
  transform:translate3d(0,var(--motion-parallax-y,0px),0) scale(1.025);
  will-change:transform;
}

/* Card micro-interactions. */
.motion-lift{
  transition:
    transform var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) ease;
  transform:translate3d(0,0,0);
}
@media(hover:hover) and (pointer:fine){
  .motion-lift:hover,
  .motion-lift:focus-within{
    transform:translate3d(0,var(--motion-lift),0);
    box-shadow:var(--motion-shadow-soft);
  }
}
@media(hover:hover) and (pointer:fine){
  html.motion-capable .motion-reveal.is-motion-visible.motion-lift:hover,
  html.motion-capable .motion-reveal.is-motion-visible.motion-lift:focus-within{
    transform:translate3d(0,var(--motion-lift),0);
  }
}

/* Buttons and interactive controls. */
html.motion-capable .button,
html.motion-capable .auth-submit,
html.motion-capable .header-button,
html.motion-capable .text-link,
html.motion-capable .mmustcu-assist-launcher,
html.motion-capable .mmustcu-assist-action{
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}
@media(hover:hover) and (pointer:fine){
  html.motion-capable .button:hover,
  html.motion-capable .auth-submit:hover,
  html.motion-capable .header-button:hover,
  html.motion-capable .mmustcu-assist-action:hover{
    transform:translate3d(0,-2px,0);
  }
}
html.motion-capable .button:active,
html.motion-capable .auth-submit:active,
html.motion-capable .header-button:active,
html.motion-capable .mmustcu-assist-action:active{
  transform:translate3d(0,1px,0) scale(.985);
}

/* Navigation refinement. */
html.motion-capable .site-header,
html.motion-capable .admin-header{
  transition:box-shadow var(--motion-base) ease,border-color var(--motion-base) ease,transform var(--motion-base) var(--motion-ease);
}
html.motion-capable body.motion-scrolled .site-header,
html.motion-capable body.motion-scrolled .admin-header{
  box-shadow:0 12px 30px rgba(0,0,0,.09);
}
html.motion-capable .desktop-nav>a,
html.motion-capable .nav-submenu-trigger,
html.motion-capable .admin-main-nav>a,
html.motion-capable .admin-nav-trigger{
  transition:color var(--motion-fast) ease,transform var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) ease;
}
@media(hover:hover) and (pointer:fine){
  html.motion-capable .desktop-nav>a:hover,
  html.motion-capable .nav-submenu-trigger:hover,
  html.motion-capable .admin-main-nav>a:hover,
  html.motion-capable .admin-nav-trigger:hover{
    transform:translate3d(0,-1px,0);
  }
}
html.motion-capable .nav-submenu-panel{
  transition:
    opacity 220ms ease,
    transform 300ms var(--motion-ease-out),
    visibility 220ms ease,
    box-shadow 300ms ease;
  transform:translate3d(0,-8px,0) scale(.985);
  transform-origin:top left;
}
html.motion-capable .nav-submenu-group:hover>.nav-submenu-panel,
html.motion-capable .nav-submenu-group:focus-within>.nav-submenu-panel,
html.motion-capable .nav-submenu-group.open>.nav-submenu-panel{
  transform:translate3d(0,0,0) scale(1);
}

/* Desktop Admin dropdowns need visibility rather than display:none for motion.
   Mobile keeps the existing always-expanded grouped treatment. */
@media(min-width:981px){
  html.motion-capable .admin-nav-dropdown{
    display:grid;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(0,-8px,0) scale(.985);
    transform-origin:top;
    transition:
      opacity 180ms ease,
      transform 260ms var(--motion-ease-out),
      visibility 180ms ease;
  }
  html.motion-capable .admin-nav-group:hover>.admin-nav-dropdown,
  html.motion-capable .admin-nav-group:focus-within>.admin-nav-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate3d(0,0,0) scale(1);
  }
}

/* Existing off-canvas navigation gets a more natural easing curve. */
html.motion-capable .mobile-drawer{
  transition:transform 420ms var(--motion-ease-out),box-shadow 420ms ease;
}
html.motion-capable .member-portal-sidebar{
  transition:transform 420ms var(--motion-ease-out),box-shadow 420ms ease;
}
html.motion-capable .member-sidebar-overlay,
html.motion-capable .menu-backdrop{
  transition:opacity 280ms ease,visibility 280ms ease;
}

/* Forms: quiet, professional focus motion. */
html.motion-capable input,
html.motion-capable select,
html.motion-capable textarea{
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}
html.motion-capable input:focus,
html.motion-capable select:focus,
html.motion-capable textarea:focus{
  box-shadow:0 0 0 3px rgba(0,153,255,.12);
}
html.motion-capable .inline-check,
html.motion-capable label:has(>input[type="checkbox"]),
html.motion-capable label:has(>input[type="radio"]){
  transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease;
}

/* Alerts, status messages and badges. */
html.motion-capable .alert,
html.motion-capable .dashboard-priority-alert{
  animation:motion-alert-in 420ms var(--motion-ease-out) both;
}
html.motion-capable .pill,
html.motion-capable .registration-badge,
html.motion-capable .formation-status{
  transition:transform var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) ease,background-color var(--motion-fast) ease;
}

/* Numeric count-up receives a subtle emphasis once complete. */
.motion-counting{font-variant-numeric:tabular-nums}
.motion-count-complete{animation:motion-count-settle 260ms var(--motion-ease-out)}

/* Progress/chart reveal without changing actual calculated widths. */
html.motion-capable .motion-progress-fill{
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 760ms var(--motion-ease-out);
}
html.motion-capable .motion-progress-fill.is-motion-visible{
  transform:scaleX(1);
}

/* Lightbox. */
html.motion-capable .lightbox{
  display:flex;
  visibility:hidden;
  pointer-events:none;
  opacity:0;
  transition:opacity 260ms ease,visibility 260ms ease;
}
html.motion-capable .lightbox.open{
  visibility:visible;
  pointer-events:auto;
  opacity:1;
}
html.motion-capable .lightbox img{
  transform:scale(.955);
  opacity:0;
  transition:transform 440ms var(--motion-ease-out),opacity 300ms ease;
}
html.motion-capable .lightbox.open img{
  transform:scale(1);
  opacity:1;
}

/* Assist chatbot opening feels integrated with the rest of the platform. */
html.motion-capable .mmustcu-assist-panel{
  display:grid;
  visibility:hidden;
  pointer-events:none;
  transform-origin:bottom right;
  transform:translate3d(0,14px,0) scale(.965);
  opacity:0;
  transition:
    transform 320ms var(--motion-ease-out),
    opacity 220ms ease,
    visibility 220ms ease;
}
html.motion-capable .mmustcu-assist.is-open .mmustcu-assist-panel{
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(0,0,0) scale(1);
  opacity:1;
}
html.motion-capable .mmustcu-assist-launcher.motion-attention{
  animation:motion-assist-attention 1100ms var(--motion-ease-out) 1 both;
}

/* Member Portal: current navigation item gets a quiet arrival cue. */
html.motion-capable .portal-sidebar-nav a.is-active,
html.motion-capable .member-nav a.active{
  transition:transform var(--motion-base) var(--motion-ease-out),background-color var(--motion-fast) ease;
}
html.motion-capable .portal-sidebar-nav a.is-active{
  animation:motion-active-nav 420ms var(--motion-ease-out) both;
}

/* Tables should remain stable. Only the visible table container arrives;
   rows themselves are never translated individually. */
html.motion-capable .table-wrap{
  transition:box-shadow var(--motion-base) ease,border-color var(--motion-base) ease;
}
@media(hover:hover) and (pointer:fine){
  html.motion-capable .table tbody tr{
    transition:background-color var(--motion-fast) ease;
  }
}

/* Admin is deliberately calmer than the public site. */
body[data-motion-surface="admin"]{
  --motion-distance:12px;
  --motion-lift:-3px;
  --motion-slow:520ms;
}
body[data-motion-surface="admin"] .motion-lift:hover,
body[data-motion-surface="admin"] .motion-lift:focus-within{
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* One-time page-load hero background depth. */
html.motion-capable .home-hero-image{
  animation:motion-hero-background 1400ms var(--motion-ease-out) both;
}


/* Authentication surfaces receive a deliberate two-panel entrance. */
html.motion-capable .auth-visual,
html.motion-capable .login-art{
  animation:motion-auth-left 720ms var(--motion-ease-out) both;
}
html.motion-capable .auth-card,
html.motion-capable .login-card{
  animation:motion-auth-card 620ms 90ms var(--motion-ease-out) both;
}
html.motion-capable .google-slot{
  animation:motion-auth-card 520ms 180ms var(--motion-ease-out) both;
}

/* Branding responds to intent, never with continuous spinning/bouncing. */
html.motion-capable .brand img,
html.motion-capable .v3-brand img,
html.motion-capable .portal-sidebar-brand img,
html.motion-capable .mobile-drawer-brand img{
  transition:transform 420ms var(--motion-ease-out);
}
@media(hover:hover) and (pointer:fine){
  html.motion-capable .brand:hover img,
  html.motion-capable .v3-brand:hover img{
    transform:translate3d(0,-2px,0) scale(1.035);
  }
}

/* Fallback page-level reveal for simple/legacy pages that do not use card grids. */
html.motion-capable .motion-section-fallback{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity 560ms var(--motion-ease-out),transform 560ms var(--motion-ease-out);
}
html.motion-capable .motion-section-fallback.is-motion-visible{
  opacity:1;
  transform:none;
}


/* ============================================================
   Phase 36.4.1 — Visible ambient motion refinements
   ============================================================ */

/* Authentic four-photo homepage background rotator.
   The first three files are exact legacy slider images already preserved
   in the live assets; the fourth is restored from the old codebase. */
html.motion-capable .home-hero-rotator{
  background:none!important;
  overflow:hidden;
  animation:none!important;
}
.home-hero-slide{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  background-position:center 35%;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.035);
  transition:opacity 1250ms ease;
  will-change:opacity,transform;
}
.home-hero-slide:nth-child(2){background-position:center 43%}
.home-hero-slide:nth-child(3){background-position:center 39%}
.home-hero-slide:nth-child(4){background-position:center 44%}
.home-hero-slide.is-active{
  z-index:1;
  opacity:1;
  animation:motion-hero-photo-breathe 8600ms linear both;
}

/* Assist remains truly floating while closed, with a suggestive moving border.
   The full chat panel stops the float immediately when opened. */
html.motion-capable .mmustcu-assist:not(.is-open){
  animation:motion-assist-float 4200ms ease-in-out infinite;
}
html.motion-capable .mmustcu-assist.is-open{
  animation:none;
  transform:none;
}
html.motion-capable .mmustcu-assist-launcher{
  position:relative;
  isolation:isolate;
  overflow:visible;
  border-color:#000000;
}
html.motion-capable .mmustcu-assist-launcher::before{
  content:"";
  position:absolute;
  inset:-5px;
  z-index:-1;
  border:2px solid #0099FF;
  border-radius:999px;
  pointer-events:none;
  animation:motion-assist-border-flow 3600ms linear infinite;
}
html.motion-capable .mmustcu-assist-launcher::after{
  content:"";
  position:absolute;
  inset:-8px;
  z-index:-2;
  border:1px solid #FFCC66;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  animation:motion-assist-suggest-ring 3200ms ease-out infinite;
}
html.motion-capable .mmustcu-assist-launcher-icon{
  position:relative;
  isolation:isolate;
}
html.motion-capable .mmustcu-assist-launcher-icon::before{
  content:"";
  position:absolute;
  inset:-5px;
  z-index:-1;
  border:2px solid #0099FF;
  border-top-color:#FF9900;
  border-right-color:#FFCC66;
  border-radius:50%;
  pointer-events:none;
  animation:motion-assist-icon-orbit 3400ms linear infinite;
}
html.motion-capable .mmustcu-assist.is-open .mmustcu-assist-launcher::before,
html.motion-capable .mmustcu-assist.is-open .mmustcu-assist-launcher::after,
html.motion-capable .mmustcu-assist.is-open .mmustcu-assist-launcher-icon::before{
  animation:none;
}

/* A few restrained continuous cues keep the public homepage from feeling silent.
   They are deliberately limited to the homepage rhythm/mission elements. */
html.motion-capable .public-site-body .home-rhythm-grid>a>span{
  animation:motion-rhythm-alive 4600ms ease-in-out infinite;
}
html.motion-capable .public-site-body .home-rhythm-grid>a:nth-child(2)>span{animation-delay:380ms}
html.motion-capable .public-site-body .home-rhythm-grid>a:nth-child(3)>span{animation-delay:760ms}
html.motion-capable .public-site-body .home-rhythm-grid>a:nth-child(4)>span{animation-delay:1140ms}
html.motion-capable .public-site-body .home-rhythm-grid>a:nth-child(5)>span{animation-delay:1520ms}
html.motion-capable .public-site-body .home-rhythm-grid>a:nth-child(6)>span{animation-delay:1900ms}
html.motion-capable .public-site-body .hero-mission-line>span{
  transform-origin:left center;
  animation:motion-mission-line-live 3800ms ease-in-out infinite;
}

/* The hero overlay/content always remains above every rotating image. */
.home-hero-shade{z-index:1}
.home-hero-inner{z-index:2}

/* Keyframes */
@keyframes motion-hero-photo-breathe{
  0%{transform:scale(1.035)}
  50%{transform:scale(1.065)}
  100%{transform:scale(1.035)}
}
@keyframes motion-assist-float{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-6px,0)}
}
@keyframes motion-assist-border-flow{
  0%,100%{border-top-color:#0099FF;border-right-color:#0099FF;border-bottom-color:#FF9900;border-left-color:#FFCC66}
  25%{border-top-color:#FFCC66;border-right-color:#0099FF;border-bottom-color:#0099FF;border-left-color:#FF9900}
  50%{border-top-color:#FF9900;border-right-color:#FFCC66;border-bottom-color:#0099FF;border-left-color:#0099FF}
  75%{border-top-color:#0099FF;border-right-color:#FF9900;border-bottom-color:#FFCC66;border-left-color:#0099FF}
}
@keyframes motion-assist-suggest-ring{
  0%{opacity:.68;transform:scale(.98)}
  58%{opacity:0;transform:scale(1.075)}
  100%{opacity:0;transform:scale(1.075)}
}
@keyframes motion-assist-icon-orbit{
  to{transform:rotate(360deg)}
}
@keyframes motion-rhythm-alive{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  45%{transform:translate3d(0,-3px,0) scale(1.035)}
  60%{transform:translate3d(0,-1px,0) scale(1.015)}
}
@keyframes motion-mission-line-live{
  0%,100%{transform:scaleX(.74);opacity:.72}
  50%{transform:scaleX(1);opacity:1}
}
@keyframes motion-auth-left{
  from{opacity:0;transform:translate3d(-18px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes motion-auth-card{
  from{opacity:0;transform:translate3d(0,18px,0) scale(.985)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes motion-page-enter{
  from{opacity:.985}
  to{opacity:1}
}
@keyframes motion-view-old{
  to{opacity:0;transform:translate3d(0,-4px,0)}
}
@keyframes motion-view-new{
  from{opacity:0;transform:translate3d(0,8px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes motion-route-blue{
  0%{transform:translateX(-115%)}
  70%{transform:translateX(105%)}
  100%{transform:translateX(155%)}
}
@keyframes motion-route-orange{
  0%{transform:translateX(115%)}
  65%{transform:translateX(-410%)}
  100%{transform:translateX(-620%)}
}
@keyframes motion-hero-in{
  from{opacity:0;transform:translate3d(0,20px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes motion-hero-media-in{
  from{opacity:0;transform:translate3d(18px,0,0) scale(.97)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes motion-alert-in{
  from{opacity:0;transform:translate3d(0,-8px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes motion-count-settle{
  0%{transform:scale(1)}
  55%{transform:scale(1.035)}
  100%{transform:scale(1)}
}
@keyframes motion-assist-attention{
  0%{box-shadow:0 12px 28px rgba(0,0,0,.18),0 0 0 0 rgba(0,153,255,.25)}
  65%{box-shadow:0 12px 28px rgba(0,0,0,.18),0 0 0 13px rgba(0,153,255,0)}
  100%{box-shadow:0 12px 28px rgba(0,0,0,.18),0 0 0 0 rgba(0,153,255,0)}
}
@keyframes motion-active-nav{
  from{transform:translate3d(-5px,0,0)}
  to{transform:translate3d(0,0,0)}
}
@keyframes motion-hero-background{
  from{transform:scale(1.045);opacity:.88}
  to{transform:scale(1);opacity:1}
}

/* Accessibility: system Reduce Motion wins over every animation choice. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  html.motion-capable body,
  html.motion-capable *,
  html.motion-capable *::before,
  html.motion-capable *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
    scroll-behavior:auto!important;
  }
  html.motion-capable .motion-reveal,
  html.motion-capable .motion-hero-item,
  html.motion-capable .motion-hero-media,
  html.motion-capable .motion-progress-fill{
    opacity:1!important;
    transform:none!important;
  }
  .motion-parallax{transform:none!important}
  .motion-route-progress{display:none!important}
  .home-hero-slide{transition:none!important;animation:none!important}
  .home-hero-slide:not(.is-active){opacity:0!important}
  .home-hero-slide.is-active{opacity:1!important;transform:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* Small screens: less travel, same polish. */
@media(max-width:700px){
  :root{--motion-distance:12px;--motion-lift:-2px}
  html.motion-capable .motion-reveal.motion-reveal-left,
  html.motion-capable .motion-reveal.motion-reveal-right{
    transform:translate3d(0,12px,0);
  }
  html.motion-capable .motion-reveal.motion-reveal-left.is-motion-visible,
  html.motion-capable .motion-reveal.motion-reveal-right.is-motion-visible{
    transform:translate3d(0,0,0);
  }
  html.motion-capable .mmustcu-assist-panel{transform-origin:bottom center}
}