/* Easter egg styles: pokeball. Moved verbatim out of static/app.css (egg rebuild); linked right after app.css in index.html. */
/* ============================================================
   Pokéball easter egg  (.cpb-* namespace)
   Sequence: bounce-in → wobble → vanish with confetti
   Outer (.cpb-ball) owns rise/rest Y; inner (.cpb-spin) owns wobble.
   ============================================================ */
.cpb-overlay {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}

.cpb-overlay.cpb-clickable { pointer-events: all; cursor: pointer; }

/* --- Pokéball shell (position only — never swap this animation away) --- */
.cpb-ball {
  position: relative;
  width: 140px; height: 140px;
  border-radius: 50%;
  box-shadow:
    0 0 0 5px #1a1a1a,
    0 16px 48px rgba(0,0,0,.6),
    0 4px 12px rgba(0,0,0,.4);
  overflow: hidden;
  /* Off-screen until bounce-in keyframes run (avoids center flash on delay). */
  transform: translateY(140vh);
  animation: cpb-bounce-in 0.95s cubic-bezier(.22,.61,.36,1) 0.05s forwards;
  flex-shrink: 0;
  perspective: 400px;
  transform-style: preserve-3d;
  transition: opacity 0.12s ease-out, box-shadow 0.12s ease-out;
}

/* Inner: wobble / open without touching the outer translateY. */
.cpb-spin {
  position: absolute; inset: 0;
  border-radius: 50%;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}

/* Top red half — radial gradient for 3-D sphere look */
.cpb-top {
  position: absolute; top: 0; left: 0; right: 0;
  height: 50%;
  background:
    radial-gradient(circle at 38% 32%,
      #ff6055 0%,   /* bright highlight */
      #e8231a 40%,
      #b81410 75%,
      #8a0d0a 100%
    );
  transform-origin: bottom center;
  transition: transform 0.28s cubic-bezier(.4,0,.2,1), opacity 0.28s;
}

/* Specular shine spot on red */
.cpb-top::after {
  content: '';
  position: absolute;
  top: 10%; left: 18%;
  width: 38%; height: 32%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}

.cpb-ball.cpb-open .cpb-top {
  transform: rotateX(75deg) translateY(-8px);
  opacity: 0.15;
}

/* Bottom white half — subtle gradient for depth */
.cpb-bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 50%;
  background:
    radial-gradient(circle at 62% 72%,
      #ffffff 0%,
      #ececec 55%,
      #d4d4d4 100%
    );
}

/* Shine on white half */
.cpb-bottom::after {
  content: '';
  position: absolute;
  bottom: 15%; right: 16%;
  width: 28%; height: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}

/* Center band */
.cpb-band {
  position: absolute; top: 50%; left: 0; right: 0;
  height: 13px;
  background: linear-gradient(to bottom, #111 0%, #2a2a2a 50%, #111 100%);
  transform: translateY(-50%);
  z-index: 2;
}

/* Center button — hinge circle */
.cpb-btn {
  position: absolute; top: 50%; left: 50%;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffffff 0%, #e8e8e8 50%, #c8c8c8 100%);
  border: 5px solid #1a1a1a;
  transform: translate(-50%, -50%);
  z-index: 3;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(0,0,0,.2),
    0 0 0 3px #444;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}

/* Wobble: button glows yellow like shaking animation */
.cpb-ball.cpb-wobble .cpb-btn {
  background: radial-gradient(circle at 40% 35%, #fff8c0 0%, #f5c842 60%, #d4a010 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(0,0,0,.15),
    0 0 0 3px #444,
    0 0 18px 8px rgba(255,210,40,.65);
}

/* Global sphere shine — sits on top of everything */
.cpb-shine {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%,
    rgba(255,255,255,.30) 0%,
    rgba(255,255,255,.08) 35%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 10;
}

/* --- Keyframes --- */
@keyframes cpb-bounce-in {
  0%   { transform: translateY(140vh) rotate(540deg) scale(0.7); }
  60%  { transform: translateY(-12px) rotate(20deg)  scale(1.07); }
  75%  { transform: translateY(10px)  rotate(8deg)   scale(0.96); }
  87%  { transform: translateY(-6px)  rotate(3deg)   scale(1.02); }
  100% { transform: translateY(0)     rotate(0deg)   scale(1); }
}

@keyframes cpb-wobble {
  0%, 100% { transform: rotate(0deg) scale(1); }
  12%      { transform: rotate(-22deg) scale(1.03); }
  30%      { transform: rotate(24deg)  scale(1.03); }
  48%      { transform: rotate(-18deg) scale(1.02); }
  66%      { transform: rotate(18deg)  scale(1.02); }
  82%      { transform: rotate(-8deg)  scale(1.01); }
  92%      { transform: rotate(5deg)   scale(1); }
}

/* After rise: pin Y at center and drop bounce-in so later phases never restart it. */
.cpb-ball.cpb-landed {
  transform: translateY(0);
  animation: none;
}

.cpb-ball.cpb-wobble .cpb-spin {
  animation: cpb-wobble 1.7s cubic-bezier(.36,.07,.19,.97);
}

@keyframes cpb-burst-flash {
  0%   {
    opacity: 1;
    box-shadow: 0 0 0 5px #1a1a1a, 0 16px 48px rgba(0,0,0,0.6), 0 0 0 0 rgba(255,255,255,0);
  }
  25%  {
    opacity: 1;
    box-shadow: 0 0 0 5px #1a1a1a, 0 16px 48px rgba(0,0,0,0.6), 0 0 80px 40px rgba(255,240,200,0.95);
  }
  100% {
    opacity: 0;
    box-shadow: 0 0 0 5px #1a1a1a, 0 16px 48px rgba(0,0,0,0.6), 0 0 0 0 rgba(255,255,255,0);
  }
}

/* Open: flash + fade with confetti (landed keeps translateY(0)). */
.cpb-ball.cpb-landed.cpb-open {
  animation: cpb-burst-flash 0.35s ease-out forwards;
  pointer-events: none;
}

/* --- Star burst particles --- */
.cpb-confetti-container {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 9001;
}

.cpb-piece {
  position: absolute;
  width: var(--w, 12px); height: var(--h, 12px);
  top: 0; left: 0;
  background: var(--color, #FFC700);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: cpb-particle var(--dur, 2.8s) var(--delay, 0s) ease-out forwards;
}

/* 5-point star */
.cpb-piece.cpb-star {
  border-radius: 0;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

@keyframes cpb-particle {
  0%   { opacity: 1; transform: translate(-50%,-50%) translate(0,0) rotate(0deg) scale(1); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(0.4); }
}

@media (prefers-reduced-motion: reduce) {
  .cpb-overlay { display: none; }
}