/* ========================================================================== 
   RawROI / Site-wide motion and visual system
   Isolated progressive enhancement. No content depends on these styles.
   ========================================================================== */

:root {
  --sm-ease: cubic-bezier(.16, 1, .3, 1);
  --sm-ease-lock: cubic-bezier(.2, .8, .2, 1);
  --sm-fast: 320ms;
  --sm-base: 720ms;
  --sm-long: 1100ms;
}

body.site-motion:not(.page-home) main {
  overflow: clip;
}

/* Internal-page hero becomes an editorial system view, while preserving copy. */
body.site-motion:not(.page-home) .sm-pagehero {
  min-height: clamp(620px, 76svh, 820px);
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 54% 78% at 88% 45%, rgba(255, 69, 0, .035), transparent 68%),
    linear-gradient(180deg, rgba(20, 20, 20, .74), rgba(8, 8, 8, .96));
}

body.site-motion:not(.page-home) .sm-pagehero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 49.96%, rgba(255,255,255,.025) 50%, transparent 50.04%),
    linear-gradient(180deg, transparent 0 72%, rgba(255,255,255,.025) 72.1%, transparent 72.2%);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 90%, transparent);
}

body.site-motion:not(.page-home) .sm-pagehero > .wrap,
body.site-motion:not(.page-home) .sm-pagehero .hero__inner {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(380px, .8fr);
  grid-template-areas: "copy visual" "route route";
  align-items: center;
  gap: clamp(2rem, 4vw, 5rem);
}

.sm-hero__copy {
  grid-area: copy;
  min-width: 0;
  position: relative;
  z-index: 2;
}

body.site-motion:not(.page-home) .sm-pagehero .pagehero__title,
body.site-motion:not(.page-home) .sm-pagehero h1 {
  max-width: 14ch;
  text-wrap: balance;
  letter-spacing: -.047em;
}

body.site-motion:not(.page-home) .sm-pagehero .lead {
  max-width: 57ch;
}

body.site-motion:not(.page-home) .sm-pagehero .page-route {
  grid-area: route;
  width: 100%;
  max-width: none;
  margin-top: clamp(.4rem, 1.4vw, 1.4rem);
}

.sm-hero {
  --sm-x: 0px;
  --sm-y: 0px;
  grid-area: visual;
  width: min(100%, 520px);
  justify-self: end;
  color: #d2d2d2;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(13,13,13,.78);
  box-shadow: 0 32px 90px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.025);
  transform: translate3d(var(--sm-x), var(--sm-y), 0);
  transition: border-color var(--sm-fast) ease, box-shadow var(--sm-fast) ease;
  contain: layout paint;
}

.sm-hero:hover {
  border-color: rgba(255,255,255,.17);
  box-shadow: 0 38px 100px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.04);
}

.sm-hero__top,
.sm-hero__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 45px;
  padding: .75rem 1rem;
  color: #747474;
  font: 500 .57rem/1.3 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sm-hero__top { border-bottom: 1px solid rgba(255,255,255,.08); }
.sm-hero__bottom { border-top: 1px solid rgba(255,255,255,.08); }
.sm-hero__top b { display: flex; align-items: center; gap: .55rem; color: #999; font-weight: 500; }
.sm-hero__top b i { width: 5px; height: 5px; background: var(--orange); transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(255,69,0,.08); }
.sm-hero__bottom strong { max-width: 23ch; color: #b4b4b4; font-weight: 500; text-align: right; }

.sm-hero__field {
  position: relative;
  aspect-ratio: 1.38;
  min-height: 270px;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 40px 40px;
}

.sm-hero__field::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(116deg, transparent 35%, rgba(255,255,255,.025) 50%, transparent 65%);
  transform: translateX(-110%);
}

.sm-hero.is-live .sm-hero__field::after { animation: sm-scan 1200ms var(--sm-ease) 250ms both; }
@keyframes sm-scan { to { transform: translateX(110%); } }

.sm-hero__map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sm-hero__ghost { fill: none; stroke: #333; stroke-width: 1; stroke-dasharray: 3 7; opacity: .76; }
.sm-hero__ghost--b { opacity: .4; }
.sm-hero__route { fill: none; stroke: var(--orange); stroke-width: 1.7; stroke-dasharray: 740; stroke-dashoffset: 740; }
.sm-hero__node { fill: #0d0d0d; stroke: #777; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2) rotate(45deg); }
.sm-hero__destination { fill: #0d0d0d; stroke: var(--orange); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2) rotate(45deg); }
.sm-hero__pulse { fill: var(--orange); opacity: 0; filter: drop-shadow(0 0 4px rgba(255,69,0,.48)); }

.sm-hero.is-live .sm-hero__route { stroke-dashoffset: 0; transition: stroke-dashoffset 1450ms var(--sm-ease) 280ms; }
.sm-hero.is-live .sm-hero__node,
.sm-hero.is-live .sm-hero__destination { opacity: 1; transform: scale(1) rotate(45deg); transition: opacity 280ms ease, transform 480ms var(--sm-ease); }
.sm-hero.is-live .sm-hero__node--1 { transition-delay: 360ms; }
.sm-hero.is-live .sm-hero__node--2 { transition-delay: 760ms; }
.sm-hero.is-live .sm-hero__node--3 { transition-delay: 1130ms; }
.sm-hero.is-live .sm-hero__destination { transition-delay: 1460ms; background: var(--orange); }
.sm-hero.is-live .sm-hero__pulse { animation: sm-route-pulse 2300ms var(--sm-ease-lock) 1760ms infinite; }
@keyframes sm-route-pulse {
  0% { opacity: 0; transform: translate(0,0); }
  9% { opacity: 1; }
  42% { transform: translate(146px,-78px); }
  72% { transform: translate(295px,-123px); }
  92% { opacity: 1; transform: translate(453px,-200px); }
  100% { opacity: 0; transform: translate(453px,-200px); }
}

.sm-hero__glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(7,7,7,.76);
  transform: translate(-50%, -50%);
  clip-path: polygon(0 13px, 13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
}

.sm-hero__glyph::before,
.sm-hero__glyph::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.08);
}
.sm-hero__glyph::before { width: 155%; height: 1px; }
.sm-hero__glyph::after { width: 1px; height: 155%; }

.sm-hero__coord { position: absolute; z-index: 2; color: #5e5e5e; font: 500 .52rem/1 var(--font-mono); letter-spacing: .1em; }
.sm-hero__coord--a { top: 14px; left: 16px; }
.sm-hero__coord--b { right: 16px; bottom: 36px; }
.sm-hero__labels { position: absolute; inset: auto 16px 12px; display: flex; justify-content: space-between; color: #676767; font: 500 .49rem/1 var(--font-mono); letter-spacing: .08em; }

/* Bespoke inline icon family. */
.sm-icon {
  width: 48px;
  height: 48px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: square;
  stroke-linejoin: miter;
  color: #9a9a9a;
}
.sm-icon .sm-ico__accent { color: var(--orange); stroke: currentColor; }
.sm-icon--hero { width: 56px; height: 56px; color: #d4d4d4; transform: translate3d(calc(var(--sm-x) * -.24), calc(var(--sm-y) * -.24), 0); }
.sm-icon .sm-ico__draw { stroke-dasharray: 160; stroke-dashoffset: 160; }
.is-live .sm-icon .sm-ico__draw,
.is-sm-visible .sm-icon .sm-ico__draw,
.sm-existing-icon.is-drawn .ico-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1000ms var(--sm-ease) 200ms; }

/* Page sections gain changing density and direction, not another repeated card grid. */
.sm-scene { position: relative; isolation: isolate; }
.sm-scene::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--sm-base) ease, transform var(--sm-long) var(--sm-ease);
}
.sm-scene--signal::after { inset: 0; background: linear-gradient(104deg, rgba(255,255,255,.026), transparent 36%); transform: translateX(-4%); }
.sm-scene--clip::after { inset: 8% 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg, transparent, #000 20%, #000 75%, transparent); transform: scaleX(.94); }
.sm-scene--dense::after { inset: 0 0 0 52%; background: radial-gradient(ellipse at right, rgba(255,69,0,.026), transparent 68%); transform: translateX(4%); }
.sm-scene.is-sm-visible::after { opacity: 1; transform: none; }

.sm-scene__signal {
  position: absolute;
  top: clamp(2.4rem, 5vw, 5.8rem);
  left: max(12px, calc((100vw - var(--maxw)) / 2 - 34px));
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: .55rem;
  color: #565656;
  font: 500 .5rem/1 var(--font-mono);
  letter-spacing: .08em;
  pointer-events: none;
}
.sm-scene__signal i { width: 1px; height: 42px; background: linear-gradient(var(--orange), #2a2a2a); transform: scaleY(0); transform-origin: top; }
.sm-scene__signal b { font-weight: 500; opacity: 0; transform: translateY(5px); }
.sm-scene.is-sm-visible .sm-scene__signal i { transform: scaleY(1); transition: transform 760ms var(--sm-ease) 80ms; }
.sm-scene.is-sm-visible .sm-scene__signal b { opacity: 1; transform: none; transition: opacity 320ms ease 560ms, transform 500ms var(--sm-ease) 500ms; }

.sm-heading-mark,
.sm-card-mark { display: inline-grid; place-items: center; color: #8b8b8b; }
.sm-heading-mark { width: 36px; height: 36px; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.sm-icon--heading { width: 34px; height: 34px; }
.sm-card-mark { width: 31px; height: 31px; margin-bottom: 1rem; }
.sm-icon--card { width: 29px; height: 29px; }
.sm-card-mark .sm-ico__accent,
.sm-heading-mark .sm-ico__accent { color: #777; transition: color var(--sm-fast) ease; }
.card:hover .sm-card-mark .sm-ico__accent,
.panel:hover .sm-card-mark .sm-ico__accent,
.principle:hover .sm-card-mark .sm-ico__accent { color: var(--orange); }

.sm-existing-icon {
  transition: color var(--sm-fast) ease, transform 520ms var(--sm-ease);
  transform-origin: 50% 58%;
}
.stage:hover .sm-existing-icon,
.card:hover .sm-existing-icon,
button:hover > .sm-existing-icon { transform: translate3d(2px, -2px, 0); }

/* Refined site orientation rail. */
body.site-motion .raw-progress { opacity: .72; transition: opacity var(--sm-fast) ease; }
body.site-motion .raw-progress:hover { opacity: 1; }
body.site-motion .raw-progress__rail { height: min(24vh, 184px); }
body.site-motion .raw-progress__node { box-shadow: 0 0 0 4px rgba(255,69,0,.08); }

/* Every interactive surface keeps real pointer/focus feedback. */
body.site-motion :where(.btn, .xindex__btn, .compare__tab, .system__nav-btn, .insight-item) {
  -webkit-tap-highlight-color: transparent;
}
body.site-motion :where(.btn, .xindex__btn, .compare__tab, .system__nav-btn):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

@media (max-width: 1120px) {
  body.site-motion:not(.page-home) .sm-pagehero > .wrap,
  body.site-motion:not(.page-home) .sm-pagehero .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr); gap: 2.5rem; }
  .sm-hero__glyph { width: 96px; height: 96px; }
  .sm-scene__signal { display: none; }
}

@media (max-width: 880px) {
  body.site-motion:not(.page-home) .sm-pagehero { min-height: auto; align-items: start; }
  body.site-motion:not(.page-home) .sm-pagehero > .wrap,
  body.site-motion:not(.page-home) .sm-pagehero .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "visual" "route";
    gap: clamp(1.8rem, 5vw, 3rem);
  }
  body.site-motion:not(.page-home) .sm-pagehero .pagehero__title,
  body.site-motion:not(.page-home) .sm-pagehero h1 { max-width: 18ch; }
  .sm-hero { justify-self: stretch; width: 100%; max-width: none; }
  .sm-hero__field { aspect-ratio: 1.8; min-height: 250px; }
  .sm-hero__glyph { width: 88px; height: 88px; }
}

@media (max-width: 640px) {
  body.site-motion:not(.page-home) .sm-pagehero { padding-top: calc(var(--nav-h) + 2.25rem); padding-bottom: 2.75rem; }
  body.site-motion:not(.page-home) .sm-pagehero > .wrap,
  body.site-motion:not(.page-home) .sm-pagehero .hero__inner { gap: 1.55rem; }
  .sm-hero__field { aspect-ratio: 1.35; min-height: 220px; background-size: 32px 32px; }
  .sm-hero__top, .sm-hero__bottom { min-height: 39px; padding: .65rem .75rem; font-size: .49rem; }
  .sm-hero__bottom span { display: none; }
  .sm-hero__bottom strong { max-width: none; margin-left: auto; }
  .sm-hero__glyph { width: 76px; height: 76px; }
  .sm-icon--hero { width: 44px; height: 44px; }
  .sm-hero__labels { left: 10px; right: 10px; font-size: .42rem; }
  .sm-hero__coord { font-size: .45rem; }
  .sm-heading-mark { width: 30px; height: 30px; margin-bottom: .8rem; }
  .sm-icon--heading { width: 29px; height: 29px; }
  .sm-scene--clip::after { background-size: 40px 40px; }
  .stage:hover .sm-existing-icon, .card:hover .sm-existing-icon, button:hover > .sm-existing-icon { transform: none; }
}

@media (max-width: 390px) {
  .sm-hero__field { min-height: 204px; }
  .sm-hero__glyph { width: 68px; height: 68px; }
  .sm-icon--hero { width: 39px; height: 39px; }
  .sm-hero__labels span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-hero,
  .sm-scene::after,
  .sm-scene__signal i,
  .sm-scene__signal b,
  .sm-existing-icon,
  .sm-icon,
  .sm-hero__field::after,
  .sm-hero__route,
  .sm-hero__node,
  .sm-hero__destination,
  .sm-hero__pulse { animation: none !important; transition: none !important; transform: none !important; }
  .sm-hero__route, .sm-icon .sm-ico__draw { stroke-dashoffset: 0 !important; }
  .sm-hero__node, .sm-hero__destination, .sm-scene::after, .sm-scene__signal b { opacity: 1 !important; }
  .sm-scene__signal i { transform: scaleY(1) !important; }
  .sm-hero__pulse { display: none; }
}