/*
 * KillSync Motion System P1
 *
 * Motion is reserved for state acknowledgement. It must never delay page
 * delivery, block interaction, or run continuously just to decorate the UI.
 * Theme/tint colors are inherited from the existing Appearance token layer.
 */

:root {
  --ks-motion-accent: var(--ks-bg-picker-accent, var(--ks-accent, #00ffe7));
  --ks-motion-accent-2: var(--ks-bg-picker-accent-2, var(--ks-accent-2, #1fe0e0));
  --ks-motion-edge-glow-size: 8px;
  --ks-motion-edge-glow-size-2: 16px;
  --ks-motion-edge-glow-mix: 22%;
  --ks-motion-edge-glow-mix-2: 14%;
  --ks-motion-surface-glow-size: 16px;
  --ks-motion-surface-fill-mix: 28%;
  --ks-motion-surface-fill-mix-2: 11%;
  --ks-motion-edge-thickness: 1px;
  --ks-motion-edge-duration-min: 430ms;
  --ks-motion-edge-duration-max: 1800ms;
  --ks-motion-edge-duration-theme: 620ms;
  --ks-motion-edge-intensity-theme: .55;
  --ks-motion-edge-duration: var(--ks-motion-edge-duration-user, var(--ks-motion-edge-duration-theme));
  --ks-motion-edge-intensity: var(--ks-motion-edge-intensity-user, var(--ks-motion-edge-intensity-theme));
  --ks-motion-surface-duration: 420ms;
  --ks-motion-data-duration: 620ms;
  --ks-motion-ease: cubic-bezier(.2,.75,.25,1);
  --ks-motion-ease-out: cubic-bezier(.16,1,.3,1);
}

/* Theme personalities. Color continues to come from the live Appearance
   accents; these values only tune how assertively each visual identity moves. */
html[data-ks-motion-theme-profile="caldari"]:not([data-ks-bg-tint]),
html[data-ks-bg-tint="caldari"] {
  --ks-motion-edge-glow-size: 7px;
  --ks-motion-surface-glow-size: 14px;
  --ks-motion-edge-duration-theme: 500ms;
  --ks-motion-edge-intensity-theme: .48;
  --ks-motion-surface-duration: 360ms;
}
html[data-ks-motion-theme-profile="gallente"]:not([data-ks-bg-tint]),
html[data-ks-bg-tint="gallente"] {
  --ks-motion-edge-glow-size: 9px;
  --ks-motion-surface-glow-size: 17px;
  --ks-motion-edge-duration-theme: 820ms;
  --ks-motion-edge-intensity-theme: .58;
  --ks-motion-surface-duration: 420ms;
}
html[data-ks-motion-theme-profile="amarr"]:not([data-ks-bg-tint]),
html[data-ks-bg-tint="amarr"] {
  --ks-motion-edge-glow-size: 8px;
  --ks-motion-surface-glow-size: 15px;
  --ks-motion-edge-duration-theme: 980ms;
  --ks-motion-edge-intensity-theme: .78;
  --ks-motion-surface-duration: 500ms;
}
html[data-ks-motion-theme-profile="minmatar"]:not([data-ks-bg-tint]),
html[data-ks-bg-tint="minmatar"] {
  --ks-motion-edge-glow-size: 7px;
  --ks-motion-surface-glow-size: 13px;
  --ks-motion-edge-duration-theme: 680ms;
  --ks-motion-edge-intensity-theme: .64;
  --ks-motion-surface-duration: 350ms;
}
html[data-ks-motion-theme-profile="wormhole"]:not([data-ks-bg-tint]),
html[data-ks-bg-tint="wormhole"] {
  --ks-motion-edge-glow-size: 11px;
  --ks-motion-surface-glow-size: 21px;
  --ks-motion-edge-duration-theme: 900ms;
  --ks-motion-edge-intensity-theme: .70;
  --ks-motion-surface-duration: 520ms;
}
html[data-ks-motion-theme-profile="nullsec"]:not([data-ks-bg-tint]),
html[data-ks-bg-tint="nullsec"] {
  --ks-motion-edge-glow-size: 10px;
  --ks-motion-surface-glow-size: 18px;
  --ks-motion-edge-duration-theme: 740ms;
  --ks-motion-edge-intensity-theme: .68;
  --ks-motion-surface-duration: 380ms;
}
html[data-ks-motion-theme-profile="cyberpunk"]:not([data-ks-bg-tint]),
html[data-ks-bg-tint="cyberpunk"] {
  --ks-motion-edge-glow-size: 13px;
  --ks-motion-edge-glow-size-2: 24px;
  --ks-motion-edge-glow-mix: 34%;
  --ks-motion-edge-glow-mix-2: 22%;
  --ks-motion-surface-glow-size: 24px;
  --ks-motion-surface-fill-mix: 38%;
  --ks-motion-surface-fill-mix-2: 16%;
  --ks-motion-edge-thickness: 2px;
  --ks-motion-edge-duration-theme: 1100ms;
  --ks-motion-edge-intensity-theme: .88;
  --ks-motion-surface-duration: 330ms;
  --ks-motion-data-duration: 520ms;
}

/* Edge duration/intensity default to the active theme personality. Explicit
   user overrides are injected as --ks-motion-edge-*-user variables. The
   Off/Subtle/Full selector still controls how much of the motion vocabulary is
   allowed to render. */

/* Viewport acknowledgement ------------------------------------------------ */
.ks-motion-edge-layer {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  contain: strict;
}

.ks-motion-edge-layer.is-active {
  opacity: var(--ks-motion-edge-intensity, .55);
}

.ks-motion-edge-segment {
  position: absolute;
  display: block;
  opacity: 0;
  will-change: transform, opacity;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--ks-motion-accent) 88%, #fff 12%) 42%,
    color-mix(in srgb, var(--ks-motion-accent-2) 72%, var(--ks-motion-accent) 28%) 58%,
    transparent 100%
  );
  box-shadow:
    0 0 var(--ks-motion-edge-glow-size)
      color-mix(in srgb, var(--ks-motion-accent) var(--ks-motion-edge-glow-mix), transparent),
    0 0 var(--ks-motion-edge-glow-size-2)
      color-mix(in srgb, var(--ks-motion-accent-2) var(--ks-motion-edge-glow-mix-2), transparent);
}

.ks-motion-edge-segment--top,
.ks-motion-edge-segment--bottom {
  width: min(34vw, 460px);
  height: var(--ks-motion-edge-thickness);
  left: 0;
}
.ks-motion-edge-segment--top { top: 0; }
.ks-motion-edge-segment--bottom { bottom: 0; }

.ks-motion-edge-segment--right,
.ks-motion-edge-segment--left {
  width: var(--ks-motion-edge-thickness);
  height: min(34vh, 300px);
  top: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--ks-motion-accent) 88%, #fff 12%) 42%,
    color-mix(in srgb, var(--ks-motion-accent-2) 72%, var(--ks-motion-accent) 28%) 58%,
    transparent 100%
  );
}
.ks-motion-edge-segment--right { right: 0; }
.ks-motion-edge-segment--left { left: 0; }

.ks-motion-edge-layer.is-active .ks-motion-edge-segment--top {
  animation: ks-motion-edge-top var(--ks-motion-edge-duration) var(--ks-motion-ease-out) both;
}
.ks-motion-edge-layer.is-active .ks-motion-edge-segment--right {
  animation: ks-motion-edge-right var(--ks-motion-edge-duration) var(--ks-motion-ease-out) 75ms both;
}
.ks-motion-edge-layer.is-active .ks-motion-edge-segment--bottom {
  animation: ks-motion-edge-bottom var(--ks-motion-edge-duration) var(--ks-motion-ease-out) 150ms both;
}
.ks-motion-edge-layer.is-active .ks-motion-edge-segment--left {
  animation: ks-motion-edge-left var(--ks-motion-edge-duration) var(--ks-motion-ease-out) 225ms both;
}

html[data-ks-interface-motion="subtle"] .ks-motion-edge-segment--bottom,
html[data-ks-interface-motion="subtle"] .ks-motion-edge-segment--left {
  display: none;
}
html[data-ks-interface-motion="subtle"] .ks-motion-edge-layer {
  filter: saturate(.88) opacity(72%);
}
html[data-ks-interface-motion="full"] .ks-motion-edge-layer {
  filter: saturate(1.08);
}

@keyframes ks-motion-edge-top {
  0%   { transform: translate3d(-120%,0,0); opacity: 0; }
  14%  { opacity: .52; }
  72%  { opacity: .78; }
  100% { transform: translate3d(calc(100vw + 120%),0,0); opacity: 0; }
}
@keyframes ks-motion-edge-right {
  0%   { transform: translate3d(0,-120%,0); opacity: 0; }
  14%  { opacity: .44; }
  72%  { opacity: .70; }
  100% { transform: translate3d(0,calc(100vh + 120%),0); opacity: 0; }
}
@keyframes ks-motion-edge-bottom {
  0%   { transform: translate3d(calc(100vw + 120%),0,0); opacity: 0; }
  14%  { opacity: .42; }
  72%  { opacity: .68; }
  100% { transform: translate3d(-120%,0,0); opacity: 0; }
}
@keyframes ks-motion-edge-left {
  0%   { transform: translate3d(0,calc(100vh + 120%),0); opacity: 0; }
  14%  { opacity: .38; }
  72%  { opacity: .64; }
  100% { transform: translate3d(0,-120%,0); opacity: 0; }
}

/* Surface acknowledgement ------------------------------------------------- */
.ks-motion-surface-pulse {
  position: fixed;
  z-index: 2147482998;
  pointer-events: none;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ks-motion-accent) 72%, rgba(255,255,255,.18));
  background:
    radial-gradient(
      circle at var(--ks-motion-origin-x, 50%) var(--ks-motion-origin-y, 50%),
      color-mix(in srgb, var(--ks-motion-accent) var(--ks-motion-surface-fill-mix), transparent) 0%,
      color-mix(in srgb, var(--ks-motion-accent-2) var(--ks-motion-surface-fill-mix-2), transparent) 25%,
      transparent 62%
    );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ks-motion-accent) 18%, transparent),
    0 0 var(--ks-motion-surface-glow-size)
      color-mix(in srgb, var(--ks-motion-accent) 18%, transparent);
  transform: scale(.996);
  transform-origin: var(--ks-motion-origin-x, 50%) var(--ks-motion-origin-y, 50%);
  opacity: 0;
  will-change: transform, opacity;
  animation: ks-motion-surface-pulse var(--ks-motion-surface-duration) var(--ks-motion-ease-out) both;
}

html[data-ks-interface-motion="subtle"] .ks-motion-surface-pulse {
  filter: opacity(72%);
  border-color: color-mix(in srgb, var(--ks-motion-accent) 48%, rgba(255,255,255,.10));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ks-motion-accent) 10%, transparent),
    0 0 10px
      color-mix(in srgb, var(--ks-motion-accent) 10%, transparent);
}

@keyframes ks-motion-surface-pulse {
  0%   { opacity: 0; transform: scale(.996); }
  22%  { opacity: .68; transform: scale(1); }
  58%  { opacity: .34; transform: scale(1.002); }
  100% { opacity: 0; transform: scale(1.003); }
}

/* Data-received acknowledgement. This is opt-in through the JS API today and
   can be attached to live tools as they are touched in future passes. */
.ks-motion-data-sweep {
  position: fixed;
  z-index: 2147482999;
  pointer-events: none;
  height: 1px;
  width: min(38%, 380px);
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--ks-motion-accent) 88%, #fff 12%),
    color-mix(in srgb, var(--ks-motion-accent-2) 58%, var(--ks-motion-accent) 42%),
    transparent
  );
  box-shadow: 0 0 12px color-mix(in srgb, var(--ks-motion-accent) 30%, transparent);
  will-change: transform, opacity;
  animation: ks-motion-data-sweep var(--ks-motion-data-duration) var(--ks-motion-ease-out) both;
}

@keyframes ks-motion-data-sweep {
  0%   { transform: translate3d(-105%,0,0); opacity: 0; }
  18%  { opacity: .64; }
  74%  { opacity: .40; }
  100% { transform: translate3d(365%,0,0); opacity: 0; }
}

/* Opt-in helper for future components that want the shared timing language. */
.ks-motion-transition {
  transition-duration: var(--ks-motion-surface-duration) !important;
  transition-timing-function: var(--ks-motion-ease) !important;
}

/* Accessibility always wins over the in-app preference. State still changes
   immediately; only non-essential travel/flash is suppressed. */
@media (prefers-reduced-motion: reduce) {
  .ks-motion-edge-layer,
  .ks-motion-surface-pulse,
  .ks-motion-data-sweep {
    display: none !important;
    animation: none !important;
    transition: none !important;
  }
}

html[data-ks-interface-motion="off"] .ks-motion-edge-layer,
html[data-ks-interface-motion="off"] .ks-motion-surface-pulse,
html[data-ks-interface-motion="off"] .ks-motion-data-sweep {
  display: none !important;
  animation: none !important;
  transition: none !important;
}

/* The motion preference also clamps the existing global shell transitions that
   belong to navigation/utility state changes. It intentionally does not erase
   every tiny hover color transition on legacy tool pages. */
html[data-ks-interface-motion="off"] body.ks-focused-public-page,
html[data-ks-interface-motion="off"] body.ks-focused-page .ks-workspace-page,
html[data-ks-interface-motion="off"] body.ks-focused-page .ks-top-banner-shell,
html[data-ks-interface-motion="off"] body.ks-focused-page .ks-footer-shell,
html[data-ks-interface-motion="off"] .ks-public-focused-sidebar,
html[data-ks-interface-motion="off"] .ks-focused-sidebar,
html[data-ks-interface-motion="off"] .ks-public-focused-toggle svg path:last-child,
html[data-ks-interface-motion="off"] .ks-focused-sidebar-toggle svg path:last-child,
html[data-ks-interface-motion="off"] .ks-utility-dock,
html[data-ks-interface-motion="off"] .ks-utility-dock .ks-utility-action,
html[data-ks-interface-motion="off"] .ks-utility-action-label,
html[data-ks-interface-motion="off"] #ks-bg-panel,
html[data-ks-interface-motion="off"] .ks-explore-panel,
html[data-ks-interface-motion="off"] .ks-feedback-modal {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  body.ks-focused-public-page,
  body.ks-focused-page .ks-workspace-page,
  body.ks-focused-page .ks-top-banner-shell,
  body.ks-focused-page .ks-footer-shell,
  .ks-public-focused-sidebar,
  .ks-focused-sidebar,
  .ks-public-focused-toggle svg path:last-child,
  .ks-focused-sidebar-toggle svg path:last-child,
  .ks-utility-dock,
  .ks-utility-dock .ks-utility-action,
  .ks-utility-action-label,
  #ks-bg-panel,
  .ks-explore-panel,
  .ks-feedback-modal {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}