/* =========================================================
   HAQQANIA STUDENT PORTAL — PREMIUM 3D UI v5
   Uses the existing admin-controlled --hq-* theme variables.
   No backend/data logic lives here.
   ========================================================= */

:root{
  --hq-3d-perspective:1000px;
  --hq-3d-lift:5px;
  --hq-3d-rotate:4deg;
  --hq-3d-shadow-y:16px;
  --hq-3d-shadow-blur:34px;
  --hq-3d-edge:color-mix(in srgb,var(--hq-primary) 18%,var(--hq-border));
  --hq-3d-glow:color-mix(in srgb,var(--hq-primary) 17%,transparent);
  --hq-3d-soft-shadow:color-mix(in srgb,var(--hq-primary-dark) 16%,transparent);
}

body.hq-3d[data-hq-depth="1"]{
  --hq-3d-lift:3px;
  --hq-3d-rotate:2.3deg;
  --hq-3d-shadow-y:10px;
  --hq-3d-shadow-blur:24px;
}
body.hq-3d[data-hq-depth="2"]{
  --hq-3d-lift:5px;
  --hq-3d-rotate:4deg;
  --hq-3d-shadow-y:16px;
  --hq-3d-shadow-blur:34px;
}
body.hq-3d[data-hq-depth="3"]{
  --hq-3d-lift:7px;
  --hq-3d-rotate:5.5deg;
  --hq-3d-shadow-y:22px;
  --hq-3d-shadow-blur:42px;
}

body.hq-3d{
  background:
    radial-gradient(circle at 8% 8%,color-mix(in srgb,var(--hq-primary) 8%,transparent),transparent 28%),
    radial-gradient(circle at 92% 82%,color-mix(in srgb,var(--hq-accent) 12%,transparent),transparent 30%),
    var(--hq-bg)!important;
}

/* Soft ambient depth behind app content */
body.hq-3d .ap-main{position:relative;isolation:isolate}
body.hq-3d .ap-main:before,
body.hq-3d .ap-main:after{
  content:"";
  position:fixed;
  z-index:-1;
  width:280px;height:280px;
  border-radius:50%;
  filter:blur(46px);
  opacity:.34;
  pointer-events:none;
}
body.hq-3d .ap-main:before{
  inset:8vh auto auto 7vw;
  background:color-mix(in srgb,var(--hq-primary) 22%,transparent);
}
body.hq-3d .ap-main:after{
  inset:auto 5vw 8vh auto;
  background:color-mix(in srgb,var(--hq-accent) 28%,transparent);
}

/* Glass topbar */
body.hq-3d .ap-topbar{
  border-bottom:1px solid color-mix(in srgb,var(--hq-border) 70%,transparent)!important;
  box-shadow:0 10px 30px color-mix(in srgb,var(--hq-primary-dark) 8%,transparent)!important;
  backdrop-filter:blur(17px) saturate(1.14);
  -webkit-backdrop-filter:blur(17px) saturate(1.14);
}

/* Sidebar with layered depth */
body.hq-3d .ap-sidebar{
  box-shadow:
    -14px 0 34px color-mix(in srgb,var(--hq-primary-dark) 20%,transparent),
    inset 1px 0 0 rgba(255,255,255,.10),
    inset -1px 0 0 rgba(0,0,0,.10)!important;
}
body.hq-3d .ap-side-student{
  border:1px solid rgba(255,255,255,.14)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035))!important;
  box-shadow:
    0 14px 26px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.15)!important;
  backdrop-filter:blur(12px);
}
body.hq-3d .ap-nav a{
  transform:translateZ(0);
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease!important;
}
body.hq-3d .ap-nav a:hover{
  transform:translateX(-3px);
}
html[dir="ltr"] body.hq-3d .ap-nav a:hover{transform:translateX(3px)}
body.hq-3d .ap-nav a.active{
  box-shadow:
    0 9px 17px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -2px 0 color-mix(in srgb,var(--hq-primary) 17%,transparent)!important;
}

/* 3D surfaces */
body.hq-3d .hq-3d-card{
  position:relative;
  transform-style:preserve-3d;
  perspective:var(--hq-3d-perspective);
  will-change:transform;
  border-color:var(--hq-3d-edge)!important;
  box-shadow:
    0 var(--hq-3d-shadow-y) var(--hq-3d-shadow-blur) var(--hq-3d-soft-shadow),
    0 3px 8px color-mix(in srgb,var(--hq-primary-dark) 8%,transparent),
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 color-mix(in srgb,var(--hq-primary) 7%,transparent)!important;
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    box-shadow .22s ease,
    border-color .22s ease!important;
  overflow:hidden;
}
body.hq-3d .hq-3d-card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(135deg,rgba(255,255,255,.50),transparent 34%,transparent 68%,color-mix(in srgb,var(--hq-primary) 7%,transparent));
  opacity:.58;
}
body.hq-3d .hq-3d-card > *{position:relative;z-index:1}
body.hq-3d .hq-3d-card.hq-tilt-active{
  transform:
    perspective(var(--hq-3d-perspective))
    rotateX(var(--hq-rx,0deg))
    rotateY(var(--hq-ry,0deg))
    translateY(calc(var(--hq-3d-lift) * -1))
    scale(1.006);
  box-shadow:
    0 calc(var(--hq-3d-shadow-y) + 7px) calc(var(--hq-3d-shadow-blur) + 10px) color-mix(in srgb,var(--hq-primary-dark) 22%,transparent),
    0 5px 12px color-mix(in srgb,var(--hq-primary-dark) 9%,transparent),
    inset 0 1px 0 rgba(255,255,255,.92)!important;
}

/* Hero is intentionally stronger than normal cards */
body.hq-3d .ap-home-profile{
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;
  box-shadow:
    0 25px 55px color-mix(in srgb,var(--hq-primary-dark) 26%,transparent),
    0 8px 18px color-mix(in srgb,var(--hq-primary-dark) 17%,transparent),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(0,0,0,.10)!important;
}
body.hq-3d .ap-home-profile:before{
  content:"";
  position:absolute;
  width:210px;height:210px;
  top:-110px;left:-55px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);
  pointer-events:none;
}
html[dir="ltr"] body.hq-3d .ap-home-profile:before{left:auto;right:-55px}
body.hq-3d .ap-home-profile:after{
  content:"";
  position:absolute;
  inset:auto -50px -105px auto;
  width:230px;height:230px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--hq-accent) 27%,transparent),transparent 67%);
  pointer-events:none;
}

/* Raised statistic and quick-action cards */
body.hq-3d .ap-summary a,
body.hq-3d .ap-quick{
  min-height:100%;
}
body.hq-3d .ap-summary a:active,
body.hq-3d .ap-quick:active,
body.hq-3d .announcement-card:active,
body.hq-3d .result-card:active,
body.hq-3d .document-card:active{
  transform:translateY(2px) scale(.995)!important;
  box-shadow:
    0 5px 12px color-mix(in srgb,var(--hq-primary-dark) 15%,transparent),
    inset 0 2px 5px rgba(0,0,0,.06)!important;
}

/* 3D icons */
body.hq-3d .ap-quick-icon,
body.hq-3d .ap-activity-icon,
body.hq-3d .ap-update-icon,
body.hq-3d .announcement-icon,
body.hq-3d .voice-dot,
body.hq-3d .nav-icon,
body.hq-3d .ap-top-action,
body.hq-3d .ap-install-top{
  transform:translateZ(18px);
  box-shadow:
    0 8px 14px color-mix(in srgb,var(--hq-primary-dark) 18%,transparent),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 4px rgba(0,0,0,.06)!important;
}
body.hq-3d .ap-quick-icon svg,
body.hq-3d .announcement-icon svg,
body.hq-3d .ap-top-action svg{
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.10));
}

/* Buttons: raised, but not cartoonish */
body.hq-3d .btn,
body.hq-3d button:not(.ap-scrim):not(.ap-drawer-close),
body.hq-3d .ap-primary-action,
body.hq-3d .back-link{
  box-shadow:
    0 7px 15px color-mix(in srgb,var(--hq-primary-dark) 16%,transparent),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
body.hq-3d .btn:hover,
body.hq-3d button:not(.ap-scrim):not(.ap-drawer-close):hover,
body.hq-3d .ap-primary-action:hover{
  transform:translateY(-2px);
  filter:saturate(1.04);
}
body.hq-3d .btn:active,
body.hq-3d button:not(.ap-scrim):not(.ap-drawer-close):active,
body.hq-3d .ap-primary-action:active{
  transform:translateY(1px);
  box-shadow:0 3px 7px color-mix(in srgb,var(--hq-primary-dark) 15%,transparent),inset 0 2px 4px rgba(0,0,0,.08);
}

/* Mobile bottom nav: floating dock */
body.hq-3d .ap-bottom-nav{
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:
    0 -13px 32px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12)!important;
  backdrop-filter:blur(14px);
}
body.hq-3d .ap-bottom-nav a.active{
  transform:translateY(-5px);
  box-shadow:
    0 9px 18px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.58)!important;
}

/* Announcement voice player card */
body.hq-3d .announce-voice{
  box-shadow:
    0 16px 32px color-mix(in srgb,var(--hq-primary-dark) 12%,transparent),
    inset 0 1px 0 rgba(255,255,255,.8)!important;
}

/* Auth / Intro 3D */
body.hq-3d.haq-auth-body .haq-login-card,
body.hq-3d .haq-logo-card,
body.hq-3d .haq-feature{
  transform-style:preserve-3d;
  border-color:color-mix(in srgb,var(--hq-primary) 18%,var(--hq-border))!important;
  box-shadow:
    0 24px 55px color-mix(in srgb,var(--hq-primary-dark) 25%,transparent),
    0 5px 14px color-mix(in srgb,var(--hq-primary-dark) 10%,transparent),
    inset 0 1px 0 rgba(255,255,255,.78)!important;
}
body.hq-3d.haq-auth-body .haq-login-card:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 38%);
}
body.hq-3d .haq-logo-card{
  animation:hqFloatLogo 5.5s ease-in-out infinite;
}
body.hq-3d .haq-feature{
  transition:transform .22s ease,box-shadow .22s ease!important;
}
body.hq-3d .haq-feature:hover{
  transform:translateY(-5px) rotateX(2deg);
}
body.hq-3d .haq-intro-enter,
body.hq-3d .haq-login-submit{
  box-shadow:
    0 13px 25px color-mix(in srgb,var(--hq-primary-dark) 30%,transparent),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -3px 0 rgba(0,0,0,.13)!important;
}
body.hq-3d .haq-intro-enter:hover,
body.hq-3d .haq-login-submit:hover{
  transform:translateY(-3px);
}
body.hq-3d .haq-intro-enter:active,
body.hq-3d .haq-login-submit:active{
  transform:translateY(1px);
  box-shadow:0 5px 10px color-mix(in srgb,var(--hq-primary-dark) 25%,transparent),inset 0 2px 5px rgba(0,0,0,.10)!important;
}

@keyframes hqFloatLogo{
  0%,100%{transform:translateY(0) rotateX(0deg) rotateY(0deg)}
  50%{transform:translateY(-8px) rotateX(2deg) rotateY(-2deg)}
}

/* Better touch/mobile performance: static 3D depth, no live pointer tilt */
@media(max-width:768px),(hover:none){
  body.hq-3d .hq-3d-card,
  body.hq-3d .hq-3d-card.hq-tilt-active{
    transform:none!important;
    will-change:auto;
  }
  body.hq-3d .ap-main:before,
  body.hq-3d .ap-main:after{
    width:190px;height:190px;filter:blur(42px);opacity:.26;
  }
  body.hq-3d .ap-home-profile{
    box-shadow:
      0 16px 32px color-mix(in srgb,var(--hq-primary-dark) 22%,transparent),
      inset 0 1px 0 rgba(255,255,255,.18)!important;
  }
}

/* Respect accessibility preferences */
@media(prefers-reduced-motion:reduce){
  body.hq-3d *,
  body.hq-3d *:before,
  body.hq-3d *:after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  body.hq-3d .hq-3d-card,
  body.hq-3d .hq-3d-card.hq-tilt-active{
    transform:none!important;
  }
}

/* Print remains clean and flat */
@media print{
  body.hq-3d .hq-3d-card,
  body.hq-3d .ap-home-profile,
  body.hq-3d .announce-voice{
    transform:none!important;
    box-shadow:none!important;
  }
  body.hq-3d .ap-main:before,
  body.hq-3d .ap-main:after{display:none!important}
}