/* 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; }
}