:root {
  --wg-motion-ease: cubic-bezier(0.18, 1, 0.32, 1);
  --wg-motion-step: 72ms;
}

body.motion-page {
  position: relative;
  overflow-x: hidden;
}

body.motion-page::before,
body.motion-page::after {
  content: "";
  position: fixed;
  pointer-events: none;
  inset: 0;
  z-index: 0;
}

body.motion-page::before {
  inset: -18%;
  opacity: 0.58;
  filter: blur(18px);
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 205, 91, 0.14), transparent 26%),
    radial-gradient(circle at 82% 14%, rgba(120, 170, 255, 0.14), transparent 24%),
    radial-gradient(circle at 56% 82%, rgba(255, 118, 84, 0.1), transparent 22%);
  animation: wg-ambient-drift 18s ease-in-out infinite alternate;
}

body.motion-page::after {
  opacity: 0.12;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.12) 28%, transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 42%);
  background-size: 180% 180%, 100% 100%;
  mix-blend-mode: screen;
  animation: wg-ambient-sheen 16s linear infinite;
}

body.motion-page main,
body.motion-page .page,
body.motion-page article {
  position: relative;
  z-index: 1;
}

html.motion-ready body.motion-page .wg-motion-item {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(10px) saturate(0.9);
  will-change: transform, opacity, filter;
  animation: wg-reveal 760ms var(--wg-motion-ease) both;
  animation-delay: calc(var(--wg-motion-index, 0) * var(--wg-motion-step));
}

html.motion-ready body.motion-page .bar-fill {
  transform-origin: left center;
  animation: wg-bar-fill 980ms var(--wg-motion-ease) both;
  animation-delay: 180ms;
}

body.motion-page button,
body.motion-page .button-link,
body.motion-page .view-tab,
body.motion-page .pill,
body.motion-page .top-link,
body.motion-page a.country-jump-item,
body.motion-page .country-option,
body.motion-page .brief-skip-button,
body.motion-page .custom-select-trigger,
body.motion-page .custom-select-option,
body.motion-page .history-toggle-button,
body.motion-page a {
  transition:
    border-color 220ms ease,
    background 260ms ease,
    box-shadow 280ms ease,
    color 220ms ease,
    filter 220ms ease,
    opacity 220ms ease !important;
}

body.motion-page button:hover,
body.motion-page .button-link:hover,
body.motion-page .view-tab:hover,
body.motion-page .pill:hover,
body.motion-page .top-link:hover,
body.motion-page a.country-jump-item:hover,
body.motion-page .country-option:hover,
body.motion-page .brief-skip-button:hover,
body.motion-page .custom-select-trigger:hover,
body.motion-page .custom-select-option:hover,
body.motion-page .history-toggle-button:hover {
  transform: none !important;
  filter: brightness(1.04) saturate(1.02);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

body.motion-page .card,
body.motion-page .hero-card,
body.motion-page .form-card,
body.motion-page .summary-card,
body.motion-page .country-card,
body.motion-page .login-card,
body.motion-page .brief-card,
body.motion-page .utility-card,
body.motion-page .status-card,
body.motion-page .negotiations-card,
body.motion-page .history-card,
body.motion-page .chart-card,
body.motion-page .city-card,
body.motion-page .metric,
body.motion-page .side-box,
body.motion-page .country-option,
body.motion-page .country-jump-item,
body.motion-page .country-jump-menu,
body.motion-page .final-row,
body.motion-page .live-draft-card,
body.motion-page .history-item,
body.motion-page .negotiation-item {
  transition:
    border-color 260ms ease,
    box-shadow 320ms ease,
    background 280ms ease,
    filter 260ms ease,
    opacity 220ms ease;
}

body.motion-page .card:hover,
body.motion-page .hero-card:hover,
body.motion-page .form-card:hover,
body.motion-page .summary-card:hover,
body.motion-page .country-card:hover,
body.motion-page .login-card:hover,
body.motion-page .brief-card:hover,
body.motion-page .utility-card:hover,
body.motion-page .status-card:hover,
body.motion-page .negotiations-card:hover,
body.motion-page .history-card:hover,
body.motion-page .chart-card:hover,
body.motion-page .city-card:hover,
body.motion-page .metric:hover,
body.motion-page .side-box:hover,
body.motion-page .country-option:hover,
body.motion-page .country-jump-item:hover,
body.motion-page .country-jump-menu:hover,
body.motion-page .final-row:hover,
body.motion-page .live-draft-card:hover,
body.motion-page .history-item:hover,
body.motion-page .negotiation-item:hover {
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.24);
  filter: saturate(1.03);
}

html.motion-ready body.motion-page .country-jump[open] .country-jump-menu,
html.motion-ready body.motion-page details[open] > summary + * {
  transform-origin: top center;
  animation: wg-pop-in 360ms var(--wg-motion-ease) both;
}

@keyframes wg-reveal {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(10px) saturate(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0) saturate(1);
  }
}

@keyframes wg-pop-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes wg-bar-fill {
  from {
    transform: scaleX(0);
    filter: saturate(0.72);
  }
  to {
    transform: scaleX(1);
    filter: saturate(1);
  }
}

@keyframes wg-ambient-drift {
  from {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(2%, 2%, 0) scale(1.06);
  }
}

@keyframes wg-ambient-sheen {
  from {
    background-position: -40% 0, 0 0;
  }
  to {
    background-position: 140% 0, 0 0;
  }
}