/* ============================================
   🌼 Festa delle Donne 2026 — Mimosa SVG Frame
   Inline SVG corners drawn with CSS
   ============================================ */

.mimosa-frame {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Corner containers with SVG mimosa branches */
.mimosa-corner {
  position: absolute;
  width: clamp(120px, 22vw, 260px);
  height: clamp(120px, 22vw, 260px);
}

.mimosa-corner svg {
  width: 100%;
  height: 100%;
}

.mimosa-corner--tl { top: 0; left: 0; }
.mimosa-corner--tr { top: 0; right: 0; transform: scaleX(-1); }
.mimosa-corner--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.mimosa-corner--br { bottom: 0; right: 0; transform: scale(-1); }

/* Individual mimosa ball pulsing */
@keyframes mimosa-pulse {
  0%, 100% { r: var(--r); opacity: 0.9; }
  50%      { r: calc(var(--r) + 1px); opacity: 1; }
}

.mimosa-ball {
  animation: mimosa-pulse 3s ease-in-out infinite;
}

.mimosa-ball:nth-child(odd)  { animation-delay: 0s; }
.mimosa-ball:nth-child(even) { animation-delay: 1.5s; }

/* Subtle sway on branches */
@keyframes branch-sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(1.5deg); }
}

.mimosa-branch-group {
  transform-origin: bottom left;
  animation: branch-sway 6s ease-in-out infinite;
}

@media (max-width: 480px) {
  .mimosa-corner {
    width: clamp(80px, 30vw, 140px);
    height: clamp(80px, 30vw, 140px);
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .mimosa-corner {
    width: 90px;
    height: 90px;
  }
}