[data-animate] .art-loop {
  animation-play-state: paused;
}

.motion-ready [data-animate].is-inview .art-loop {
  animation-play-state: running;
}

html.is-tab-hidden [data-animate] .art-loop,
html.is-tab-hidden [data-animate].is-inview::after {
  animation-play-state: paused !important;
}

/* ---------- Home hero: slow aurora drift ---------- */

.hero::after {
  content: "";
  position: absolute;
  inset: -25% -15%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(26% 30% at 72% 26%, rgba(95, 227, 232, 0.16), transparent 70%),
    radial-gradient(24% 30% at 22% 70%, rgba(76, 143, 224, 0.12), transparent 70%),
    radial-gradient(20% 22% at 50% 50%, rgba(220, 230, 236, 0.07), transparent 70%);
  animation: aurora 26s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.motion-ready .hero.is-inview::after {
  animation-play-state: running;
}

@keyframes aurora {
  0% { transform: translate3d(-4%, 3%, 0) rotate(-2deg); }
  50% { transform: translate3d(2%, -2%, 0) rotate(3deg); }
  100% { transform: translate3d(5%, 2%, 0) rotate(6deg); }
}

/* ---------- Network backdrop (replaces the square grid on dark stages) ---------- */

.network-bg {
  --net-mask: radial-gradient(ellipse 70% 80% at 50% 0%, #000 20%, transparent 78%);
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: var(--net-mask);
  mask-image: var(--net-mask);
}

/* Keep the network out from behind the hero illustrations so the two never compete. */
.network-bg--hero {
  --net-mask: radial-gradient(30rem 25rem at 76% 25rem, transparent 35%, #000 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 42%, #000 85%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.network-bg--page {
  --net-mask: radial-gradient(28rem 22rem at 76% 21rem, transparent 30%, #000 100%), linear-gradient(100deg, rgba(0, 0, 0, 0.35) 10%, #000 55%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.network-bg--hero .nb-layer--front,
.network-bg--page .nb-layer--front {
  opacity: 0.75;
}

.network-bg--hero .nb-packet--offense {
  stroke: var(--defense-300);
}

@media (max-width: 56rem) {
  .network-bg--hero,
  .network-bg--page {
    --net-mask: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 55%);
  }
}
.network-bg--cta { --net-mask: radial-gradient(ellipse 75% 110% at 85% 30%, #000 20%, transparent 80%); }
.network-bg--band { --net-mask: linear-gradient(100deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.85) 70%); }

.nb-layer {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
}

.nb-layer--front {
  animation: nb-drift 46s ease-in-out infinite alternate;
}

.nb-layer--back {
  opacity: 0.55;
  animation: nb-drift-back 64s ease-in-out infinite alternate;
}

@keyframes nb-drift {
  0% { transform: translate3d(-0.8%, 0.6%, 0); }
  100% { transform: translate3d(0.8%, -0.6%, 0); }
}

@keyframes nb-drift-back {
  0% { transform: translate3d(0.9%, -0.4%, 0) scale(1.02); }
  100% { transform: translate3d(-0.9%, 0.5%, 0) scale(1.02); }
}

.nb-flash {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-opacity: 0;
  animation: nb-flash 11s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.9s);
}

@keyframes nb-flash {
  0%, 82%, 100% { stroke-opacity: 0; }
  88% { stroke-opacity: 0.75; }
  94% { stroke-opacity: 0.1; }
}

/* Depth of field: the distant mesh is softer than the near one. */
.nb-layer--back {
  filter: blur(0.7px);
}

.nb-hub-core {
  fill: #c8f6f8;
}

.nb-hub--offense .nb-hub-core {
  fill: #ffe0a8;
}

.nb-halo {
  fill: none;
  stroke: var(--defense-300);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: nb-breathe 6.5s var(--ease-out) infinite;
  animation-delay: calc(var(--i, 0) * -1.3s);
}

@keyframes nb-breathe {
  0% { opacity: 0.5; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.2); }
}

.nb-hub--offense .nb-halo {
  stroke: var(--offense-300);
}

.nb-packet-glow,
.nb-packet-core {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dashoffset: 100;
  animation: art-trace var(--dur, 9s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.nb-packet-core {
  stroke-width: 1.8;
  stroke-dasharray: 2.2 97.8;
}

.nb-packet-glow {
  stroke-width: 7;
  stroke-dasharray: 3.2 96.8;
  opacity: 0.16;
}

.nb-packet--defense { stroke: var(--defense-300); }
.nb-packet--offense { stroke: var(--offense-300); }

.motion-ready [data-animate].network-bg.is-inview .nb-layer {
  animation-play-state: running;
}

@media (max-width: 40rem) {
  .nb-layer--back {
    display: none;
  }
}

/* Isometric figures use the existing viewport/tab/motion gate. */
@keyframes art-pulse {
  0% { opacity: .65; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.6); }
}
@keyframes art-trace { to { stroke-dashoffset: 0; } }
.iso-scene { position: relative; width: 100%; max-width: 40rem; justify-self: center; }
.iso-scene svg { width: 100%; height: auto; }
.iso-scene, .diagram-animation { animation-play-state: paused; }
.iso-scene *, .diagram-animation * { animation-play-state: inherit !important; }
.motion-ready .iso-scene.is-inview, .motion-ready .diagram-animation.is-inview { animation-play-state: running; }
html.is-tab-hidden .iso-scene, html.is-tab-hidden .diagram-animation { animation-play-state: paused !important; }

/* ---------- Page-specific isometric scenes ---------- */

.isox-solid path { stroke: rgba(192, 219, 239, .28); stroke-width: 1; stroke-linejoin: round; }
.isox-top { fill: url(#isox-top); stroke: rgba(192, 219, 239, .35); stroke-width: 1; }
.isox-side-front { fill: url(#isox-front); }
.isox-side-right { fill: #142437; }
.isox-pad > .isox-top { stroke: rgba(192, 219, 239, .48); }
.isox-secure > .isox-top { fill: #214551; stroke: var(--defense-300); }
.isox-warning > .isox-top { fill: #494537; stroke: var(--offense-300); }
.isox-table > .isox-top { fill: #2b4152; }
.isox-wire, .isox-slot, .isox-grid, .isox-document-line, .isox-boundary, .isox-db-ring { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.isox-grid { stroke: rgba(170, 205, 228, .09); stroke-width: 1; stroke-dasharray: 2 7; }
.isox-wire { stroke: var(--accent); stroke-opacity: .38; stroke-width: 1.6; }
.isox-flow { stroke-opacity: 1; stroke-width: 3; stroke-dasharray: 5 95; animation: isox-transit 8s linear infinite; }
.isox-flow:nth-of-type(even) { animation-delay: -3s; }
.isox-amber { stroke: var(--offense-300); color: var(--offense-300); }
.isox-slot { stroke: #819fb5; stroke-width: 2; }
.isox-light { fill: var(--accent); }
.isox-glyph { fill: none; stroke: var(--accent); stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.isox-glyph.isox-amber { stroke: var(--offense-300); }
.isox-screen-bg { fill: #0e1d2c; stroke: #738da2; stroke-width: .7; }
.isox-screen-wire { fill: none; stroke: #85a9c1; stroke-width: 1.4; stroke-linecap: round; }
.isox-code-bracket { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.isox-ui-tile { fill: #274e5c; stroke: var(--accent); stroke-width: .7; }
.isox-check { fill: none; stroke: var(--defense-300); stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; }
.isox-db-body { fill: #1c3548; stroke: #7d9eb5; }
.isox-db-ring { stroke: #5a829b; stroke-width: 1.2; }
.isox-document > .isox-top { fill: #385469; }
.isox-document-line { stroke: #a4bccd; stroke-width: 1.8; }
.isox-glass { fill: rgba(95, 227, 232, .09); stroke: rgba(95, 227, 232, .25); stroke-width: 1; }
.isox-boundary { stroke: var(--defense-300); stroke-width: 1.7; }
@keyframes isox-transit { to { stroke-dashoffset: -100; } }

/* ---------- Security graph: core pulse and border beam ---------- */

.security-graph::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--beam-angle), transparent 0 64%, rgba(255, 181, 71, 0.85) 74%, rgba(95, 227, 232, 0.9) 84%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: beam-rotate 9s linear infinite;
  animation-play-state: paused;
}

.security-graph.is-playing::before {
  animation-play-state: running;
}

@keyframes beam-rotate {
  to { --beam-angle: 360deg; }
}

.security-graph__pulse {
  fill: none;
  stroke: url(#security-core-stroke);
  stroke-width: 1.25;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: art-pulse 4.4s var(--ease-out) infinite;
  animation-play-state: paused;
}

.security-graph__pulse--late {
  animation-delay: 2.2s;
}

.security-graph.is-playing .security-graph__pulse {
  animation-play-state: running;
}

html.is-tab-hidden .security-graph::before,
html.is-tab-hidden .security-graph__pulse {
  animation-play-state: paused !important;
}

/* ---------- Outcomes timeline (dark stage) ---------- */

.motion-ready .outcomes__steps[data-animate]::before {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.6s var(--ease-out) 0.2s;
}

.motion-ready .outcomes__steps[data-animate].has-entered::before {
  transform: scaleY(1);
}

.outcomes__steps::after {
  content: "";
  position: absolute;
  top: 2rem;
  left: calc(clamp(1.25rem, 2.5vw, 1.75rem) + 1.25rem - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 0 14px 2px rgba(220, 230, 236, 0.8);
  opacity: 0;
  animation: timeline-packet 5.5s var(--ease-standard) infinite;
  animation-play-state: paused;
}

.motion-ready .outcomes__steps.is-inview.has-entered::after {
  animation-play-state: running;
}

html.is-tab-hidden .outcomes__steps::after {
  animation-play-state: paused !important;
}

@keyframes timeline-packet {
  0% { top: 2rem; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: calc(100% - 2.4rem); opacity: 0; }
}

.motion-ready .outcomes__steps[data-animate] .outcomes__index {
  transition: box-shadow 600ms var(--ease-out), background-color 600ms var(--ease-out);
}

.motion-ready .outcomes__steps[data-animate].has-entered li:nth-child(1) .outcomes__index { transition-delay: 0.3s; }
.motion-ready .outcomes__steps[data-animate].has-entered li:nth-child(2) .outcomes__index { transition-delay: 0.9s; }
.motion-ready .outcomes__steps[data-animate].has-entered li:nth-child(3) .outcomes__index { transition-delay: 1.5s; }

.outcomes__steps.has-entered .outcomes__index,
html:not(.motion-ready) .outcomes__index {
  box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 16%, transparent);
}

.finding .finding__code .c-line {
  transition: background-color 600ms var(--ease-out) 900ms;
}

.motion-ready .finding[data-animate]:not(.has-entered) .c-line {
  background: transparent;
}

/* ---------- Process band: light travels across the steps ---------- */

.process-list {
  position: relative;
}

.process-list::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-line-strong) 15%, var(--ink-line-strong) 85%, transparent);
}

.process-list::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 18%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  animation: process-scan 7s var(--ease-standard) infinite;
  animation-play-state: paused;
}

.motion-ready .process-list.is-inview::after {
  animation-play-state: running;
}

html.is-tab-hidden .process-list::after {
  animation-play-state: paused !important;
}

@keyframes process-scan {
  0% { left: -18%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ---------- Journey: the step rail draws as you arrive ---------- */

.motion-ready .journey-list[data-animate] .step-index {
  transform: scale(0.6);
  opacity: 0.2;
  transition: transform 600ms var(--ease-out), opacity 600ms var(--ease-out);
}

.motion-ready .journey-list[data-animate].has-entered .step-index {
  transform: none;
  opacity: 1;
}

.motion-ready .journey-list[data-animate].has-entered li:nth-child(2) .step-index { transition-delay: 0.12s; }
.motion-ready .journey-list[data-animate].has-entered li:nth-child(3) .step-index { transition-delay: 0.24s; }
.motion-ready .journey-list[data-animate].has-entered li:nth-child(4) .step-index { transition-delay: 0.36s; }
.motion-ready .journey-list[data-animate].has-entered li:nth-child(5) .step-index { transition-delay: 0.48s; }
.motion-ready .journey-list[data-animate].has-entered li:nth-child(6) .step-index { transition-delay: 0.6s; }

/* ---------- Reduced motion: final static state, no loops ---------- */

@media (prefers-reduced-motion: reduce) {
  .nb-flash {
    display: none;
  }

  .art-loop,
  .hero::after,
  .security-graph::before,
  .security-graph__pulse,
  .outcomes__steps::after,
  .process-list::after,
  .nb-layer,
  .iso-scene * {
    animation: none !important;
  }

  .nb-packet-glow,
  .nb-packet-core {
    opacity: 0 !important;
  }

  .outcomes__steps::before,
  .journey-list .step-index {
    transform: none !important;
    opacity: 1 !important;
  }
}