/* MyRxProvider motion layer: typewriter, floating cards, arrow nudge, button spotlight, count-up, nav auto-hide.
   Everything is disabled for visitors who prefer reduced motion. */
@keyframes mx-float-a { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes mx-float-b { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
@keyframes mx-float-c { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes mx-nudge   { 0%,100% { transform: translateX(0) } 50% { transform: translateX(4px) } }
@keyframes mx-blink   { 50% { opacity: 0 } }

.mx-float-a { animation: mx-float-a 4s ease-in-out infinite; }
.mx-float-b { animation: mx-float-b 6s ease-in-out infinite; }
.mx-float-c { animation: mx-float-c 5s ease-in-out infinite; }
.hero-visual picture, .hero-visual img { display: block; animation: mx-float-b 6s ease-in-out infinite; }

.mx-arrow { display: inline-block; animation: mx-nudge 1.4s ease-in-out infinite; }

/* typewriter */
.mx-typed { }
.mx-cursor { display: inline-block; margin-left: 2px; font-style: normal; font-weight: 300; color: var(--green); animation: mx-blink .9s steps(1) infinite; }

/* button spotlight that follows the pointer */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(160px circle at var(--mx-x, 50%) var(--mx-y, 50%), rgba(255,255,255,.28), transparent 60%);
}
.btn:hover::after { opacity: 1; }
.btn.yellow::after, .btn.ghost::after { background: radial-gradient(160px circle at var(--mx-x, 50%) var(--mx-y, 50%), rgba(22,62,57,.12), transparent 60%); }

/* nav hides on scroll down, returns on scroll up */
.nav { transition: transform .35s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.nav.mx-hidden { transform: translateY(-140%); }

@media (prefers-reduced-motion: reduce) {
  .mx-float-a, .mx-float-b, .mx-float-c, .hero-visual picture, .hero-visual img, .mx-arrow, .mx-cursor { animation: none !important; }
  .nav { transition: none; }
}