:root {
  interpolate-size: allow-keywords;

  /* ── Theme: change only these two colors ── */
  --color-active: #2a8cff;
  --color-done: #13db87;

  /* ── Layout (customisable) ── */
  --loader-w: 400px;
  --loader-h: 6px;
  --ball-size: 32px;
  --radius: 2px;

  /* ── Derived shades (auto-generated via perceptual oklch mixing) ── */
  --active-light: color-mix(in oklch, var(--color-active) 50%, #fff);
  --active-soft: color-mix(in oklch, var(--color-active) 65%, #fff);
  --active-deep: color-mix(in oklch, var(--color-active) 70%, #000);
  --active-faded: color-mix(in oklch, var(--color-active) 20%, #000);
  --active-glow: color-mix(in oklch, var(--color-active) 40%, transparent);

  --done-light: color-mix(in oklch, var(--color-done) 70%, #fff);
  --done-glow: color-mix(in oklch, var(--color-done) 50%, transparent);
}

body {
  background: linear-gradient(180deg, #000, var(--active-faded));
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: "Open Sans", system-ui, sans-serif;
}

.loader-container {
  text-align: center;
}

.loader {
  width: var(--loader-w);
  height: var(--loader-h);
  background: #0a0a0a;
  border-radius: var(--radius);
  position: relative;
  overflow: visible;
}

.progress {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: var(--radius);
  color: var(--color-active);
  background: linear-gradient(270deg, currentColor, transparent);
  filter: drop-shadow(0px 0px 10px currentColor);
}

.progress.done {
  background: linear-gradient(
    90deg,
    var(--color-done),
    var(--done-light) 40%,
    var(--color-done) 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  filter: drop-shadow(0px 0px 10px var(--color-done));
  animation: sweepDone 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.done-flash {
  position: absolute;
  inset: -8px 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 35%,
    var(--active-light) 45%,
    var(--active-light) 55%,
    transparent 65%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  filter: blur(4px);
}

.progress.done ~ .done-flash {
  animation: flashSweep 0.7s 0.05s cubic-bezier(0.12, 0, 0.39, 0) forwards;
}

.loader::after {
  content: "";
  position: absolute;
  inset: -30px -20px;
  border-radius: 50px;
  background: radial-gradient(
    ellipse at center,
    var(--done-glow),
    transparent 70%
  );
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  filter: blur(20px);
}

.loader.bloom::after {
  animation: bloomGlow 1.2s 0.1s ease-out forwards;
}

.energy {
  position: absolute;
  top: 50%;
  left: 0%;
  height: var(--loader-h);
  pointer-events: none;
  transform: translateY(-50%);
  z-index: 2;
}

.energy .core {
  position: absolute;
  right: calc(var(--ball-size) / -2);
  top: 50%;
  width: var(--ball-size);
  height: var(--ball-size);
  background: var(--active-light);
  border-radius: 50%;
  filter: blur(2px);
  box-shadow: 0 0 12px var(--active-soft), 0 0 32px var(--color-active),
    0 0 64px var(--active-deep);
  will-change: width, height, border-radius, background, box-shadow, filter;
  transform: translateY(-50%) translateZ(0);
}

.energy .glare {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  height: 60px;
  background: radial-gradient(
    circle at 50% 0%,
    color-mix(in oklch, var(--active-light) 90%, transparent),
    var(--active-glow),
    transparent 70%
  );
  filter: blur(25px) saturate(200%);
  opacity: 0.85;
  will-change: transform;
}

.particles span {
  position: absolute;
  border-radius: 50%;
  background: color-mix(in oklch, var(--active-light) 90%, transparent);
  box-shadow: 0 0 8px color-mix(in oklch, var(--active-light) 80%, transparent);
  width: 2px;
  height: 2px;
}

.replay {
  position: fixed;
  inset: 50%;
  place-self: center;
  display: flex;
  gap: 0.3rem;
  transform: translateY(80px);
  backdrop-filter: blur(5px);
  opacity: 0;
  padding: 0.6rem 1.4rem;
  background: radial-gradient(
    circle at top center,
    color-mix(in oklch, var(--color-done) 48%, transparent) -190%,
    #010604 100%
  );
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  border-radius: 24px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-done) 15%, transparent);
  color: color-mix(in oklch, var(--color-done) 80%, transparent);
  transition: color 0.5s, box-shadow 0.5s, opacity 0.5s, transform 0.5s;
}

.replay:hover {
  color: var(--done-light);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-done) 20%, transparent);
}

.replay.open {
  opacity: 1;
  transform: translateY(60px);
}

@keyframes sweepDone {
  0% {
    background-position: 100% 0;
    filter: drop-shadow(0px 0px 10px var(--color-done));
  }
  40% {
    filter: drop-shadow(0px 0px 50px var(--done-light))
      drop-shadow(0px 0px 20px var(--color-active));
  }
  70% {
    filter: drop-shadow(0px 0px 35px var(--color-done));
  }
  100% {
    background-position: 0% 0;
    filter: drop-shadow(0px 0px 14px var(--color-done));
  }
}

@keyframes flashSweep {
  0% {
    opacity: 1;
    background-position: -100% 0;
  }
  100% {
    opacity: 0;
    background-position: 200% 0;
  }
}

@keyframes bloomGlow {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  25% {
    opacity: 0.9;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}