/* Karin's "magic" layer, added 2026-10-16 after the home page: sparkles, fireflies, beating hearts,
   floating drawings, confetti and sparkling buttons, the same on every landing page.
   Every effect is switched off for visitors who ask for reduced motion. */

/* the opening: fireflies rise and sparkles twinkle around the first section */
.magic-hero { position: relative; }
.magic-layer { position: absolute; inset: -20px 0 0; z-index: 0; pointer-events: none; overflow: hidden; }
.magic-hero > *:not(.magic-layer) { position: relative; z-index: 1; }
.magic-layer .ff { position: absolute; bottom: -10px; width: 6px; height: 6px; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 10px 3px rgba(255, 224, 92, 0.75); opacity: 0; animation: mg-rise 11s linear infinite; }
.magic-layer .sp { position: absolute; color: #FFE05C; text-shadow: 0 0 10px rgba(255, 200, 60, 0.9); opacity: 0; animation: mg-twinkle 2.6s ease-in-out infinite; }
@keyframes mg-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 0.9; } 50% { transform: translate(18px, -45vh); opacity: 0.7; } 90% { opacity: 0.8; } 100% { transform: translate(-12px, -90vh); opacity: 0; } }
@keyframes mg-twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* drawings breathe and float softly, each at its own pace */
.mg-float { animation: mg-float 6s ease-in-out infinite; }
/* uses the separate translate/rotate properties so it never fights the GSAP reveal on transform */
@keyframes mg-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -7px; rotate: 1.2deg; } }

/* hearts over a run of testimonials: the pair beats, small hearts rise */
.mg-hearts { position: relative; width: 170px; height: 120px; margin: 0 auto var(--space-2); pointer-events: none; }
.mg-hearts .beat { position: absolute; left: 50%; top: 50%; width: 62%; transform: translate(-50%, -50%); animation: mg-beat 1.8s ease-in-out infinite; }
.mg-hearts .mini { position: absolute; bottom: 8%; width: 14px; height: 14px; background: center / contain no-repeat; opacity: 0; animation: mg-heartrise 5s ease-out infinite; }
@keyframes mg-beat { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 15% { transform: translate(-50%, -50%) scale(1.12); } 30% { transform: translate(-50%, -50%) scale(0.98); } 45% { transform: translate(-50%, -50%) scale(1.08); } 60% { transform: translate(-50%, -50%) scale(1); } }
@keyframes mg-heartrise { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(10px, -120px) scale(1.1); opacity: 0; } }

/* buttons: a little burst of sparkles when the pointer arrives */
.mg-burst { position: fixed; z-index: 50; pointer-events: none; color: #FFE05C; text-shadow: 0 0 8px rgba(255, 200, 60, 0.95); font-size: 14px; animation: mg-burst 0.9s ease-out forwards; }
@keyframes mg-burst { 0% { transform: translate(0, 0) scale(0.5); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .magic-layer, .mg-hearts .mini, .mg-burst { display: none; }
  .mg-float, .mg-hearts .beat { animation: none !important; }
}

/* tiny butterflies on the price that flutter off to reveal it (magic.js 3b) */
.bf-cloud { position: absolute; z-index: 40; pointer-events: none; }
.bf-cloud img { position: absolute; height: auto; transform: rotate(var(--r)); animation: bf-rest var(--f) ease-in-out infinite alternate; }
.bf-cloud.go img { animation: bf-flap var(--f) ease-in-out infinite alternate, bf-away var(--d) var(--w) cubic-bezier(.4, 0, .6, 1) forwards; }
@keyframes bf-rest { from { scale: 1 1; } to { scale: 0.85 1; } }
@keyframes bf-flap { from { scale: 1 1; } to { scale: 0.3 1; } }
@keyframes bf-away {
  0% { translate: 0 0; opacity: 1; }
  35% { translate: calc(var(--dx) * 0.3) calc(var(--dy) * 0.22 - 14px); }
  70% { translate: calc(var(--dx) * 0.7) calc(var(--dy) * 0.66 + 8px); opacity: 1; }
  100% { translate: var(--dx) var(--dy); opacity: 0; }
}
.price.bf-hidden { opacity: 0; }
.price.bf-hidden.bf-shown { opacity: 1; transition: opacity 1.2s ease; }