/* Easter egg styles: marigold. Moved verbatim out of static/app.css (egg rebuild Phase 4). */
/* ================================================================
   Día de los Muertos — Marigold / cempasúchil (Done walk).
   PNG cutout: static/easter/ofrenda/marigold.png
   Credit: Vecteezy 68695102 / Md Emajuddin Imran — internal cutout, not their hosted file.
   Namespaced .cmarigold-*; FULL flower in all four corners (inset, never clipped);
   each corner flipped to face inward; soft glow + staggered bob; transparent wrap.
   ================================================================ */
.cmarigold-wrap {
  position: fixed;
  inset: 0;
  z-index: 8100;
  pointer-events: none;
  overflow: visible; /* never clip corner flowers */
  background: transparent;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.cmarigold-wrap.is-in { opacity: 1; }
.cmarigold-wrap *,
.cmarigold-wrap *::before,
.cmarigold-wrap *::after { box-sizing: border-box; }
/* Four-corner flowers — one .cmarigold per corner; full bloom stays on-screen */
.cmarigold {
  --cmarigold-size: min(200px, 26vw, 34vh);
  --cmarigold-inset: max(10px, 1.2vw);
  position: absolute;
  width: var(--cmarigold-size);
  height: auto;
  max-width: var(--cmarigold-size);
  filter:
    drop-shadow(0 0 12px rgba(245, 166, 35, 0.42))
    drop-shadow(0 6px 16px rgba(0, 0, 0, 0.30));
  opacity: 0.92;
  transition: opacity 0.28s ease;
}
.cmarigold-wrap.is-in .cmarigold { opacity: 1; }
/* Inset from edges so the whole PNG is visible; flip so each faces inward */
.cmarigold:nth-child(1) { top: var(--cmarigold-inset); left: var(--cmarigold-inset); }
.cmarigold:nth-child(2) { top: var(--cmarigold-inset); right: var(--cmarigold-inset); transform: scaleX(-1); }
.cmarigold:nth-child(3) { bottom: var(--cmarigold-inset); left: var(--cmarigold-inset); transform: scaleY(-1); }
.cmarigold:nth-child(4) { bottom: var(--cmarigold-inset); right: var(--cmarigold-inset); transform: scale(-1, -1); }
/* Bob keeps the corner flip in every keyframe (transform animations replace transform) */
.cmarigold-wrap.is-in .cmarigold:nth-child(1) { animation: cmarigold-bob-tl 4.4s ease-in-out 0.10s both; }
.cmarigold-wrap.is-in .cmarigold:nth-child(2) { animation: cmarigold-bob-tr 4.6s ease-in-out 0.20s both; }
.cmarigold-wrap.is-in .cmarigold:nth-child(3) { animation: cmarigold-bob-bl 4.2s ease-in-out 0.15s both; }
.cmarigold-wrap.is-in .cmarigold:nth-child(4) { animation: cmarigold-bob-br 4.5s ease-in-out 0.25s both; }
.cmarigold-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes cmarigold-bob-tl {
  0%   { transform: translate(0, 0) rotate(-1deg); }
  40%  { transform: translate(0, -6px) rotate(1.2deg); }
  70%  { transform: translate(0, -3px) rotate(-0.6deg); }
  100% { transform: translate(0, 0) rotate(0.4deg); }
}
@keyframes cmarigold-bob-tr {
  0%   { transform: scaleX(-1) translate(0, 0) rotate(-1deg); }
  40%  { transform: scaleX(-1) translate(0, -6px) rotate(1.2deg); }
  70%  { transform: scaleX(-1) translate(0, -3px) rotate(-0.6deg); }
  100% { transform: scaleX(-1) translate(0, 0) rotate(0.4deg); }
}
@keyframes cmarigold-bob-bl {
  0%   { transform: scaleY(-1) translate(0, 0) rotate(-1deg); }
  40%  { transform: scaleY(-1) translate(0, -6px) rotate(1.2deg); }
  70%  { transform: scaleY(-1) translate(0, -3px) rotate(-0.6deg); }
  100% { transform: scaleY(-1) translate(0, 0) rotate(0.4deg); }
}
@keyframes cmarigold-bob-br {
  0%   { transform: scale(-1, -1) translate(0, 0) rotate(-1deg); }
  40%  { transform: scale(-1, -1) translate(0, -6px) rotate(1.2deg); }
  70%  { transform: scale(-1, -1) translate(0, -3px) rotate(-0.6deg); }
  100% { transform: scale(-1, -1) translate(0, 0) rotate(0.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cmarigold-wrap.is-in .cmarigold { animation: none; }
  .cmarigold-wrap.is-in .cmarigold:nth-child(1) { transform: none; }
  .cmarigold-wrap.is-in .cmarigold:nth-child(2) { transform: scaleX(-1); }
  .cmarigold-wrap.is-in .cmarigold:nth-child(3) { transform: scaleY(-1); }
  .cmarigold-wrap.is-in .cmarigold:nth-child(4) { transform: scale(-1, -1); }
}