/*
 * SASS Innovations | Site-wide animation stability layer | 2026-10-13
 * Loaded after style.min.css and page typography styles on all 31 pages.
 * Keeps the existing visual design while preventing moving hit targets,
 * rapid active-card shaking, subpixel strobing and motion-heavy dialogs.
 */

/* Block-based diagrams should highlight status, not jump around the screen.
   A card that moves underneath a mouse can trigger oscillating hover states. */
body.industry-page .care-node,
body.industry-page .retail-node,
body.industry-page .factory-station,
body.industry-page .sector-node {
  transform: translate3d(0, 0, 0);
  transition: border-color .36s ease, box-shadow .36s ease,
              background-color .36s ease, color .36s ease;
  backface-visibility: hidden;
}
body.industry-page .care-node.active,
body.industry-page .retail-node.active,
body.industry-page .factory-station.active,
body.industry-page .sector-node.active {
  transform: translate3d(0, 0, 0);
}
body.industry-page .care-node:hover,
body.industry-page .retail-node:hover,
body.industry-page .factory-station:hover,
body.industry-page .sector-node:hover {
  transform: translate3d(0, 0, 0);
  border-color: rgba(92,225,230,.7);
}
body.industry-page .care-node:focus-visible,
body.industry-page .retail-node:focus-visible,
body.industry-page .factory-station:focus-visible,
body.industry-page .sector-node:focus-visible {
  outline: 2px solid #65e2eb;
  outline-offset: 3px;
}

/* Logistics highlight formerly moved each stop from 40% to 38%. */
body.logistics-industry-page .logistics-stage.active { top:40%; }
body.logistics-industry-page .logistics-stage {
  transition: border-color .35s ease, box-shadow .35s ease, background-color .35s ease;
}

/* A consistent slow ambient pace: no rapid spinning or blinking cards. */
body.healthcare-industry-page .healthcare-exchange-model .cr-2,
body.industry-page .sector-network-model .orbit-two,
body.retail-industry-page .retail-commerce-model .orbit-two {
  animation-duration: 70s;
  animation-timing-function: linear;
}
body.healthcare-industry-page .care-record {
  animation-duration: 12s;
  will-change: transform;
}
body.industry-page .sector-pulse { animation-duration: 12s; }
body.industry-page .sector-line { animation-duration: 9s; }
body.industry-page .factory-box,
body.industry-page .retail-packet { animation-duration: 9s; }

/* Flow cards retain their progress colors and illuminated states, without
   physically jumping when automatic playback advances a step. */
.industry-operating-flow-grid.flow-running .industry-operating-flow-step.flow-active,
.animated-operating-model-grid.flow-running .animated-operating-model-step.flow-active,
.industry-operating-flow-step:hover,
.animated-operating-model-step:hover {
  transform: none;
}
.industry-operating-flow-step,
.animated-operating-model-step {
  will-change: auto;
  transition: opacity .36s ease, border-color .36s ease,
              box-shadow .36s ease, background-color .36s ease;
}
.industry-operating-flow-step.flow-active .industry-flow-node,
.animated-operating-model-step.flow-active .operating-model-node {
  animation: none;
  transform: none;
}
.industry-operating-flow-step.flow-active .industry-flow-accent,
.animated-operating-model-step.flow-active .operating-model-accent,
.industry-flow-progress span,
.operating-model-progress span {
  animation-duration: 4.5s;
}
.industry-operating-flow-step.flow-active .industry-flow-signal::before,
.industry-operating-flow-step.flow-active .industry-flow-signal::after,
.animated-operating-model-step.flow-active .operating-model-signal::before,
.animated-operating-model-step.flow-active .operating-model-signal::after {
  animation-duration: 3s;
}

/* Modal/flip reveals stay polished, but open without the heavy 3D wobble.
   Preserve the card/page content and all next/back/close interactions. */
.universal-book-overlay .universal-book-dialog {
  backface-visibility: hidden;
  transform-style: flat;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
  transform: translate3d(0, 10px, 0) scale(.99);
}
.universal-book-overlay.open .universal-book-dialog {
  transform: translate3d(0, 0, 0) scale(1);
}
body .universal-book-grid .universal-flip-card.page-flip-in:hover {
  transform: translate3d(0, 0, 0) scale(1);
}
.universal-book-overlay .universal-book-page.turn-next,
.universal-book-overlay .universal-book-page.turn-prev {
  animation-duration: .38s;
}

@media (prefers-reduced-motion: reduce) {
  body.industry-page .care-record,
  body.industry-page .care-ring,
  body.industry-page .sector-pulse,
  body.industry-page .sector-orbit,
  body.industry-page .sector-line,
  body.industry-page .factory-box,
  body.industry-page .retail-packet,
  .industry-operating-flow-grid *,
  .animated-operating-model-grid *,
  .universal-book-overlay .universal-book-dialog,
  .universal-book-overlay .universal-book-page {
    animation: none !important;
    transition: none !important;
  }
}


/* About page journey graph: keep milestone motion calm and cards readable.
   Upper milestones open downward so the 2026 card is not clipped. */
body.about-page .journey-graph-shell {
  isolation: isolate;
}
body.about-page .journey-milestone {
  transition: opacity .42s ease, transform .42s cubic-bezier(.2,.8,.2,1), filter .32s ease;
  will-change: opacity, transform;
}
body.about-page .journey-point-card {
  width: clamp(140px, 13vw, 176px);
  padding: 10px 12px;
  border: 1px solid rgba(214,229,241,.45);
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(6,27,51,.06);
  transition: border-color .28s ease, box-shadow .28s ease,
              background-color .28s ease, transform .28s ease;
}
body.about-page .journey-point-card:hover,
body.about-page .journey-milestone.is-active .journey-point-card {
  border-color: #cfe0ec;
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 30px rgba(6,27,51,.10);
}
body.about-page .journey-point-card small {
  transition: max-height .28s ease, margin-top .28s ease, opacity .28s ease, transform .28s ease;
}
body.about-page .milestone-2024 .journey-point-card,
body.about-page .milestone-2025 .journey-point-card,
body.about-page .milestone-2026 .journey-point-card {
  top: 22px;
  bottom: auto;
}
body.about-page .milestone-2026 .journey-point-card {
  left: auto;
  right: 4px;
  transform: none;
  width: clamp(156px, 15vw, 186px);
  text-align: left;
}
body.about-page .milestone-2026 .journey-point-card strong,
body.about-page .milestone-2026 .journey-point-card > span,
body.about-page .milestone-2026 .journey-point-card small {
  text-align: left;
}
body.about-page .journey-milestone.is-active {
  filter: none;
}
body.about-page .journey-milestone.is-active .journey-point {
  box-shadow: 0 0 0 6px rgba(23,100,216,.12), 0 10px 22px rgba(23,100,216,.18);
}
body.about-page .milestone-2026.is-active .journey-point {
  box-shadow: 0 0 0 6px rgba(212,167,44,.14), 0 10px 24px rgba(212,167,44,.24);
}
@media (max-width: 980px) {
  body.about-page .journey-point-card {
    width: 150px;
  }
  body.about-page .milestone-2026 .journey-point-card {
    right: -6px;
    width: 170px;
  }
}
@media (max-width: 640px) {
  body.about-page .journey-point-card {
    width: 132px;
    padding: 9px 10px;
  }
  body.about-page .milestone-2024 .journey-point-card,
  body.about-page .milestone-2025 .journey-point-card,
  body.about-page .milestone-2026 .journey-point-card {
    top: 18px;
  }
  body.about-page .milestone-2026 .journey-point-card {
    right: -4px;
    width: 148px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.about-page .journey-point-card,
  body.about-page .journey-milestone,
  body.about-page .journey-point,
  body.about-page .journey-traveler {
    transition: none !important;
  }
}


/* Additional anti-jitter overrides for automated Services, Products and
   Resources diagrams: highlights change color and glow, not element geometry. */
.api-system-node,
.es-module,
.core-node,
.resource-page .case-node,
.resource-page .radar-dot {
  transition-property: border-color, box-shadow, background-color, color, opacity;
  transition-duration: .38s;
}
.api-system-node {
  animation: none !important;
}
.api-system-node:hover,
.api-system-node.api-node-active,
.es-module:hover,
.es-module.active,
.core-node:hover,
.core-node.active {
  transform: none;
}
.core-node.core-node-identity,
.core-node.core-node-identity:hover,
.core-node.core-node-identity.active {
  transform: translateX(-50%);
}
body.about-page .journey-milestone.gesture-selected {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .api-system-node,
  .es-module,
  .core-node,
  .resource-page .case-node,
  .resource-page .radar-dot {
    animation: none !important;
    transition: none !important;
  }
}