/* MediaX motion layer — interface polish only (no content or image changes).
   Subtle scroll reveals, hover lift, header shadow, scroll progress, back-to-top.
   Everything is switched off for visitors who prefer reduced motion. */
:root {
  --mx-accent: #c9a227;
  --mx-ease: cubic-bezier(.22, .61, .36, 1);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

::selection { background: rgba(201, 162, 39, .28); background: color-mix(in srgb, var(--mx-accent) 30%, transparent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--mx-accent);
  outline-offset: 3px;
}

/* Scroll progress */
#mx-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--mx-accent), color-mix(in srgb, var(--mx-accent) 55%, #fff));
  z-index: 2147483000; pointer-events: none;
}

/* Header gains depth once the page scrolls */
.mx-header { transition: box-shadow .35s var(--mx-ease); }
.mx-header.mx-scrolled { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .28); }

/* Scroll reveal */
.mx-motion .mx-reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .85s var(--mx-ease), transform .85s var(--mx-ease);
  transition-delay: var(--mx-delay, 0ms);
  will-change: opacity, transform;
}
.mx-motion .mx-reveal.mx-img { transform: translate3d(0, 18px, 0) scale(.985); }
.mx-motion .mx-reveal.mx-in { opacity: 1; transform: none; }

/* Hero image settles in */
.mx-motion .mx-hero { animation: mx-hero 1.8s var(--mx-ease) both; }
@keyframes mx-hero { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Cards lift on hover */
.mx-motion .mx-card-t { transition: transform .4s var(--mx-ease), box-shadow .4s var(--mx-ease); }
@media (hover: hover) {
  .mx-motion .mx-card:hover { transform: translateY(-6px); }
  .mx-motion .mx-card.mx-card-s:hover { box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .38); }
  .mx-motion .mx-card:hover .mx-zoom { transform: scale(1.05); }
  .mx-motion .mx-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
}
.mx-motion .mx-zoom { transition: transform .7s var(--mx-ease); }
.mx-motion .mx-btn-t { transition: transform .25s var(--mx-ease), filter .25s, box-shadow .25s; }
.mx-motion .mx-btn:active { transform: translateY(0) scale(.97); }

/* Back to top */
#mx-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  width: 46px; height: 46px; border: 0; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: var(--mx-accent);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity .35s var(--mx-ease), transform .35s var(--mx-ease), filter .2s;
}
#mx-top.mx-show { opacity: 1; transform: none; pointer-events: auto; }
#mx-top:hover { filter: brightness(1.08); transform: translateY(-3px); }
#mx-top svg { width: 20px; height: 20px; }
@media (max-width: 640px) { #mx-top { right: 16px; bottom: 16px; width: 42px; height: 42px; } }