/* Brand-guide easter egg v3: styles. Needs tokens.css. */
.egg { position: relative; display: inline-block; -webkit-tap-highlight-color: transparent; }

/* Progress ring: a conic sweep that fills like the P's quarter-rounds adding up to a circle */
.egg::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  background: conic-gradient(from 270deg, var(--c-mint) calc(var(--egg, 0) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  opacity: 0; transition: opacity var(--d-base) var(--e-out);
  pointer-events: none;
}
.egg--on::after { opacity: 1; }

.egg--pulse { animation: egg-pulse var(--d-base) var(--e-out); }
@keyframes egg-pulse { 40% { transform: scale(0.9); } 100% { transform: scale(1); } }

.egg-veil { position: fixed; inset: 0; z-index: 9999; background: var(--c-phthalo); }

@media (prefers-reduced-motion: reduce) {
  .egg--pulse { animation: none; }
}