:root{
  --text: #f3eee6;
  --muted: rgba(243,238,230,0.45);

  --track-top: rgba(255,255,255,0.08);
  --track-bottom: rgba(255,255,255,0.04);

  --fill-start: rgba(255, 190, 110, 0.95);
  --fill-end: rgba(255, 135, 45, 0.92);

  --glow-near: rgba(255, 183, 94, 0.45);
  --glow-mid: rgba(255, 183, 94, 0.18);
  --glow-far: rgba(255, 183, 94, 0);

  --transition-duration: 1100ms;
  --transition-ease: cubic-bezier(.22,.8,.24,1);

  /* Update this path to your actual lantern SVG */
  --lantern-svg: url("/images/lantern/lantern_primary.svg");
}

.project-progress{
  width: min(920px, 100%);
  margin: auto;
  padding: 28px 24px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.progress-title{
  margin: 0 0 18px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.progress-track{
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--track-top), var(--track-bottom));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.05),
    inset 0 -2px 4px rgba(0,0,0,0.35);
  overflow: visible;
}

.progress-fill{
  position: absolute;
  left: 0;
  top: 0;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--fill-end), var(--fill-start));
  
  box-shadow:
    0 0 10px rgba(255,166,66,0.30),
    0 0 24px rgba(255,166,66,0.16);
  transition: width var(--transition-duration) var(--transition-ease);
}

.progress-glow{
  position: absolute;
  top: 50%;
  left: var(--progress, 0%);
  width: 170px;
  height: 64px;
  transform: translate(-18px, -50%);
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at left center,
      var(--glow-near) 0%,
      var(--glow-mid) 38%,
      var(--glow-far) 78%
    );
  filter: blur(7px);
  transition: left var(--transition-duration) var(--transition-ease);
}

.progress-lantern{
  position: absolute;
  left: var(--progress, 0%);
  top: 100%;
  width: 34px;
  height: 48px;
  transform: translate(-50%, -72%);
  pointer-events: none;
  z-index: 3;
  transition: left var(--transition-duration) var(--transition-ease);
  animation: lanternFloat 4.4s ease-in-out infinite;
}

.progress-lantern::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lantern-svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter:
    drop-shadow(0 0 5px rgba(255, 183, 94, 0.55))
    drop-shadow(0 0 14px rgba(255, 183, 94, 0.28));
  z-index: 2;
}

.progress-lantern::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(255,219,150,0.50) 0%,
      rgba(255,166,66,0.20) 42%,
      rgba(255,166,66,0.00) 76%);
  filter: blur(3px);
  z-index: 0;
  animation: lanternPulse 4.4s ease-in-out infinite;
}

.progress-steps{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.step{
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  transition:
    color 350ms ease,
    text-shadow 350ms ease,
    opacity 350ms ease;
}

.step.active{
  color: rgba(243,238,230,0.88);
}

.step.current{
  color: #fff5df;
  text-shadow:
    0 0 8px rgba(255,183,94,0.45),
    0 0 18px rgba(255,183,94,0.20);
}


.step:first-child {
  text-align: left;
}

.sstep:last-child {
  text-align: right;
}

/* Embers */
.ember{
  position: absolute;
  bottom: 16px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,235,180,0.95) 0%,
    rgba(255,166,66,0.9) 45%,
    rgba(255,166,66,0) 100%);
  box-shadow:
    0 0 6px rgba(255,183,94,0.65),
    0 0 12px rgba(255,140,40,0.35);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.ember-1{
  width: 3px;
  height: 3px;
  animation: emberDrift1 2.2s ease-out infinite;
  animation-delay: 0s;
}

.ember-2{
  width: 5px;
  height: 5px;
  animation: emberDrift2 2.8s ease-out infinite;
  animation-delay: .35s;
}

.ember-3{
  width: 4px;
  height: 4px;
  animation: emberDrift3 2.4s ease-out infinite;
  animation-delay: .75s;
}

.ember-4{
  width: 3px;
  height: 3px;
  animation: emberDrift4 2.6s ease-out infinite;
  animation-delay: 1.1s;
}

.ember-5{
  width: 2px;
  height: 2px;
  animation: emberDrift5 2s ease-out infinite;
  animation-delay: 1.45s;
}

@keyframes lanternPulse{
  0%,100%{
    opacity: 0.86;
    transform: translate(-50%, -50%) scale(1);
  }
  50%{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes lanternFloat{
  0%,100%{
    transform: translate(-50%, -72%);
  }
  50%{
    transform: translate(-50%, -76%);
  }
}

@keyframes emberDrift1{
  0%{
    transform: translate(0, 0) scale(.7);
    opacity: 0;
  }
  15%{
    opacity: .9;
  }
  100%{
    transform: translate(-10px, -26px) scale(1.2);
    opacity: 0;
  }
}

@keyframes emberDrift2{
  0%{
    transform: translate(0, 0) scale(.6);
    opacity: 0;
  }
  12%{
    opacity: .85;
  }
  100%{
    transform: translate(8px, -30px) scale(1.15);
    opacity: 0;
  }
}

@keyframes emberDrift3{
  0%{
    transform: translate(0, 0) scale(.8);
    opacity: 0;
  }
  18%{
    opacity: .8;
  }
  100%{
    transform: translate(-4px, -22px) scale(1);
    opacity: 0;
  }
}

@keyframes emberDrift4{
  0%{
    transform: translate(0, 0) scale(.65);
    opacity: 0;
  }
  14%{
    opacity: .75;
  }
  100%{
    transform: translate(12px, -24px) scale(1.1);
    opacity: 0;
  }
}

@keyframes emberDrift5{
  0%{
    transform: translate(0, 0) scale(.7);
    opacity: 0;
  }
  16%{
    opacity: .7;
  }
  100%{
    transform: translate(-7px, -18px) scale(.95);
    opacity: 0;
  }
}

@media (max-width: 700px){
  .project-progress{
    padding: 22px 16px 18px;
  }

  .progress-glow{
    width: 110px;
    height: 50px;
  }

  .progress-lantern{
    width: 28px;
    height: 40px;
  }

  .step{
    font-size: 0.76rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .progress-lantern,
  .progress-lantern::after,
  .ember{
    animation: none !important;
  }

  .ember{
    display: none;
  }
}