/*
 * Living Signal motion layer
 * Progressive enhancement only: every hidden/translated state is gated by
 * the .motion-enabled class that assets/motion.js adds at runtime.
 */

:root {
  --motion-ease-out: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-soft: cubic-bezier(.32, .72, 0, 1);
  --motion-fast: 120ms;
  --motion-base: 240ms;
  --motion-long: 320ms;
  --motion-stagger: 0ms;
}

@supports (view-transition-name: none) {
  main { view-transition-name: living-signal-main; }

  .site-header,
  .mission-header { view-transition-name: living-signal-header; }
}

::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(living-signal-main),
::view-transition-new(living-signal-main),
::view-transition-old(living-signal-header),
::view-transition-new(living-signal-header) {
  animation-fill-mode: both;
  animation-timing-function: var(--motion-ease-out);
  mix-blend-mode: normal;
}

::view-transition-old(root) { animation-name: motion-vt-root-old; animation-duration: 140ms; }
::view-transition-new(root) { animation-name: motion-vt-root-new; animation-duration: 240ms; }
::view-transition-old(living-signal-main) { animation-name: motion-vt-content-old; animation-duration: 140ms; }
::view-transition-new(living-signal-main) { animation-name: motion-vt-content-new; animation-duration: 280ms; }
::view-transition-old(living-signal-header) { animation-name: motion-vt-header-old; animation-duration: 120ms; }
::view-transition-new(living-signal-header) { animation-name: motion-vt-header-new; animation-duration: 220ms; }

@keyframes motion-vt-root-old {
  to { opacity: .72; }
}

@keyframes motion-vt-root-new {
  from { opacity: 0; }
}

@keyframes motion-vt-content-old {
  to { opacity: 0; transform: translate3d(0, -6px, 0) scale(.997); }
}

@keyframes motion-vt-content-new {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.995); }
}

@keyframes motion-vt-header-old {
  to { opacity: .55; transform: translate3d(0, -3px, 0); }
}

@keyframes motion-vt-header-new {
  from { opacity: 0; transform: translate3d(0, -5px, 0); }
}

/* Cross-document fallback. */
.motion-enabled .motion-page,
.motion-enabled .site-header,
.motion-enabled .mission-header,
.motion-enabled .mobile-nav {
  transition:
    opacity var(--motion-base) var(--motion-ease-out),
    transform var(--motion-base) var(--motion-ease-out);
}

.motion-enabled body.motion-entering .motion-page {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(.997);
}

.motion-enabled body.motion-entering .site-header,
.motion-enabled body.motion-entering .mission-header {
  opacity: 0;
  transform: translate3d(0, -5px, 0);
}

.motion-enabled body.motion-leaving .motion-page {
  opacity: .18;
  transform: translate3d(0, -6px, 0) scale(.997);
  transition-duration: 140ms;
}

.motion-enabled body.motion-leaving .site-header,
.motion-enabled body.motion-leaving .mission-header,
.motion-enabled body.motion-leaving .mobile-nav {
  opacity: .45;
  transition-duration: 120ms;
}

.motion-page-trace {
  position: fixed;
  z-index: 2147483000;
  inset: 0 0 auto;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent 0%, var(--signal, #df1825) 18%, #ff6972 58%, transparent 100%);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
}

.motion-page-trace.is-active {
  animation: motion-signal-trace 320ms var(--motion-ease-out) both;
}

@keyframes motion-signal-trace {
  0% { opacity: 0; transform: scaleX(0); transform-origin: left center; }
  18% { opacity: .95; }
  72% { opacity: .82; transform: scaleX(1); transform-origin: left center; }
  100% { opacity: 0; transform: scaleX(0); transform-origin: right center; }
}

/* Viewport reveals. !important neutralizes the legacy 750ms WAAPI reveal. */
.motion-enabled .motion-reveal {
  opacity: 0 !important;
  transform: translate3d(0, 18px, 0) !important;
  transition:
    opacity 260ms var(--motion-ease-out) var(--motion-stagger),
    transform 260ms var(--motion-ease-out) var(--motion-stagger) !important;
}

.motion-enabled .motion-reveal[data-motion-axis="x"] {
  transform: translate3d(18px, 0, 0) !important;
}

.motion-enabled .motion-reveal.motion-in {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Cards use individual transform properties so existing component transforms survive. */
.motion-enabled .motion-card,
.motion-enabled .motion-pressable {
  translate: 0 0;
  scale: 1;
  transition:
    translate 180ms var(--motion-ease-out),
    scale var(--motion-fast) var(--motion-ease-soft),
    box-shadow 220ms var(--motion-ease-out),
    border-color 180ms ease,
    background-color 220ms ease,
    color 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .motion-enabled .motion-card:is(a, button, [role="button"]):not([disabled]):hover,
  .motion-enabled a.motion-card:hover {
    translate: 0 -4px;
    box-shadow: 0 14px 32px rgba(10, 9, 10, .09);
  }

  .motion-enabled .motion-pressable:not([disabled]):hover { translate: 0 -2px; }

  .motion-enabled .motion-parallax {
    translate: var(--motion-parallax-x, 0) var(--motion-parallax-y, 0);
    will-change: translate;
  }
}

.motion-enabled .motion-card:is(a, button, [role="button"]):not([disabled]):active,
.motion-enabled .motion-pressable:not([disabled]):active {
  translate: 0 0;
  scale: .985;
  transition-duration: 80ms;
}

.motion-enabled .button:hover { transform: none; }

.motion-enabled .motion-card.motion-selection-pulse,
.motion-enabled .motion-pressable.motion-selection-pulse {
  animation: motion-selection-pulse 280ms var(--motion-ease-out);
}

@keyframes motion-selection-pulse {
  45% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal, #df1825) 20%, transparent); }
}

/* Accordion and mission-stage hooks never own display/hidden state. */
.motion-enabled .motion-panel-enter {
  animation: motion-panel-in 220ms var(--motion-ease-out) both;
}

.motion-enabled .motion-panel-exit {
  animation: motion-panel-out 140ms ease both;
}

@keyframes motion-panel-in {
  from { opacity: 0; transform: translate3d(0, -7px, 0); }
}

@keyframes motion-panel-out {
  to { opacity: 0; transform: translate3d(0, -4px, 0); }
}

.motion-enabled .motion-stage-enter > * {
  animation: motion-stage-in 260ms var(--motion-ease-out) both;
}

.motion-enabled .motion-stage-enter > :nth-child(2) { animation-delay: 28ms; }
.motion-enabled .motion-stage-enter > :nth-child(3) { animation-delay: 56ms; }
.motion-enabled .motion-stage-enter > :nth-child(4) { animation-delay: 84ms; }
.motion-enabled .motion-stage-enter > :nth-child(n+5) { animation-delay: 104ms; }

@keyframes motion-stage-in {
  from { opacity: 0; transform: translate3d(0, 13px, 0); }
}

[data-stage-indicator].motion-stage-pulse {
  animation: motion-stage-indicator 260ms var(--motion-ease-out);
}

@keyframes motion-stage-indicator {
  45% { color: #fff; text-shadow: 0 0 18px rgba(223, 24, 37, .7); }
}

/* Progress reacts once when its value changes; no perpetual attention loop. */
.motion-enabled .motion-progress {
  position: relative;
  overflow: visible;
}

.motion-enabled .motion-progress::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -3px;
  width: 7px;
  height: 7px;
  opacity: 0;
  background: var(--signal, #df1825);
  border-radius: 50%;
  pointer-events: none;
  translate: 0 -50%;
}

.motion-enabled .motion-progress.motion-progress-pulse {
  animation: motion-progress-brighten 320ms var(--motion-ease-out);
}

.motion-enabled .motion-progress.motion-progress-pulse::before {
  animation: motion-progress-dot 320ms var(--motion-ease-out);
}

.motion-enabled .capability .motion-progress::before {
  right: auto;
  left: var(--value, 0%);
}

@keyframes motion-progress-brighten {
  45% { filter: saturate(1.28) brightness(1.14); }
}

@keyframes motion-progress-dot {
  0% { opacity: 0; scale: .45; }
  35% { opacity: 1; scale: 1; box-shadow: 0 0 0 0 rgba(223, 24, 37, .28); }
  100% { opacity: 0; scale: 1.65; box-shadow: 0 0 0 9px rgba(223, 24, 37, 0); }
}

/* Keep existing component response times within the motion budget. */
.motion-enabled .button,
.motion-enabled .mission-node,
.motion-enabled .guide-card,
.motion-enabled .progress-line i,
.motion-enabled .capability i::after {
  transition-duration: 320ms;
}

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

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(living-signal-main),
  ::view-transition-new(living-signal-main),
  ::view-transition-old(living-signal-header),
  ::view-transition-new(living-signal-header) {
    animation: none !important;
  }

  .motion-enabled .motion-page,
  .motion-enabled .site-header,
  .motion-enabled .mission-header,
  .motion-enabled .mobile-nav,
  .motion-enabled .motion-reveal,
  .motion-enabled .motion-card,
  .motion-enabled .motion-pressable,
  .motion-enabled .motion-parallax {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    transition: none !important;
  }

  .motion-page-trace,
  .motion-panel-enter,
  .motion-panel-exit,
  .motion-stage-enter > *,
  [data-stage-indicator].motion-stage-pulse,
  .motion-progress-pulse,
  .motion-progress-pulse::before,
  .hero__pulse span,
  .mission-node--ready::after,
  .mission-complete__mark {
    animation: none !important;
  }
}

.motion-reduced .motion-page,
.motion-reduced .site-header,
.motion-reduced .mission-header,
.motion-reduced .mobile-nav,
.motion-reduced .motion-reveal,
.motion-reduced .motion-card,
.motion-reduced .motion-pressable,
.motion-reduced .motion-parallax {
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  transition: none !important;
}

.motion-reduced .motion-page-trace,
.motion-reduced .motion-panel-enter,
.motion-reduced .motion-panel-exit,
.motion-reduced .motion-stage-enter > *,
.motion-reduced [data-stage-indicator].motion-stage-pulse,
.motion-reduced .motion-progress-pulse,
.motion-reduced .motion-progress-pulse::before {
  animation: none !important;
}