/*
 * NextGen Sarkari Alive UI Layer
 * Interaction-only enhancement. The existing colour palette, layout, routes,
 * data bindings and page content remain unchanged.
 */

:root{
  --ngs-alive-ease:cubic-bezier(.2,.8,.2,1);
  --ngs-alive-spring:cubic-bezier(.16,1,.3,1);
  --ngs-reveal-delay:0ms;
}

/* Slim reading-progress indicator: useful on long notification and study pages. */
.ngs-scroll-progress{
  position:fixed;
  inset:0 0 auto 0;
  z-index:3000;
  height:3px;
  pointer-events:none;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--ng-primary),var(--ng-primary-2),var(--ng-accent));
  box-shadow:0 0 18px color-mix(in srgb,var(--ng-primary) 45%,transparent);
  will-change:transform;
}

/* The sticky shell gains depth only after the visitor starts scrolling. */
body.ngs-page-scrolled header,
body.ngs-page-scrolled .site-header,
body.ngs-page-scrolled .page-header{
  border-bottom-color:color-mix(in srgb,var(--ng-primary) 24%,transparent)!important;
  box-shadow:0 16px 42px rgba(15,23,42,.10)!important;
}
body.ngs-page-scrolled nav.site-nav,
body.ngs-page-scrolled .site-nav{
  box-shadow:0 18px 42px rgba(15,23,42,.08)!important;
}

/* Scroll entrance system. Classes are added only when JavaScript is available. */
.ngs-reveal{
  opacity:0;
  filter:blur(5px);
  transform:translate3d(0,24px,0) scale(.986);
  transition:
    opacity .68s var(--ngs-alive-ease) var(--ngs-reveal-delay),
    transform .78s var(--ngs-alive-spring) var(--ngs-reveal-delay),
    filter .62s ease var(--ngs-reveal-delay);
  will-change:opacity,transform,filter;
}
.ngs-reveal.ngs-visible{
  opacity:1;
  filter:none;
  transform:translate3d(0,0,0) scale(1);
}
.section-headline.ngs-reveal .section-accent-line,
.section-title.ngs-reveal::before{
  transform-origin:center top;
  transform:scaleY(.25);
  transition:transform .72s var(--ngs-alive-spring) calc(var(--ngs-reveal-delay) + 90ms);
}
.section-headline.ngs-visible .section-accent-line,
.section-title.ngs-visible::before{transform:scaleY(1)}

/* Hero depth: decorative only, colour tokens are inherited from the current theme. */
.main-content .hero.ngs-alive-hero > :not(.ngs-hero-orb){
  position:relative;
  z-index:2;
}
.ngs-hero-orb{
  position:absolute;
  z-index:0;
  display:block;
  border-radius:999px;
  pointer-events:none;
  filter:blur(2px);
  opacity:.16;
  transform:translate3d(var(--ngs-parallax-x,0),var(--ngs-parallax-y,0),0);
  transition:transform .45s var(--ngs-alive-ease);
  will-change:transform;
}
.ngs-hero-orb--one{
  width:210px;
  height:210px;
  right:5%;
  top:-58px;
  background:var(--ng-primary);
  box-shadow:0 0 72px color-mix(in srgb,var(--ng-primary) 52%,transparent);
  animation:ngsHeroDriftOne 9s ease-in-out infinite alternate;
}
.ngs-hero-orb--two{
  width:150px;
  height:150px;
  left:-42px;
  bottom:-54px;
  background:var(--ng-primary-2);
  box-shadow:0 0 62px color-mix(in srgb,var(--ng-primary-2) 48%,transparent);
  animation:ngsHeroDriftTwo 11s ease-in-out infinite alternate;
}
.ngs-hero-orb--three{
  width:76px;
  height:76px;
  right:31%;
  bottom:12%;
  background:var(--ng-accent);
  box-shadow:0 0 46px color-mix(in srgb,var(--ng-accent) 42%,transparent);
  animation:ngsHeroDriftThree 7s ease-in-out infinite alternate;
}
@keyframes ngsHeroDriftOne{
  from{margin-top:0;margin-right:0}
  to{margin-top:22px;margin-right:18px}
}
@keyframes ngsHeroDriftTwo{
  from{margin-left:0;margin-bottom:0}
  to{margin-left:20px;margin-bottom:16px}
}
@keyframes ngsHeroDriftThree{
  from{margin-right:0;margin-bottom:0}
  to{margin-right:14px;margin-bottom:20px}
}

/* Pointer-following card illumination and restrained 3D response. */
.ngs-interactive-surface{
  --ngs-pointer-x:50%;
  --ngs-pointer-y:50%;
  --ngs-rotate-x:0deg;
  --ngs-rotate-y:0deg;
  position:relative!important;
  isolation:isolate;
  overflow:hidden;
}
.ngs-interactive-surface > :not(.ngs-surface-glow){
  position:relative;
  z-index:1;
}
.ngs-surface-glow{
  position:absolute!important;
  z-index:0!important;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(330px circle at var(--ngs-pointer-x) var(--ngs-pointer-y),
      color-mix(in srgb,var(--ng-primary) 19%,transparent),
      transparent 58%);
  transition:opacity .28s ease;
}
.ngs-interactive-surface:hover .ngs-surface-glow{opacity:1}

@media (hover:hover) and (pointer:fine){
  .ngs-tilt-surface{
    transform-style:preserve-3d;
    backface-visibility:hidden;
    transition:
      transform .36s var(--ngs-alive-spring),
      box-shadow .34s ease,
      border-color .3s ease!important;
    will-change:transform;
  }
  .ngs-tilt-surface:hover{
    transform:
      perspective(950px)
      translate3d(0,-7px,0)
      rotateX(var(--ngs-rotate-x))
      rotateY(var(--ngs-rotate-y))!important;
    border-color:color-mix(in srgb,var(--ng-primary) 34%,transparent)!important;
    box-shadow:
      0 28px 72px rgba(15,23,42,.13),
      0 12px 32px color-mix(in srgb,var(--ng-primary) 13%,transparent)!important;
  }
  .ngs-tilt-surface:hover .icon,
  .ngs-tilt-surface:hover .section-icon,
  .ngs-tilt-surface:hover .modern-bottom-icon{
    transform:translate3d(0,-3px,18px) scale(1.06);
  }
}

/* Category icons and card thumbnails feel responsive without changing layout. */
.category-card .icon,
.section-icon,
.thumbnail-img,
.modern-bottom-icon{
  transition:transform .42s var(--ngs-alive-spring),filter .3s ease,box-shadow .3s ease!important;
}
.category-card:hover .icon{filter:saturate(1.08)}
.paper-card:hover .thumbnail-img{transform:scale(1.025)}

/* Buttons: light sweep + precise click/touch ripple. */
.ngs-pressable{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  -webkit-tap-highlight-color:transparent;
  transform:translateZ(0);
}
.ngs-pressable > :not(.ngs-button-sheen):not(.ngs-ripple){position:relative;z-index:2}
.ngs-button-sheen{
  position:absolute!important;
  z-index:1!important;
  top:-80%;
  bottom:-80%;
  left:-42%;
  width:30%;
  pointer-events:none;
  opacity:0;
  transform:rotate(18deg) translate3d(-160%,0,0);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.46),transparent);
}
.ngs-pressable:hover .ngs-button-sheen{
  opacity:1;
  animation:ngsButtonSheen .78s var(--ngs-alive-ease) both;
}
@keyframes ngsButtonSheen{
  from{transform:rotate(18deg) translate3d(-160%,0,0)}
  to{transform:rotate(18deg) translate3d(560%,0,0)}
}
.ngs-ripple{
  position:absolute!important;
  z-index:1!important;
  width:14px;
  height:14px;
  margin:-7px 0 0 -7px;
  border-radius:50%;
  pointer-events:none;
  background:rgba(255,255,255,.58);
  transform:scale(0);
  animation:ngsRipple .58s ease-out forwards;
}
@keyframes ngsRipple{
  to{transform:scale(18);opacity:0}
}
.ngs-pressable:active{transform:translateY(1px) scale(.985)!important}

/* Navigation and footer micro-interactions. */
nav.site-nav a,
.site-nav a,
.modern-menu-link,
.modern-bottom-nav a,
.ngs-footer-link{
  will-change:transform;
}
.modern-bottom-nav a.active .modern-bottom-icon{
  animation:ngsActiveNavPop .58s var(--ngs-alive-spring) both;
}
@keyframes ngsActiveNavPop{
  0%{transform:scale(.82)}
  62%{transform:scale(1.12)}
  100%{transform:scale(1)}
}
.ngs-footer-link:hover{transform:translateX(4px)}

/* Empty/loading surfaces avoid looking frozen while data is arriving. */
.ngs-loading-state{
  position:relative;
  overflow:hidden;
}
.ngs-loading-state::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  transform:translateX(-110%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.62) 48%,transparent 76%);
  animation:ngsLoadingSweep 1.45s ease-in-out infinite;
}
@keyframes ngsLoadingSweep{to{transform:translateX(110%)}}

/* Dark-mode illumination uses the same site tokens with lower intensity. */
body.modern-dark .ngs-surface-glow{
  background:
    radial-gradient(340px circle at var(--ngs-pointer-x) var(--ngs-pointer-y),
      color-mix(in srgb,var(--ng-primary) 22%,transparent),
      transparent 60%);
}
body.modern-dark .ngs-ripple{background:rgba(255,255,255,.34)}
body.modern-dark .ngs-loading-state::after{
  background:linear-gradient(100deg,transparent 20%,rgba(125,211,252,.10) 48%,transparent 76%);
}

@media (max-width:768px){
  .ngs-scroll-progress{height:2px}
  .ngs-reveal{
    filter:none;
    transform:translate3d(0,18px,0) scale(.992);
    transition-duration:.56s,.64s,.01s;
  }
  .ngs-interactive-surface{overflow:hidden}
  .ngs-surface-glow{display:none}
  .ngs-hero-orb--one{width:150px;height:150px;right:-28px;top:-38px}
  .ngs-hero-orb--two{width:110px;height:110px;left:-32px;bottom:-42px}
  .ngs-hero-orb--three{width:58px;height:58px;right:18%;bottom:17%}
  .modern-bottom-nav a:active .modern-bottom-icon{transform:scale(.9)!important}
  .category-card:active,
  .job-card:active,
  .paper-card:active,
  .study-card:active,
  .study-resource-card:active{
    transform:scale(.985)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .ngs-reveal,
  .ngs-reveal.ngs-visible{
    opacity:1!important;
    filter:none!important;
    transform:none!important;
  }
  .ngs-hero-orb,
  .modern-bottom-nav a.active .modern-bottom-icon,
  .ngs-loading-state::after{
    animation:none!important;
  }
  .ngs-tilt-surface:hover{transform:none!important}
  .ngs-button-sheen,
  .ngs-ripple{display:none!important}
}

/* ========================================================================== 
   NextGen Sarkari compact responsive footer — final override
   Scoped to .ngs-footer so legacy footer rules cannot stretch this component.
   ========================================================================== */
.ngs-footer{
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  color:#dbeafe!important;
  background:
    radial-gradient(circle at 92% 0%,rgba(34,197,94,.13),transparent 30%),
    linear-gradient(135deg,#062c46 0%,#06384a 56%,#07533f 100%)!important;
  border-top:3px solid transparent!important;
  border-image:linear-gradient(90deg,#18b7e9,#2dd4bf,#f4c542) 1!important;
}
.ngs-footer::before{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  right:-150px;
  top:-185px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:50%;
  box-shadow:0 0 0 54px rgba(255,255,255,.025);
  pointer-events:none;
}
.ngs-footer-inner{
  position:relative!important;
  z-index:1!important;
  width:min(1180px,calc(100% - 40px))!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:38px 0 22px!important;
}
.ngs-footer-brand{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 26px!important;
  padding:0!important;
}
.ngs-footer-mark{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:15px;
  background:linear-gradient(145deg,#ffe15a,#ffc928);
  color:#092b43;
  font-size:1.3rem;
  font-weight:900;
  box-shadow:0 10px 28px rgba(245,197,42,.22);
  transition:transform .28s ease,box-shadow .28s ease;
}
.ngs-footer-brand:hover .ngs-footer-mark{
  transform:translateY(-3px) rotate(-3deg);
  box-shadow:0 15px 32px rgba(245,197,42,.30);
}
.ngs-footer-brand-copy strong{
  display:block;
  margin:0;
  color:#fff;
  font-size:1.22rem;
  line-height:1.1;
  letter-spacing:-.025em;
}
.ngs-footer-brand-copy strong span{color:#ffd33d}
.ngs-footer-brand-copy p{
  margin:5px 0 0!important;
  color:rgba(219,234,254,.72)!important;
  font-size:.86rem!important;
  line-height:1.45!important;
}
.ngs-footer-grid{
  display:grid!important;
  grid-template-columns:1.15fr .9fr .9fr .8fr!important;
  gap:34px!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
}
.ngs-footer-section{
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
.ngs-footer-section h2{
  margin:0 0 13px!important;
  padding:0!important;
  color:#fff!important;
  font-size:.75rem!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
.ngs-footer-links{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
}
.ngs-footer-link{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  min-height:28px!important;
  margin:0!important;
  padding:3px 0!important;
  color:rgba(219,234,254,.76)!important;
  font-size:.88rem!important;
  line-height:1.3!important;
  text-decoration:none!important;
  border:0!important;
  background:none!important;
  transition:color .22s ease,transform .22s ease!important;
}
.ngs-footer-link::after{
  content:"›";
  margin-left:5px;
  opacity:0;
  transform:translateX(-4px);
  color:#ffd33d;
  transition:opacity .22s ease,transform .22s ease;
}
.ngs-footer-link:hover,
.ngs-footer-link:focus-visible{
  color:#fff!important;
  text-decoration:none!important;
  transform:translateX(3px)!important;
}
.ngs-footer-link:hover::after,
.ngs-footer-link:focus-visible::after{opacity:1;transform:none}
.ngs-footer-socials{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin:0!important;
}
.ngs-footer-socials .ngs-footer-link{
  min-height:36px!important;
  padding:7px 12px!important;
  border:1px solid rgba(148,210,223,.22)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.035)!important;
}
.ngs-footer-socials .ngs-footer-link::after{display:none}
.ngs-footer-socials .ngs-footer-link:hover{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(94,234,212,.42)!important;
  transform:translateY(-2px)!important;
}
.ngs-footer-bottom{
  display:flex!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin:28px 0 0!important;
  padding:18px 0 0!important;
  border-top:1px solid rgba(148,210,223,.18)!important;
  color:rgba(219,234,254,.58)!important;
  font-size:.78rem!important;
  line-height:1.4!important;
  text-align:left!important;
}

@media (max-width:768px){
  .ngs-footer{
    min-height:0!important;
    height:auto!important;
    border-radius:0!important;
  }
  .ngs-footer-inner{
    width:100%!important;
    min-height:0!important;
    padding:20px 18px calc(86px + env(safe-area-inset-bottom))!important;
  }
  .ngs-footer-brand{
    gap:10px!important;
    margin-bottom:16px!important;
  }
  .ngs-footer-mark{
    width:40px;
    height:40px;
    flex-basis:40px;
    border-radius:12px;
    font-size:1.05rem;
  }
  .ngs-footer-brand-copy strong{font-size:1.08rem}
  .ngs-footer-brand-copy p{display:none!important}
  .ngs-footer-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:0 18px!important;
  }
  .ngs-footer-section{
    display:contents!important;
  }
  .ngs-footer-section h2{display:none!important}
  .ngs-footer-links{
    display:contents!important;
  }
  .ngs-footer-link{
    width:100%!important;
    min-height:36px!important;
    padding:7px 8px!important;
    font-size:.82rem!important;
    border-bottom:1px solid rgba(148,210,223,.10)!important;
  }
  .ngs-footer-link::after{display:none!important}
  .ngs-footer-link:hover,
  .ngs-footer-link:focus-visible,
  .ngs-footer-link:active{
    color:#fff!important;
    transform:none!important;
    background:rgba(255,255,255,.045)!important;
    border-radius:8px!important;
  }
  .ngs-footer-socials{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:8px!important;
    margin-top:12px!important;
  }
  .ngs-footer-socials .ngs-footer-link{
    justify-content:center!important;
    min-height:38px!important;
    padding:7px 6px!important;
    border:1px solid rgba(148,210,223,.20)!important;
    border-radius:10px!important;
    font-size:.78rem!important;
    white-space:nowrap!important;
  }
  .ngs-footer-bottom{
    display:block!important;
    margin-top:14px!important;
    padding-top:13px!important;
    font-size:.72rem!important;
    text-align:center!important;
  }
  .ngs-footer-bottom span:last-child{display:none!important}
}

@media (max-width:390px){
  .ngs-footer-inner{padding-left:14px!important;padding-right:14px!important}
  .ngs-footer-grid{gap:0 10px!important}
  .ngs-footer-link{font-size:.77rem!important;padding-left:5px!important;padding-right:5px!important}
  .ngs-footer-socials .ngs-footer-link{font-size:.72rem!important}
}
