/* Scroll uses native browser scrolling; motion.js writes numeric transforms. */
.motion-ready .story {
  height: auto;
}
.motion-ready .story-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(30px, 4vw, 80px);
  row-gap: 42px;
  position: sticky;
  top: 0;
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  max-height: none;
  padding: 112px var(--pad) 40px;
}
.motion-ready .story .section-meta {
  grid-column: 1 / -1;
}
.motion-ready .story-copy {
  width: 100%;
  margin-top: 0;
  align-self: center;
}
.motion-ready .task-system {
  position: relative;
  top: auto;
  right: auto;
  width: min(100%, 350px);
  height: auto;
  margin: 0;
  justify-self: center;
  align-self: center;
}
.motion-ready .task {
  min-width: 0;
  gap: 10px;
  overflow-wrap: anywhere;
  will-change: auto;
}
.motion-ready .story-bottom {
  position: relative;
  inset: auto;
  grid-column: 1 / -1;
  margin: 0;
}
.motion-ready .story-inline-motion .story-stage {
  position: relative;
  min-height: 0;
}
.motion-ready .system-core {
  position: relative;
  gap: 16px;
}
.motion-ready .system-core img {
  flex-shrink: 0;
}
.motion-ready .system-core > span {
  line-height: 1.5;
}

/* A language decision must not consume the hero's entrance behind the dialog. */
body.is-locked .hero-line > span,
body.is-locked .hero-answer,
body.is-locked .hero-symbol,
body.is-locked .symbol-piece,
body.is-locked .symbol-center {
  animation-play-state: paused;
}
.hero.is-motion-reset .hero-line > span,
.hero.is-motion-reset .hero-answer,
.hero.is-motion-reset .hero-symbol,
.hero.is-motion-reset .symbol-piece,
.hero.is-motion-reset .symbol-center {
  animation: none !important;
}

@media (max-width: 900px) and (min-width: 601px) {
  .motion-ready .story-stage {
    column-gap: 25px;
    row-gap: 36px;
    padding-top: 100px;
  }
  .motion-ready .task-system {
    width: min(100%, 260px);
  }
  .motion-ready .task {
    padding: 14px 10px;
  }
}
@media (max-width: 600px) {
  .motion-ready .story-stage {
    display: block;
    position: relative;
    min-height: 0;
    padding: 46px var(--pad) 34px;
  }
  .motion-ready .story-copy {
    margin-top: 42px;
  }
  .motion-ready .task-system {
    width: 100%;
    margin: 54px 0 0;
  }
  .motion-ready .story-bottom {
    margin-top: 33px;
  }
}

.motion-on .motion-prepared .service-art,
.motion-on .motion-prepared .it-visual {
  opacity: 0;
  transition: opacity 0.65s ease;
}
.motion-on .motion-prepared.is-visible .service-art,
.motion-on .motion-prepared.is-visible .it-visual {
  opacity: 1;
}
.motion-on .is-visible .art-legal span,
.motion-on .is-visible .art-hr span {
  animation: module-enter 1s var(--ease) both;
}
.motion-on .is-visible .art-legal span:nth-child(2),
.motion-on .is-visible .art-hr span:nth-child(2) {
  animation-delay: 0.08s;
}
.motion-on .is-visible .art-legal span:nth-child(3),
.motion-on .is-visible .art-hr span:nth-child(3) {
  animation-delay: 0.16s;
}
.motion-on .is-visible .art-legal span:nth-child(4),
.motion-on .is-visible .art-hr span:nth-child(n + 4) {
  animation-delay: 0.24s;
}
.motion-on .is-visible .art-accounting span {
  transform-origin: left;
  animation: ledger-enter 1.1s var(--ease) both;
}
.motion-on .is-visible .art-accounting span:nth-child(even) {
  animation-delay: 0.12s;
}
.motion-on .is-visible .art-accounting i {
  animation: module-enter 1.1s 0.15s var(--ease) both;
}
.motion-on .is-visible .art-supply span,
.motion-on .is-visible .art-supply i {
  animation: supply-enter 1.1s var(--ease) both;
}
.motion-on .is-visible .art-supply span:nth-child(2) {
  animation-delay: 0.12s;
}
.motion-on .is-visible .art-supply span:nth-child(3),
.motion-on .is-visible .art-supply i {
  animation-delay: 0.24s;
}
.motion-on .is-visible .it-node {
  animation: module-enter 1.1s var(--ease) both;
}
.motion-on .is-visible .node-output {
  animation-delay: 0.2s;
}
.motion-on .is-visible .it-visual svg {
  animation: circuit-enter 1.2s ease both;
}
@keyframes module-enter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes ledger-enter {
  from {
    opacity: 0;
    transform: scaleX(0.25);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes supply-enter {
  from {
    opacity: 0;
    transform: translateY(26px) skewY(-15deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) skewY(-15deg);
  }
}
@keyframes circuit-enter {
  from {
    opacity: 0;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
  }
  to {
    opacity: 1;
    stroke-dasharray: 300;
    stroke-dashoffset: 0;
  }
}

.motion-on .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
}
.motion-on .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
#motion-toggle {
  min-height: 44px;
  padding: 8px 0;
  color: inherit;
  font-size: 11px;
  line-height: 1.6;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* OS preference is the default. Only a visitor's explicit choice enables it. */
.motion-off,
.motion-off *,
.motion-off *::before,
.motion-off *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.motion-off .story-stage {
  position: relative;
  min-height: 0;
}
.motion-off .task,
.motion-off .system-core,
.motion-off .story-progress i,
.motion-off .reveal {
  transform: none !important;
}
.motion-off .system-core,
.motion-off .reveal,
.motion-off .service-art,
.motion-off .it-visual {
  opacity: 1 !important;
}

/* Also protect the first paint and the no-JavaScript fallback. */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on),
  html:not(.motion-on) *,
  html:not(.motion-on) *::before,
  html:not(.motion-on) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html:not(.motion-on) .story {
    height: auto;
  }
  html:not(.motion-on) .story-stage {
    position: relative;
    height: auto;
    min-height: 0;
  }
  html:not(.motion-ready) .story-stage {
    min-height: 780px;
  }
  html:not(.motion-on) .task,
  html:not(.motion-on) .system-core,
  html:not(.motion-on) .story-progress i,
  html:not(.motion-on) .reveal {
    transform: none !important;
  }
  html:not(.motion-on) .system-core,
  html:not(.motion-on) .reveal,
  html:not(.motion-on) .service-art,
  html:not(.motion-on) .it-visual {
    opacity: 1 !important;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 600px) {
  html:not(.motion-ready) .story-stage {
    min-height: 0;
  }
}