/* Easter egg styles: alebrije. Moved verbatim out of static/app.css (egg rebuild); linked right after app.css in index.html. */
/* ================================================================
   Día de los Muertos — Alebrije winged cat (Done walk).
   PNG cutout: static/easter/ofrenda/alebrije_cat.png
   Credit: Vecteezy alebrijes-cat-with-wings preview (internal entertainment cutout).
   Namespaced .calebrije-*; centered pop; gentle bob + wing-tip sway; transparent wrap.
   ================================================================ */
.calebrije-wrap {
  position: fixed;
  inset: 0;
  z-index: 8100;
  pointer-events: none;
  overflow: visible;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.calebrije-wrap.is-in { opacity: 1; }

.calebrije-wrap *,
.calebrije-wrap *::before,
.calebrije-wrap *::after { box-sizing: border-box; }

.calebrije-wrap.is-in .calebrije {
  transform: scale(var(--calebrije-scale, 0.88)) translateY(0);
  animation: calebrije-bob 4.2s ease-in-out 0.28s both;
}

.calebrije-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 55% 40%;
  animation: calebrije-wing 2.1s ease-in-out 0.28s infinite alternate;
}

@keyframes calebrije-bob {
  0% { transform: scale(var(--calebrije-scale, 0.88)) translateY(0) rotate(-1.5deg); }
  35% { transform: scale(var(--calebrije-scale, 0.88)) translateY(-8px) rotate(1.2deg); }
  70% { transform: scale(var(--calebrije-scale, 0.88)) translateY(-3px) rotate(-0.8deg); }
  100% { transform: scale(var(--calebrije-scale, 0.88)) translateY(-6px) rotate(0.6deg); }
}

@keyframes calebrije-wing {
  from { transform: rotate(-2.5deg); }
  to { transform: rotate(2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep force/?egg= visible — JS already skips ambient under reduced motion. */
  .calebrije-wrap.is-in .calebrije {
    animation: none;
    transform: scale(var(--calebrije-scale, 0.88)) translateY(0);
  }
  .calebrije-img { animation: none; }
}