/* Motion is local to an illustration. Its parent card's entrance remains owned
   by experience.css, so interaction never fights a scroll reveal transform. */
.section-motion:not(.is-section-running),
.section-motion:not(.is-section-running)::before,
.section-motion:not(.is-section-running)::after,
.section-motion:not(.is-section-running) *,
.section-motion:not(.is-section-running) *::before,
.section-motion:not(.is-section-running) *::after {
  animation-play-state: paused !important;
}

/* Separate website knowledge travels along three paths into the AI core. */
.section-scope-routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.section-scope-routes path {
  fill: none;
  stroke: #86c7ab35;
  stroke-width: 1;
}
.scope-art.section-motion > i:not(.section-scope-packet) {
  display: none;
}
.section-motion .scope-core {
  z-index: 2;
  overflow: hidden;
}
.section-motion .scope-node {
  z-index: 2;
  box-shadow:
    inset 0 1px #daf5e715,
    0 8px 16px #0004;
}
.section-motion .scope-core::after {
  content: '';
  position: absolute;
  inset: -25%;
  background: linear-gradient(100deg, transparent 36%, #e2fff326 50%, transparent 63%);
  transform: translateX(-120%);
  animation: section-core-inspect 9.6s ease-in-out infinite;
}
.scope-art.section-motion > .section-scope-packet {
  top: 0;
  left: 0;
  right: auto;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  opacity: 0;
  background: #c1fce4;
  box-shadow: 0 0 12px #70c1a5a6;
  z-index: 3;
}
.section-scope-packet-ae {
  animation: section-route-ae 9.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.section-scope-packet-sc {
  animation: section-route-sc 9.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.section-scope-packet-prime {
  animation: section-route-prime 9.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes section-route-ae {
  0%,
  5% {
    opacity: 0;
    transform: translate3d(119px, 219px, 0) scale(0.6);
  }
  10% {
    opacity: 1;
  }
  23% {
    opacity: 1;
    transform: translate3d(219px, 207px, 0) scale(1);
  }
  31% {
    opacity: 0;
    transform: translate3d(276px, 163px, 0) scale(0.5);
  }
  32%,
  100% {
    opacity: 0;
    transform: translate3d(276px, 163px, 0) scale(0.5);
  }
}
@keyframes section-route-sc {
  0%,
  33% {
    opacity: 0;
    transform: translate3d(451px, 164px, 0) scale(0.6);
  }
  39% {
    opacity: 1;
  }
  52% {
    opacity: 1;
    transform: translate3d(344px, 145px, 0) scale(1);
  }
  61%,
  100% {
    opacity: 0;
    transform: translate3d(276px, 163px, 0) scale(0.5);
  }
}
@keyframes section-route-prime {
  0%,
  64% {
    opacity: 0;
    transform: translate3d(279px, 53px, 0) scale(0.6);
  }
  70% {
    opacity: 1;
  }
  82% {
    opacity: 1;
    transform: translate3d(297px, 117px, 0) scale(1);
  }
  92%,
  100% {
    opacity: 0;
    transform: translate3d(276px, 163px, 0) scale(0.5);
  }
}
@keyframes section-core-inspect {
  0%,
  25% {
    transform: translateX(-120%);
  }
  55%,
  100% {
    transform: translateX(120%);
  }
}

/* A customer's request arrives, a person replies, then context is attached. */
.mini-inbox.section-motion {
  position: relative;
}
.mini-inbox.section-motion > p {
  animation: section-inbox-request 11.5s ease-in-out infinite;
}
.mini-inbox.section-motion > p + p {
  animation-name: section-inbox-reply;
}
.mini-inbox.section-motion > small {
  animation: section-inbox-context 11.5s ease-in-out infinite;
}
.mini-inbox.section-motion > div > i {
  animation: section-inbox-presence 11.5s ease-in-out infinite;
}
@keyframes section-inbox-request {
  0%,
  5% {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  14%,
  88% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  97%,
  100% {
    opacity: 0;
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes section-inbox-reply {
  0%,
  27% {
    opacity: 0;
    transform: translate3d(12px, 4px, 0);
  }
  39%,
  88% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  97%,
  100% {
    opacity: 0;
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes section-inbox-context {
  0%,
  48% {
    opacity: 0;
    transform: translate3d(0, 5px, 0);
  }
  60%,
  88% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  97%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes section-inbox-presence {
  0%,
  27%,
  42%,
  100% {
    opacity: 0.45;
    transform: scale(1);
  }
  32%,
  36% {
    opacity: 1;
    transform: scale(1.5);
  }
}

/* Source pages align under an inspection line, followed by human approval. */
.review-art.section-motion {
  position: relative;
  isolation: isolate;
}
.review-art.section-motion::before,
.review-art.section-motion::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  width: 202px;
  height: 130px;
  border: 1px solid #8ab99c24;
  border-radius: 11px;
  background: linear-gradient(145deg, #1c3025, #101a14);
  box-shadow: 0 10px 25px #0003;
  transform: translateX(-50%) rotate(6deg);
  z-index: -1;
}
.review-art.section-motion::before {
  transform: translateX(-50%) rotate(11deg);
  opacity: 0.6;
}
.review-art.section-motion::after {
  animation: section-evidence-stack 12s ease-in-out infinite;
}
.review-art.section-motion .review-paper {
  position: relative;
  overflow: hidden;
  animation: section-evidence-align 12s ease-in-out infinite;
}
.review-paper > .section-review-scan {
  display: block;
  position: absolute;
  left: 13px;
  right: 13px;
  top: 32px;
  height: 26px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(transparent, #9aecc317);
  border-bottom: 1px solid #b8f4d78c;
  animation: section-evidence-scan 12s ease-in-out infinite;
}
.review-art.section-motion .review-paper > b {
  animation: section-evidence-approved 12s ease-in-out infinite;
}
@keyframes section-evidence-stack {
  0%,
  12%,
  90%,
  100% {
    transform: translateX(-50%) rotate(6deg);
  }
  29%,
  75% {
    transform: translateX(-50%) rotate(2deg) translateY(-2px);
  }
}
@keyframes section-evidence-align {
  0%,
  10%,
  90%,
  100% {
    transform: rotate(-6deg);
  }
  28%,
  75% {
    transform: rotate(-2deg);
  }
}
@keyframes section-evidence-scan {
  0%,
  22% {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
  28% {
    opacity: 1;
  }
  48% {
    opacity: 0.8;
    transform: translate3d(0, 32px, 0);
  }
  54%,
  100% {
    opacity: 0;
    transform: translate3d(0, 35px, 0);
  }
}
@keyframes section-evidence-approved {
  0%,
  49% {
    opacity: 0.12;
    transform: translate3d(0, 5px, 0);
  }
  58%,
  91% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0.12;
    transform: translate3d(0, 5px, 0);
  }
}

/* A proposal becomes knowledge only after the review stage has completed. */
.learning-art.section-motion > span {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.learning-art.section-motion > span::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #b0e3cda3;
  border-radius: inherit;
  background: #b5f1d515;
  opacity: 0;
  pointer-events: none;
  animation: section-learning-question 10.8s ease-in-out infinite;
}
.learning-art.section-motion > span:nth-of-type(2)::after {
  animation-name: section-learning-review;
}
.learning-art.section-motion > span:nth-of-type(3)::after {
  animation-name: section-learning-publish;
}
.learning-art.section-motion > i {
  position: relative;
  overflow: visible;
}
.learning-art.section-motion > i::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 8px;
  height: 3px;
  border-radius: 3px;
  background: #b4e6ce;
  opacity: 0;
  animation: section-learning-first-link 10.8s ease-in-out infinite;
}
.learning-art.section-motion > i:nth-of-type(2)::after {
  animation-name: section-learning-second-link;
}
@keyframes section-learning-question {
  0%,
  7%,
  34%,
  100% {
    opacity: 0;
  }
  13%,
  26% {
    opacity: 1;
  }
}
@keyframes section-learning-review {
  0%,
  34%,
  65%,
  100% {
    opacity: 0;
  }
  43%,
  56% {
    opacity: 1;
  }
}
@keyframes section-learning-publish {
  0%,
  67%,
  96%,
  100% {
    opacity: 0;
  }
  75%,
  87% {
    opacity: 1;
  }
}
@keyframes section-learning-first-link {
  0%,
  25% {
    opacity: 0;
    transform: translateX(-4px) scaleX(0.5);
  }
  30% {
    opacity: 1;
  }
  38% {
    opacity: 0;
    transform: translateX(16px) scaleX(1);
  }
  39%,
  100% {
    opacity: 0;
    transform: translateX(16px);
  }
}
@keyframes section-learning-second-link {
  0%,
  57% {
    opacity: 0;
    transform: translateX(-4px) scaleX(0.5);
  }
  62% {
    opacity: 1;
  }
  70%,
  100% {
    opacity: 0;
    transform: translateX(16px) scaleX(1);
  }
}

/* The terminal shows retrieval, verification and a response in that order. */
.test-art.section-motion {
  position: relative;
  overflow: hidden;
}
.test-art.section-motion .section-terminal-word {
  display: inline-block;
  animation: section-terminal-retrieve 10.8s ease-in-out infinite;
}
.test-art.section-motion .section-terminal-word:nth-of-type(2) {
  animation-name: section-terminal-verify;
}
.test-art.section-motion .section-terminal-word:nth-of-type(3) {
  animation-name: section-terminal-respond;
}
.test-art.section-motion .test-caret {
  animation: section-terminal-caret 1.2s steps(1, end) infinite;
}
.test-art.section-motion::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 13px;
  height: 1px;
  background: linear-gradient(90deg, #8bd6af99, transparent);
  transform-origin: left;
  animation: section-terminal-progress 10.8s ease-in-out infinite;
}
@keyframes section-terminal-retrieve {
  0%,
  14% {
    opacity: 0;
    transform: translateY(4px);
  }
  23%,
  88% {
    opacity: 1;
    transform: translateY(0);
  }
  98%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes section-terminal-verify {
  0%,
  32% {
    opacity: 0;
    transform: translateY(4px);
  }
  41%,
  88% {
    opacity: 1;
    transform: translateY(0);
  }
  98%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes section-terminal-respond {
  0%,
  50% {
    opacity: 0;
    transform: translateY(4px);
  }
  59%,
  88% {
    opacity: 1;
    transform: translateY(0);
  }
  98%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes section-terminal-caret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@keyframes section-terminal-progress {
  0%,
  12% {
    opacity: 0;
    transform: scaleX(0);
  }
  22% {
    opacity: 0.8;
    transform: scaleX(0.22);
  }
  42% {
    transform: scaleX(0.57);
  }
  62%,
  88% {
    opacity: 0.8;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

/* The channel grid is drawn once; its text stays in the normal reading flow. */
.usecase-grid > .section-motion {
  position: relative;
}
.usecase-grid > .section-motion::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, #5f997b, #5f997b00);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 950ms var(--section-entry-delay, 0ms) cubic-bezier(0.16, 1, 0.3, 1);
}
.usecase-grid > .section-motion > .icon {
  opacity: 0;
  transform: translateY(8px) rotate(-8deg) scale(0.86);
  transition:
    transform 750ms var(--section-entry-delay, 0ms) cubic-bezier(0.16, 1, 0.3, 1),
    opacity 650ms var(--section-entry-delay, 0ms) ease;
}
.usecase-grid > .is-section-entered::before {
  transform: scaleX(1);
}
.usecase-grid > .is-section-entered > .icon {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}

/* Three machined identity tiles, followed by a deliberate configuration list. */
.website-card.section-motion {
  perspective: 900px;
}
.website-card.section-motion .website-mark {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, #456453, #20362b 45%, #101b15);
  border-color: #bde4cd55;
  color: #d1ebdc;
  box-shadow:
    inset 0 1px #e7fff157,
    3px 5px 0 #060b08,
    0 9px 18px #0004;
  transform: rotateY(-14deg) rotateX(8deg) rotateZ(-4deg);
  animation: section-identity-inspect 15s ease-in-out infinite;
}
.website-card.section-motion .website-mark::after {
  content: '';
  position: absolute;
  inset: -50%;
  background: linear-gradient(105deg, transparent 40%, #e8fff42e 50%, transparent 60%);
  transform: translateX(-95%);
  animation: section-identity-sheen 15s ease-in-out infinite;
}
.website-card.section-motion li {
  opacity: 0;
  transform: translateX(9px);
  transition:
    opacity 650ms var(--section-item-delay, 0ms) ease,
    transform 750ms var(--section-item-delay, 0ms) cubic-bezier(0.16, 1, 0.3, 1);
}
.website-card.is-section-entered li,
.website-card.section-motion:focus-within li {
  opacity: 1;
  transform: translateX(0);
}
@keyframes section-identity-inspect {
  0%,
  100% {
    transform: rotateY(-14deg) rotateX(8deg) rotateZ(-4deg);
  }
  47% {
    transform: rotateY(12deg) rotateX(3deg) rotateZ(-4deg);
  }
}
@keyframes section-identity-sheen {
  0%,
  12% {
    transform: translateX(-95%);
  }
  45%,
  100% {
    transform: translateX(95%);
  }
}

/* Native details owns expansion and keyboard behavior; only the answer fades. */
.question.section-motion.is-section-running[open] > p {
  animation: section-answer-enter 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes section-answer-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The closing horizon expands slowly from its lower edge. */
.cta-horizon.section-motion {
  transform-origin: 50% 100%;
  animation: section-horizon-breathe 18s ease-in-out infinite;
}
@keyframes section-horizon-breathe {
  0%,
  100% {
    opacity: 0.91;
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 1;
    transform: scale3d(1.025, 1.055, 1);
  }
}

/* A short light pass and advancing arrow confirm an intentional destination. */
.cinema-page .platform-directory > a.section-motion {
  overflow: hidden;
}
.platform-directory > .section-motion::before {
  content: '';
  position: absolute;
  top: -15%;
  bottom: -15%;
  left: 0;
  width: 36%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, #b2edcf0e, transparent);
  transform: translateX(-150%) skewX(-14deg);
  transition: transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
}
.platform-directory > .section-motion::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, #8bc7a870, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.platform-directory > .section-motion .directory-arrow {
  display: block;
  transition:
    transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 250ms;
}
.platform-directory > .section-motion:focus-visible::before {
  transform: translateX(400%) skewX(-14deg);
}
.platform-directory > .section-motion:focus-visible::after {
  transform: scaleX(1);
}
.platform-directory > .section-motion:focus-visible .directory-arrow {
  transform: translateX(4px);
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .platform-directory > .section-motion:hover::before {
    transform: translateX(400%) skewX(-14deg);
  }
  .platform-directory > .section-motion:hover::after {
    transform: scaleX(1);
  }
  .platform-directory > .section-motion:hover .directory-arrow {
    transform: translateX(4px);
    opacity: 1;
  }
}
.footer-watermark.section-motion {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 1400ms ease,
    transform 1600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-watermark.is-section-entered {
  opacity: 1;
  transform: translateY(0);
}

/* Static modes expose all real content immediately. Illustrations retain their
   original arranged pose instead of leaving a partially hidden narrative. */
.section-motion.is-section-static,
.section-motion.is-section-static *,
.section-motion.is-section-static::before,
.section-motion.is-section-static::after,
.section-motion.is-section-static *::before,
.section-motion.is-section-static *::after {
  animation: none !important;
  transition: none !important;
}
.section-motion.is-section-static .section-scope-packet,
.section-motion.is-section-static .section-review-scan {
  opacity: 0;
}
.section-motion.is-section-static .section-terminal-word,
.website-card.is-section-static li,
.usecase-grid > .is-section-static > .icon,
.footer-watermark.is-section-static {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .section-motion,
  .section-motion *,
  .section-motion::before,
  .section-motion::after,
  .section-motion *::before,
  .section-motion *::after {
    animation: none !important;
    transition: none !important;
  }
  .website-card.section-motion li,
  .usecase-grid > .section-motion > .icon,
  .footer-watermark.section-motion {
    opacity: 1;
    transform: none;
  }
}