/* Motion is decorative. The authored labels, arrows, quantities and print view stay complete. */
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; flex-shrink: 0; border: 1px solid #b5c6c5; border-radius: 4px; padding: .4rem .7rem; background: #fcfcfa; color: #152e40; font: inherit; font-size: .8rem; cursor: pointer; white-space: nowrap; }
.motion-toggle[hidden], .diagram-tour[hidden], .motion-caption[hidden] { display: none !important; }
.motion-toggle:hover { background: #e3efea; }
.motion-toggle:focus-visible, .diagram-tour button:focus-visible { outline: 3px solid #ba7128; outline-offset: 3px; }
.motion-toggle:disabled { opacity: .65; cursor: default; }
.motion-dot { width: .45rem; height: .45rem; border-radius: 50%; border: 1px solid #6f8885; background: transparent; }
.motion-toggle[aria-pressed='true'] .motion-dot { background: #096d69; border-color: #096d69; box-shadow: 0 0 0 3px #d3e9e0; }
.main-header .motion-toggle { margin: 0 1rem; align-self: center; }
.diagram-tour { display: flex; align-items: center; gap: 1rem; padding: .55rem .7rem; margin: 0 0 .5rem; border: 1px solid #c8dcd3; border-radius: 5px; background: linear-gradient(110deg,#e6f2eb,#f9f8f2); }
.tour-actions { display: flex; flex-shrink: 0; gap: .4rem; }
.diagram-tour button { font: inherit; font-size: .8rem; cursor: pointer; color: #096d69; background: #fff; border: 1px solid #b5c6c5; border-radius: 4px; padding: .35rem .6rem; white-space: nowrap; }
.diagram-tour [data-tour-play] { background: #096d69; color: #fff; border-color: #096d69; min-width: 6.3rem; }
.diagram-tour button:disabled { opacity: .5; cursor: default; }
.diagram-tour .tour-status, .slide .diagram-tour .tour-status { margin: 0; font-size: .8rem; line-height: 1.3; }
.tour-status strong { display: block; color: #152e40; }
.tour-copy { min-width: 0; }
.diagram-tour .flow-legend, .slide .diagram-tour .flow-legend { margin: .3rem 0 0; font-size: .75rem; line-height: 1.3; color: #4a626b; }
.research-figure { --flow-active: #9b651e; }
.research-diagram .flow-effect { opacity: 0; pointer-events: none; }
.research-diagram .flow-trail { fill: none; stroke: #70cabc; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 12 100; }
.research-diagram .packet-halo { fill: #e9b65f; opacity: .2; }
.research-diagram .packet-core { fill: #d49b36; stroke: #fffdf2; stroke-width: 1.5; }
.motion-inview .flow-effect { opacity: 1; }
/* Context paths stay fully legible; only the explicitly selected paths move. */
.research-figure[data-flow-mode='tour'] .flow-effect:not(.route-focus),
.research-figure[data-flow-mode='narration'] .flow-effect:not(.route-focus),
.research-figure[data-flow-mode='inspect'] .flow-effect:not(.route-focus) { display: none; }
.research-figure[data-flow-mode='narration'] .flow-effect.route-focus { opacity: 1; }
/* Current state survives pause and reduced motion; do not rely on a glow or
   color alone. These selectors cover light, dark, banking and sequence nodes. */
.research-figure .research-diagram [data-flow-node].state-current > rect {
  fill: #fff0c9; stroke: #986018; stroke-width: 4; stroke-dasharray: none;
}
.research-figure .research-diagram [data-flow-node].state-current > text { fill: #152e40; }
.research-figure .diagram-overview [data-flow-node].state-current {
  background: #fff0c9; border: 2px solid #986018; border-left-width: 6px;
}
.research-figure .diagram-overview [data-flow-node].state-current strong::before { content: '▸ '; }
.research-figure .research-diagram .edge.route-focus { stroke: var(--flow-active); stroke-width: 3; }
.research-figure .research-diagram .flow-focus-arrow path { stroke: var(--flow-active); }
.motion-inview .flow-effect.route-focus .packet-core { filter: drop-shadow(0 0 3px #d2a252); }
.motion-inview [data-architecture-node][aria-pressed='true'] .node { filter: drop-shadow(0 2px 6px #d6b36880); }
.motion-inview .bar-teal, .motion-inview .bar-navy { transform-box: fill-box; transform-origin: left center; animation: bar-arrival .8s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms) both; }
.motion-inview .industry-bar > div > i { transform-origin: left center; animation: bar-arrival .8s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms) both; }
.motion-inview.illustrated-cover .cover-visual, .motion-inview.home-hero .industry-cover { animation: illustration-arrival 1.2s ease-out both, illustration-float 14s ease-in-out 1.2s infinite alternate; transform-origin: center; }
.motion-inview.illustrated-cover h2, .motion-inview.home-hero h1 { animation: title-arrival .75s cubic-bezier(.2,.8,.2,1) both; }
.motion-inview.illustrated-cover .cover-tag { animation: title-arrival .8s .12s both; }
@keyframes bar-arrival { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
@keyframes title-arrival { from { opacity: .35; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes illustration-arrival { from { opacity: .45; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes illustration-float { from { transform: translateY(0) scale(1); } to { transform: translateY(-4px) scale(1.018); } }
html[data-motion='off'] .flow-effect { display: none; }
html[data-motion='off'] .motion-inview * { animation: none !important; }
@media (max-width: 700px) {
  .diagram-tour { flex-direction: column; align-items: start; gap: .5rem; }
  .deck-header { padding-inline: .75rem; gap: .5rem; }
  .deck-tools { gap: .3rem; }
  .deck-tools button { padding-inline: .5rem; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-effect { display: none !important; }
  .motion-inview, .motion-inview * { animation: none !important; }
}
@media print {
  .motion-toggle, .diagram-tour, .flow-effect, .motion-caption { display: none !important; }
  .motion-inview, .motion-inview * { animation: none !important; transform: none !important; filter: none !important; }
}
.slide .diagram-tour .tour-status { font-size: clamp(.8rem,1.1cqw,1.05rem); }
.slide .diagram-tour button { font-size: clamp(.75rem,1.05cqw,1rem); }
.mobile-motion-control { display: none; }
.deck-header { position: sticky; top: 0; z-index: 10; }
@media (max-width: 49.99rem) {
  .mobile-motion-control { display: block; position: fixed; right: 1rem; bottom: 1rem; z-index: 30; }
  .mobile-motion-control .motion-toggle { box-shadow: 0 3px 16px #152e4026; }
}
@media print { .mobile-motion-control { display: none; } }
.slide { scroll-margin-top: 4.5rem; }

/* An overview expresses structure, not simultaneous execution. */
.research-figure[data-flow-mode="overview"] .flow-effect { display: none; }