/* Career Reset — animated hero compass v1.1
   Abstract, original methodology visual. Titles sit OUTSIDE the compass ring;
   motion is restrained, sequential and reduced-motion safe. */

.hero-compass{
  position:relative;
  align-self:center;
  justify-self:center;
  width:min(100%,640px);
  margin:34px 0 30px;
  padding:10px 0 0;
}
.career-compass{
  position:relative;
  width:min(100%,600px);
  aspect-ratio:1/1;
  margin-inline:auto;
  isolation:isolate;
}
.compass-atmosphere{
  position:absolute;
  inset:7%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 48%,rgba(214,183,123,.16) 0 8%,transparent 9% 32%,rgba(71,109,107,.09) 33% 34%,transparent 35% 58%,rgba(214,183,123,.06) 59% 61%,transparent 62%),
    radial-gradient(circle at 62% 38%,rgba(255,255,255,.06),transparent 42%);
  filter:blur(.2px);
  opacity:.9;
  animation:compassAtmosphereDrift 14s ease-in-out 2.2s infinite alternate;
}
.career-compass::before,
.career-compass::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.career-compass::before{
  inset:17%;
  border:1px solid rgba(214,183,123,.12);
  box-shadow:0 0 80px rgba(214,183,123,.08),inset 0 0 52px rgba(71,109,107,.05);
}
.career-compass::after{
  inset:25%;
  background:radial-gradient(circle,rgba(214,183,123,.08),transparent 68%);
  filter:blur(12px);
}
.compass-rings{
  position:absolute;
  inset:6%;
  width:88%;
  height:88%;
  overflow:visible;
  transform:rotate(-90deg);
}
.compass-ring{
  fill:none;
  vector-effect:non-scaling-stroke;
  transform-origin:260px 260px;
}
.compass-ring-outer{
  stroke:rgba(214,183,123,.72);
  stroke-width:1.25;
  stroke-dasharray:1288;
  stroke-dashoffset:1288;
  animation:compassDraw 1.35s cubic-bezier(.22,.72,.28,1) .15s forwards;
}
.compass-ring-inner{
  stroke:rgba(244,233,221,.24);
  stroke-width:1;
  stroke-dasharray:949;
  stroke-dashoffset:949;
  animation:compassDraw 1.05s cubic-bezier(.22,.72,.28,1) .55s forwards;
}
.compass-ring-hairline{
  stroke:rgba(71,109,107,.38);
  stroke-width:.75;
  stroke-dasharray:4 13;
  opacity:0;
  animation:compassFade .8s ease 1.25s forwards,compassHairlineTurn 34s linear 2.1s infinite;
}
.compass-core{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  width:34%;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%) scale(.94);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#f8eee7;
  background:linear-gradient(145deg,rgba(66,42,60,.98),rgba(33,21,31,.98) 70%),var(--night);
  border:1px solid rgba(214,183,123,.72);
  box-shadow:0 20px 70px rgba(8,4,7,.36),0 0 0 7px rgba(214,183,123,.08),inset 0 0 44px rgba(214,183,123,.06);
  opacity:0;
  animation:compassCoreIn .8s cubic-bezier(.2,.72,.3,1) .65s forwards,compassCoreGlow 7s ease-in-out 2.3s infinite;
}
.compass-kicker,.compass-map-word{
  font:600 clamp(.55rem,.7vw,.68rem)/1.2 Inter,ui-sans-serif,sans-serif;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-bright);
}
.compass-core strong{
  margin:.35rem 0 .2rem;
  font:500 clamp(1rem,1.65vw,1.55rem)/1.06 Georgia,"Times New Roman",serif;
  letter-spacing:.08em;
}
.compass-star{
  margin-top:.65rem;
  width:28px;
  height:28px;
  border:1px solid rgba(214,183,123,.56);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--gold-bright);
  font-style:normal;
  font-size:.86rem;
}

/* Stage number sits on / near the ring. Stage TITLE is always outside it,
   extending away from the centre, never inward across the circular line. */
.compass-stage{
  position:absolute;
  z-index:7;
  width:30%;
  display:grid;
  align-items:center;
  gap:10px;
  opacity:0;
  transform:translateY(7px) scale(.98);
  animation:compassStageIn .58s cubic-bezier(.2,.72,.3,1) forwards;
}
.stage-number{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(214,183,123,.78);
  background:rgba(33,21,31,.94);
  color:#f8eee7;
  box-shadow:0 8px 28px rgba(8,4,7,.22);
  font:500 1rem/1 Georgia,"Times New Roman",serif;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
  animation:compassNodePulse 13.2s ease-in-out infinite;
}
.compass-stage:nth-of-type(even) .stage-number{background:rgba(48,73,69,.94)}
.compass-stage b{
  display:block;
  width:max-content;
  max-width:145px;
  padding:8px 10px;
  border:1px solid rgba(244,233,221,.12);
  border-radius:10px;
  background:rgba(33,21,31,.58);
  backdrop-filter:blur(6px);
  color:#f0e5eb;
  font:600 clamp(.67rem,.84vw,.8rem)/1.3 Inter,ui-sans-serif,sans-serif;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-shadow:0 1px 12px rgba(8,4,7,.45);
  box-shadow:0 8px 22px rgba(8,4,7,.08);
  transition:transform .28s ease,background-color .28s ease,border-color .28s ease;
}

/* Left half: label is LEFT of node (outward). */
.stage-1,.stage-5,.stage-6{
  grid-template-columns:minmax(0,1fr) 44px;
  text-align:right;
}
.stage-1 .stage-number,.stage-5 .stage-number,.stage-6 .stage-number{grid-column:2;grid-row:1}
.stage-1 b,.stage-5 b,.stage-6 b{grid-column:1;grid-row:1;justify-self:end}

/* Right half: label is RIGHT of node (outward). */
.stage-2,.stage-3,.stage-4{
  grid-template-columns:44px minmax(0,1fr);
  text-align:left;
}
.stage-2 .stage-number,.stage-3 .stage-number,.stage-4 .stage-number{grid-column:1;grid-row:1}
.stage-2 b,.stage-3 b,.stage-4 b{grid-column:2;grid-row:1;justify-self:start}

.stage-1{left:-5%;top:10%;animation-delay:.95s}
.stage-2{right:-5%;top:10%;animation-delay:1.1s}
.stage-3{right:-14%;top:42%;width:28%;animation-delay:1.25s}
.stage-4{right:-5%;bottom:10%;animation-delay:1.4s}
.stage-5{left:-5%;bottom:10%;animation-delay:1.55s}
.stage-6{left:-14%;top:42%;width:28%;animation-delay:1.7s}

.stage-1 .stage-number{animation-delay:2.4s}
.stage-2 .stage-number{animation-delay:4.2s}
.stage-3 .stage-number{animation-delay:6s}
.stage-4 .stage-number{animation-delay:7.8s}
.stage-5 .stage-number{animation-delay:9.6s}
.stage-6 .stage-number{animation-delay:11.4s}

.compass-stage:hover .stage-number{
  transform:scale(1.08);
  border-color:rgba(236,205,143,.98);
  box-shadow:0 8px 30px rgba(8,4,7,.25),0 0 0 6px rgba(214,183,123,.10),0 0 24px rgba(214,183,123,.34);
}
.compass-stage:hover b{
  transform:translateY(-2px);
  background:rgba(48,31,45,.78);
  border-color:rgba(214,183,123,.26);
}

.compass-tracer{
  position:absolute;
  z-index:6;
  inset:12.8%;
  border-radius:50%;
  opacity:0;
  animation:tracerAppear .5s ease 1.95s forwards,compassOrbit 15s linear 2.1s infinite;
}
.compass-tracer i{
  position:absolute;
  left:50%;
  top:-4px;
  width:8px;
  height:8px;
  margin-left:-4px;
  border-radius:50%;
  background:var(--gold-bright);
  box-shadow:0 0 0 5px rgba(214,183,123,.1),0 0 18px rgba(214,183,123,.75);
}
.hero-compass-caption{
  margin:2px 18px 0;
  text-align:right;
  color:#e7dae2;
  font:italic 1rem/1.4 Georgia,"Times New Roman",serif;
  opacity:0;
  animation:compassFade .7s ease 1.85s forwards;
}

@keyframes compassDraw{to{stroke-dashoffset:0}}
@keyframes compassFade{to{opacity:1}}
@keyframes compassCoreIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes compassStageIn{to{opacity:1;transform:none}}
@keyframes tracerAppear{to{opacity:1}}
@keyframes compassOrbit{to{transform:rotate(360deg)}}
@keyframes compassHairlineTurn{to{transform:rotate(360deg)}}
@keyframes compassAtmosphereDrift{from{transform:scale(.985) rotate(-1deg)}to{transform:scale(1.025) rotate(1.5deg)}}
@keyframes compassCoreGlow{
  0%,100%{box-shadow:0 20px 70px rgba(8,4,7,.36),0 0 0 7px rgba(214,183,123,.08),inset 0 0 44px rgba(214,183,123,.06)}
  50%{box-shadow:0 20px 70px rgba(8,4,7,.36),0 0 0 10px rgba(214,183,123,.11),0 0 36px rgba(214,183,123,.11),inset 0 0 44px rgba(214,183,123,.08)}
}
@keyframes compassNodePulse{
  0%,72%,100%{box-shadow:0 8px 28px rgba(8,4,7,.22);transform:scale(1)}
  78%{box-shadow:0 8px 30px rgba(8,4,7,.24),0 0 0 7px rgba(214,183,123,.09),0 0 24px rgba(214,183,123,.30);transform:scale(1.045)}
  84%{box-shadow:0 8px 28px rgba(8,4,7,.22);transform:scale(1)}
}

@media(min-width:1051px){
  .hero{grid-template-columns:minmax(0,1.02fr) minmax(490px,.98fr)}
  .hero-compass{min-height:590px}
}

@media(max-width:1180px) and (min-width:1051px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(450px,.9fr)}
  .hero-compass{width:min(100%,540px)}
  .compass-stage{width:31%;gap:8px}
  .stage-number{width:38px;height:38px;font-size:.9rem}
  .stage-1,.stage-5,.stage-6{grid-template-columns:minmax(0,1fr) 38px}
  .stage-2,.stage-3,.stage-4{grid-template-columns:38px minmax(0,1fr)}
  .stage-3,.stage-6{width:29%}
  .compass-stage b{max-width:128px;padding:7px 8px}
}

@media(max-width:1050px){
  .hero{grid-template-columns:1fr}
  .hero-copy{max-width:820px;margin-inline:auto;width:100%}
  .hero-compass{display:block;width:min(88vw,590px);margin:2px auto 42px}
  .career-compass{width:min(100%,540px)}
  .hero-compass-caption{text-align:center;margin-top:0}
}

@media(max-width:760px){
  .hero-compass{display:none}
}

@media(prefers-reduced-motion:reduce){
  .compass-ring-outer,.compass-ring-inner{stroke-dashoffset:0;animation:none}
  .compass-ring-hairline,.compass-core,.compass-stage,.compass-tracer,.hero-compass-caption,
  .compass-atmosphere,.stage-number{
    animation:none!important;
    opacity:1;
  }
  .compass-core{transform:translate(-50%,-50%) scale(1)}
  .compass-stage{transform:none}
}