/* Easter egg styles: pika-surf. Moved verbatim out of static/app.css (egg rebuild); linked right after app.css in index.html. */
/* ================================================================
   Pikachu Surf egg — full-page Gen-1 water; sprite DVD-bounces
   via JS (≤3 s, flip on L/R). No drop-shadow.
   ================================================================ */
.cy-surf-wrap {
  position: fixed;
  inset: 0;
  z-index: 8100;
  pointer-events: none;
  overflow: hidden;
}

.cy-surf-water {
  position: absolute;
  inset: 0;
  /* Exact GIF palette cyan — not a smooth modern gradient */
  background-color: #58b8f8;
  background-image: url(/static/easter/pika_surf_water_tile.png);
  background-repeat: repeat;
  background-size: 64px 32px; /* 2× nearest-neighbor look */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform-origin: bottom center;
  animation:
    cy-surf-fill 0.45s steps(6, end) forwards,
    cy-surf-scroll 1.1s steps(8) 0.45s infinite;
}

@keyframes cy-surf-fill {
  from { transform: scaleY(0); opacity: 0.9; }
  to   { transform: scaleY(1); opacity: 1; }
}

@keyframes cy-surf-scroll {
  from { background-position: 0 0; }
  to   { background-position: -64px 0; }
}

.cy-surf-pika {
  position: absolute;
  left: 0;
  top: 0;
  height: min(160px, 28vh);
  width: auto;
  max-width: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  opacity: 0;
  will-change: left, top, transform;
}

@media (prefers-reduced-motion: reduce) {
  .cy-surf-wrap { display: none; }
}