/* Medical Telescope - Animations & Interactions */
html { scroll-behavior: smooth; }

@keyframes mt-fadeIn { from{opacity:0} to{opacity:1} }
@keyframes mt-fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes mt-fadeInDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes mt-slideInRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes mt-slideInLeft { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes mt-scaleIn { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }
@keyframes mt-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes mt-shake { 0%,100%{transform:translateX(0)} 10%,30%,50%,70%,90%{transform:translateX(-4px)} 20%,40%,60%,80%{transform:translateX(4px)} }
@keyframes mt-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes mt-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes mt-underlineExpand { from{width:0} to{width:100%} }

/* Animation utility classes */
.mt-animate-fadeIn{animation:mt-fadeIn .5s ease-out forwards}
.mt-animate-fadeInUp{animation:mt-fadeInUp .5s ease-out forwards}
.mt-animate-fadeInDown{animation:mt-fadeInDown .4s ease-out forwards}
.mt-animate-slideInRight{animation:mt-slideInRight .4s ease-out forwards}
.mt-animate-slideInLeft{animation:mt-slideInLeft .4s ease-out forwards}
.mt-animate-scaleIn{animation:mt-scaleIn .3s ease-out forwards}
.mt-animate-shake{animation:mt-shake .5s ease-in-out}
.mt-animate-pulse{animation:mt-pulse 2s ease-in-out infinite}
.mt-animate-float{animation:mt-float 3s ease-in-out infinite}

/* Modal animations */
.modal{transition:opacity .3s ease,visibility .3s ease}
.modal.modal-show{animation:mt-fadeIn .3s ease-out forwards}
.modal-content{animation:mt-scaleIn .3s ease-out forwards;transition:transform .3s ease,box-shadow .3s ease}
.modal-content.modal-hide{animation:mt-fadeIn .2s ease-in reverse forwards}

/* Modal input focus */
.modal-content input[type="tel"],
.modal-content input[type="text"]{transition:background-color .3s ease,border-bottom-color .3s ease}
.modal-content input[type="tel"]:focus,
.modal-content input[type="text"]:focus{border-bottom-color:#004098;background-color:#f0f4f8}

/* Login button */
#login-btn{transition:all .3s ease !important;position:relative;overflow:hidden}
#login-btn.enabled:hover{background-color:#003380 !important;box-shadow:0 4px 12px rgba(0,64,152,.3);transform:translateY(-1px)}
#login-btn.enabled:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0,64,152,.2)}

/* Verification code button */
#get-verification-code-btn{transition:all .3s ease !important}
#get-verification-code-btn.enabled:hover{color:#003380 !important}

/* Notification message */
.notification-message{animation:mt-slideInRight .3s ease-out forwards !important;transition:opacity .3s ease,transform .3s ease !important;box-shadow:0 4px 12px rgba(0,0,0,.15);border-left:3px solid #004098;padding:12px 16px !important;border-radius:4px !important;font-size:14px}
.notification-message.notification-hide{opacity:0;transform:translateX(30px)}

/* Nav link underline animation */
nav div.wrap a{position:relative;transition:color .3s ease}
nav div.wrap a::after{content:'';position:absolute;bottom:0;left:0;width:0;background-color:white;transition:width .3s ease}
nav div.wrap a:hover::after,nav div.wrap a.current::after{width:100%}

/* Header classification tags */
header classification a{transition:all .3s ease !important}
header classification a:hover{background-color:rgba(255,255,255,.15);transform:translateY(-1px)}
header classification a.current{background-color:rgba(255,255,255,.2)}
.fixed-header classification a:hover{background-color:rgba(255,255,255,.2) !important;transform:translateY(-1px)}

/* Logo hover */
header img[src*="MTJ-LOGO"]{transition:transform .3s ease,opacity .3s ease}
header img[src*="MTJ-LOGO"]:hover{transform:scale(1.02)}

/* Header login button */
header a.login{transition:all .3s ease !important;border-radius:4px}
header a.login:hover{background-color:rgba(255,255,255,.15);border-color:#fff !important;color:#fff !important}

/* Footer links */
footer ul.links li a{transition:color .3s ease,padding-left .3s ease;position:relative}
footer ul.links li a:hover{color:#004098 !important;padding-left:14px}

/* Footer logo hover */
footer li img{transition:opacity .3s ease,transform .3s ease}
footer li img:hover{opacity:.8;transform:scale(1.03)}

/* Footer copyright */
footer .copyrights a{transition:color .3s ease}
footer .copyrights a:hover{color:#004098 !important}

/* Scroll to top button */
.mt-scroll-top{position:fixed;bottom:40px;right:40px;width:44px;height:44px;background-color:#004098;color:white;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 12px rgba(0,64,152,.3);opacity:0;visibility:hidden;transform:translateY(20px);transition:all .3s ease;z-index:999}
.mt-scroll-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.mt-scroll-top:hover{background-color:#003380;transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,64,152,.4)}
.mt-scroll-top:active{transform:translateY(-1px)}

/* Header scroll backdrop */
.fixed-header{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* Sidebar menu animation */
#leftsidemenu .group a,#rightsidemenu .group a,leftsidemenu .group a,rightsidemenu .group a{transition:all .25s ease;position:relative}
#leftsidemenu .group a:hover,#rightsidemenu .group a:hover,leftsidemenu .group a:hover,rightsidemenu .group a:hover{padding-left:16px !important}

/* Pagination */
.pagination a{transition:all .25s ease !important;border-radius:3px}
.pagination a:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,64,152,.2)}

/* Error page */
.error-container{animation:mt-fadeInUp .6s ease-out}
.error-number{animation:mt-float 3s ease-in-out infinite;display:inline-block}
.error-container .btn{transition:all .3s ease !important;position:relative;overflow:hidden}
.error-container .btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,64,152,.3)}
.error-container .btn:active{transform:translateY(0)}

/* Redirect page */
.redirect-panel{animation:mt-fadeInUp .5s ease-out}
.redirect-panel .logo-img{animation:mt-fadeInDown .4s ease-out}
.redirect-panel .panel-body{animation:mt-scaleIn .4s ease-out .2s both}
.redirect-panel .jump-a{transition:all .3s ease}
.redirect-panel .jump-a:hover{background-color:#003380;box-shadow:0 4px 12px rgba(0,64,152,.3);transform:translateY(-1px)}
.redirect-panel .jump-a:active{transform:translateY(0)}
.redirect-panel .content-hint img{animation:mt-pulse 2s ease-in-out infinite}

/* Page content entrance */
.main-wrap,mainwrap{animation:mt-fadeInUp .4s ease-out}

/* Select focus */
SELECT{transition:border-color .3s ease,box-shadow .3s ease}
SELECT:focus{border-color:#004098;box-shadow:0 0 0 3px rgba(0,64,152,.1)}

/* WeChat page */
.weui-msg__icon-area{animation:mt-scaleIn .5s ease-out}
.weui-msg__text-area{animation:mt-fadeInUp .5s ease-out .2s both}

/* Loading spinner */
.mt-loading{display:inline-block;width:20px;height:20px;border:2px solid rgba(0,64,152,.2);border-top-color:#004098;border-radius:50%;animation:mt-spin .6s linear infinite}

/* Checkbox */
.agreement input[type="checkbox"]{transition:transform .2s ease;accent-color:#004098}
.agreement input[type="checkbox"]:checked{transform:scale(1.1)}

/* Responsive */
@media(max-width:768px){
  .mt-scroll-top{bottom:20px;right:20px;width:40px;height:40px;font-size:16px}
  #notification-container{right:10px !important;top:auto !important;bottom:80px}
  .notification-message{min-width:200px}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}