/* Isolated cinematic v2. The surrounding commercial page and calculator remain unchanged. */
.cinematic-stage {
  contain: layout paint;
  height: clamp(36rem, 57vw, 47rem);
  min-height: 36rem;
  background:
    radial-gradient(circle at 50% 48%, rgb(29 88 130 / 17%), transparent 40%),
    linear-gradient(155deg, #06131f 0%, #091b29 52%, #050f19 100%);
}

.stage-grid {
  z-index: 0;
  background-size: 3.25rem 3.25rem;
  opacity: 0.72;
}

.stage-vignette {
  z-index: 20;
  box-shadow: inset 0 0 9rem rgb(0 4 9 / 76%);
}

.stream-origin-label {
  position: absolute;
  z-index: 3;
  top: 1rem;
  left: 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #7593a9;
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0;
}

.stream-origin-label i {
  width: 0.38rem;
  height: 0.38rem;
  border: 1px solid #69bdeb;
  border-radius: 50%;
  background: #245b7c;
}

.telemetry-stream {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.stream-fragment {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  max-width: calc(100% - 2rem);
  align-items: center;
  gap: 0.42rem;
  padding: 0.25rem 0.42rem;
  border: 1px solid rgb(131 176 207 / 11%);
  border-radius: 0.2rem;
  background: rgb(6 23 36 / 70%);
  color: #a9bdcb;
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(0.54rem, 0.78vw, 0.68rem);
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  letter-spacing: 0.015em;
  line-height: 1.15;
  opacity: 0;
  white-space: nowrap;
  will-change: transform, opacity;
}

.stream-fragment i {
  width: 0.34rem;
  height: 0.34rem;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 28%, transparent);
}

.stream-fragment[data-tone="endpoint"] { color: #8bbbd7; }
.stream-fragment[data-tone="soc"] { color: #82c5b0; }
.stream-fragment[data-tone="threat"] { color: #a7afe5; }
.stream-fragment[data-tone="power"] { color: #bba6cd; }
.stream-fragment[data-tone="warning"] { color: #d0ad70; border-color: rgb(208 173 112 / 19%); }
.stream-fragment[data-tone="cost"] {
  z-index: 4;
  border-color: rgb(116 190 231 / 26%);
  background: rgb(10 39 59 / 88%);
  color: #e6f4fc;
  font-weight: 760;
}

.stream-fragment[data-depth="0"] { z-index: 1; }
.stream-fragment[data-depth="1"] { z-index: 2; }
.stream-fragment[data-depth="2"] { z-index: 3; }
.stream-fragment[data-depth="3"] { z-index: 4; }
.stream-fragment[data-depth="4"] { z-index: 5; }

.chaos-cost-field {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.chaos-cost-field strong {
  position: absolute;
  color: #eff8fe;
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(1.25rem, 2.6vw, 2.25rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  opacity: 0;
  text-shadow: 0 0 1.5rem rgb(86 178 227 / 18%);
  will-change: transform, opacity;
}

.chaos-cost-field strong:nth-child(1) { top: 19%; left: 12%; }
.chaos-cost-field strong:nth-child(2) { top: 34%; right: 13%; }
.chaos-cost-field strong:nth-child(3) { right: 27%; bottom: 24%; }
.chaos-cost-field strong:nth-child(4) { bottom: 17%; left: 21%; }

.chaos-total {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: 50%;
  display: grid;
  min-width: min(30rem, 82vw);
  place-items: center;
  padding: 1rem 1.4rem;
  border-block: 1px solid rgb(111 191 235 / 36%);
  background: rgb(4 18 29 / 78%);
  opacity: 0;
  text-align: center;
  will-change: transform, opacity, clip-path;
}

.chaos-total small {
  color: #91aabd;
  font-size: 0.6rem;
  font-weight: 760;
  letter-spacing: 0.14em;
}

.chaos-total strong {
  margin-top: 0.24rem;
  color: #fff;
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(2rem, 5vw, 4.2rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.075em;
  line-height: 1;
}

.chaos-total strong span {
  color: #9fc5dc;
  font-size: 0.36em;
  letter-spacing: 0.03em;
}

.is-running .argus-wall,
.is-running .impact-shadow,
.is-running .impact-particles,
.is-running .impact-particles i,
.is-running .argus-word > span,
.is-running .wall-reveal > p,
.is-running .wall-scope,
.is-running .wall-reveal > strong,
.is-running .wall-reveal > small,
.is-running .wall-capability-strip {
  animation: none;
}

.argus-wall {
  z-index: 10;
  top: 7%;
  right: 6.5%;
  bottom: 6%;
  left: 6.5%;
  border: 1px solid #315d7a;
  border-radius: 0.18rem;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 2.5%), transparent 14%, transparent 86%, rgb(255 255 255 / 2%)),
    linear-gradient(160deg, #173b54 0%, #0c283c 44%, #071a29 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 12%),
    inset 0 -1.2rem 2.5rem rgb(0 7 13 / 36%),
    0 1.4rem 2.4rem rgb(0 4 8 / 70%);
  opacity: 0;
  transform: translate3d(0, -132%, 0);
  will-change: transform, opacity;
}

.argus-wall::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 6.5rem, rgb(144 187 215 / 5%) 6.5rem calc(6.5rem + 1px)),
    linear-gradient(90deg, transparent 49.92%, rgb(127 176 208 / 9%) 50%, transparent 50.08%);
}

.wall-metal-grain {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    repeating-linear-gradient(92deg, rgb(255 255 255 / 1.2%) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 50% 0, rgb(117 187 226 / 9%), transparent 44%);
  opacity: 0.36;
}

.wall-edge {
  height: 0.4rem;
  background: linear-gradient(90deg, #244f6c, #8ab5cd 48%, #315f7c);
}

.wall-reveal {
  inset: 7% 6% 19%;
}

.argus-word {
  position: relative;
  gap: clamp(0.25rem, 1.55vw, 1rem);
  color: transparent;
  font-size: clamp(3.2rem, 8.8vw, 7.4rem);
  font-weight: 780;
  letter-spacing: 0.055em;
  line-height: 0.82;
}

.argus-word > span {
  background: linear-gradient(165deg, #fff 4%, #c4d3dd 44%, #f5fbff 58%, #879eae 100%);
  background-clip: text;
  color: transparent;
  opacity: 0;
  text-shadow: none;
  transform: translate3d(0, 7px, 0) scaleX(1.12);
  will-change: transform, opacity, clip-path;
}

.wordmark-shine {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(104deg, transparent 37%, rgb(255 255 255 / 90%) 48%, rgb(154 216 249 / 82%) 52%, transparent 63%);
  background-clip: text;
  background-position: 160% 0;
  background-size: 260% 100%;
  color: transparent;
  font: inherit;
  letter-spacing: inherit;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, background-position;
}

.wall-reveal > p,
.wall-scope,
.wall-reveal > strong,
.wall-reveal > small,
.wall-capability-strip {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  will-change: transform, opacity;
}

.wall-reveal > p {
  margin-top: 1.35rem;
}

.wall-scope {
  max-width: 58rem;
  margin-top: 0.85rem;
}

.wall-reveal > strong {
  margin-top: 1.25rem;
}

.impact-shadow {
  z-index: 9;
  right: 11%;
  bottom: 3.5%;
  left: 11%;
  height: 2.4rem;
  background: radial-gradient(ellipse at center, rgb(0 0 0 / 78%), rgb(0 0 0 / 18%) 55%, transparent 74%);
  filter: none;
  opacity: 0;
  transform: scaleX(0.28);
  will-change: transform, opacity;
}

.impact-particles {
  z-index: 12;
  right: 7%;
  bottom: 5%;
  left: 7%;
  opacity: 1;
}

.impact-particles i {
  opacity: 0;
  will-change: transform, opacity;
}

.is-complete .telemetry-stream,
.is-complete .chaos-cost-field,
.is-complete .chaos-total,
.is-complete .stream-origin-label {
  visibility: hidden;
}

.is-complete .argus-wall {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.is-complete .argus-word > span,
.is-complete .wall-reveal > p,
.is-complete .wall-scope,
.is-complete .wall-reveal > strong,
.is-complete .wall-reveal > small,
.is-complete .wall-capability-strip,
.is-reduced .argus-word > span,
.is-reduced .wall-reveal > p,
.is-reduced .wall-scope,
.is-reduced .wall-reveal > strong,
.is-reduced .wall-reveal > small,
.is-reduced .wall-capability-strip {
  clip-path: none;
  filter: none;
  opacity: 1;
  transform: translate3d(0, 0, 0) scaleX(1);
}

.is-running .story-progress li:nth-child(1)::after { animation: cinematic-progress 3100ms linear 400ms forwards; }
.is-running .story-progress li:nth-child(2)::after { animation: cinematic-progress 1350ms linear 3350ms forwards; }
.is-running .story-progress li:nth-child(3)::after { animation: cinematic-progress 1000ms linear 4650ms forwards; }
.is-running .story-progress li:nth-child(4)::after { animation: cinematic-progress 5200ms linear 5750ms forwards; }

@keyframes cinematic-progress {
  to { width: 100%; }
}

@media (max-width: 58rem) {
  .argus-wall {
    right: 4%;
    left: 4%;
  }
}

@media (max-width: 44rem) {
  .cinematic-stage {
    height: 39rem;
    min-height: 39rem;
  }

  .stream-origin-label {
    top: 0.72rem;
    left: 0.7rem;
    max-width: calc(100% - 1.4rem);
    font-size: 0.45rem;
  }

  .stream-fragment {
    max-width: calc(100% - 1.25rem);
    padding: 0.2rem 0.28rem;
    font-size: 0.49rem;
    letter-spacing: -0.012em;
  }

  .stream-fragment:nth-child(n + 27) {
    display: none;
  }

  .chaos-cost-field strong {
    font-size: clamp(1rem, 6vw, 1.45rem);
  }

  .chaos-cost-field strong:nth-child(1) { top: 18%; left: 5%; }
  .chaos-cost-field strong:nth-child(2) { top: 34%; right: 5%; }
  .chaos-cost-field strong:nth-child(3) { right: 7%; bottom: 26%; }
  .chaos-cost-field strong:nth-child(4) { bottom: 17%; left: 8%; }

  .chaos-total {
    min-width: 84%;
    padding: 0.8rem;
  }

  .argus-wall {
    top: 5%;
    right: 2.5%;
    bottom: 5%;
    left: 2.5%;
  }

  .wall-reveal {
    inset: 6% 4% 25%;
  }

  .argus-word {
    gap: 0.17rem;
    font-size: clamp(2.7rem, 16vw, 4.15rem);
    letter-spacing: 0.035em;
  }

  .wall-reveal > p {
    margin-top: 0.95rem;
  }

  .wall-scope {
    max-width: 20rem;
    margin-top: 0.65rem;
    font-size: 0.52rem;
  }

  .wall-reveal > strong {
    margin-top: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-reduced [data-commercial-action="pause"],
  .is-reduced [data-commercial-action="skip"] {
    display: none;
  }

  .is-reduced .stream-fragment:nth-child(n + 9) {
    display: none;
  }

  .is-reduced .argus-wall {
    transform: translate3d(0, 0, 0);
  }
}