/* ==========================================================================
   Nexora Jobs — Premium Polish Layer
   Glassmorphism, motion, and micro-interactions layered on top of the
   core design system (site.css / dashboard.css). Kept separate so the
   base system stays clean and this can be toggled/tuned independently.
   ========================================================================== */

/* ---- Glassmorphism ---- */
.glass{
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 8px 32px rgba(20,15,60,.08);
}
.glass-dark{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.12);
}
.hero-search.glass{background:rgba(255,255,255,.92)}

/* ---- Elevation on hover (cards already scale via card-soft; this adds a
   deeper, springier shadow + subtle lift for a more premium feel) ---- */
.card-soft{
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .35s ease;
}
.card-soft:hover{
  box-shadow:0 24px 48px -12px rgba(20,15,60,.16), 0 8px 16px -8px rgba(139,92,246,.12);
}

/* ---- Buttons: ripple + magnetic hover ---- */
.btn{position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, filter .2s ease}
.btn-primary:hover, .btn-outline-primary:hover{transform:translateY(-2px);box-shadow:0 12px 24px -8px rgba(139,92,246,.45)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .ripple{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.55);
  transform:scale(0);animation:nx-ripple .6s ease-out;pointer-events:none;
}
@keyframes nx-ripple{to{transform:scale(3);opacity:0}}

/* ---- Scroll reveal (paired with data-nx-reveal + JS IntersectionObserver) ---- */
[data-nx-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
[data-nx-reveal].is-visible{opacity:1;transform:translateY(0)}
[data-nx-reveal="fade"]{transform:none}
[data-nx-reveal="scale"]{transform:scale(.92)}
[data-nx-reveal="scale"].is-visible{transform:scale(1)}

/* ---- Stagger children of a reveal group ---- */
[data-nx-stagger] > *{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
[data-nx-stagger].is-visible > *{opacity:1;transform:translateY(0)}
[data-nx-stagger].is-visible > *:nth-child(1){transition-delay:.03s}
[data-nx-stagger].is-visible > *:nth-child(2){transition-delay:.09s}
[data-nx-stagger].is-visible > *:nth-child(3){transition-delay:.15s}
[data-nx-stagger].is-visible > *:nth-child(4){transition-delay:.21s}
[data-nx-stagger].is-visible > *:nth-child(5){transition-delay:.27s}
[data-nx-stagger].is-visible > *:nth-child(6){transition-delay:.33s}
[data-nx-stagger].is-visible > *:nth-child(7){transition-delay:.39s}
[data-nx-stagger].is-visible > *:nth-child(8){transition-delay:.45s}

/* ---- Hero ambient motion ---- */
.hero-section{background-size:140% 140%;animation:nx-aurora 18s ease-in-out infinite}
@keyframes nx-aurora{
  0%,100%{background-position:0% 0%}
  50%{background-position:100% 30%}
}
@media (prefers-reduced-motion: reduce){
  .hero-section{animation:none}
  [data-nx-reveal],[data-nx-stagger]>*{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- Skeleton loaders ---- */
.nx-skeleton{position:relative;overflow:hidden;background:#EDEBF7;border-radius:8px}
.nx-skeleton::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  animation:nx-shimmer 1.4s infinite;
}
@keyframes nx-shimmer{100%{transform:translateX(100%)}}

/* ---- Toasts (Bootstrap toast, restyled) ---- */
.toast{border:none;border-radius:14px;box-shadow:0 20px 40px rgba(20,15,60,.18);overflow:hidden}
.toast::before{content:'';display:block;height:3px;background:var(--nx-gradient)}
.toast-nx-success::before{background:#22C55E}
.toast-nx-error::before{background:#EF4444}

/* ---- Command palette (Ctrl/Cmd+K) ---- */
.nx-cmdk-backdrop{position:fixed;inset:0;background:rgba(10,9,24,.55);backdrop-filter:blur(4px);z-index:1080;display:none;align-items:flex-start;justify-content:center;padding-top:12vh}
.nx-cmdk-backdrop.show{display:flex}
.nx-cmdk{width:100%;max-width:560px;background:#fff;border-radius:16px;box-shadow:0 30px 80px rgba(10,9,24,.4);overflow:hidden;animation:nx-cmdk-in .18s cubic-bezier(.22,1,.36,1)}
@keyframes nx-cmdk-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.nx-cmdk input{border:none;padding:18px 20px;font-size:1.05rem;width:100%;outline:none}
.nx-cmdk-results{max-height:340px;overflow-y:auto;border-top:1px solid var(--nx-line, #EAE8F3)}
.nx-cmdk-item{display:flex;align-items:center;gap:12px;padding:12px 20px;font-size:.92rem;cursor:pointer;color:#171530}
.nx-cmdk-item:hover,.nx-cmdk-item.active{background:var(--nx-gradient-soft, rgba(139,92,246,.08))}
.nx-cmdk-hint{font-size:.7rem;color:#9490B0;border:1px solid #E4E1F0;border-radius:5px;padding:1px 6px}

/* ---- Focus visibility (accessibility) ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--nx-violet,#8B5CF6);outline-offset:2px;
}

/* ---- Count-up number styling hook ---- */
[data-nx-countup]{font-variant-numeric:tabular-nums}