/* Tracewise's public-site motion: one entrance, then a stable reading surface.
   Load after the reference and brand styles. Never targets the workspace. */

#metrone-public-site {
  --mn-motion-ease: cubic-bezier(.2, .7, .25, 1);
}

/* Legacy drawings must be complete even before the motion script loads.
   Preserve SVG positioning transforms and the white strokes inside masks. */
#metrone-public-site [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

#metrone-public-site .scene *,
#metrone-public-site :is(
  .fd__dot, .iso--float .iso__body, .mq__track, .cp__ring,
  .node--hub .node__dot, .ma-box, .ma-link, .ma-row, .ma-dot,
  .ma-scan, .ma-corner, .ma-straighten, .st__pulse,
  .hh-ring, .hh-ask__caret, .hh-check, .hm-plane--result,
  .hm-bx__box, .hm-bx__lit, .hm-bx__chip,
  .hm-dc__status--bad, .hm-dc__status--ok, .hm-dc__grow,
  .hm-dc__row, .hm-dc__hub, .hm-dc__tick, .hm-dc__btn,
  .hm-dc__lock, .hm-dc__shackle, .hm-dc__arrow,
  .he-caret, .he-float, .he-spin, .he-type, .he-steps__dot,
  .gart__scan, .gart__land path
),
#metrone-public-site [data-arm] :is(path[data-d], [data-f], .veil, .pk),
#metrone-public-site [data-live] .code [data-r],
#metrone-public-site .tile [data-story],
#metrone-public-site .hm-arrive__card::before,
#metrone-public-site .he-steps__track::after,
#metrone-public-site .scan::before,
#metrone-public-site .scan::after {
  animation: none !important;
}

#metrone-public-site :is(.ld__p, .ma-row, .st__pulse, .he-type, .hm-dc__tick),
#metrone-public-site [data-arm] path[data-d],
#metrone-public-site .tile [data-story] {
  stroke-dashoffset: 0 !important;
}

#metrone-public-site [data-arm] [data-f],
#metrone-public-site :is(.fd__dot, .ma-dot, .he-type, .hh-check, .hh-ask__caret, .he-caret, .hm-dc__status--ok, .hm-dc__lock, .gart__land path) {
  opacity: 1;
}

#metrone-public-site :is(.fd__dot, .ma-dot) {
  offset-distance: var(--fd-rest, 50%);
}

#metrone-public-site .iso--float .iso__body { translate: 0 0; }
#metrone-public-site .mq__track { transform: none !important; animation: none !important; }
#metrone-public-site .mq__set[aria-hidden="true"] { display: none !important; }
#metrone-public-site .veil { transform: translateY(100%) !important; }
#metrone-public-site [data-arm] .pk { opacity: .65; }
#metrone-public-site .ma-straighten { transform: none; }
#metrone-public-site .node--hub .node__dot { box-shadow: 0 0 0 3px #244fea12; }
#metrone-public-site .hm-bx__box { fill: #244fea0a; opacity: 1; }
#metrone-public-site .hm-bx__lit { opacity: .65; }
#metrone-public-site .hm-bx__chip { box-shadow: none; }
#metrone-public-site .hm-plane--result { box-shadow: 0 12px 32px #18243d0b; }
#metrone-public-site .hm-dc__status--bad { opacity: 0; }
#metrone-public-site .hm-dc__grow { transform: scaleX(1); }
#metrone-public-site .hm-dc__row { opacity: .9; }
#metrone-public-site .hm-dc__shackle { transform: translateY(0); }
#metrone-public-site .he-steps__track::after { transform: scale(1); }

/* Traveling scan beams, cursors, packets and sheens are decoration, not status.
   Keep the static diagram, evidence boxes and actual interactive controls. */
#metrone-public-site :is(.ma-scan, .gart__scan, .he-steps__dot, .hm-dc__arrow),
#metrone-public-site .hm-arrive__card::before,
#metrone-public-site .scan::before,
#metrone-public-site .scan::after {
  opacity: 0 !important;
  pointer-events: none;
}

/* Short feedback belongs to controls, rather than continuously moving art. */
#metrone-public-site :is(a, button, summary, input, select, textarea) {
  transition-duration: 140ms;
  transition-timing-function: ease-out;
}

#metrone-public-site :is(.mm, .srch, .hlp__box, .hm-who__panel),
#metrone-public-site .pt__panel:not([hidden]),
#metrone-public-site .fq__item[open] .fq__a {
  animation: mn-control-appear 140ms ease-out both;
}

/* JS adds this class only when a visible illustration enters the viewport.
   Nothing is pre-hidden: missing JS and interrupted navigation fail open. */
#metrone-public-site .mn-motion-enter {
  animation: mn-settle 560ms var(--mn-motion-ease) both !important;
  animation-play-state: running !important;
}

#metrone-public-site .mn-pipeline.mn-motion-enter .mn-pipeline__panel {
  animation: mn-panel-settle 360ms var(--mn-motion-ease) both !important;
  animation-delay: min(var(--mn-panel-delay, 60ms), 180ms) !important;
  animation-play-state: running !important;
}

#metrone-public-site .mn-pipeline.mn-motion-enter .mn-pipeline__line {
  animation: mn-line-appear 460ms ease-out both !important;
  animation-play-state: running !important;
}

@keyframes mn-settle {
  from { opacity: .35; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes mn-panel-settle {
  from { opacity: .45; translate: 0 4px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes mn-line-appear {
  from { opacity: .2; }
  to { opacity: 1; }
}

@keyframes mn-control-appear {
  from { opacity: .6; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #metrone-public-site,
  #metrone-public-site *,
  #metrone-public-site *::before,
  #metrone-public-site *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
  #metrone-public-site .mn-motion-enter,
  #metrone-public-site .mn-pipeline__panel {
    translate: none !important;
  }
}