/* Orrery motion — instrument beats + responsive. See docs/design/motion.md */

/* Press — :active --tick on .btn .gaze-node .field */
.btn:active,
.gaze-node:active,
.field:active {
  transform: translateY(0);
  transition-duration: var(--tick);
}

/* Focus — brass :focus-visible only */
.btn:focus-visible,
.field:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* Arrive — .alert and one-shot feed rows at --settle */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(0.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.alert {
  animation: fade-in var(--settle) var(--ease);
}

/* Kill list-wide load fade; only a new row with the one-shot class Arrives. */
.activity-item {
  animation: none;
}

.activity-item.is-arriving {
  animation: fade-in var(--settle) var(--ease);
}

/* Copied — [data-copy-mcp] uses --flash (JS reads the token too) */
[data-copy-mcp].is-copied {
  background: var(--phosphor);
  border-color: var(--phosphor);
  color: var(--ink);
  transition-duration: var(--flash);
}

@media (max-width: 860px) {
  .detail-grid,
  .ns-grid {
    grid-template-columns: 1fr;
  }

  .orb-stage {
    opacity: 0.45;
    width: min(20rem, 78vw);
    right: -8%;
    bottom: auto;
    top: 4%;
  }

  .constellation {
    min-height: 320px;
  }

  .resolve-row,
  .lookup {
    grid-template-columns: 1fr;
  }

  .catalog-layout,
  .star-page {
    grid-template-columns: 1fr;
  }

  .catalog-rail,
  .action-rail {
    position: static;
  }

  .catalog-rail {
    display: grid;
    gap: var(--space-2);
  }

  .catalog-rail .facet-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-3);
  }

  .catalog-rail .facet-form fieldset {
    flex: 1 1 12rem;
    border-top: 0;
    padding-top: 0;
  }

  .star-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 0.35rem;
  }

  .star-tools {
    grid-column: 2;
    grid-row: 2;
  }

  .star-row .pill {
    grid-column: 3;
    grid-row: 2;
  }

  .relation-list a {
    grid-template-columns: 1fr auto;
  }

  .relation-list span {
    grid-column: 1;
  }

  .relation-list b {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (min-width: 861px) and (max-width: 1100px) {
  .orb-stage {
    width: min(24rem, 42vw);
    right: -2%;
    bottom: clamp(9rem, 30%, 14rem);
  }
}

@media (min-width: 1400px) {
  .orb-stage {
    width: min(30rem, 34vw);
    right: 0;
    bottom: clamp(9rem, 26%, 15rem);
  }
}

@media (min-height: 960px) {
  .hero {
    align-content: center;
    padding-block: clamp(3rem, 7vh, 5.5rem) 4.5rem;
  }

  .orb-stage {
    bottom: clamp(10rem, 32%, 16rem);
  }
}

/* Reduced motion — jump to end state; color/border still change */
@media (prefers-reduced-motion: reduce) {
  .cosmos-milky,
  .cosmos-dust,
  .cosmos-stars-far,
  .cosmos-stars-mid,
  .cosmos-stars-near,
  .cosmos-meteor,
  .orb-svg,
  .live-dot,
  .edge-draw,
  .node-pulse {
    animation: none !important;
  }

  .alert,
  .activity-item.is-arriving {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .cosmos-meteor {
    display: none;
  }

  .cosmos-stars-far,
  .cosmos-stars-mid,
  .cosmos-stars-near {
    opacity: 0.65;
  }

  .record-table tbody tr {
    opacity: 1;
    transform: none;
    transition: background 120ms linear;
  }

  body.resolve-focus .cosmos {
    filter: none;
  }

  [data-digest].value-settled {
    transition: none;
  }

  [data-receipt] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-receipt] .verify-ok {
    opacity: 1;
    transition: none;
  }

  [data-copy-mcp].is-copied {
    transition: none;
  }

  .btn:active,
  .gaze-node:active,
  .field:active {
    transform: none;
    transition: none;
  }
}