/* Easter eggs. None of this is needed for the page itself. */

.eggs { position: absolute; inset: 0; pointer-events: none; }
.eggs > * { position: absolute; display: block; max-width: none; }

.egg-hit {
  pointer-events: auto;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: default;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.egg-hit:focus { outline: none; }

.egg-patch, .egg-sprite, .egg-flyer { opacity: 0; will-change: transform; }
.egg-patch.on, .egg-sprite.on, .egg-flyer.on { opacity: 1; }
.egg-patch { transition: opacity .25s; }
.egg-flyer { overflow: visible; }
.egg-flyer .wing {
  transform-box: view-box;
  transform-origin: 62px 50px;
  animation: egg-flap .24s ease-in-out infinite alternate;
}
.egg-flyer .wing.back { animation-delay: -.05s; }
@keyframes egg-flap { to { transform: scaleY(-.65); } }

/* Musical notes from the Leone lion */
.egg-note {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: #fff6df;
  text-shadow: 0 0 2px var(--crimson), 0 0 2px var(--crimson), 0 2px 6px rgba(28, 25, 23, .45);
}

/* The luzzu */
.egg-sea {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  z-index: 40;
  pointer-events: none;
  transition: opacity .6s;
}
.egg-sea .waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54px;
  background-repeat: repeat-x;
  background-size: 160px 100%;
  animation: egg-waves 3s linear infinite;
}
.egg-sea .waves.front { height: 40px; animation-duration: 2.2s; opacity: .9; }
@keyframes egg-waves { to { background-position-x: -160px; } }
.egg-sea .boat { position: absolute; bottom: 22px; left: 0; width: clamp(130px, 22vw, 190px); }

/* Festa */
.egg-bunting {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  z-index: 5;
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: 240px 56px;
  animation: egg-drop .9s cubic-bezier(.2, 1.4, .4, 1) both;
}
.egg-bunting.lower { top: 26px; background-position-x: 120px; opacity: .85; animation-delay: .15s; }
@keyframes egg-drop { from { transform: translateY(-100%); } }

.egg-fireworks { position: fixed; inset: 0; z-index: 30; pointer-events: none; }

.egg-toast {
  position: fixed;
  left: 50%;
  top: 18%;
  z-index: 45;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: .9rem 1.6rem 1rem;
  text-align: center;
  background: rgba(139, 30, 36, .94);
  color: #fdf3d8;
  border: 2px solid var(--gold);
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(28, 25, 23, .3);
  pointer-events: none;
  animation: egg-toast 4.5s ease both;
}
.egg-toast strong {
  display: block;
  font-family: "Cinzel", serif;
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  letter-spacing: .08em;
  color: #f6d77a;
}
.egg-toast span { font-style: italic; }
@keyframes egg-toast {
  0% { opacity: 0; transform: translate(-50%, -12px) scale(.96); }
  10%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}

@media (prefers-reduced-motion: reduce) {
  .egg-bunting, .egg-flyer .wing, .egg-sea .waves { animation: none; }
}