/* =========================================================
   HAQQANIA STUDENT PORTAL — PREMIUM MOTION SYSTEM v7
   Modern dashboard motion, subtle transitions, count-up,
   ripple feedback and smart reduced-motion handling.
   ========================================================= */

:root{
  --hq-motion-fast:160ms;
  --hq-motion-base:300ms;
  --hq-motion-slow:620ms;
  --hq-motion-ease:cubic-bezier(.22,.82,.24,1);
  --hq-motion-ease-soft:cubic-bezier(.2,.72,.25,1);
  --hq-motion-distance:14px;
  --hq-motion-scale:.985;
  --hq-motion-glow:color-mix(in srgb,var(--hq-primary) 14%,transparent);
}

body.hq-motion[data-hq-motion-strength="1"]{
  --hq-motion-fast:130ms;
  --hq-motion-base:230ms;
  --hq-motion-slow:430ms;
  --hq-motion-distance:8px;
}
body.hq-motion[data-hq-motion-strength="2"]{
  --hq-motion-fast:160ms;
  --hq-motion-base:300ms;
  --hq-motion-slow:620ms;
  --hq-motion-distance:14px;
}
body.hq-motion[data-hq-motion-strength="3"]{
  --hq-motion-fast:190ms;
  --hq-motion-base:380ms;
  --hq-motion-slow:760ms;
  --hq-motion-distance:20px;
}

/* Initial app reveal */
body.hq-motion:not(.hq-motion-ready) .ap-topbar,
body.hq-motion:not(.hq-motion-ready) .ap-sidebar,
body.hq-motion:not(.hq-motion-ready) .ap-content,
body.hq-motion.haq-auth-body:not(.hq-motion-ready) .haq-login-card,
body.hq-motion.haq-auth-body:not(.hq-motion-ready) .haq-logo-card,
body.hq-motion.haq-auth-body:not(.hq-motion-ready) .haq-feature{
  opacity:0;
}

body.hq-motion.hq-motion-ready .ap-topbar{
  animation:hqTopbarIn var(--hq-motion-base) var(--hq-motion-ease) both;
}
body.hq-motion.hq-motion-ready .ap-sidebar{
  animation:hqSidebarIn var(--hq-motion-slow) var(--hq-motion-ease) both;
}
html[dir="ltr"] body.hq-motion.hq-motion-ready .ap-sidebar{
  animation-name:hqSidebarInLtr;
}
body.hq-motion.hq-motion-ready .ap-content{
  animation:hqContentIn var(--hq-motion-base) var(--hq-motion-ease) both;
}

/* Page leaving transition */
body.hq-motion.hq-page-exit .ap-content{
  opacity:0;
  transform:translateY(6px) scale(.997);
  transition:opacity var(--hq-motion-fast) ease,transform var(--hq-motion-fast) ease!important;
}
body.hq-motion.hq-page-exit .ap-topbar{
  opacity:.75;
  transition:opacity var(--hq-motion-fast) ease!important;
}

/* Scroll / stagger reveal */
body.hq-motion .hq-motion-reveal{
  opacity:0;
  transform:translateY(var(--hq-motion-distance)) scale(var(--hq-motion-scale));
  filter:blur(2px);
  transition:
    opacity var(--hq-motion-base) var(--hq-motion-ease),
    transform var(--hq-motion-base) var(--hq-motion-ease),
    filter var(--hq-motion-base) ease;
  transition-delay:var(--hq-motion-delay,0ms);
}
body.hq-motion .hq-motion-reveal.hq-motion-visible{
  opacity:1;
  transform:none;
  filter:none;
}

/* Section titles */
body.hq-motion .ap-section-head.hq-motion-reveal{
  transform:translateY(7px);
}

/* Refined card motion */
body.hq-motion .ap-summary a,
body.hq-motion .ap-quick,
body.hq-motion .ap-update,
body.hq-motion .activity-center-card,
body.hq-motion .announcement-card,
body.hq-motion .result-card,
body.hq-motion .document-card,
body.hq-motion .smart-insight{
  transition:
    transform var(--hq-motion-fast) var(--hq-motion-ease),
    box-shadow var(--hq-motion-fast) ease,
    border-color var(--hq-motion-fast) ease,
    background var(--hq-motion-fast) ease!important;
}

@media(hover:hover) and (pointer:fine){
  body.hq-motion .ap-summary a:hover,
  body.hq-motion .ap-quick:hover,
  body.hq-motion .ap-update:hover,
  body.hq-motion .activity-center-card:hover,
  body.hq-motion .announcement-card:hover,
  body.hq-motion .result-card:hover,
  body.hq-motion .document-card:hover{
    transform:translateY(-4px);
  }
}

/* Icon breathing / modern dashboard feel */
body.hq-motion .ap-quick-icon,
body.hq-motion .ap-update-icon,
body.hq-motion .activity-hero-icon,
body.hq-motion .smart-insight-icon{
  transition:transform var(--hq-motion-base) var(--hq-motion-ease),filter var(--hq-motion-base) ease!important;
}
@media(hover:hover){
  body.hq-motion .ap-quick:hover .ap-quick-icon,
  body.hq-motion .ap-update:hover .ap-update-icon{
    transform:translateY(-2px) rotate(-3deg) scale(1.045);
  }
  html[dir="ltr"] body.hq-motion .ap-quick:hover .ap-quick-icon,
  html[dir="ltr"] body.hq-motion .ap-update:hover .ap-update-icon{
    transform:translateY(-2px) rotate(3deg) scale(1.045);
  }
}

/* Animated number counters */
body.hq-motion .hq-counting{
  display:inline-block;
  transform-origin:center bottom;
  animation:hqNumberPulse var(--hq-motion-base) var(--hq-motion-ease) both;
  font-variant-numeric:tabular-nums;
}

/* Progress / meter animation for existing bars */
body.hq-motion .hq-motion-progress{
  transform-origin:right center;
  animation:hqProgressGrow var(--hq-motion-slow) var(--hq-motion-ease) both;
}
html[dir="ltr"] body.hq-motion .hq-motion-progress{transform-origin:left center}

/* Notification bell when new updates exist */
body.hq-motion .ap-top-action.hq-has-unread svg{
  transform-origin:50% 10%;
  animation:hqBellRing 2.8s ease-in-out infinite;
}
body.hq-motion .ap-top-action.hq-has-unread:after{
  content:"";
  position:absolute;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--hq-danger);
  top:7px;right:7px;
  opacity:.22;
  animation:hqPing 1.9s ease-out infinite;
}
html[dir="rtl"] body.hq-motion .ap-top-action.hq-has-unread:after{
  right:auto;left:7px;
}

/* Mobile active tab moves smoothly */
body.hq-motion .ap-bottom-nav a{
  transition:
    transform var(--hq-motion-fast) var(--hq-motion-ease),
    background var(--hq-motion-fast) ease,
    color var(--hq-motion-fast) ease!important;
}
body.hq-motion .ap-bottom-nav a.active{
  animation:hqNavPop var(--hq-motion-base) var(--hq-motion-ease) both;
}

/* Ripple/touch feedback */
body.hq-motion .hq-ripple-host{
  position:relative!important;
  overflow:hidden!important;
  -webkit-tap-highlight-color:transparent;
}
body.hq-motion .hq-ripple{
  position:absolute;
  z-index:20;
  width:14px;height:14px;
  border-radius:50%;
  pointer-events:none;
  background:color-mix(in srgb,currentColor 20%,transparent);
  transform:translate(-50%,-50%) scale(0);
  animation:hqRipple .55s ease-out forwards;
}

/* Subtle dashboard spotlight that follows pointer */
body.hq-motion .ap-main:has(.ap-content){
  --hq-mx:50%;
  --hq-my:35%;
}
body.hq-motion[data-hq-motion-strength="2"] .ap-content:before,
body.hq-motion[data-hq-motion-strength="3"] .ap-content:before{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  width:360px;height:360px;
  left:calc(var(--hq-mx,50%) - 180px);
  top:calc(var(--hq-my,35%) - 180px);
  border-radius:50%;
  background:radial-gradient(circle,var(--hq-motion-glow),transparent 68%);
  filter:blur(18px);
  opacity:.52;
  transition:left .18s linear,top .18s linear;
}

/* Auth / intro motion */
body.hq-motion.haq-auth-body.hq-motion-ready .haq-login-card{
  animation:hqAuthCardIn var(--hq-motion-slow) var(--hq-motion-ease) both;
}
body.hq-motion.haq-auth-body.hq-motion-ready .haq-logo-card{
  animation:hqAuthLogoIn var(--hq-motion-slow) var(--hq-motion-ease) 80ms both;
}
body.hq-motion.haq-auth-body.hq-motion-ready .haq-feature{
  animation:hqFeatureIn var(--hq-motion-base) var(--hq-motion-ease) both;
}
body.hq-motion.haq-auth-body.hq-motion-ready .haq-feature:nth-child(2){animation-delay:80ms}
body.hq-motion.haq-auth-body.hq-motion-ready .haq-feature:nth-child(3){animation-delay:140ms}
body.hq-motion.haq-auth-body .haq-login-building{
  animation:hqBgKenBurns 18s ease-in-out infinite alternate;
}

/* Loader line only during page navigation */
body.hq-motion .hq-route-progress{
  position:fixed;
  z-index:99999;
  top:0;left:0;
  height:3px;
  width:0;
  opacity:0;
  background:linear-gradient(90deg,var(--hq-primary),var(--hq-accent),var(--hq-primary));
  box-shadow:0 0 12px color-mix(in srgb,var(--hq-primary) 50%,transparent);
  transition:width .18s ease,opacity .16s ease;
}
body.hq-motion.hq-page-exit .hq-route-progress{
  width:78%;
  opacity:1;
}

/* Keyframes */
@keyframes hqTopbarIn{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:none}
}
@keyframes hqSidebarIn{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:none}
}
@keyframes hqSidebarInLtr{
  from{opacity:0;transform:translateX(-16px)}
  to{opacity:1;transform:none}
}
@keyframes hqContentIn{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}
@keyframes hqAuthCardIn{
  from{opacity:0;transform:translateY(20px) scale(.975)}
  to{opacity:1;transform:none}
}
@keyframes hqAuthLogoIn{
  from{opacity:0;transform:translateY(-12px) rotate(-2deg) scale(.96)}
  to{opacity:1;transform:none}
}
@keyframes hqFeatureIn{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes hqBgKenBurns{
  from{transform:scale(1.015) translate3d(0,0,0)}
  to{transform:scale(1.055) translate3d(-.7%,.4%,0)}
}
@keyframes hqNumberPulse{
  0%{opacity:.55;transform:translateY(3px) scale(.96)}
  65%{opacity:1;transform:translateY(-1px) scale(1.035)}
  100%{opacity:1;transform:none}
}
@keyframes hqProgressGrow{
  from{transform:scaleX(.04);opacity:.5}
  to{transform:scaleX(1);opacity:1}
}
@keyframes hqBellRing{
  0%,86%,100%{transform:rotate(0)}
  89%{transform:rotate(10deg)}
  92%{transform:rotate(-9deg)}
  95%{transform:rotate(7deg)}
  98%{transform:rotate(-4deg)}
}
@keyframes hqPing{
  0%{transform:scale(.55);opacity:.25}
  70%,100%{transform:scale(2.3);opacity:0}
}
@keyframes hqNavPop{
  0%{transform:translateY(0) scale(.96)}
  65%{transform:translateY(-6px) scale(1.025)}
  100%{transform:translateY(-5px) scale(1)}
}
@keyframes hqRipple{
  0%{opacity:.65;transform:translate(-50%,-50%) scale(0)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(18)}
}

/* Small screens: motion remains smooth but lighter */
@media(max-width:768px),(hover:none){
  body.hq-motion[data-hq-motion-strength="3"]{
    --hq-motion-distance:12px;
    --hq-motion-slow:600ms;
  }
  body.hq-motion .ap-content:before{display:none!important}
  body.hq-motion.haq-auth-body .haq-login-building{animation-duration:24s}
}

/* Accessibility / battery saving */
@media(prefers-reduced-motion:reduce){
  body.hq-motion *,
  body.hq-motion *:before,
  body.hq-motion *:after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  body.hq-motion .hq-motion-reveal{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  body.hq-motion .ap-content:before{display:none!important}
}

@media print{
  body.hq-motion *,
  body.hq-motion *:before,
  body.hq-motion *:after{
    animation:none!important;
    transition:none!important;
  }
  body.hq-motion .hq-motion-reveal{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  body.hq-motion .hq-route-progress{display:none!important}
}