/*
 * SUNDEX motion polish
 * Load after sundex-landing.css. All rules are additive and scoped to the
 * class installed by sundex-motion-polish.js.
 */

:root {
  --smp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --smp-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --smp-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

body.sundex-motion-polish .smi-nav.smp-header {
  position: fixed;
  z-index: 900;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* The app header must never replace the cinematic header on the landing page. */
body.sundex-motion-polish.sundex-intro-mounted #root .exchange-header {
  display: none !important;
}

body.sundex-motion-polish .smi-nav.smp-header::before {
  border-bottom-color: rgba(185, 201, 224, 0.12);
  background:
    linear-gradient(180deg, rgba(5, 8, 13, 0.76), rgba(5, 8, 13, 0.46));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.025) inset,
    0 16px 42px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 220ms var(--smp-ease-out);
  backdrop-filter: blur(20px) saturate(122%);
  -webkit-backdrop-filter: blur(20px) saturate(122%);
}

body.sundex-motion-polish .smi-nav.smp-header.is-scrolled::before {
  opacity: 1;
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  body.sundex-motion-polish .smi-nav.smp-header.is-scrolled::before {
    background: rgba(5, 8, 13, 0.93);
  }
}

/*
 * Premium pressables. The transform is composed from JS-fed spring values so
 * existing liquid-metal, glass and section buttons all move as one material.
 */
body.sundex-motion-polish [data-smp-button] {
  --smp-x: 0px;
  --smp-y: 0px;
  --smp-scale: 1;
  --smp-lift: 0px;
  transform: translate3d(var(--smp-x), calc(var(--smp-y) - var(--smp-lift)), 0) scale(var(--smp-scale)) !important;
  transform-origin: 50% 60%;
  will-change: auto;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 180ms ease,
    filter 160ms ease !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body.sundex-motion-polish [data-smp-button].is-smp-moving,
body.sundex-motion-polish [data-smp-button]:focus-visible {
  will-change: transform;
}

body.sundex-motion-polish [data-smp-button].is-smp-pressed,
body.sundex-motion-polish [data-smp-button]:active {
  filter: brightness(0.94) !important;
}

body.sundex-motion-polish [data-smp-button]:focus-visible,
body.sundex-motion-polish .smp-chat:focus-visible {
  outline: 2px solid rgba(190, 216, 255, 0.96) !important;
  outline-offset: 4px !important;
}

@media (hover: hover) and (pointer: fine) {
  body.sundex-motion-polish [data-smp-button]:hover {
    --smp-lift: 1px;
    filter: brightness(1.055);
  }
}

@media (hover: none), (pointer: coarse) {
  body.sundex-motion-polish [data-smp-button]:active {
    --smp-scale: 0.97;
    --smp-lift: -1px;
    transition:
      color 140ms ease,
      background-color 140ms ease,
      border-color 140ms ease,
      box-shadow 140ms ease,
      filter 140ms ease,
      transform 140ms var(--smp-ease-out) !important;
  }
}

/* Origin-aware popovers; WAAPI in the companion script supplies enter/exit. */
body.sundex-motion-polish .smi-language-menu.smp-popover {
  transform-origin: calc(100% - 22px) 0;
  animation: none !important;
  backface-visibility: hidden;
}

body.sundex-motion-polish .smi-mobile-menu.smp-popover {
  transform-origin: calc(100% - 38px) 0;
  animation: none !important;
  backface-visibility: hidden;
}

body.sundex-motion-polish .smi-menu-backdrop.smp-popover {
  animation: none !important;
}

body.sundex-motion-polish .smi-language-menu button,
body.sundex-motion-polish .smi-mobile-menu > a,
body.sundex-motion-polish .smi-menu-button span {
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    opacity 160ms ease,
    transform 180ms var(--smp-ease-out) !important;
}

body.sundex-motion-polish .smi-language-menu button:active,
body.sundex-motion-polish .smi-mobile-menu > a:active {
  transform: scale(0.98);
}

/* Keep the logo neutral-white anywhere a loading/splash shell uses the old mark. */
body.sundex-motion-polish img.smp-logo-white,
body.sundex-motion-polish .smi-logo img,
body.sundex-motion-polish .sax-brand img,
body.sundex-motion-polish .sax-panel-brand img,
body.sundex-motion-polish .sax-orbit-core img {
  filter: grayscale(1) brightness(0) invert(1) !important;
}

body.sundex-motion-polish .smp-chat {
  transform: translateZ(0);
  transition:
    transform 140ms var(--smp-ease-out),
    filter 140ms ease,
    box-shadow 180ms ease !important;
  -webkit-tap-highlight-color: transparent;
}

body.sundex-motion-polish .smp-chat:active {
  transform: translateZ(0) scale(0.94);
  filter: brightness(0.92);
}

@media (hover: hover) and (pointer: fine) {
  body.sundex-motion-polish .smp-chat:hover {
    transform: translate3d(0, -2px, 0);
    filter: brightness(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.sundex-motion-polish .smi-nav.smp-header::before {
    transition: opacity 160ms ease;
  }

  body.sundex-motion-polish [data-smp-button] {
    --smp-x: 0px !important;
    --smp-y: 0px !important;
    --smp-lift: 0px !important;
    --smp-scale: 1 !important;
    transform: none !important;
    transition:
      color 120ms ease,
      background-color 120ms ease,
      border-color 120ms ease,
      box-shadow 120ms ease,
      filter 120ms ease !important;
  }

  body.sundex-motion-polish [data-smp-button]:active {
    filter: brightness(0.92) !important;
  }

  body.sundex-motion-polish .smi-language-menu button,
  body.sundex-motion-polish .smi-mobile-menu > a,
  body.sundex-motion-polish .smi-menu-button span,
  body.sundex-motion-polish .smp-chat {
    transition-duration: 120ms !important;
  }
}