/* ===== Motion layer v2: parallax + reveals + interactions (content unchanged) ===== */
.mx-progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 3px;
  width: 100%;
  z-index: 50;
  pointer-events: none;
  transform-origin: 0 50%;
  scale: 0 1;
  background: linear-gradient(90deg, #047d49, #d1ac69 50%, #990207);
  margin-top: env(safe-area-inset-top, 0px);
  box-shadow: 0 0 12px rgba(209, 172, 105, 0.6);
}
.mx-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* reveals */
html.mx .mx-rev {
  opacity: 0;
  translate: 0 50px;
  filter: blur(3px);
  transition:
    opacity 1s cubic-bezier(0.16, 0.84, 0.24, 1),
    translate 1.1s cubic-bezier(0.16, 0.84, 0.24, 1),
    filter 1s ease,
    rotate 1.1s cubic-bezier(0.16, 0.84, 0.24, 1),
    scale 1.1s cubic-bezier(0.16, 0.84, 0.24, 1);
  transition-delay: var(--d, 0ms);
}
html.mx .mx-rev.mx-in {
  opacity: 1;
  translate: 0 0;
  filter: none;
}
html.mx .mx-rev-flip {
  rotate: x 22deg;
  transform-origin: 50% 0;
  scale: 0.92;
}
html.mx .mx-rev-flip.mx-in {
  rotate: x 0deg;
  scale: 1;
}
html.mx .mx-rev-z {
  translate: 0 40px;
  scale: 0.86;
}
html.mx .mx-rev-z.mx-in {
  scale: 1;
}
html.mx .mx-rev-l {
  translate: -90px 0;
}
html.mx .mx-rev-r {
  translate: 90px 0;
}
html.mx .mx-rev-l.mx-in,
html.mx .mx-rev-r.mx-in {
  translate: 0 0;
}
.lp .g2,
.lp .g3,
.lp .g4 {
  perspective: 1400px;
}

/* image wipes */
html.mx .mx-wipe {
  clip-path: inset(-30% -30% 100% -30%);
  transition: clip-path 1.5s cubic-bezier(0.7, 0, 0.2, 1) var(--d, 0ms);
}
html.mx .mx-wipe.mx-in {
  clip-path: inset(-30% -30% -30% -30%);
}

/* word-by-word headlines */
.mx-w {
  display: inline-block;
  white-space: pre;
}
.gold-text .mx-w,
.gold-text-dark .mx-w {
  background: inherit;
  background-size: inherit;
  background-position: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html.mx .mx-words .mx-w {
  opacity: 0;
  translate: 0 0.7em;
  rotate: x -60deg;
  filter: blur(3px);
  transform-origin: 50% 100%;
  transition:
    opacity 0.8s ease,
    translate 0.9s cubic-bezier(0.16, 0.84, 0.24, 1),
    rotate 0.9s cubic-bezier(0.16, 0.84, 0.24, 1),
    filter 0.8s ease;
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 70ms);
}
html.mx .mx-words {
  perspective: 900px;
}
html.mx .mx-words.mx-in .mx-w {
  opacity: 1;
  translate: 0 0;
  rotate: x 0deg;
  filter: none;
}

/* hero load */
@keyframes mxRise {
  from {
    opacity: 0;
    translate: 0 50px;
    filter: blur(3px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    filter: none;
  }
}
@keyframes mxZoom {
  from {
    scale: 1.22;
  }
  to {
    scale: 1.06;
  }
}
@keyframes mxFloat {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 -22px;
    rotate: -1deg;
  }
}
@keyframes mxShine {
  0% {
    background-position: -160% 0;
  }
  50%,
  100% {
    background-position: 260% 0;
  }
}
@keyframes mxGlow {
  0%,
  100% {
    opacity: 0.7;
    scale: 0.95;
  }
  50% {
    opacity: 1;
    scale: 1.12;
  }
}
@keyframes mxPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 6px rgba(255, 255, 255, 0.2),
      0 0 0 7px rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow:
      0 0 0 18px rgba(255, 255, 255, 0.06),
      0 0 0 19px rgba(255, 255, 255, 0.2);
  }
}
@keyframes mxGoldSweep {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
@keyframes mxDrift {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 104px;
  }
}
@keyframes mxPop {
  0% {
    scale: 0;
    opacity: 0;
  }
  70% {
    scale: 1.18;
    opacity: 1;
  }
  100% {
    scale: 1;
    opacity: 1;
  }
}
html.mx .mx-hero > *:not(h1) {
  animation: mxRise 1.1s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
html.mx .mx-hero > *:nth-child(3) {
  animation-delay: 0.9s;
}
html.mx .mx-hero > *:nth-child(4) {
  animation-delay: 1s;
}
html.mx .mx-hero > *:nth-child(5) {
  animation-delay: 1.1s;
}
html.mx .mx-heroform {
  animation: mxRise 1.2s 1.05s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
html.mx .mx-zoom {
  animation: mxZoom 3s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
html.mx .mx-float {
  animation: mxFloat 5.5s ease-in-out infinite;
}
html.mx .mx-glow {
  animation: mxGlow 4s ease-in-out infinite;
}
html.mx .mx-pulse {
  animation: mxPulse 2.2s ease-in-out infinite;
}
html.mx .mx-pop {
  opacity: 0;
}
html.mx .mx-pop.mx-in {
  animation: mxPop 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) var(--d, 0ms) both;
}

/* living gold */
html.mx .gold-text,
html.mx .gold-text-dark {
  background-image: linear-gradient(
    90deg,
    #9a7036,
    #d1ac69 25%,
    #f3dda6 40%,
    #d1ac69 55%,
    #9a7036 80%,
    #d1ac69 100%
  );
  background-size: 200% 100%;
  animation: mxGoldSweep 6s linear infinite;
}
html.mx .gold-text-dark {
  background-image: linear-gradient(
    90deg,
    #86602a,
    #b88b45 25%,
    #d9b46e 40%,
    #b88b45 55%,
    #86602a 80%,
    #b88b45 100%
  );
}
html.mx .pat-w,
html.mx .pat-ws,
html.mx .pat-n,
html.mx .pat-g {
  animation: mxDrift 14s linear infinite;
}

/* buttons */
.lp .btn-gold,
.lp .btn-night,
.lp .btn-white,
.lp .btn-line {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lp .btn-gold::after,
.lp .btn-night::after,
.lp .btn-white::after,
.lp .btn-line::after,
.mx-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 65%
  );
  background-size: 250% 100%;
  background-position: -160% 0;
}
.mx-sheen {
  position: relative;
  overflow: hidden;
}
html.mx .lp .btn-gold::after,
html.mx .mx-sheen::after {
  animation: mxShine 4.5s ease-in-out infinite;
}
.lp .btn-gold:hover::after,
.lp .btn-night:hover::after,
.lp .btn-white:hover::after,
.lp .btn-line:hover::after {
  animation: mxShine 1s ease;
}

/* timeline + ballot */
html.mx .mx-line {
  scale: 0 1;
  transform-origin: 0 50%;
  transition: scale 1.8s cubic-bezier(0.7, 0, 0.2, 1) 0.2s;
}
html.mx .mx-line.mx-in {
  scale: 1 1;
}
html.mx .mx-x {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 0.6s ease var(--d, 0ms);
}
html.mx .mx-x.mx-in {
  stroke-dashoffset: 0;
}

/* cards: spotlight + tilt */
.card-lift {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
.card-lift::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
  background: radial-gradient(
    420px circle at var(--mx-x, 50%) var(--mx-y, 50%),
    rgba(209, 172, 105, 0.22),
    transparent 60%
  );
  z-index: 0;
}
.card-lift:hover::before {
  opacity: 1;
}
.card-lift > * {
  position: relative;
  z-index: 1;
}
.card-lift .med svg {
  transition:
    scale 0.4s cubic-bezier(0.3, 1.4, 0.5, 1),
    rotate 0.4s;
}
.card-lift:hover .med svg {
  scale: 1.2;
  rotate: -8deg;
}
.mx-tilt {
  transition: transform 0.25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  html.mx * {
    animation: none !important;
    transition: none !important;
  }
  html.mx .mx-rev,
  html.mx .mx-words .mx-w,
  html.mx .mx-pop {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    filter: none !important;
  }
  html.mx .mx-wipe {
    clip-path: none !important;
  }
  html.mx .mx-line {
    scale: 1 1;
  }
  html.mx .mx-x {
    stroke-dashoffset: 0;
  }
  .mx-progress,
  .mx-dust {
    display: none;
  }
}