/* Scroll circuits and composed subject movement for the home page only. */
body.home.sc-motion-ready .sc-motion-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

body.home.sc-motion-ready .application-card.is-visible .application-art svg path { animation: none; }
body.home.sc-motion-ready .power-story .sc-circuit { color: #f4b41a; }
body.home.sc-motion-ready .power-story .sc-circuit path { opacity: .42; }
body.home.sc-motion-ready .applications .section-heading > div,
body.home.sc-motion-ready .applications .section-heading > p,
body.home.sc-motion-ready .choice-grid > div:first-child { background: #f6f6f1; }
body.home.sc-motion-ready .finder-grid > div:first-child { background: #f4b41a; }
body.home.sc-motion-ready .finder-form > label,
body.home.sc-motion-ready .finder-form > small { position: relative; z-index: 1; width: fit-content; padding-right: 8px; background: #f4b41a; }
body.home.sc-motion-ready .journey-track { height: 3px; }
body.home.sc-motion-ready .journey-track > span { height: 3px; box-shadow: 0 0 13px #f4b41a55; }
body.home.sc-motion-ready .journey-track > i.active { box-shadow: 0 0 0 var(--flow-pulse, 6px) #f4b41a30; }
body.home.sc-motion-ready .depth-guide-circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(var(--orbit-angle, 0deg));
}
body.home.sc-motion-ready .depth-hotspot[aria-pressed=true] { box-shadow: 0 0 0 var(--flow-pulse, 6px) #f4b41a35; }
body.home.sc-motion-ready .finder-ghost { color: #061a3311; }

.home-motion-control {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 18px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid #99acbe;
  color: #fff;
  background: #061a33f2;
  box-shadow: 0 4px 16px #061a3326;
  font: 700 12px/1.5 var(--body);
}
.home-motion-control > .icon { width: 16px; height: 16px; color: #f4b41a; }
.home-motion-control:hover { background: #092b52; }
.home-motion-control[aria-pressed=true] { color: #061a33; background: #fff; }
.home-motion-control[aria-pressed=true] > .icon { color: #061a33; }
.overlay-open .home-motion-control { display: none; }

body.home.sc-motion-ready .sc-circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: #061a33;
  fill: none;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

body.home.sc-motion-ready .sc-circuit path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--trace-progress, 0));
  opacity: .23;
}

body.home.sc-motion-ready .sc-circuit-dot {
  fill: #f4b41a;
  stroke: #061a33;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  opacity: .9;
  filter: drop-shadow(0 0 5px #f4b41a35);
}

body.home.sc-motion-ready .choice-section .sc-circuit path { opacity: .18; }
body.home.sc-motion-ready .finder-section .sc-circuit path { opacity: .25; }
body.home.sc-motion-ready .finder-section .sc-circuit-dot {
  fill: #061a33;
  stroke: #f4b41a;
  filter: none;
}

/* The individual translate property is reserved for JS floating animation. */
body.home.sc-motion-ready .sc-motion-subject {
  transform: translate3d(
    var(--subject-x, 0px),
    calc(var(--subject-y, 0px) + var(--section-drift, 0px)),
    0
  );
  transition: transform 1.2s cubic-bezier(.16, .7, .25, 1);
  will-change: transform;
}

body.home.sc-motion-ready .application-art.sc-motion-subject,
body.home.sc-motion-ready .depth-faq-mark > .icon.sc-motion-subject {
  transform: translate3d(
    var(--subject-x, 0px),
    calc(var(--subject-y, 0px) + var(--section-drift, 0px)),
    0
  ) rotate(var(--section-tilt, 0deg));
  transform-origin: 50% 60%;
}

body.home.sc-motion-ready .finder-ghost.sc-motion-subject {
  transform-origin: 50% 100%;
}

body.home.sc-motion-ready .story-caption.sc-motion-subject {
  transform-origin: 100% 100%;
}

/* The SVG drawing remains controlled by the existing path animation. */
body.home.sc-motion-ready .application-card.sc-application-energized .application-art {
  filter: drop-shadow(0 5px 9px #f4b41a24);
}

body.home.sc-motion-ready .sc-motion-section .section-heading,
body.home.sc-motion-ready .sc-motion-section .depth-heading,
body.home.sc-motion-ready .sc-motion-section .choice-grid > div:first-child,
body.home.sc-motion-ready .sc-motion-section .finder-grid > div:first-child,
body.home.sc-motion-ready .sc-motion-section .depth-faq-intro {
  position: relative;
}

body.home.sc-motion-ready .sc-section-trace {
  position: absolute;
  left: 0;
  bottom: -18px;
  display: block;
  width: min(175px, 40%);
  height: 2px;
  background: #061a331c;
  pointer-events: none;
  user-select: none;
}

body.home.sc-motion-ready .sc-section-trace::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -2px;
  width: 6px;
  height: 6px;
  border: 1px solid #061a3359;
  background: #f6f6f1;
}

body.home.sc-motion-ready .sc-section-trace > span {
  position: absolute;
  inset: 0;
  display: block;
  background: #bf8304;
  transform: scaleX(var(--trace-progress, 0));
  transform-origin: 0 50%;
  transition: transform .5s cubic-bezier(.16, .7, .25, 1);
}

body.home.sc-motion-ready .finder-section .sc-section-trace { background: #061a3329; }
body.home.sc-motion-ready .finder-section .sc-section-trace > span { background: #061a33; }
body.home.sc-motion-ready .finder-section .sc-section-trace::after { background: #f4b41a; }

body.home.sc-motion-ready .sc-heading-accent {
  background-image: linear-gradient(#f4b41a9c, #f4b41a9c);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 1px);
  background-size: calc(var(--accent-progress, 0) * 100%) 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

body.home.sc-motion-ready .finder-section .sc-heading-accent {
  background-image: linear-gradient(#061a3370, #061a3370);
}

body.home.sc-motion-ready .sc-orbit-decor {
  position: absolute;
  right: -70px;
  top: 50%;
  width: clamp(340px, 39vw, 620px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

body.home.sc-motion-ready .sc-orbit-decor > span {
  position: absolute;
  inset: 0;
  display: block;
  border: 2px solid #061a332e;
  border-radius: 50%;
  transform: rotate(var(--orbit-angle, 0deg));
  transition: transform 1.2s cubic-bezier(.16, .7, .25, 1);
}

body.home.sc-motion-ready .sc-orbit-decor > span::after {
  content: '';
  position: absolute;
  left: calc(50% - 4px);
  top: -5px;
  width: 8px;
  height: 8px;
  border: 1px solid #f4b41a;
  border-radius: 50%;
  background: #061a33;
}

body.home.sc-motion-ready .sc-orbit-decor > span:nth-child(2) {
  inset: 12%;
  border-style: dashed;
  border-color: #061a3326;
  transform: rotate(calc(var(--orbit-angle, 0deg) * -.65));
}

body.home.sc-motion-ready .sc-orbit-decor > span:nth-child(2)::after {
  top: calc(50% - 4px);
  left: -5px;
  width: 6px;
  height: 6px;
  border-color: #061a3370;
  background: #f4b41a;
}

body.home.sc-motion-ready .sc-orbit-decor > span:nth-child(3) {
  inset: 24%;
  border-color: #061a332e;
  border-top-color: #061a3390;
  border-right-color: transparent;
  transform: rotate(calc(var(--orbit-angle, 0deg) * 1.25));
}

body.home.sc-motion-ready .sc-orbit-decor > span:nth-child(3)::after {
  width: 5px;
  height: 5px;
  top: -4px;
  left: calc(50% - 3px);
}

@media (max-width: 980px) {
  body.home.sc-motion-ready .sc-orbit-decor { right: -120px; width: 460px; }
  body.home.sc-motion-ready .sc-section-trace { width: min(145px, 42%); }
}

@media (max-width: 760px) {
  .home-motion-control { width: 42px; padding: 11px; left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .home-motion-control > span { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
  body.home.sc-motion-ready .journey-track { height: auto; width: 3px; }
  body.home.sc-motion-ready .journey-track > span { width: 3px; height: 100%; }
  body.home.sc-motion-ready .sc-motion-section { overflow: clip; }
  body.home.sc-motion-ready .sc-circuit { overflow: hidden; }
  body.home.sc-motion-ready .sc-circuit path { opacity: .2; }
  body.home.sc-motion-ready .sc-circuit-dot { filter: none; }
  body.home.sc-motion-ready .sc-orbit-decor {
    top: 42%;
    right: -145px;
    width: 360px;
  }
  body.home.sc-motion-ready .sc-orbit-decor > span { border-color: #061a3324; }
  body.home.sc-motion-ready .sc-section-trace { bottom: -13px; width: min(128px, 40%); }
  body.home.sc-motion-ready .sc-heading-accent { background-size: calc(var(--accent-progress, 0) * 100%) 3px; }
}

body.home:is(.motion-paused, .sc-motion-paused) .sc-motion-subject,
body.home:is(.motion-paused, .sc-motion-paused) .sc-orbit-decor > span {
  transform: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto;
}

body.home:is(.motion-paused, .sc-motion-paused) .sc-circuit path { stroke-dashoffset: 0 !important; }
body.home:is(.motion-paused, .sc-motion-paused) .depth-guide-circle { transform: none !important; }
body.home:is(.motion-paused, .sc-motion-paused) .sc-section-trace > span { transform: scaleX(1) !important; transition: none !important; }
body.home:is(.motion-paused, .sc-motion-paused) .sc-heading-accent { background-size: 100% 4px !important; }

@media (prefers-reduced-motion: reduce) {
  body.home.sc-motion-ready .depth-guide-circle { transform: none !important; }
  body.home.sc-motion-ready .sc-motion-subject,
  body.home.sc-motion-ready .sc-orbit-decor > span {
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto;
  }
  body.home.sc-motion-ready .sc-circuit path { stroke-dashoffset: 0 !important; }
  body.home.sc-motion-ready .sc-section-trace > span { transform: scaleX(1) !important; transition: none !important; }
  body.home.sc-motion-ready .sc-heading-accent { background-size: 100% 4px !important; }
}