/* Easter egg styles: bolt. Moved verbatim out of static/app.css (egg rebuild); linked right after app.css in index.html. */
/* ================================================================
   Mythos pack — bolt celebrate (Aaron Iker CodePen LYPrYqq / Dribbble 7134825).
   Namespaced .cbolt*; WAAPI bounce on .cbolt-core; CSS stroke/morph when .cbolt-animate.
   ================================================================ */
.cbolt-wrap {
  position: fixed;
  inset: 0;
  z-index: 8100;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.cbolt {
  --cbolt: rgb(242, 222, 16);
  /* Pen is 126×186; celebrate ~1.75× */
  width: 220px;
  height: 325px;
  position: relative;
  flex-shrink: 0;
}

.cbolt svg {
  position: absolute;
  display: block;
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  stroke: var(--cbolt);
}

.cbolt-circle {
  left: 12px;
  top: 100%;
  width: 196px;
  height: 77px;
  stroke-dashoffset: 179px;
  stroke-dasharray: 0px 178px;
}

.cbolt-line {
  --cbolt-r: 0deg;
  top: 95%;
  width: 122px;
  height: 5px;
  stroke-dashoffset: 71px;
  stroke-dasharray: 0px 70px;
  transform: rotate(var(--cbolt-r));
}

.cbolt-line.cbolt-left { --cbolt-r: 130deg; left: -42px; }

.cbolt-line.cbolt-right { --cbolt-r: 40deg; right: -42px; }

.cbolt-white {
  --cbolt-r: 0deg;
  --cbolt-s: 1;
  top: 30%;
  z-index: 1;
  width: 170px;
  height: 57px;
  stroke-dashoffset: 241px;
  stroke-dasharray: 0px 240px;
  transform: rotate(var(--cbolt-r)) scaleX(var(--cbolt-s));
}

/* Beat `.cbolt svg { stroke: var(--cbolt) }` so shine arcs stay white (pen intent). */
.cbolt svg.cbolt-white { stroke: #fff; }

.cbolt-white.cbolt-left { --cbolt-r: -20deg; left: 0; }

.cbolt-white.cbolt-right { --cbolt-r: 20deg; --cbolt-s: -1; right: 0; }

.cbolt-core {
  display: block;
  position: relative;
  width: 220px;
  height: 325px;
  will-change: transform;
  transform-origin: 50% 50%;
}

.cbolt-core::before,
.cbolt-core::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 44%;
}

.cbolt-core::before {
  width: 196px;
  height: 196px;
  margin: -98px 0 0 -98px;
  background: #CDD9ED;
  filter: blur(124px);
}

.cbolt-core::after {
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  background: #FFF9BC;
  z-index: 1;
  filter: blur(60px);
}

.cbolt-core span {
  display: block;
  width: 220px;
  height: 325px;
  background: var(--cbolt);
  clip-path: polygon(40% 0%, 100% 0, 65% 40%, 88% 40%, 8% 100%, 36% 50%, 0 50%);
}

.cbolt-animate .cbolt-core::before,
.cbolt-animate .cbolt-core::after {
  animation: cbolt-shine 2s ease;
}

.cbolt-animate .cbolt-core span {
  animation: cbolt-morph 2s ease;
}

.cbolt-animate .cbolt-circle {
  animation: cbolt-circle 0.45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.3s;
}

.cbolt-animate .cbolt-line {
  animation: cbolt-line 0.45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.3s;
}

.cbolt-animate .cbolt-white {
  animation: cbolt-white 0.45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.45s;
}

.cbolt-animate .cbolt-white.cbolt-right {
  animation-delay: 1.6s;
}

@keyframes cbolt-circle {
  100% { stroke-dasharray: 178px 178px; }
}

@keyframes cbolt-white {
  100% { stroke-dasharray: 240px 240px; }
}

@keyframes cbolt-line {
  100% { stroke-dasharray: 70px 70px; }
}

@keyframes cbolt-shine {
  30%, 70% { opacity: 0; }
}

@keyframes cbolt-morph {
  12% {
    clip-path: polygon(40% 5%, 100% 0, 65% 40%, 65% 40%, 8% 100%, 24% 50%, 24% 50%);
  }
  24%, 72% {
    clip-path: polygon(36% 40%, 82% 40%, 82% 40%, 82% 40%, 36% 71%, 36% 40%, 36% 40%);
  }
  84% {
    clip-path: polygon(40% 5%, 100% 0, 65% 40%, 65% 40%, 8% 100%, 24% 50%, 24% 50%);
  }
}