/* MuCOHAS motion layer: entrances, hover lift, count-ups, ripples, page-change bar.
 * Everything is gated by html.ml-motion (set by js/mucohas-motion.js only when the visitor has not asked for reduced
 * motion), so with scripts off or "reduce motion" on, pages look exactly as before. */

@keyframes ml-m-rise   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ml-m-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ml-m-slide  { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes ml-m-drop   { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes ml-m-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ml-m-pulse  { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); } 70% { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
@keyframes ml-m-ripple { to { transform: scale(3.2); opacity: 0; } }
@keyframes ml-m-bar    { 0% { width: 0; opacity: 1; } 60% { width: 72%; } 100% { width: 92%; opacity: 1; } }
@keyframes ml-m-shine  { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(320%) skewX(-18deg); } }
@keyframes ml-m-pop    { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

/* ---------- entrances (class pair set by the script) ---------- */
html.ml-motion .ml-m-pre { opacity: 0; }
html.ml-motion .ml-m-in  { animation: ml-m-rise .3s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: var(--d, 0ms); }
html.ml-motion .ml-m-in.ml-m-side { animation-name: ml-m-slide; }
html.ml-motion .ml-m-in.ml-m-soft { animation-name: ml-m-fade; }

/* alerts and notices drop in */
html.ml-motion .uk-alert, html.ml-motion .ml-banner { animation: ml-m-drop .3s cubic-bezier(.2, .7, .2, 1) backwards; }

/* table rows cascade in */
html.ml-motion #page_content_inner table tbody tr:nth-child(-n+14) { animation: ml-m-fade .25s ease backwards; }
html.ml-motion #page_content_inner table tbody tr:nth-child(1) { animation-delay: .04s; }
html.ml-motion #page_content_inner table tbody tr:nth-child(2) { animation-delay: .08s; }
html.ml-motion #page_content_inner table tbody tr:nth-child(3) { animation-delay: .12s; }
html.ml-motion #page_content_inner table tbody tr:nth-child(4) { animation-delay: .16s; }
html.ml-motion #page_content_inner table tbody tr:nth-child(5) { animation-delay: .20s; }
html.ml-motion #page_content_inner table tbody tr:nth-child(6) { animation-delay: .24s; }
html.ml-motion #page_content_inner table tbody tr:nth-child(7) { animation-delay: .28s; }
html.ml-motion #page_content_inner table tbody tr:nth-child(8) { animation-delay: .32s; }
html.ml-motion #page_content_inner table tbody tr:nth-child(n+9) { animation-delay: .36s; }
html.ml-motion #page_content_inner table tbody tr { transition: background-color .18s ease; }

/* ---------- hover and press ---------- */
html.ml-motion .dashboard_stat_card, html.ml-motion .md-card-hover, html.ml-motion .glance-kpi,
html.ml-motion .ml-portal, html.ml-motion .ml-tile, html.ml-motion .ml-stat, html.ml-motion .books-grid > *,
html.ml-motion .ml-panel.ml-info {
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease, border-color .28s ease;
}
html.ml-motion .dashboard_stat_card:hover, html.ml-motion .md-card-hover:hover, html.ml-motion .glance-kpi:hover,
html.ml-motion .ml-portal:hover, html.ml-motion .ml-tile:hover, html.ml-motion .ml-stat:hover, html.ml-motion .books-grid > *:hover,
html.ml-motion .ml-panel.ml-info:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 34px -16px rgba(11, 47, 102, .45);
}
html.ml-motion .dashboard_stat_card .stat_card_icon, html.ml-motion .ml-portal__icon, html.ml-motion .ml-tile__icon, html.ml-motion .ml-info__icon {
    transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
html.ml-motion .dashboard_stat_card:hover .stat_card_icon, html.ml-motion .ml-portal:hover .ml-portal__icon,
html.ml-motion .ml-tile:hover .ml-tile__icon, html.ml-motion .ml-info:hover .ml-info__icon { transform: scale(1.14) rotate(-6deg); }

html.ml-motion .btn, html.ml-motion .uk-button, html.ml-motion .md-btn, html.ml-motion .login_btn {
    transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease, filter .2s ease;
}
html.ml-motion .btn-primary:hover, html.ml-motion .uk-button-primary:hover, html.ml-motion .md-btn-primary:hover,
html.ml-motion .md-btn-success:hover, html.ml-motion .login_btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(20, 84, 168, .6); }
html.ml-motion .btn:active, html.ml-motion .uk-button:active, html.ml-motion .md-btn:active, html.ml-motion .login_btn:active { transform: translateY(0) scale(.97); }

/* ripple (span added by the script) */
.ml-m-host { position: relative; overflow: hidden; }
.ml-m-ripple { position: absolute; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background: rgba(255, 255, 255, .5); transform: scale(0); animation: ml-m-ripple .65s ease-out forwards; pointer-events: none; }
.uk-button-default .ml-m-ripple, .btn-outline-primary .ml-m-ripple, .btn-light .ml-m-ripple { background: rgba(20, 84, 168, .25); }

/* sidebar */
html.ml-motion #sidebar_main .menu_section li > a { transition: background-color .2s ease; }
html.ml-motion #sidebar_main .menu_section li > a .menu_title { display: inline-block; transition: transform .22s cubic-bezier(.2, .7, .2, 1); }
html.ml-motion #sidebar_main .menu_section li > a:hover .menu_title { transform: translateX(4px); }
html.ml-motion #sidebar_main .menu_section li > a .menu_icon { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
html.ml-motion #sidebar_main .menu_section li > a:hover .menu_icon { transform: scale(1.18); }

/* notification badge and floating logo */
html.ml-motion #header_main .uk-badge-danger, html.ml-motion #header_main .uk-badge-notification { animation: ml-m-pulse 2.4s ease-out infinite; }
html.ml-motion .ml-glass__logo, html.ml-motion .user_heading_avatar .thumbnail img { animation: ml-m-float 5.5s ease-in-out infinite; }

/* form fields glow when focused */
html.ml-motion input.md-input, html.ml-motion select.md-input, html.ml-motion textarea.md-input, html.ml-motion .form-control, html.ml-motion .form-select {
    transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease;
}

/* a light sweep across primary buttons on hover */
html.ml-motion .btn-primary, html.ml-motion .uk-button-primary, html.ml-motion .md-btn-primary, html.ml-motion .btn-signin { position: relative; overflow: hidden; }
html.ml-motion .btn-primary::after, html.ml-motion .uk-button-primary::after, html.ml-motion .md-btn-primary::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: translateX(-120%) skewX(-18deg); pointer-events: none;
}
html.ml-motion .btn-primary:hover::after, html.ml-motion .uk-button-primary:hover::after, html.ml-motion .md-btn-primary:hover::after { animation: ml-m-shine .8s ease; }

/* badges and pills pop in */
html.ml-motion .ml-pill, html.ml-motion .uk-badge { animation: ml-m-pop .4s cubic-bezier(.3, 1.4, .5, 1) backwards; }

/* page-change bar */
#ml-m-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 4000; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, #1454a8, #22a047 60%, #f4c430); box-shadow: 0 0 10px rgba(244, 196, 48, .7); border-radius: 0 3px 3px 0; }
html.ml-m-leaving #ml-m-bar { animation: ml-m-bar 2.4s cubic-bezier(.2, .6, .2, 1) forwards; }

/* the print view never animates */
@media print { html.ml-motion *, html.ml-motion *::after { animation: none !important; transition: none !important; } html.ml-motion .ml-m-pre { opacity: 1 !important; } #ml-m-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { html.ml-motion *, html.ml-motion *::after { animation: none !important; transition: none !important; } html.ml-motion .ml-m-pre { opacity: 1 !important; } }
