/* A travelling luminous ribbon: diffuse bloom, colored halo, bright core. */
.energy-ribbon {
  --beam-color: #039dff;
  position: relative;
  z-index: 1;
  width: min(1160px, 100%);
  height: 68px;
  margin: -24px auto;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
}
.energy-ribbon--green { --beam-color: #08eeb2; }
.energy-ribbon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.energy-ribbon path { fill: none; stroke: var(--beam-color); stroke-linecap: round; }
.energy-ribbon .beam-track { stroke-width: 1; opacity: .2; }
.energy-ribbon .beam-bloom,
.energy-ribbon .beam-halo,
.energy-ribbon .beam-core {
  stroke-dasharray: 100 200;
  animation: ribbon-travel 3.8s linear infinite;
  animation-delay: var(--beam-delay);
}
.energy-ribbon .beam-bloom { stroke-width: 22; filter: blur(7px); opacity: .48; }
.energy-ribbon .beam-halo { stroke-width: 7; filter: blur(2px); opacity: .75; }
.energy-ribbon .beam-core { stroke: #c4f7ff; stroke-width: 1.4; opacity: .95; }
.energy-ribbon.beam-paused path { animation-play-state: paused; }
.energy-ribbon--chamber { position: absolute; top: calc(100% + 10px); left: -20%; width: 140%; height: 80px; margin: 0; }
.energy-ribbon--checkout { height: 32px; margin: -8px auto 10px; opacity: .85; }
@keyframes ribbon-travel { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -300; } }
@media (max-width: 640px) {
  .energy-ribbon { height: 62px; margin-block: -18px; }
  .energy-ribbon--chamber { height: 70px; margin: 0; }
  .energy-ribbon--checkout { height: 30px; margin: -6px auto 10px; }
  .energy-ribbon .beam-bloom { stroke-width: 20; }
}
@media (prefers-reduced-motion: reduce) {
  .energy-ribbon .beam-bloom,
  .energy-ribbon .beam-halo,
  .energy-ribbon .beam-core { animation-duration: 8s; }
  .energy-ribbon .beam-bloom { opacity: .3; }
}