/* careers.html page-only rules. Shared rules live in css/global.css. */
html{line-height:1.5;-webkit-text-size-adjust:100%}
body{font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;background:#F7F8FA;color:#314259;-webkit-font-smoothing:antialiased;overflow-x:hidden}
:focus-visible{outline:3px solid #0029FF;outline-offset:2px;border-radius:6px}
/* install band headline pulse, shared with index.html. index declares --flow on
   its root div; this page does not, and calc(3.4s / var(--flow)) with no
   fallback is an invalid duration that silently never runs - so the page root
   declares --flow:1 and the same authored value works here too. */
@keyframes bnGlow{0%,100%{text-shadow:0 0 22px rgba(255,255,0,.4)}50%{text-shadow:0 0 46px rgba(255,255,0,.8)}}
/* Life at BharatNXT: polaroids pegged to a line.
   The 12 team photos are 400x245 originals - the largest the company
   publishes - so a polaroid is always sized under that and never upscaled.

   The sway rotates about a point just above the card, where the peg grips, so
   each one pivots on its peg rather than spinning about its own middle. The
   base angle rides in --r and the keyframes add to it, so a card keeps its
   authored tilt at both ends of the swing. --d is a negative delay that offsets
   each card in the cycle; it is baked into the markup because a delay rewritten
   after mount re-seeks a running animation and the line falls out of phase. */
@keyframes bnPegSway{
  0%,100%{transform:translateX(-50%) rotate(calc(var(--r) - 1.2deg))}
  50%{transform:translateX(-50%) rotate(calc(var(--r) + 1.2deg))}
}
/* The line drifts as one piece: rope, pegs and photos together. The list is
   rendered twice and the track slides exactly half its width, so the wrap is
   invisible - same translateX(-50%) trick as the homepage ticker. */
@keyframes bnPileDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Hero pile. The cards overlap, and hovering one lifts it clear of the rest.
   The base tilt rides in --t so this rule can add to it rather than replace
   it - style-hover cannot be used here because the runtime does not
   interpolate it, so every card would have shared one hover transform.
   z-index is deliberately outside the transition: the card has to come to the
   front on the first frame, not fade forward.

   The !important is load-bearing, not habit: z-index and transform are written
   inline per card, and an inline declaration outranks any stylesheet rule
   without it. The runtime's own style-hover does the same thing. */
[data-hero-card]{transition:transform .3s cubic-bezier(.2,0,0,1),box-shadow .3s ease}
[data-hero-card]:hover{z-index:60 !important;transform:var(--t) translateY(-12px) scale(1.045) !important;box-shadow:0 26px 52px rgba(17,26,61,.22),0 4px 10px rgba(17,26,61,.12) !important}
[data-pile-scroll]:hover [data-pile],
[data-pile-scroll]:focus-within [data-pile]{animation-play-state:paused}
/* hide the filter rail's scrollbar on mobile without losing the scroll */
[data-job-filters] > div::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}
  /* the cards keep their authored tilt: the base angle is in the inline
     transform, so killing the animation leaves a still, pegged line rather
     than a row of straightened rectangles. The drift carries no information,
     so stop it outright instead of freezing it mid-slide. */
  [data-pile]{transform:none !important}}