/* The wordmark's two easter eggs (wordmark-eggs.js). One transparent layer over the whole viewport: no edge, no clipping, never a
   tap. While an egg is live the word leaves its capsule; after it, the capsule springs back with a shine across it. */
.pk-egg-layer { position: fixed; left: 0; top: 0; z-index: 2147483100; width: 100vw; height: 100vh; pointer-events: none; }
html body .pk-wordmark.pk-egg-live { opacity: 0 !important; transition: opacity 180ms ease !important; }
html body .pk-wordmark.pk-egg-empty span { opacity: .55; transition: opacity 240ms ease; }

/* The capsule re-forms: the word springs from a little small to its size, and a band of light passes over the glass once. */
@media (prefers-reduced-motion: no-preference) {
  html body .pk-wordmark.pk-egg-reform span { display: inline-block; animation: pk-egg-reform 700ms cubic-bezier(.2, 1.7, .35, 1) both; }
  .pk-egg-shine { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: inherit; pointer-events: none; }
  .pk-egg-shine::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 34%; transform: skewX(-18deg);
    background: linear-gradient(90deg, rgba(255, 250, 243, 0), rgba(255, 250, 243, .55) 50%, rgba(255, 250, 243, 0)); animation: pk-egg-shine 760ms 120ms cubic-bezier(.3, .6, .3, 1) both; }
}
@keyframes pk-egg-reform { 0% { opacity: 0; transform: scale(.82); } 55% { opacity: 1; transform: scale(1.08); } 100% { transform: none; } }
@keyframes pk-egg-shine { from { left: -40%; } to { left: 120%; } }

/* Reduced motion: the hold is a still smear of the word in the palette, gone on release. */
html body .pk-wordmark.pk-egg-wet--still span { background: linear-gradient(100deg, #ff4b3a, #ffb43f 30%, #ff5fa8 55%, #a0276f 78%, #3b2fd0); -webkit-background-clip: text; background-clip: text; color: transparent; filter: blur(.7px); }
/* Reduced motion's marbles: one calm pulse of the twelve dots' colours round the capsule. */
html body .pk-wordmark.pk-egg-pulse { animation: pk-egg-pulse 1.3s ease-out both; }
@keyframes pk-egg-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 75, 58, 0), 0 0 0 0 rgba(255, 180, 63, 0); }
  35% { box-shadow: 0 0 0 4px rgba(255, 75, 58, .55), 0 0 0 9px rgba(255, 180, 63, .35); }
  100% { box-shadow: 0 0 0 10px rgba(255, 75, 58, 0), 0 0 0 16px rgba(255, 180, 63, 0); }
}
