/* ══════════════════════════════════════════════════════════════
   NEXAHIRING.IN — "AURORA GRID" 3D DEPTH LAYER
   Loaded after style.css / hire.css. Ambient gradient-mesh blobs,
   glass nav elevation, cursor-reactive tilt & glow, orbit ring in
   hero, animated counters. Same class names / markup.
   ══════════════════════════════════════════════════════════════ */

:root{
  --p-ease: cubic-bezier(.16,1,.3,1);
}

html{scroll-behavior:smooth}

/* ─── AMBIENT GRADIENT-MESH BLOBS ─────────────────────────────── */
body{position:relative}
.p-blob{position:fixed;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;opacity:.55;will-change:transform}
.p-blob-1{width:520px;height:520px;background:radial-gradient(circle,rgba(139,92,246,.35),transparent 70%);top:-160px;right:-120px}
.p-blob-2{width:460px;height:460px;background:radial-gradient(circle,rgba(75,60,250,.28),transparent 70%);bottom:-140px;left:-120px}
.p-blob-3{width:340px;height:340px;background:radial-gradient(circle,rgba(245,166,35,.22),transparent 70%);top:40%;left:50%}

/* ─── SCROLL PROGRESS BAR ────────────────────────────────────── */
.p-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--primary),var(--primary-2),var(--gold));z-index:999;transition:width .1s linear;box-shadow:0 0 12px rgba(139,92,246,.6)}

/* ─── NAV — elevates + tightens on scroll ─────────────────────── */
nav.p-scrolled{padding-top:10px!important;padding-bottom:10px!important;box-shadow:0 12px 34px -18px rgba(11,15,46,.35)!important;background:rgba(247,248,253,.92)!important}
.nav-links a{position:relative}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:linear-gradient(90deg,var(--primary),var(--primary-2));border-radius:2px;transition:width .35s var(--p-ease)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}

/* ─── HERO ORBIT RING (international / global-network motif) ─── */
.hero::before{
  content:'';position:absolute;top:50%;right:8%;width:600px;height:600px;
  transform:translateY(-50%);border-radius:50%;
  border:1px dashed rgba(75,60,250,.22);
  animation:pOrbitSpin 60s linear infinite;pointer-events:none;z-index:1;
}
.hero::after{
  content:'';position:absolute;top:50%;right:8%;width:440px;height:440px;
  transform:translateY(-50%);border-radius:50%;
  border:1px dashed rgba(245,166,35,.28);
  animation:pOrbitSpin 44s linear infinite reverse;pointer-events:none;z-index:1;
}
@keyframes pOrbitSpin{from{transform:translateY(-50%) rotate(0deg)}to{transform:translateY(-50%) rotate(360deg)}}
@media(max-width:1100px){.hero::before,.hero::after{display:none}}

/* ─── CARDS: cursor-tilt ready state (JS adds inline transform) ── */
.how-card,.job-card,.cat-card,.value-card,.test-card,.info-card,.plan-card,.chooser-card,.hire-card,.stat-card{
  will-change:transform;
}

/* ─── BADGES — glow pulse for hot/urgent ──────────────────────── */
.badge-hot,.badge-urgent{animation:pBadgePulse 2.4s ease-in-out infinite}
@keyframes pBadgePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,77,109,.35)}50%{box-shadow:0 0 0 6px rgba(255,77,109,0)}}

/* ─── ENHANCED SCROLL REVEAL ──────────────────────────────────── */
.reveal{opacity:0;transform:translateY(36px) scale(.97);transition:opacity .8s var(--p-ease),transform .8s var(--p-ease)}
.reveal.visible{opacity:1;transform:none}

/* stagger children of grids automatically */
.how-grid.reveal.visible .how-card,
.jobs-grid .job-card,
.cats-grid .cat-card,
.test-grid .test-card,
.value-grid .value-card{animation:pRise .7s var(--p-ease) both}
.how-grid .how-card:nth-child(1){animation-delay:.05s}
.how-grid .how-card:nth-child(2){animation-delay:.15s}
.how-grid .how-card:nth-child(3){animation-delay:.25s}
.how-grid .how-card:nth-child(4){animation-delay:.35s}
@keyframes pRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* ─── COUNT-UP READY STATE ────────────────────────────────────── */
.p-counting{font-variant-numeric:tabular-nums}

/* ─── BUTTON SHINE SWEEP ──────────────────────────────────────── */
.btn-solid::after,.submit-btn::after,.nav-cta::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s var(--p-ease);pointer-events:none;
}
.btn-solid:hover::after,.submit-btn:hover::after,.nav-cta:hover::after{left:130%}

/* ─── FOOTER accents ─────────────────────────────────────────── */
.footer-col a{transition:padding-left .3s var(--p-ease)}
.footer-col a:hover{padding-left:5px}

/* ─── FORM FIELDS — soft glow focus (already in style.css; add lift) ── */
.file-upload-label:hover{transform:translateY(-2px)}

/* ─── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--primary),var(--primary-2));border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ─── SELECTION ───────────────────────────────────────────────── */
::selection{background:var(--primary-light);color:var(--primary-dark)}

/* ─── CURSOR SPOTLIGHT (desktop) ──────────────────────────────── */
.p-spotlight{position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(75,60,250,.08),transparent 70%);transform:translate(-50%,-50%);transition:opacity .3s;opacity:0}
.p-spotlight.p-active{opacity:1}

/* ─── REDUCED MOTION ──────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .p-blob,.reveal,.how-card,.job-card,.cat-card,.value-card,.test-card,.badge-hot,.badge-urgent,.hero::before,.hero::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
}