:root {
  --motion-accent: #f04421;
  --motion-paper: #f3f3f1;
}

/* Route-bearing scenes are precomposed bitmaps. Keep their edge coordinates stable. */
.route-baked {
  animation: none !important;
  transform: none !important;
}

/* The parent journey supplies the one continuous route. The hero, loop,
   protein, robotics and ecosystem artwork already carries its own line. */
.hero-transfer,
.loop-flow,
.protein-signal,
.robot-signal,
.ecosystem-signal {
  display: none;
}

.motion-effect {
  pointer-events: none;
  opacity: 0;
}

/* Continuous-route artwork must stay pinned to the iframe edges. Scaling or
   translating these images clips the shared corner/edge pixels and visually
   breaks the route during camera travel. Motion remains on copy and nodes. */
body .scene.route-baked,
body .scene.route-integrated,
body .hero-visual.route-baked,
body .hero-visual.route-integrated,
body:not(.is-motion-active) .scene.route-baked,
body:not(.is-motion-active) .scene.route-integrated,
body:not(.is-motion-active) .hero-visual.route-baked,
body:not(.is-motion-active) .hero-visual.route-integrated,
body.is-motion-active .scene.route-baked,
body.is-motion-active .scene.route-integrated,
body.is-motion-active .hero-visual.route-baked,
body.is-motion-active .hero-visual.route-integrated {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

@media (prefers-reduced-motion: no-preference) {
  body:not(.is-motion-active) .scene,
  body:not(.is-motion-active) .hero-visual {
    animation: none !important;
    transform: scale(1.018);
  }

  body.is-motion-active .scene,
  body.is-motion-active .hero-visual {
    animation: shared-scene-depth 11s ease-in-out infinite alternate !important;
    will-change: transform;
  }

  body.is-motion-active .screen-copy,
  body.is-motion-active .hero-copy,
  body.is-motion-active .title-block {
    animation: shared-copy-reveal 720ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }
}

@keyframes shared-scene-depth {
  from { transform: scale(1.018) translate3d(0, -0.45%, 0); }
  to { transform: scale(1.032) translate3d(0, 0.45%, 0); }
}

@keyframes shared-copy-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Home signal transfer */
.hero-transfer {
  position: absolute;
  top: 40.4%;
  left: 74.5%;
  z-index: 4;
  width: 14vw;
  height: 90px;
  transform: rotate(-5deg);
}

.transfer-trace {
  position: absolute;
  top: 44px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 68, 33, 0.72), rgba(243, 243, 241, 0.25), transparent);
  opacity: 0;
  transform: scaleX(0.08);
  transform-origin: left;
}

.transfer-node,
.transfer-ring,
.signal-node,
.signal-ring,
.robot-signal span,
.robot-core-ring,
.join-core-ring,
.contact-core-ring {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.transfer-node,
.signal-node,
.robot-signal span { background: var(--motion-accent); }

.transfer-node,
.transfer-ring { top: 39px; left: 0; }

.transfer-ring,
.signal-ring,
.robot-core-ring,
.join-core-ring,
.contact-core-ring {
  border: 1px solid rgba(240, 68, 33, 0.75);
}

@media (prefers-reduced-motion: no-preference) {
  body.is-motion-active .hero-transfer { opacity: 1; }
  body.is-motion-active .transfer-trace { animation: signal-trace 7.2s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
  body.is-motion-active .transfer-node { animation: hero-node-transfer 7.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  body.is-motion-active .transfer-ring { animation: hero-ring-transfer 7.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
}

@keyframes signal-trace {
  0%, 18% { opacity: 0; transform: scaleX(0.08); }
  28% { opacity: 0.55; }
  58% { opacity: 0.82; transform: scaleX(1); }
  72%, 100% { opacity: 0; transform: scaleX(1); }
}

@keyframes hero-node-transfer {
  0%, 18% { opacity: 0; transform: translate3d(0, 0, 0); }
  25% { opacity: 1; }
  58% { opacity: 1; transform: translate3d(13vw, 0, 0); }
  66%, 100% { opacity: 0; transform: translate3d(13vw, 0, 0); }
}

@keyframes hero-ring-transfer {
  0%, 53% { opacity: 0; transform: translate3d(13vw, 0, 0) scale(0.7); }
  59% { opacity: 0.8; }
  70% { opacity: 0; transform: translate3d(13vw, 0, 0) scale(2.7); }
  100% { opacity: 0; }
}

/* Autonomous science loop */
.loop-flow {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.loop-flow-route {
  fill: none;
  stroke: rgba(240, 68, 33, 0.62);
  stroke-width: 1.4px;
  stroke-dasharray: 0.08 0.92;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(240, 68, 33, 0.38));
}

.loop-flow-node {
  fill: var(--motion-accent);
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(240, 68, 33, 0.8));
}

.loop-flow-node.secondary {
  fill: #f3f3f1;
  filter: drop-shadow(0 0 5px rgba(243, 243, 241, 0.54));
}

@media (prefers-reduced-motion: no-preference) {
  body.is-motion-active .loop-flow { opacity: 1; }
  body.is-motion-active .loop-flow-route { animation: loop-route-pulse 4.8s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  body.is-motion-active .loop-flow-node { opacity: 0.94; }
  body.is-motion-active .loop-steps .step { animation: item-focus 6.4s ease-in-out infinite; animation-delay: calc(var(--motion-index) * 1.6s); }
}

@keyframes loop-route-pulse {
  0%, 12% { opacity: 0; stroke-dashoffset: 1; }
  24% { opacity: 0.82; }
  76% { opacity: 0.48; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: -0.16; }
}

/* Scientific models */
.model-feed {
  position: absolute;
  top: 48.5%;
  left: 15.5%;
  z-index: 4;
  width: 24%;
  height: 20px;
  overflow: hidden;
}

.model-feed span {
  position: absolute;
  top: 7px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--motion-accent);
}

.model-scan {
  position: absolute;
  top: 23%;
  left: 31%;
  z-index: 3;
  width: 39%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 68, 33, 0.7), rgba(243, 243, 241, 0.36), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  body.is-motion-active .model-feed,
  body.is-motion-active .model-scan { opacity: 1; }
  body.is-motion-active .model-feed span { animation: model-feed 4.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  body.is-motion-active .model-scan { animation: model-scan 6.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  body.is-motion-active .model-inputs .micro-label { animation: input-focus 6.4s ease-in-out infinite; animation-delay: calc(var(--motion-index) * 0.75s); }
  body.is-motion-active .models-page .direction-list li { animation: output-focus 6.9s ease-in-out infinite; animation-delay: calc(3.4s + var(--motion-index) * 0.7s); }
}

@keyframes model-feed {
  0%, 10% { opacity: 0; transform: translate3d(0, 0, 0); }
  20% { opacity: 1; }
  70% { opacity: 1; transform: translate3d(22vw, 0, 0); }
  80%, 100% { opacity: 0; transform: translate3d(22vw, 0, 0); }
}

@keyframes model-scan {
  0%, 23% { opacity: 0; transform: translateY(0); }
  30% { opacity: 0.62; }
  63% { opacity: 0.5; transform: translateY(46vh); }
  72%, 100% { opacity: 0; transform: translateY(46vh); }
}

@keyframes input-focus {
  0%, 10%, 100% { opacity: 0.42; transform: translateX(0); }
  18%, 31% { opacity: 1; transform: translateX(7px); }
  42% { opacity: 0.42; transform: translateX(0); }
}

@keyframes output-focus {
  0%, 9%, 100% { opacity: 0.58; transform: translateY(0); }
  18%, 31% { opacity: 1; transform: translateY(-3px); }
  42% { opacity: 0.58; transform: translateY(0); }
}

/* Protein generation and binding */
.protein-signal {
  position: absolute;
  top: 45%;
  left: 54%;
  z-index: 4;
  width: 25vw;
  height: 54px;
  transform: rotate(4deg);
}

.protein-signal .signal-trace {
  position: absolute;
  top: 26px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(243, 243, 241, 0.28), rgba(240, 68, 33, 0.76));
  transform: scaleX(0.1);
  transform-origin: left;
}

.protein-signal .signal-node,
.protein-signal .signal-ring { top: 21px; left: 0; }

@media (prefers-reduced-motion: no-preference) {
  body.is-motion-active .protein-signal { opacity: 1; }
  body.is-motion-active .protein-signal .signal-trace { animation: signal-trace 7.6s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
  body.is-motion-active .protein-signal .signal-node { animation: protein-node 7.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  body.is-motion-active .protein-signal .signal-ring { animation: protein-ring 7.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  body.is-motion-active .protein-page .direction-list li { animation: item-focus 7.2s ease-in-out infinite; animation-delay: calc(var(--motion-index) * 1.15s); }
}

@keyframes protein-node {
  0%, 18% { opacity: 0; transform: translate3d(0, 0, 0); }
  26% { opacity: 1; }
  62% { opacity: 1; transform: translate3d(24vw, 0, 0); }
  70%, 100% { opacity: 0; transform: translate3d(24vw, 0, 0); }
}

@keyframes protein-ring {
  0%, 58% { opacity: 0; transform: translate3d(24vw, 0, 0) scale(0.7); }
  64% { opacity: 0.85; }
  76% { opacity: 0; transform: translate3d(24vw, 0, 0) scale(3.1); }
  100% { opacity: 0; }
}

/* Physical execution */
.robot-signal {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.robot-signal span { top: 0; left: 0; opacity: 0; }

.robot-core-ring {
  top: 82%;
  left: 44.7%;
  z-index: 4;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  body.is-motion-active .robot-signal,
  body.is-motion-active .robot-core-ring { opacity: 1; }
  body.is-motion-active .robot-signal span { animation: robot-trajectory 7.4s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  body.is-motion-active .robot-core-ring { animation: robot-core-pulse 7.4s ease-in-out infinite; }
  body.is-motion-active .robotics-page .direction-list li { animation: item-focus 6.8s ease-in-out infinite; animation-delay: calc(2.6s + var(--motion-index) * 1.25s); }
}

@keyframes robot-trajectory {
  0%, 10% { opacity: 0; transform: translate3d(-1vw, 17vh, 0) scale(0.7); }
  18% { opacity: 1; }
  36% { transform: translate3d(10vw, 20vh, 0) scale(1); }
  62% { transform: translate3d(31vw, 48vh, 0) scale(1); }
  80% { opacity: 1; transform: translate3d(44.7vw, 82vh, 0) scale(0.8); }
  88%, 100% { opacity: 0; transform: translate3d(44.7vw, 82vh, 0) scale(0.6); }
}

@keyframes robot-core-pulse {
  0%, 76% { opacity: 0; transform: scale(0.65); }
  82% { opacity: 0.82; }
  94%, 100% { opacity: 0; transform: scale(3.2); }
}

/* Research ecosystem */
.ecosystem-signal {
  position: absolute;
  top: 0;
  left: 51.55%;
  z-index: 4;
  width: 3px;
  height: 70%;
  overflow: hidden;
}

.ecosystem-signal span {
  position: absolute;
  top: 0;
  left: 1px;
  width: 1px;
  height: 18vh;
  background: linear-gradient(180deg, transparent, var(--motion-accent), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  body.is-motion-active .ecosystem-signal { opacity: 1; }
  body.is-motion-active .ecosystem-signal span { animation: ecosystem-scan 6.8s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  body.is-motion-active .layer-label { animation: layer-focus 6.8s ease-in-out infinite; animation-delay: calc(var(--motion-index) * 1.15s); }
  body.is-motion-active .entry-link { animation: ecosystem-entry 6.8s ease-in-out infinite; }
}

@keyframes ecosystem-scan {
  0%, 8% { opacity: 0; transform: translateY(-18vh); }
  17% { opacity: 1; }
  74% { opacity: 0.9; transform: translateY(62vh); }
  84%, 100% { opacity: 0; transform: translateY(62vh); }
}

@keyframes layer-focus {
  0%, 12%, 100% { opacity: 0.48; transform: translateX(0); }
  22%, 36% { opacity: 1; transform: translateX(6px); }
  48% { opacity: 0.48; transform: translateX(0); }
}

@keyframes ecosystem-entry {
  0%, 70%, 100% { opacity: 0.72; transform: translateX(0); }
  80%, 92% { opacity: 1; transform: translateX(7px); }
}

/* Client footprint */
.footprint-slide .continuity-line path,
.join-slide .continuity-line path,
.contact-slide .continuity-line path {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none !important;
}

.footprint-slide .continuity-line circle,
.join-slide .continuity-line circle,
.contact-slide .continuity-line circle {
  opacity: 1;
  animation: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  body.is-motion-active #client-map-points .point-halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: map-point-pulse 5.6s ease-in-out infinite;
  }

  body.is-motion-active #client-map-points .point-halo:nth-child(4n + 1) { animation-delay: 0.7s; }
  body.is-motion-active #client-map-points .point-halo:nth-child(4n + 3) { animation-delay: 1.7s; }
}

@keyframes map-point-pulse {
  0%, 72%, 100% { opacity: 0.28; transform: scale(0.78); }
  82%, 90% { opacity: 0.82; transform: scale(1.28); }
}

/* Join and contact */
.join-core-ring {
  top: 50.3%;
  left: 58.9%;
  z-index: 5;
}

.contact-core-ring {
  top: 50.3%;
  left: 61.9%;
  z-index: 5;
}

.contact-slide .route {
  opacity: 0;
  transform: translateY(8px);
  animation: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  body.is-motion-active .join-core-ring,
  body.is-motion-active .contact-core-ring { opacity: 1; animation: shared-core-pulse 5.8s ease-in-out infinite; }
  body.is-motion-active .role { animation: role-focus 7.2s ease-in-out infinite; animation-delay: calc(1.1s + var(--motion-index) * 1.15s); }
  body.is-motion-active .contact-slide .route { animation: route-reveal 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards, route-focus 6.4s ease-in-out 1.2s infinite !important; animation-delay: calc(0.9s + var(--motion-index) * 0.18s), calc(1.3s + var(--motion-index) * 1.3s) !important; }
}

@keyframes shared-core-pulse {
  0%, 18%, 100% { opacity: 0; transform: scale(0.65); }
  26% { opacity: 0.82; }
  44% { opacity: 0; transform: scale(3.4); }
}

@keyframes role-focus {
  0%, 12%, 100% { opacity: 0.5; transform: translateX(0); }
  22%, 36% { opacity: 1; transform: translateX(-6px); }
  48% { opacity: 0.5; transform: translateX(0); }
}

@keyframes route-reveal { to { opacity: 1; transform: translateY(0); } }

@keyframes route-focus {
  0%, 12%, 100% { opacity: 0.62; transform: translateY(0); }
  22%, 36% { opacity: 1; transform: translateY(-4px); }
  48% { opacity: 0.62; transform: translateY(0); }
}

@keyframes item-focus {
  0%, 12%, 100% { opacity: 0.52; transform: translateY(0); }
  22%, 36% { opacity: 1; transform: translateY(-4px); }
  48% { opacity: 0.52; transform: translateY(0); }
}

@media (max-width: 900px) {
  .hero-transfer { top: 40.2%; left: 70%; width: 20vw; }

  .loop-flow { inset: 0; width: 100%; height: 100%; }

  .model-feed { top: 50%; left: 4%; width: 50%; }
  .model-scan { top: 39%; left: 4%; width: 88%; }

  .protein-signal { top: 47%; left: 47%; width: 42vw; }
  .robot-signal { display: none; }
  .robot-core-ring { top: 82%; left: 77%; }
  .ecosystem-signal { left: 38.5%; }

  .join-core-ring { top: 49.8%; left: 65.5%; }
  .contact-core-ring { top: 50.2%; left: 62.8%; }
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  @keyframes hero-node-transfer {
    0%, 18% { opacity: 0; transform: translate3d(0, 0, 0); }
    25% { opacity: 1; }
    58% { opacity: 1; transform: translate3d(19vw, 0, 0); }
    66%, 100% { opacity: 0; transform: translate3d(19vw, 0, 0); }
  }

  @keyframes hero-ring-transfer {
    0%, 53% { opacity: 0; transform: translate3d(19vw, 0, 0) scale(0.7); }
    59% { opacity: 0.8; }
    70% { opacity: 0; transform: translate3d(19vw, 0, 0) scale(2.4); }
    100% { opacity: 0; }
  }

  @keyframes loop-data-flow {
    0%, 8% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.7); }
    16% { opacity: 1; }
    72% { opacity: 0.9; transform: translate3d(46vw, 0, 0) scale(1); }
    80%, 100% { opacity: 0; transform: translate3d(46vw, 0, 0) scale(0.7); }
  }

  @keyframes model-feed {
    0%, 10% { opacity: 0; transform: translate3d(0, 0, 0); }
    20% { opacity: 1; }
    70% { opacity: 1; transform: translate3d(46vw, 0, 0); }
    80%, 100% { opacity: 0; transform: translate3d(46vw, 0, 0); }
  }

  @keyframes model-scan {
    0%, 23% { opacity: 0; transform: translateY(0); }
    30% { opacity: 0.48; }
    63% { opacity: 0.4; transform: translateY(34vh); }
    72%, 100% { opacity: 0; transform: translateY(34vh); }
  }

  @keyframes protein-node {
    0%, 18% { opacity: 0; transform: translate3d(0, 0, 0); }
    26% { opacity: 1; }
    62% { opacity: 1; transform: translate3d(39vw, 0, 0); }
    70%, 100% { opacity: 0; transform: translate3d(39vw, 0, 0); }
  }

  @keyframes protein-ring {
    0%, 58% { opacity: 0; transform: translate3d(39vw, 0, 0) scale(0.7); }
    64% { opacity: 0.85; }
    76% { opacity: 0; transform: translate3d(39vw, 0, 0) scale(2.6); }
    100% { opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-effect { display: none !important; }
  .scene,
  .hero-visual { animation: none !important; transform: none !important; }
  .step,
  .micro-label,
  .direction-list li,
  .layer-label,
  .role,
  .route { animation: none !important; opacity: 1 !important; transform: none !important; }
  .continuity-line path { stroke-dashoffset: 0 !important; animation: none !important; }
  .continuity-line circle { opacity: 1 !important; animation: none !important; }
}

body .scene.route-baked,
body .hero-visual.route-baked {
  animation: none !important;
  transform: none !important;
}