/* HN Multiverrse Jobs - homepage premium motion layer (posters rail + toolkit/workspace cards).
   Additive only: loaded AFTER the existing stylesheets, nothing in them is edited. Remove the 2 include lines to undo. */
@property --hnx-a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ======================================================= POSTERS & REELS ===== */
section.hnp{position:relative;isolation:isolate;overflow-x:clip}
section.hnp .hnp-wrap{position:relative;z-index:3}
section.hnp .hnp-fl{z-index:2}
.hnx-aurora,.hnx-grid,.hnx-spot,.hnx-parts{position:absolute;pointer-events:none}
.hnx-aurora{inset:0;z-index:0;overflow:hidden}
.hnx-aurora i{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5;mix-blend-mode:screen;animation:hnxDrift 16s ease-in-out infinite alternate}
.hnx-aurora i:nth-child(1){width:44vmax;height:44vmax;left:-14%;top:-6%;background:radial-gradient(circle,#7b4dff 0,transparent 66%)}
.hnx-aurora i:nth-child(2){width:38vmax;height:38vmax;right:-10%;top:18%;background:radial-gradient(circle,#ff9f43 0,transparent 66%);animation-delay:-5s;opacity:.34}
.hnx-aurora i:nth-child(3){width:34vmax;height:34vmax;left:30%;bottom:-18%;background:radial-gradient(circle,#ff4f9a 0,transparent 66%);animation-delay:-9s;opacity:.36}
@keyframes hnxDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(7%,-9%,0) scale(1.18)}}
.hnx-grid{left:-12%;right:-12%;bottom:-4%;height:48%;z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px);
  background-size:58px 58px;transform:perspective(560px) rotateX(63deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 4%,transparent 78%);mask-image:linear-gradient(to top,#000 4%,transparent 78%);animation:hnxGrid 7s linear infinite}
@keyframes hnxGrid{to{background-position:0 58px,58px 0}}
.hnx-spot{inset:0;z-index:1;background:radial-gradient(520px circle at var(--mx,70%) var(--my,35%),rgba(255,196,120,.20),transparent 62%);transition:background .08s linear}
.hnx-parts{inset:0;z-index:2;overflow:hidden}
.hnx-p{position:absolute;bottom:-20px;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0,rgba(255,206,130,.95) 38%,transparent 70%);animation:hnxRise linear infinite}
@keyframes hnxRise{0%{transform:translate3d(0,0,0) scale(.6);opacity:0}12%{opacity:.95}100%{transform:translate3d(var(--dx,24px),-560px,0) scale(1.15);opacity:0}}

/* parallax for the existing floating cube / rings / chips */
section.hnp .hnp-fl{translate:calc(var(--px,0)*-16px) calc(var(--py,0)*-11px);transition:translate .25s ease-out}

/* animated headline + live dot */
section.hnp .hnp-head h2{background:linear-gradient(100deg,#fff 15%,#ffd89b 38%,#ff9fcf 50%,#fff 68%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:hnxShine 7s linear infinite}
@keyframes hnxShine{from{background-position:120% 0}to{background-position:-100% 0}}
section.hnp .hnp-live-dot{animation:hnxBlink 1.8s ease-in-out infinite}
@keyframes hnxBlink{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}60%{box-shadow:0 0 0 9px rgba(74,222,128,0)}}

/* cards: float, glare, glow, pulsing play button */
section.hnp .hnp-card-in{position:relative;animation:hnxCardBob 6.5s ease-in-out infinite;transition:box-shadow .35s,filter .35s}
section.hnp .hnp-card:nth-child(2n) .hnp-card-in{animation-delay:-2.2s}
section.hnp .hnp-card:nth-child(3n) .hnp-card-in{animation-delay:-4.1s}
@keyframes hnxCardBob{0%,100%{translate:0 0}50%{translate:0 -11px}}
section.hnp .hnp-card-in:hover{box-shadow:0 26px 70px rgba(123,77,255,.55),0 0 0 1.5px rgba(255,200,130,.65);filter:saturate(1.1)}
.hnx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.34),transparent 46%);mix-blend-mode:soft-light}
section.hnp .hnp-card-in:hover .hnx-glare{opacity:1}
section.hnp .hnp-play{animation:hnxPulse 2.4s ease-out infinite}
@keyframes hnxPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 24px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
section.hnp .hnp-new{animation:hnxNew 2.2s ease-in-out infinite}
@keyframes hnxNew{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

/* slide indicator with autoplay progress */
.hnx-dots{display:flex;justify-content:center;align-items:center;gap:9px;margin:26px auto 0;position:relative;z-index:4;flex-wrap:wrap;padding:0 12px}
.hnx-dot{position:relative;width:10px;height:10px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.3);cursor:pointer;overflow:hidden;transition:width .35s,background .3s}
.hnx-dot:hover{background:rgba(255,255,255,.55)}
.hnx-dot:focus-visible{outline:2px solid #ffd89b;outline-offset:3px}
.hnx-dot.on{width:42px;background:rgba(255,255,255,.24)}
.hnx-dot.on::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#ffb347,#ff6fb5);transform-origin:left;animation:hnxFill var(--hnx-dur,3800ms) linear forwards}
.hnx-paused .hnx-dot.on::after{animation-play-state:paused}
@keyframes hnxFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hnx-playtoggle{margin-left:8px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff;font-size:11px;cursor:pointer;line-height:1;display:grid;place-items:center}
.hnx-playtoggle:hover{background:rgba(255,255,255,.22)}

/* ============================================ CANDIDATE + EMPLOYER CARDS ===== */
.hnx-stage{position:relative;animation:hnxStageBob 7.5s ease-in-out infinite}
.hnx-career{width:100%}
.hnx-hiring{width:min(100%,390px)}
@keyframes hnxStageBob{0%,100%{translate:0 0}50%{translate:0 -12px}}
.hnx-stage>[data-hnx]{position:relative;width:100%;transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .4s}
html body .hn-home .hnx-stage>.hn-career-panel[data-hnx]{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))!important;box-shadow:0 30px 70px rgba(105,65,232,.22),0 8px 22px rgba(57,36,121,.10)}
html body .hn-home .hnx-stage>.hn-hiring-panel[data-hnx]{transform:perspective(1100px) rotateZ(-1.6deg) rotateX(var(--rx,0deg)) rotateY(calc(3deg + var(--ry,0deg)))!important;box-shadow:0 34px 80px rgba(8,5,27,.5),0 0 0 1px rgba(255,255,255,.14)}
@media (max-width:650px){html body .hn-home .hnx-stage>.hn-hiring-panel[data-hnx]{transform:none!important}}

.hnx-border{position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--hnx-a),#6941e8,#ff7ab6,#ffb347,#4ade80,#6941e8);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:hnxSpin 7s linear infinite;opacity:.9}
@keyframes hnxSpin{to{--hnx-a:360deg}}
.hnx-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:3}
.hnx-shine{position:absolute;top:-30%;bottom:-30%;width:42%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:hnxSweep 6.5s ease-in-out infinite}
@keyframes hnxSweep{0%,55%{left:-60%}100%{left:130%}}

/* decorative depth: rings, orbs, sparkles */
.hnx-ring{position:absolute;inset:-34px -26px;border:1.5px dashed rgba(105,65,232,.38);border-radius:42px;transform:rotateX(68deg) rotateZ(0deg);animation:hnxRing 16s linear infinite;pointer-events:none;z-index:0}
.hnx-hiring .hnx-ring{border-color:rgba(255,255,255,.34)}
@keyframes hnxRing{to{transform:rotateX(68deg) rotateZ(360deg)}}
.hnx-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(2px);animation:hnxOrb 9s ease-in-out infinite}
.hnx-orb.a{width:74px;height:74px;right:-36px;top:-30px;background:radial-gradient(circle at 30% 30%,#fff,#ffb347 45%,#ff7ab6);box-shadow:0 12px 30px rgba(255,122,182,.45)}
.hnx-orb.b{width:44px;height:44px;left:-24px;bottom:34px;background:radial-gradient(circle at 30% 30%,#fff,#8b6bff 50%,#6941e8);box-shadow:0 10px 24px rgba(105,65,232,.45);animation-delay:-3.5s}
.hnx-orb.c{width:22px;height:22px;right:12%;bottom:-18px;background:radial-gradient(circle at 30% 30%,#fff,#4ade80);animation-delay:-6s}
@keyframes hnxOrb{0%,100%{translate:0 0}50%{translate:0 -18px}}
.hnx-spark{position:absolute;width:9px;height:9px;pointer-events:none;z-index:4;background:#ffd166;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:hnxTwinkle 2.8s ease-in-out infinite}
@keyframes hnxTwinkle{0%,100%{opacity:.15;scale:.5}50%{opacity:1;scale:1.25}}

/* floating info chips (decorative interface mock-ups) */
.hnx-badge{position:absolute;z-index:6;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 9px;border-radius:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 14px 34px rgba(30,16,80,.22),0 0 0 1px rgba(105,65,232,.12);font:600 11px/1.2 Poppins,Arial,sans-serif;color:#2a2352;white-space:nowrap;pointer-events:none;
  transform:translate3d(calc(var(--px,0)*var(--k,14px)),calc(var(--py,0)*var(--k,14px)),0);animation:hnxBadge 6s ease-in-out infinite}
.hnx-badge small{display:block;font-weight:500;font-size:9.5px;color:#7a7396;margin-top:1px}
.hnx-badge .ic{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;color:#fff;font-size:13px;background:linear-gradient(135deg,#6941e8,#8b6bff)}
.hnx-badge .ic.g{background:linear-gradient(135deg,#16a34a,#4ade80)}
.hnx-badge .ic.o{background:linear-gradient(135deg,#f97316,#ffb347)}
.hnx-badge.b1{right:-26px;top:-24px;--k:20px}
.hnx-badge.b2{left:-34px;bottom:-14px;animation-delay:-2s;--k:-16px}
.hnx-badge.b3{right:-32px;bottom:9%;animation-delay:-4s;--k:12px}
@keyframes hnxBadge{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* inside the cards */
.hn-career-progress{position:relative;overflow:visible!important}
.hn-career-progress span{display:block;position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(90deg,#6941e8,#9b7bff,#c4b0ff)!important;transition:width 1.7s cubic-bezier(.2,.8,.2,1)}
.hn-career-progress span::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-100%);animation:hnxBar 2.6s ease-in-out infinite}
@keyframes hnxBar{to{transform:translateX(100%)}}
.hnx-pct{position:absolute;right:0;top:-24px;font:700 11px/1 Poppins,Arial,sans-serif;color:#6941e8}
.hn-career-symbol{animation:hnxSymbol 4.8s ease-in-out infinite;position:relative}
@keyframes hnxSymbol{0%,100%{transform:rotate(0) scale(1)}35%{transform:rotate(14deg) scale(1.1)}70%{transform:rotate(-8deg) scale(1.04)}}
.hn-career-live,.hn-hiring-head b{animation:hnxLive 1.9s ease-in-out infinite}
@keyframes hnxLive{0%,100%{opacity:1}50%{opacity:.45}}
.hn-career-pills span{transition:transform .25s,box-shadow .25s;animation:hnxPill 4.6s ease-in-out infinite}
.hn-career-pills span:nth-child(2){animation-delay:-1.4s}
.hn-career-pills span:nth-child(3){animation-delay:-2.8s}
@keyframes hnxPill{0%,100%{translate:0 0}50%{translate:0 -4px}}
.hn-career-pills span:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 10px 22px rgba(105,65,232,.22)}

.hn-hiring-stat-row>div{transition:transform .25s,box-shadow .25s;animation:hnxStat 6s ease-in-out infinite}
.hn-hiring-stat-row>div:nth-child(2){animation-delay:-2s}
.hn-hiring-stat-row>div:nth-child(3){animation-delay:-4s}
@keyframes hnxStat{0%,70%,100%{box-shadow:0 0 0 0 rgba(105,65,232,0)}35%{box-shadow:0 8px 22px rgba(105,65,232,.28)}}
.hn-hiring-stat-row>div:hover{transform:translateY(-4px)}
.hn-hiring-step{transition:background .5s,box-shadow .5s,transform .5s;border-radius:12px;padding-inline:8px}
.hn-hiring-step.hnx-active{background:linear-gradient(90deg,rgba(105,65,232,.12),rgba(105,65,232,0));transform:translateX(4px)}
.hn-hiring-step.hnx-active>span{box-shadow:0 0 0 5px rgba(105,65,232,.16),0 6px 16px rgba(105,65,232,.35)}
.hn-hiring-step.hnx-active>i{animation:hnxPop .7s ease-out}
@keyframes hnxPop{0%{transform:scale(.4);opacity:.3}60%{transform:scale(1.35)}100%{transform:scale(1);opacity:1}}

/* scroll reveal (opacity + scale only, so it never fights the float animations) */
.hnx-rv{opacity:0;scale:.94;transition:opacity .7s ease,scale .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*110ms)}
.hnx-in .hnx-rv{opacity:1;scale:1}

/* small screens: fewer, calmer effects */
@media (max-width:900px){
  .hnx-badge.b3{display:none}.hnx-badge.b1{right:-6px;top:-18px}.hnx-badge.b2{left:-6px;bottom:-26px}
  .hnx-ring,.hnx-orb.c{display:none}.hnx-aurora i{filter:blur(54px)}.hnx-grid{opacity:.7}
}
@media (max-width:560px){
  .hnx-badge{font-size:10px;padding:6px 9px}.hnx-badge .ic{width:20px;height:20px;font-size:11px}
  .hnx-orb.a{width:50px;height:50px;right:-14px;top:-18px}.hnx-orb.b{display:none}
  .hnx-parts .hnx-p:nth-child(n+9){display:none}
}
@media (prefers-reduced-motion:reduce){
  .hnx-aurora i,.hnx-grid,.hnx-p,.hnx-stage,.hnx-border,.hnx-shine,.hnx-ring,.hnx-orb,.hnx-spark,.hnx-badge,section.hnp *,.hn-career-symbol,.hn-career-progress span::after,.hn-career-pills span,.hn-hiring-stat-row>div,.hn-career-live,.hn-hiring-head b{animation:none!important}
  .hnx-rv{opacity:1;scale:1;transition:none}.hnx-spot{display:none}
}