:root {
  color-scheme: dark;
  --phone-black: #060708;
  --phone-edge: #2c3137;
  --phone-highlight: #8c949e;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(24, 94, 99, 0.34), transparent 35rem),
    radial-gradient(circle at 50% 80%, rgba(8, 204, 172, 0.12), transparent 42rem),
    #030506;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mockup-stage {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 72px) 24px;
}

.mockup-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 72px);
  width: min(100%, 850px);
}

.phone {
  position: relative;
  width: min(430px, calc(100vw - 48px), calc((100svh - 64px) * 0.485));
  padding: 11px;
  border: 1px solid #646c73;
  border-radius: clamp(40px, 10vw, 58px);
  background:
    linear-gradient(110deg, transparent 10%, rgba(255, 255, 255, 0.26) 18%, transparent 27%) border-box,
    linear-gradient(150deg, #171a1e, #030405 32%, #262b30 58%, #020303 84%);
  box-shadow:
    0 46px 90px rgba(0, 0, 0, 0.72),
    0 8px 25px rgba(0, 0, 0, 0.82),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 10px rgba(255, 255, 255, 0.08);
  isolation: isolate;
}

.phone::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: inherit;
  pointer-events: none;
}

.phone__rim {
  overflow: hidden;
  border: 3px solid #050607;
  border-radius: clamp(32px, 8vw, 48px);
  background: #000;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.96);
}

.phone__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 393 / 852;
  overflow: hidden;
  border-radius: clamp(29px, 7.4vw, 44px);
  background: #072b2b;
}

.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #072b2b;
  container-type: size;
  user-select: none;
}

.scene-world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 0;
}

.layer {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  transform-origin: center;
  backface-visibility: hidden;
}

.layer--background { z-index: 0; }
.layer--firewall { z-index: 10; }
.layer--firewall-health { z-index: 12; }
.layer--health-empty { z-index: 13; }
.layer--health-fill { z-index: 14; }
.layer--damage-clean { z-index: 18; }
.layer--spike { z-index: 20; }
.layer--crew { z-index: 30; }
.layer--side-control { z-index: 40; }
.layer--played-card,
.layer--hand-card { z-index: 50; }
.layer--bottom-bar { z-index: 5; }
.layer--bottom-control { z-index: 70; }

.layer--firewall-disc {
  clip-path: inset(0 0 34.615% 0);
}

.layer--firewall-damage-panel {
  clip-path: inset(87.308% 0 0 0);
}

.layer--firewall-resource-rail {
  clip-path: inset(65.385% 0 27.692% 0);
}

.layer--firewall-health {
  clip-path: inset(72.308% 0 12.692% 0);
}

.hp-flash,
.energy-wave,
.camera-shell,
.camera-flash,
.camera-core,
.server-fx,
.failure-fx,
.failure-red-field,
.failure-wave,
.failure-detonation,
.failure-detonation__ring,
.failure-final-dim,
.failure-title,
.victory-dim,
.victory-particles,
.victory-arch-title,
.hack-detonation,
.hack-detonation__ring,
.uplink-wave,
.defence-popup-layer,
.defence-popup,
.defence-red-aura {
  position: absolute;
  pointer-events: none;
}

.hp-flash {
  left: 1.641%;
  top: 44.63%;
  z-index: 16;
  width: 94.911%;
  height: 8.333%;
}

.hp-flash__color {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.camera-shell {
  inset: 0 auto auto 0;
  z-index: 25;
  width: 100%;
  height: 61.03%;
  clip-path: circle(18.6% at 50% 6%);
  opacity: 0;
  transform-origin: 50% 6%;
}

.camera-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform-origin: 50% 6%;
}

.camera-flash {
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: #ff1638;
  mix-blend-mode: hard-light;
}

.camera-core {
  left: 50%;
  top: 6%;
  z-index: 2;
  width: 18px;
  aspect-ratio: 1;
  border: 3px solid #fff8a4;
  border-radius: 50%;
  background: #ffe600;
  box-shadow:
    0 0 5px #fff,
    0 0 13px #fff13b,
    0 0 30px #ff9d00,
    0 0 52px rgba(255, 35, 0, 0.92);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}

.energy-wave {
  inset: 0;
  z-index: 90;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
}

.energy-wave__ring {
  position: absolute;
  left: 50%;
  top: 48.7%;
  width: 0;
  height: 0;
  box-sizing: content-box;
  border: clamp(110px, 16svh, 170px) solid #ffe900;
  border-radius: 50%;
  background: transparent;
  filter:
    drop-shadow(0 0 4px #fff)
    drop-shadow(0 0 13px #fff200)
    drop-shadow(0 0 28px rgba(255, 142, 0, 0.95));
  transform: translate(-50%, -50%);
}

.particle-field {
  position: absolute;
  inset: 0;
  z-index: 95;
  overflow: hidden;
  pointer-events: none;
}

.fx-particle {
  position: absolute;
  display: block;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.breach-burst,
.wave-spark {
  left: 50%;
  top: 48.7%;
  background: var(--particle-color);
  box-shadow: 0 0 4px #fff, 0 0 10px var(--particle-color);
}

.camera-hit-spark,
.camera-idle-spark {
  left: 50%;
  top: 6%;
  background: var(--particle-color);
  box-shadow: 0 0 4px #fff, 0 0 9px var(--particle-color);
}

.card-energy-source {
  position: absolute;
  left: -18%;
  bottom: -6%;
  z-index: 45;
  width: 136%;
  height: 54%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(246, 255, 218, 1) 0 7%, rgba(83, 255, 133, 1) 19%, rgba(0, 255, 112, 0.7) 43%, transparent 72%),
    radial-gradient(ellipse at 50% 82%, rgba(0, 255, 125, 0.98), transparent 66%);
  filter: blur(5px) saturate(1.5);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.62, 0.48);
  transform-origin: 50% 82%;
  pointer-events: none;
}

.server-fx {
  inset: 0;
  z-index: 120;
  overflow: hidden;
}

.defence-popup-layer {
  inset: 0;
  z-index: 100;
  overflow: hidden;
}

.defence-popup {
  left: 50%;
  top: 6%;
  width: 88px;
  height: 68px;
  color: #ff304e;
  opacity: 0;
  filter: blur(4px);
  transform: translate(-50%, -50%) scale(0.14);
  transform-origin: 50% 50%;
}

.defence-red-aura {
  left: -18%;
  top: -11%;
  z-index: 26;
  width: 136%;
  height: 49%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 31%, rgba(255, 18, 43, 0.42), rgba(255, 0, 31, 0.2) 31%, rgba(125, 0, 18, 0.11) 55%, transparent 73%),
    radial-gradient(ellipse at 50% 28%, rgba(255, 44, 33, 0.2), transparent 66%);
  filter: blur(9px) saturate(1.25);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.9);
  transform-origin: 50% 28%;
}

.defence-popup::before,
.defence-popup::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 2px solid currentColor;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
}

.defence-popup::before {
  clip-path: inset(8% 0 57% 0);
}

.defence-popup::after {
  clip-path: inset(56% 0 9% 0);
}

.defence-popup__window {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 2px solid currentColor;
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(72, 4, 14, 0.98), rgba(21, 2, 7, 0.98));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.86),
    0 5px 13px rgba(0, 0, 0, 0.68),
    0 0 12px currentColor;
}

.defence-popup__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 16px;
  padding: 0 4px;
  background: currentColor;
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.38);
}

.defence-popup__titlebar strong,
.defence-popup__controls {
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 6px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.08em;
  text-shadow: 0 1px rgba(0, 0, 0, 0.65);
}

.defence-popup__controls {
  font-size: 7px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.defence-popup__body {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  height: 49px;
  background: #1d0408;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 42%, color-mix(in srgb, currentColor 27%, transparent), transparent 62%);
}

.defence-popup__body small {
  color: #ffe8e9;
  font: 900 5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
}

.defence-popup__shield {
  position: relative;
  display: block;
  width: 29px;
  height: 33px;
  background: currentColor;
  clip-path: polygon(50% 0, 92% 14%, 87% 63%, 71% 84%, 50% 100%, 29% 84%, 13% 63%, 8% 14%);
  filter: drop-shadow(0 0 5px currentColor);
}

.defence-popup__shield::after {
  content: "";
  position: absolute;
  inset: 6px 7px 8px;
  background: rgba(8, 4, 7, 0.72);
  clip-path: inherit;
}

.uplink-wave {
  left: -14%;
  bottom: -96px;
  z-index: 1;
  width: 128%;
  height: 96px;
  border-top: 34px solid #33ff7e;
  border-radius: 50%;
  opacity: 0;
  filter:
    drop-shadow(0 -3px 2px #eaffd8)
    drop-shadow(0 0 12px #36ff86)
    drop-shadow(0 0 34px rgba(0, 255, 112, 0.95));
  transform: translateY(0) scaleX(0.45);
  transform-origin: 50% 50%;
}

.uplink-wave::before,
.uplink-wave::after {
  content: "";
  position: absolute;
  left: 4%;
  top: -27px;
  width: 92%;
  height: 10px;
  border-radius: 50%;
  background: rgba(222, 255, 191, 0.94);
  box-shadow: 0 0 12px #fff, 0 0 28px #34ff8a;
}

.uplink-wave::after {
  left: 13%;
  top: -52px;
  width: 74%;
  height: 4px;
  opacity: 0.72;
}

.hack-detonation {
  inset: 0;
  z-index: 4;
  overflow: visible;
  opacity: 0;
}

.hack-detonation__ring {
  left: 50%;
  top: 14.2%;
  width: 0;
  height: 0;
  box-sizing: content-box;
  border: 142px solid #27ff7a;
  border-radius: 50%;
  background: transparent;
  filter:
    drop-shadow(0 0 5px #fff)
    drop-shadow(0 0 18px #7dff75)
    drop-shadow(0 0 48px rgba(0, 255, 115, 0.98));
  transform: translate(-50%, -50%);
}

.victory-dim {
  inset: 0;
  z-index: 5;
  background: #00170e;
  opacity: 0;
}

.victory-particles {
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
}

.victory-arch-title {
  left: 48.95%;
  top: 63.83%;
  z-index: 7;
  width: 45.8%;
  height: 7.04%;
  overflow: visible;
  color: #d8ffbf;
  transform: translate(-50%, -50%);
}

.victory-arch-title__text {
  fill: currentColor;
  stroke: #004a28;
  stroke-width: 1.2px;
  paint-order: stroke fill;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 0.55px;
  filter:
    drop-shadow(0 1px 0 #001f13)
    drop-shadow(0 0 3px #fff)
    drop-shadow(0 0 7px #4dff80)
    drop-shadow(0 0 13px #00df66);
}

.victory-arch-title__word {
  opacity: 0;
}

.failure-fx {
  inset: 0;
  z-index: 120;
  overflow: hidden;
}

.failure-red-field {
  inset: -8%;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 7%, rgba(255, 20, 35, 0.66), rgba(165, 0, 18, 0.3) 34%, transparent 68%),
    linear-gradient(rgba(148, 0, 17, 0.3), rgba(255, 0, 26, 0.22));
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.96);
}

.failure-wave {
  left: -18%;
  top: 0.5%;
  z-index: 2;
  width: 136%;
  height: 72px;
  box-sizing: content-box;
  border: 24px solid rgba(255, 18, 52, 0.96);
  border-radius: 50%;
  opacity: 0;
  filter:
    drop-shadow(0 3px 2px #fff1f2)
    drop-shadow(0 0 13px #ff3550)
    drop-shadow(0 0 38px rgba(255, 0, 30, 0.98));
  transform: translateY(-54px) scaleX(0.28) scaleY(0.62);
  transform-origin: 50% 50%;
}

.failure-wave::before,
.failure-wave::after {
  content: "";
  position: absolute;
  left: 5%;
  bottom: -17px;
  width: 90%;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 229, 232, 0.95);
  box-shadow: 0 0 11px #fff, 0 0 27px #ff173c;
}

.failure-wave::after {
  left: 14%;
  bottom: -43px;
  width: 72%;
  height: 4px;
  opacity: 0.72;
}

.failure-detonation {
  inset: 0;
  z-index: 3;
  overflow: visible;
  opacity: 0;
}

.failure-detonation__ring {
  left: 50%;
  top: 6%;
  width: 0;
  height: 0;
  box-sizing: content-box;
  border: 150px solid #ff1537;
  border-radius: 50%;
  background: transparent;
  filter:
    drop-shadow(0 0 6px #fff)
    drop-shadow(0 0 22px #ff314a)
    drop-shadow(0 0 62px rgba(255, 0, 30, 1));
  transform: translate(-50%, -50%);
}

.failure-final-dim {
  inset: 0;
  z-index: 4;
  background:
    radial-gradient(circle at 50% 6%, transparent 0 10%, rgba(56, 0, 7, 0.5) 29%, rgba(13, 0, 3, 0.88) 72%),
    rgba(75, 0, 9, 0.58);
  opacity: 0;
}

.failure-title {
  left: 50%;
  top: 50%;
  z-index: 5;
  display: grid;
  justify-items: center;
  color: #ffeff0;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(54px, 17cqw, 78px);
  font-weight: 950;
  line-height: 0.83;
  letter-spacing: 0.035em;
  text-align: center;
  text-shadow:
    0 2px 0 #b0001b,
    0 6px 0 #41000a,
    0 0 9px #fff,
    0 0 24px #ff2948,
    0 0 58px #ff001f;
  transform: translate(-50%, -50%);
}

.failure-title__word {
  display: block;
  opacity: 0;
  transform: scale(0.22) translateY(20px);
  transform-origin: 50% 50%;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .layer--health-fill {
  animation:
    health-drain 720ms cubic-bezier(0.52, 0.02, 0.78, 0.4) forwards,
    firewall-impact 660ms linear 1.74s both;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .layer--health-empty,
.scene:is(.is-firewall-breached, .is-server-hacked) .layer--firewall-health {
  animation: firewall-impact 660ms linear 1.74s both;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .hp-flash {
  animation: firewall-impact 660ms linear 1.74s both;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .hp-flash__black {
  animation: firewall-flash-black 900ms steps(1, end) 800ms forwards;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .hp-flash__red {
  animation: firewall-flash-red 900ms steps(1, end) 800ms forwards;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .hp-flash__yellow {
  animation: firewall-flash-yellow 900ms steps(1, end) 800ms forwards;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .hp-flash__white {
  animation: firewall-flash-white 900ms steps(1, end) 800ms forwards;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .energy-wave {
  animation: breach-wave 1600ms cubic-bezier(0.2, 0.55, 0.2, 1) 1.74s both;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .energy-wave__ring {
  animation: breach-wave-ring 1600ms cubic-bezier(0.2, 0.55, 0.2, 1) 1.74s both;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .layer--firewall-resource-rail,
.scene:is(.is-firewall-breached, .is-server-hacked) .layer--firewall-damage-panel,
.scene:is(.is-firewall-breached, .is-server-hacked) .layer--damage-clean {
  animation: wave-rattle-near 430ms linear 1.82s both;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .layer--crew,
.scene:is(.is-firewall-breached, .is-server-hacked) .layer--side-control {
  animation: wave-rattle-mid 480ms linear 1.96s both;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .layer--played-card {
  animation: wave-rattle-mid 500ms linear 2.08s both;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .layer--spike,
.scene:is(.is-firewall-breached, .is-server-hacked) .layer--firewall-disc {
  animation: wave-rattle-far 520ms linear 2.18s both;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .layer--hand-card {
  animation: wave-rattle-far 560ms linear 2.26s both;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .layer--bottom-bar,
.scene:is(.is-firewall-breached, .is-server-hacked) .layer--bottom-control {
  animation: wave-rattle-far 580ms linear 2.42s both;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .camera-shell {
  animation:
    camera-arrive 1ms linear 2.42s forwards,
    angry-idle 1.85s ease-in-out 3.5s infinite;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .camera-visual {
  animation: camera-hit 1.08s linear 2.42s forwards;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .camera-flash {
  animation: camera-flash 105ms steps(1, end) 2.44s 6;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .camera-core {
  animation:
    camera-core-ignite 220ms cubic-bezier(0.2, 1.7, 0.5, 1) 2.98s forwards,
    camera-core-pulse 1.85s ease-in-out 3.5s infinite;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .breach-burst {
  animation: breach-particle-burst 720ms cubic-bezier(0.08, 0.76, 0.18, 1) calc(1.74s + var(--particle-delay)) both;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .wave-spark {
  animation: wave-particle-travel 1540ms cubic-bezier(0.18, 0.58, 0.18, 1) calc(1.74s + var(--particle-delay)) both;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .camera-hit-spark {
  animation: camera-particle-hit 760ms cubic-bezier(0.08, 0.74, 0.18, 1) calc(2.42s + var(--particle-delay)) both;
}

.scene:is(.is-firewall-breached, .is-server-hacked) .camera-idle-spark {
  animation: camera-short-circuit 1.85s linear calc(3.5s + var(--particle-delay)) infinite;
}

.scene.is-server-hacked .scene-world {
  animation: server-pan 4s cubic-bezier(0.4, 0, 0.2, 1) 3.4s forwards;
}

.scene.is-server-hacked .layer--bottom-bar,
.scene.is-server-hacked .layer--bottom-control {
  animation: server-bottom-fade 680ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.scene.is-server-hacked .card-energy-source {
  animation:
    card-source-charge 1.18s cubic-bezier(0.14, 0.78, 0.2, 1) 2.12s forwards,
    card-source-pulse 1.35s ease-in-out 3.3s infinite;
}

.scene.is-server-hacked .defence-red-aura {
  animation: defence-aura-live 5.45s cubic-bezier(0.4, 0, 0.2, 1) 2.9s forwards;
}

.scene.is-server-hacked .camera-shell {
  animation:
    camera-arrive 1ms linear 2.42s forwards,
    server-camera-react 5.2s cubic-bezier(0.22, 0.68, 0.2, 1) 3.4s forwards;
}

.scene.is-server-hacked .camera-visual {
  animation:
    camera-hit 1.08s linear 2.42s forwards,
    camera-green-charge 5.2s cubic-bezier(0.22, 0.68, 0.2, 1) 3.4s forwards;
}

.scene.is-server-hacked .camera-flash {
  animation:
    camera-flash 105ms steps(1, end) 2.44s 6,
    server-camera-flashes 5.2s steps(1, end) 3.4s forwards;
}

.scene.is-server-hacked .camera-core {
  animation:
    camera-core-ignite 220ms cubic-bezier(0.2, 1.7, 0.5, 1) 2.98s forwards,
    server-core-overload 5.2s cubic-bezier(0.22, 0.68, 0.2, 1) 3.4s forwards;
}

.scene.is-server-hacked .camera-idle-spark {
  animation: none;
}

.scene.is-server-hacked .uplink-wave--one {
  animation: uplink-wave-rise 1.35s cubic-bezier(0.13, 0.72, 0.17, 1) 3.45s both;
}

.scene.is-server-hacked .uplink-wave--two {
  animation: uplink-wave-rise 1.35s cubic-bezier(0.13, 0.72, 0.17, 1) 4.95s both;
}

.scene.is-server-hacked .uplink-wave--three {
  animation: uplink-wave-rise 1.35s cubic-bezier(0.13, 0.72, 0.17, 1) 6.45s both;
}

.scene.is-server-hacked .defence-popup {
  animation:
    defence-popup-enter 360ms cubic-bezier(0.14, 0.82, 0.18, 1) var(--popup-start) both,
    defence-popup-red-alert var(--popup-pulse-duration) steps(1, end) var(--popup-alert-start) infinite,
    defence-popup-final-glitch 340ms steps(1, end) var(--popup-close) forwards;
}

.scene.is-server-hacked .defence-popup__window {
  animation:
    defence-window-red-breathe var(--popup-pulse-duration) ease-in-out var(--popup-alert-start) infinite,
    defence-window-green-fail 340ms steps(1, end) var(--popup-close) forwards;
}

.scene.is-server-hacked .defence-popup__body {
  animation: defence-inner-glow var(--popup-pulse-duration) ease-in-out var(--popup-alert-start) infinite;
}

.scene.is-server-hacked .defence-popup::before {
  animation: defence-glitch-upper var(--popup-glitch-upper-duration) steps(1, end) var(--popup-alert-start) infinite;
}

.scene.is-server-hacked .defence-popup::after {
  animation: defence-glitch-lower var(--popup-glitch-lower-duration) steps(1, end) var(--popup-alert-start) infinite;
}

.scene.is-server-hacked .hack-detonation {
  animation: hack-detonation-fade 1.9s cubic-bezier(0.12, 0.66, 0.14, 1) 8.45s both;
}

.scene.is-server-hacked .hack-detonation__ring {
  animation: hack-detonation-expand 1.9s cubic-bezier(0.12, 0.66, 0.14, 1) 8.45s both;
}

.scene.is-server-hacked .victory-dim {
  animation: victory-dim-in 720ms cubic-bezier(0.22, 0.72, 0.22, 1) 8.52s forwards;
}

.scene.is-server-hacked .victory-arch-title__word--server {
  animation: victory-arch-word-in 760ms cubic-bezier(0.16, 1, 0.32, 1) 8.82s forwards;
}

.scene.is-server-hacked .victory-arch-title__word--hacked {
  animation: victory-arch-word-in 820ms cubic-bezier(0.16, 1, 0.32, 1) 9.28s forwards;
}

.scene.is-failed .failure-red-field {
  animation: failure-field-breathe 760ms ease-in-out infinite;
}

.scene.is-failed .failure-wave--one {
  animation: failure-wave-fall 1.02s cubic-bezier(0.16, 0.67, 0.18, 1) 0.3s both;
}

.scene.is-failed .failure-wave--two {
  animation: failure-wave-fall 1.02s cubic-bezier(0.16, 0.67, 0.18, 1) 0.98s both;
}

.scene.is-failed .failure-wave--three {
  animation: failure-wave-fall 1.02s cubic-bezier(0.16, 0.67, 0.18, 1) 1.66s both;
}

.scene.is-failed [data-failed-fall="true"] {
  animation: failed-layer-fall var(--failed-fall-duration) cubic-bezier(0.42, 0.02, 0.72, 0.38) var(--failed-fall-delay) both;
}

.scene.is-failed .defence-popup {
  animation:
    failed-popup-enter 380ms cubic-bezier(0.12, 0.82, 0.18, 1) var(--failed-popup-start) both,
    failed-popup-float var(--failed-popup-float-duration) ease-in-out var(--failed-popup-float-start) infinite;
}

.scene.is-failed .defence-popup__window {
  animation: failed-popup-glow 1.2s ease-in-out var(--failed-popup-float-start) infinite;
}

.scene.is-failed .defence-popup__body {
  animation: failed-popup-inner-glow 1.2s ease-in-out var(--failed-popup-float-start) infinite;
}

.scene.is-failed .camera-shell {
  z-index: 140;
  animation:
    camera-arrive 1ms linear forwards,
    failure-camera-recoil 420ms linear 2.56s both,
    failure-angry-idle 820ms ease-in-out 2.98s infinite;
}

.scene.is-failed .camera-visual {
  animation: failure-camera-menace 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.scene.is-failed .camera-flash {
  animation: failure-camera-flashes 2.92s steps(1, end) forwards;
}

.scene.is-failed .camera-core {
  animation:
    failure-core-ignite 180ms cubic-bezier(0.16, 1.55, 0.32, 1) 80ms forwards,
    failure-core-pulse 620ms ease-in-out 260ms infinite;
}

.scene.is-failed .camera-idle-spark {
  animation: camera-short-circuit 760ms linear calc(2.86s + var(--particle-delay)) infinite;
}

.scene.is-failed .failure-detonation {
  animation: failure-detonation-fade 1.42s cubic-bezier(0.12, 0.7, 0.14, 1) 2.55s both;
}

.scene.is-failed .failure-detonation__ring {
  animation: failure-detonation-expand 1.42s cubic-bezier(0.12, 0.7, 0.14, 1) 2.55s both;
}

.scene.is-failed .failure-final-dim {
  animation: failure-dim-in 720ms cubic-bezier(0.2, 0.72, 0.2, 1) 2.73s forwards;
}

.scene.is-failed .failure-title__word--access {
  animation: failure-word-in 560ms cubic-bezier(0.14, 1.5, 0.28, 1) 2.96s forwards;
}

.scene.is-failed .failure-title__word--denied {
  animation: failure-word-in 620ms cubic-bezier(0.14, 1.5, 0.28, 1) 3.2s forwards;
}

@keyframes failure-field-breathe {
  0%, 100% {
    opacity: 0.26;
    filter: blur(4px) saturate(1.2) brightness(0.9);
    transform: scale(0.96);
  }
  50% {
    opacity: 0.56;
    filter: blur(7px) saturate(1.55) brightness(1.2);
    transform: scale(1.025);
  }
}

@keyframes failure-wave-fall {
  0% {
    opacity: 0;
    transform: translateY(-58px) scaleX(0.26) scaleY(0.62);
  }
  9% { opacity: 0.36; }
  18% { opacity: 1; }
  68% { opacity: 0.98; }
  88% { opacity: 0.72; }
  100% {
    opacity: 0;
    transform: translateY(880px) scaleX(1.12) scaleY(1.04);
  }
}

@keyframes failed-layer-fall {
  0% {
    opacity: 1;
    filter: brightness(1);
    transform: translate(0, 0) rotate(0deg);
  }
  5% { transform: translate(-4px, 2px) rotate(-1.5deg); }
  10% { transform: translate(5px, -3px) rotate(1.8deg); }
  15% { transform: translate(-5px, -1px) rotate(-2deg); }
  20% { transform: translate(4px, 3px) rotate(1.6deg); }
  25% {
    filter: brightness(1.65) sepia(0.35) saturate(1.8);
    transform: translate(-2px, 5px) rotate(-1deg);
  }
  36% {
    opacity: 1;
    transform: translate(3px, 18px) rotate(3deg);
  }
  100% {
    opacity: 0.08;
    filter: brightness(0.58) sepia(0.4) saturate(1.5);
    transform: translate(var(--failed-fall-x), 920px) rotate(var(--failed-fall-rotate));
  }
}

@keyframes failed-popup-enter {
  0% {
    color: #ff1739;
    opacity: 0;
    filter: blur(6px) brightness(1.7) drop-shadow(0 0 3px #ff001e);
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.1);
  }
  18% { opacity: 1; }
  72% {
    opacity: 1;
    filter: blur(0) brightness(1.28) drop-shadow(0 0 20px #ff001e);
    transform: translate(-50%, -50%) translate(var(--popup-x), var(--popup-y)) rotate(var(--popup-tilt)) scale(var(--popup-overshoot));
  }
  100% {
    color: #ff1739;
    opacity: 1;
    filter: blur(0) brightness(1.05) drop-shadow(0 0 13px #ff001e);
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) translate(var(--popup-x), var(--popup-y)) rotate(var(--popup-tilt)) scale(var(--popup-scale));
  }
}

@keyframes failed-popup-float {
  0%, 100% {
    color: #ff1739;
    opacity: 1;
    filter: brightness(1.04) drop-shadow(0 0 12px #ff001e);
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) translate(var(--popup-x), var(--popup-y)) rotate(var(--popup-tilt)) scale(var(--popup-scale));
  }
  48% {
    filter: brightness(1.24) drop-shadow(0 0 20px #ff001e);
    transform: translate(-50%, -50%) translate(var(--popup-x), calc(var(--popup-y) - 7px)) rotate(var(--popup-tilt)) scale(var(--popup-scale));
  }
  76% {
    filter: brightness(1.1) drop-shadow(0 0 15px #ff001e);
    transform: translate(-50%, -50%) translate(var(--popup-x), calc(var(--popup-y) + 3px)) rotate(var(--popup-tilt)) scale(var(--popup-scale));
  }
}

@keyframes failed-popup-glow {
  0%, 100% {
    background: linear-gradient(145deg, rgba(92, 2, 17, 0.99), rgba(24, 1, 7, 0.99));
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.9),
      0 7px 16px rgba(0, 0, 0, 0.76),
      0 0 17px #ff173d,
      0 0 34px rgba(255, 0, 35, 0.74),
      inset 0 0 18px rgba(255, 24, 55, 0.42);
  }
  50% {
    background: linear-gradient(145deg, rgba(139, 0, 25, 0.99), rgba(38, 1, 10, 0.99));
    box-shadow:
      0 0 0 1px rgba(255, 214, 219, 0.62),
      0 8px 19px rgba(0, 0, 0, 0.82),
      0 0 27px #ff3452,
      0 0 56px rgba(255, 0, 35, 0.94),
      inset 0 0 34px rgba(255, 33, 62, 0.7);
  }
}

@keyframes failed-popup-inner-glow {
  0%, 100% {
    filter: brightness(0.95);
    box-shadow: inset 0 0 18px currentColor;
  }
  50% {
    filter: brightness(1.3);
    box-shadow: inset 0 0 43px currentColor, inset 0 0 10px rgba(255, 238, 240, 0.7);
  }
}

@keyframes failure-camera-menace {
  0% {
    filter: sepia(1) saturate(8) hue-rotate(-48deg) brightness(0.84) contrast(1.35) drop-shadow(0 0 8px rgba(255, 0, 30, 0.55));
  }
  68% {
    filter: sepia(1) saturate(11) hue-rotate(-49deg) brightness(1.05) contrast(1.38) drop-shadow(0 0 18px rgba(255, 0, 30, 0.86));
  }
  100% {
    filter: sepia(1) saturate(13) hue-rotate(-50deg) brightness(1.32) contrast(1.42) drop-shadow(0 0 34px #ff001f);
  }
}

@keyframes failure-camera-flashes {
  0%, 9.9%, 14%, 33.4%, 37.5%, 56.8%, 61%, 86.9%, 100% {
    opacity: 0;
    background: #ff102f;
  }
  10%, 11.8%, 33.5%, 35.3%, 56.9%, 58.7%, 87%, 91% {
    opacity: 0.92;
    background: #fff0f1;
  }
  11.9%, 13.9%, 35.4%, 37.4%, 58.8%, 60.9%, 91.1%, 96% {
    opacity: 0.76;
    background: #ff0a2b;
  }
}

@keyframes failure-core-ignite {
  to {
    opacity: 1;
    border-color: #fff0f2;
    background: #ff1739;
    box-shadow: 0 0 7px #fff, 0 0 21px #ff3150, 0 0 52px #ff001f;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes failure-core-pulse {
  0%, 100% {
    filter: brightness(0.94);
    box-shadow: 0 0 7px #fff, 0 0 20px #ff3150, 0 0 48px #ff001f;
    transform: translate(-50%, -50%) scale(1.02);
  }
  48% {
    filter: brightness(1.45);
    box-shadow: 0 0 11px #fff, 0 0 34px #ff4760, 0 0 84px #ff001f;
    transform: translate(-50%, -50%) scale(1.3);
  }
}

@keyframes failure-camera-recoil {
  0% { transform: translate(0, 0) scale(1); }
  14% { transform: translate(-8px, 4px) rotate(-1.4deg) scale(1.04); }
  28% { transform: translate(9px, -5px) rotate(1.7deg) scale(1.06); }
  43% { transform: translate(-10px, -3px) rotate(-1.8deg) scale(1.075); }
  58% { transform: translate(8px, 6px) rotate(1.5deg) scale(1.08); }
  73% { transform: translate(-6px, 3px) rotate(-1deg) scale(1.06); }
  86% { transform: translate(5px, -2px) rotate(0.8deg) scale(1.045); }
  100% { transform: translate(0, 0) scale(1.03); }
}

@keyframes failure-angry-idle {
  0%, 100% { transform: translateY(0) scale(1.035); }
  36% { transform: translateY(-4px) scale(1.055); }
  56% { transform: translateY(-4px) scale(1.055); }
  70% { transform: translateY(4px) scale(1.018); }
  74% { transform: translate(2px, 4px) scale(1.018); }
  78% { transform: translate(-2px, 3px) scale(1.018); }
  82% { transform: translate(2px, 5px) scale(1.018); }
  86% { transform: translate(-1px, 4px) scale(1.018); }
  91% { transform: translateY(4px) scale(1.018); }
}

@keyframes failure-detonation-fade {
  0% { opacity: 0; }
  6% { opacity: 1; }
  62% { opacity: 0.96; }
  100% { opacity: 0; }
}

@keyframes failure-detonation-expand {
  0% { width: 0; height: 0; }
  16% { width: 50px; height: 50px; }
  100% { width: 1220px; height: 1220px; }
}

@keyframes failure-dim-in {
  0% { opacity: 0; }
  100% { opacity: 0.76; }
}

@keyframes failure-word-in {
  0% {
    opacity: 0;
    filter: blur(10px) brightness(2.8);
    transform: scale(0.22) translateY(22px);
  }
  58% {
    opacity: 1;
    filter: blur(0) brightness(1.8);
    transform: scale(1.16) translateY(0);
  }
  76% { transform: scale(0.96); }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1.05);
    transform: scale(1);
  }
}

@keyframes health-drain {
  0% { clip-path: inset(0 0 0 0); }
  18% { clip-path: inset(0 6% 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}

@keyframes firewall-flash-black {
  0%, 9.9%, 48%, 57.9%, 80%, 87.9% { opacity: 1; }
  10%, 47.9%, 58%, 79.9%, 88%, 100% { opacity: 0; }
}

@keyframes firewall-flash-red {
  0%, 9.9%, 18%, 39.9%, 50%, 87.9%, 96%, 100% { opacity: 0; }
  10%, 17.9%, 40%, 49.9%, 88%, 95.9% { opacity: 1; }
}

@keyframes firewall-flash-yellow {
  0%, 19.9%, 30%, 69.9%, 78%, 100% { opacity: 0; }
  20%, 29.9%, 70%, 77.9% { opacity: 1; }
}

@keyframes firewall-flash-white {
  0%, 29.9%, 38%, 59.9%, 70%, 95.9%, 100% { opacity: 0; }
  30%, 37.9%, 60%, 69.9%, 96%, 99.9% { opacity: 1; }
}

@keyframes firewall-impact {
  0%, 100% { transform: translate(0, 0); }
  8% { transform: translate(-7px, 2px); }
  16% { transform: translate(6px, -4px); }
  25% { transform: translate(-4px, 5px); }
  34% { transform: translate(8px, 1px); }
  43% { transform: translate(-6px, -3px); }
  52% { transform: translate(5px, 4px); }
  62% { transform: translate(-4px, 0); }
  73% { transform: translate(3px, -2px); }
  85% { transform: translate(-2px, 1px); }
}

@keyframes breach-wave {
  0% { opacity: 0; }
  8% { opacity: 1; }
  62% { opacity: 0.95; }
  100% { opacity: 0; }
}

@keyframes breach-wave-ring {
  0% { width: 0; height: 0; }
  100% { width: 1100px; height: 1100px; }
}

@keyframes wave-rattle-near {
  0%, 100% { transform: translate(0, 0); }
  18% { transform: translate(-5px, 2px); }
  36% { transform: translate(5px, -2px); }
  54% { transform: translate(-4px, -1px); }
  72% { transform: translate(3px, 2px); }
  88% { transform: translate(-2px, 0); }
}

@keyframes wave-rattle-mid {
  0%, 100% { transform: translate(0, 0); }
  14% { transform: translate(3px, -3px); }
  29% { transform: translate(-4px, 2px); }
  45% { transform: translate(4px, 1px); }
  61% { transform: translate(-3px, -2px); }
  78% { transform: translate(2px, 2px); }
  91% { transform: translate(-1px, 0); }
}

@keyframes wave-rattle-far {
  0%, 100% { transform: translate(0, 0); }
  17% { transform: translate(-3px, -2px); }
  33% { transform: translate(3px, 2px); }
  49% { transform: translate(-2px, 2px); }
  66% { transform: translate(2px, -1px); }
  83% { transform: translate(-1px, 1px); }
}

@keyframes breach-particle-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateX(0) scale(0.25);
  }
  14% { opacity: 1; }
  66% { opacity: 0.9; }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateX(var(--particle-distance)) scale(0.08);
  }
}

@keyframes wave-particle-travel {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateX(8px) scale(0.2);
  }
  10% { opacity: 0.9; }
  48% { opacity: 1; }
  78% { opacity: 0.72; }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateX(var(--particle-distance)) scale(0.08);
  }
}

@keyframes camera-particle-hit {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateX(0) scale(0.3);
  }
  12% { opacity: 1; }
  60% { opacity: 0.9; }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateX(var(--particle-distance)) scale(0.05);
  }
}

@keyframes camera-short-circuit {
  0%, 68% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) rotate(var(--particle-angle)) scale(0.2);
  }
  72% { opacity: 1; }
  78% {
    opacity: 0.95;
    transform: translate(-50%, -50%) translate(var(--spark-x), var(--spark-y)) rotate(var(--particle-angle)) scale(1);
  }
  86% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--spark-x-far), var(--spark-y-far)) rotate(var(--particle-angle)) scale(0.1);
  }
  100% { opacity: 0; }
}

@keyframes camera-arrive {
  to { opacity: 1; }
}

@keyframes camera-hit {
  0% { filter: none; transform: translate(0, 0) scale(1); }
  8% { filter: brightness(1.8) saturate(1.4); transform: translate(-5px, 1px) scale(1.025); }
  16% { filter: sepia(1) saturate(8) hue-rotate(-42deg) brightness(1.35); transform: translate(6px, -3px) scale(1.02); }
  25% { transform: translate(-7px, 4px) scale(1.025); }
  35% { transform: translate(5px, -5px) scale(1.02); }
  46% { transform: translate(-4px, 3px) scale(1.018); }
  58% { transform: translate(4px, -2px) scale(1.015); }
  72% { transform: translate(-2px, 2px) scale(1.012); }
  86% { transform: translate(1px, -1px) scale(1.008); }
  100% {
    filter: sepia(1) saturate(9) hue-rotate(-46deg) brightness(0.84) contrast(1.32);
    transform: translate(0, 0) scale(1);
  }
}

@keyframes camera-flash {
  0% { background: #fff; opacity: 0.9; }
  33% { background: #ff1010; opacity: 0.78; }
  66% { background: #ffb000; opacity: 0.88; }
  100% { opacity: 0; }
}

@keyframes camera-core-ignite {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes camera-core-pulse {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.38); }
  72% { filter: brightness(0.92); }
  77% { transform: translate(calc(-50% + 1px), calc(-50% + 1px)) scale(1.05); }
  80% { transform: translate(calc(-50% - 1px), calc(-50% - 1px)) scale(1.05); }
  83% { transform: translate(calc(-50% + 1px), calc(-50% - 1px)) scale(1.05); }
  86% { transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes angry-idle {
  0%, 100% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-3px) scale(1.012); }
  58% { transform: translateY(-3px) scale(1.012); }
  72% { transform: translateY(3px) scale(0.992); }
  75% { transform: translate(2px, 3px) scale(0.992); }
  78% { transform: translate(-2px, 2px) scale(0.992); }
  81% { transform: translate(2px, 4px) scale(0.992); }
  84% { transform: translate(-1px, 3px) scale(0.992); }
  88% { transform: translateY(3px) scale(0.992); }
}

@keyframes server-pan {
  0% { transform: translateY(0); }
  100% { transform: translateY(70px); }
}

@keyframes server-bottom-fade {
  0% { opacity: 1; filter: brightness(1); }
  100% { opacity: 0; filter: brightness(0.3); }
}

@keyframes card-source-charge {
  0% {
    opacity: 0;
    transform: scale(0.62, 0.48);
  }
  58% {
    opacity: 1;
    transform: scale(1.08, 0.94);
  }
  100% {
    opacity: 0.86;
    transform: scale(1, 1);
  }
}

@keyframes card-source-pulse {
  0%, 100% {
    opacity: 0.78;
    filter: blur(8px) saturate(1.3) brightness(0.95);
    transform: scale(0.98, 0.96);
  }
  50% {
    opacity: 1;
    filter: blur(10px) saturate(1.55) brightness(1.24);
    transform: scale(1.06, 1.04);
  }
}

@keyframes uplink-wave-rise {
  0% {
    opacity: 0;
    transform: translateY(0) scaleX(0.45) scaleY(0.72);
  }
  9% { opacity: 0.35; }
  18% { opacity: 1; }
  68% { opacity: 0.96; }
  86% { opacity: 0.72; }
  100% {
    opacity: 0;
    transform: translateY(-690px) scaleX(1.08) scaleY(1);
  }
}

@keyframes defence-aura-live {
  0% {
    opacity: 0;
    filter: blur(9px) saturate(1.2) brightness(0.9);
    transform: scale(0.9);
  }
  8% { opacity: 0.16; }
  20% {
    opacity: 0.23;
    transform: scale(1);
  }
  31% { opacity: 0.17; }
  46% {
    opacity: 0.28;
    transform: scale(1.03);
  }
  58% { opacity: 0.19; }
  73% {
    opacity: 0.36;
    filter: blur(10px) saturate(1.35) brightness(1.05);
    transform: scale(1.06);
  }
  87% { opacity: 0.24; }
  100% {
    opacity: 0;
    filter: blur(12px) saturate(1.25) brightness(1.08);
    transform: scale(1.09);
  }
}

@keyframes defence-popup-enter {
  0% {
    color: #ff183e;
    opacity: 0;
    filter: blur(5px) brightness(2.1) drop-shadow(0 0 2px #ff002f);
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.12);
  }
  16% { opacity: 1; }
  72% {
    color: #ff183e;
    opacity: 1;
    filter: blur(0) brightness(1.42) drop-shadow(0 0 18px #ff002f);
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) translate(var(--popup-x), var(--popup-y)) rotate(var(--popup-tilt)) scale(var(--popup-overshoot));
  }
  100% {
    color: #ff183e;
    opacity: 1;
    filter: blur(0) brightness(1.1) drop-shadow(0 0 11px #ff002f);
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) translate(var(--popup-x), var(--popup-y)) rotate(var(--popup-tilt)) scale(var(--popup-scale));
  }
}

@keyframes defence-popup-red-alert {
  0%, 100% {
    color: #ff183e;
    opacity: 1;
    filter: brightness(1.08) drop-shadow(0 0 9px #ff002f);
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) translate(var(--popup-x), var(--popup-y)) rotate(var(--popup-tilt)) scale(var(--popup-scale));
  }
  17% {
    filter: brightness(1.3) drop-shadow(0 0 14px #ff002f);
    transform: translate(-50%, -50%) translate(calc(var(--popup-x) + 2px), calc(var(--popup-y) - 1px)) rotate(var(--popup-tilt)) skewX(1deg) scale(var(--popup-scale));
  }
  34% {
    filter: brightness(1.65) drop-shadow(0 0 24px #ff002f);
    transform: translate(-50%, -50%) translate(calc(var(--popup-x) - 2px), calc(var(--popup-y) + 1px)) rotate(var(--popup-tilt)) skewX(-2deg) scale(var(--popup-scale));
  }
  51% {
    filter: brightness(1.95) drop-shadow(0 0 31px #ff002f);
    transform: translate(-50%, -50%) translate(calc(var(--popup-x) + 1px), calc(var(--popup-y) + 2px)) rotate(var(--popup-tilt)) scale(var(--popup-overshoot));
  }
  68% {
    filter: brightness(1.5) drop-shadow(0 0 19px #ff002f);
    transform: translate(-50%, -50%) translate(calc(var(--popup-x) - 3px), calc(var(--popup-y) - 1px)) rotate(var(--popup-tilt)) skewX(2.5deg) scale(var(--popup-scale));
  }
  84% {
    filter: brightness(1.22) drop-shadow(0 0 12px #ff002f);
    transform: translate(-50%, -50%) translate(calc(var(--popup-x) + 2px), var(--popup-y)) rotate(var(--popup-tilt)) skewX(-1.5deg) scale(var(--popup-scale));
  }
}

@keyframes defence-popup-final-glitch {
  0% {
    color: #ff183e;
    opacity: 1;
    filter: brightness(2.2) saturate(1.7) drop-shadow(0 0 34px #ff002f);
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) translate(var(--popup-x), var(--popup-y)) rotate(var(--popup-tilt)) scale(var(--popup-scale));
  }
  12% {
    color: #35ff7d;
    filter: brightness(2.7) saturate(1.9) drop-shadow(0 0 31px #21ff6b);
    clip-path: inset(0 0 0 0);
  }
  28% {
    color: #35ff7d;
    opacity: 1;
    filter: blur(0.5px) brightness(2.2) drop-shadow(0 0 24px #21ff6b);
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) translate(calc(var(--popup-x) + 8px), calc(var(--popup-y) - 2px)) rotate(var(--popup-tilt)) skewX(9deg) scale(var(--popup-overshoot));
  }
  46% {
    opacity: 0.92;
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) translate(calc(var(--popup-x) - 9px), calc(var(--popup-y) + 3px)) rotate(var(--popup-tilt)) skewX(-12deg) scale(var(--popup-scale));
  }
  64% {
    opacity: 0.78;
    clip-path: inset(13% 0 48% 0);
    transform: translate(-50%, -50%) translate(calc(var(--popup-x) + 6px), var(--popup-y)) rotate(var(--popup-tilt)) scale(var(--popup-overshoot), 0.7);
  }
  82% {
    opacity: 0.54;
    clip-path: inset(51% 0 17% 0);
    transform: translate(-50%, -50%) translate(calc(var(--popup-x) - 11px), calc(var(--popup-y) + 2px)) rotate(var(--popup-tilt)) scale(var(--popup-overshoot), 0.42);
  }
  100% {
    color: #35ff7d;
    opacity: 0;
    filter: blur(4px) brightness(3) drop-shadow(0 0 18px #21ff6b);
    clip-path: inset(50% 50% 50% 50%);
    transform: translate(-50%, -50%) translate(calc(var(--popup-x) + 13px), var(--popup-y)) rotate(var(--popup-tilt)) scale(0);
  }
}

@keyframes defence-window-red-breathe {
  0%, 100% {
    background: linear-gradient(145deg, rgba(94, 2, 18, 0.99), rgba(26, 1, 8, 0.99));
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.88),
      0 5px 13px rgba(0, 0, 0, 0.72),
      0 0 16px #ff143d,
      0 0 31px rgba(255, 0, 40, 0.72),
      inset 0 0 18px rgba(255, 23, 57, 0.4);
  }
  50% {
    background: linear-gradient(145deg, rgba(151, 0, 26, 0.99), rgba(43, 1, 11, 0.99));
    box-shadow:
      0 0 0 1px rgba(255, 213, 219, 0.66),
      0 6px 17px rgba(0, 0, 0, 0.78),
      0 0 27px #ff2a4d,
      0 0 54px rgba(255, 0, 39, 0.96),
      inset 0 0 33px rgba(255, 31, 62, 0.74);
  }
}

@keyframes defence-window-green-fail {
  0% {
    background: linear-gradient(145deg, rgba(105, 2, 20, 0.99), rgba(27, 1, 8, 0.99));
  }
  12%, 100% {
    background: linear-gradient(145deg, rgba(3, 112, 50, 0.99), rgba(1, 28, 15, 0.99));
    box-shadow:
      0 0 0 1px rgba(224, 255, 232, 0.8),
      0 0 25px #35ff7d,
      0 0 48px rgba(22, 255, 102, 0.9),
      inset 0 0 30px rgba(31, 255, 112, 0.65);
  }
}

@keyframes defence-inner-glow {
  0%, 100% {
    filter: brightness(1);
    box-shadow: inset 0 0 18px currentColor;
  }
  50% {
    filter: brightness(1.42);
    box-shadow: inset 0 0 45px currentColor, inset 0 0 12px #fff0f2;
  }
}

@keyframes defence-glitch-upper {
  0%, 67.9%, 85%, 100% { opacity: 0; transform: translate(0, 0); }
  68% { opacity: 0.9; transform: translate(7px, -1px); }
  72% { opacity: 0.7; transform: translate(-5px, 1px); }
  76% { opacity: 1; transform: translate(9px, 0); }
  80% { opacity: 0.58; transform: translate(-7px, -1px); }
  84% { opacity: 0.82; transform: translate(4px, 1px); }
}

@keyframes defence-glitch-lower {
  0%, 55.9%, 73%, 100% { opacity: 0; transform: translate(0, 0); }
  56% { opacity: 0.72; transform: translate(-7px, 1px); }
  60% { opacity: 1; transform: translate(8px, -1px); }
  64% { opacity: 0.62; transform: translate(-9px, 0); }
  68% { opacity: 0.9; transform: translate(6px, 1px); }
  72% { opacity: 0.68; transform: translate(-4px, -1px); }
}

@keyframes server-camera-react {
  0%, 20% { transform: translate(0, 0) scale(1); }
  22% { transform: translate(-7px, 4px) rotate(-1deg) scale(1.035); }
  23.5% { transform: translate(7px, -5px) rotate(1.2deg) scale(1.04); }
  25% { transform: translate(-4px, 3px) rotate(-0.6deg) scale(1.026); }
  28%, 48.5% { transform: translate(0, 0) scale(1.01); }
  50.5% { transform: translate(8px, 5px) rotate(1.4deg) scale(1.045); }
  52% { transform: translate(-8px, -4px) rotate(-1.2deg) scale(1.05); }
  54% { transform: translate(5px, -2px) rotate(0.7deg) scale(1.032); }
  57%, 77.5% { transform: translate(0, 0) scale(1.015); }
  79.5% { transform: translate(-9px, -5px) rotate(-1.6deg) scale(1.055); }
  81% { transform: translate(9px, 5px) rotate(1.5deg) scale(1.06); }
  83% { transform: translate(-5px, 3px) rotate(-0.8deg) scale(1.04); }
  86% { transform: translate(0, 0) scale(1.025); }
  87% { transform: translateY(-2px) scale(1.04); }
  88.5% { transform: translate(-7px, 4px) rotate(-1.5deg) scale(1.05); }
  90% { transform: translate(9px, -6px) rotate(1.8deg) scale(1.065); }
  91.5% { transform: translate(-10px, -3px) rotate(-2deg) scale(1.075); }
  93% { transform: translate(8px, 6px) rotate(1.7deg) scale(1.085); }
  94.5% { transform: translate(-7px, 5px) rotate(-1.4deg) scale(1.09); }
  96% { transform: translate(10px, -5px) rotate(2deg) scale(1.1); }
  97.5% { transform: translate(-9px, -6px) rotate(-1.8deg) scale(1.105); }
  99% { transform: translate(7px, 4px) rotate(1.5deg) scale(1.1); }
  100% { transform: translate(0, 0) scale(1.035); }
}

@keyframes camera-green-charge {
  0%, 19% {
    filter: sepia(1) saturate(9) hue-rotate(-46deg) brightness(0.84) contrast(1.32);
  }
  22%, 51%, 80% {
    filter: sepia(1) saturate(12) hue-rotate(48deg) brightness(1.9) contrast(1.05);
  }
  27%, 56%, 85% {
    filter: sepia(1) saturate(10) hue-rotate(65deg) brightness(1.08) contrast(1.24);
  }
  88% {
    filter: sepia(1) saturate(11) hue-rotate(70deg) brightness(1.25) contrast(1.22);
  }
  95% {
    filter: sepia(1) saturate(13) hue-rotate(73deg) brightness(1.8) contrast(1.15);
  }
  100% {
    filter: sepia(1) saturate(12) hue-rotate(74deg) brightness(1.18) contrast(1.3);
  }
}

@keyframes server-camera-flashes {
  0%, 20.9%, 24.5%, 49.9%, 53.5%, 78.9%, 82.5%, 86.9%, 100% {
    opacity: 0;
    background: #23ff78;
  }
  21%, 22.2%, 50%, 51.2%, 79%, 80.2% {
    opacity: 0.93;
    background: #e9ffce;
  }
  22.3%, 23.6%, 51.3%, 52.6%, 80.3%, 81.6% {
    opacity: 0.78;
    background: #18ff6b;
  }
  87%, 90%, 93%, 96%, 99% {
    opacity: 0.84;
    background: #62ff8d;
  }
  88.5%, 91.5%, 94.5%, 97.5% {
    opacity: 0.08;
    background: #fff;
  }
}

@keyframes server-core-overload {
  0% {
    opacity: 1;
    background: #ffe600;
    border-color: #fff8a4;
    box-shadow: 0 0 5px #fff, 0 0 13px #fff13b, 0 0 30px #ff9d00;
    transform: translate(-50%, -50%) scale(1);
  }
  22%, 51%, 80% {
    opacity: 1;
    background: #bfff45;
    border-color: #fff;
    box-shadow: 0 0 8px #fff, 0 0 24px #5fff77, 0 0 55px #00e862;
    transform: translate(-50%, -50%) scale(1.28);
  }
  27%, 56%, 85% {
    background: #42ff77;
    border-color: #d9ffc6;
    transform: translate(-50%, -50%) scale(1.06);
  }
  88% {
    background: #42ff77;
    border-color: #fff;
    box-shadow: 0 0 9px #fff, 0 0 30px #68ff85, 0 0 72px #00ff6a;
    transform: translate(-50%, -50%) scale(1.2);
  }
  96% {
    background: #ecffcb;
    box-shadow: 0 0 14px #fff, 0 0 42px #7fff90, 0 0 105px #00ff6a;
    transform: translate(-50%, -50%) scale(1.72);
  }
  100% {
    opacity: 1;
    background: #37ff76;
    border-color: #edffdf;
    box-shadow: 0 0 10px #fff, 0 0 32px #6fff8d, 0 0 82px #00ff62;
    transform: translate(-50%, -50%) scale(1.25);
  }
}

@keyframes hack-detonation-fade {
  0% { opacity: 0; }
  7% { opacity: 1; }
  58% { opacity: 0.96; }
  100% { opacity: 0; }
}

@keyframes hack-detonation-expand {
  0% { width: 0; height: 0; }
  18% { width: 54px; height: 54px; }
  100% { width: 1180px; height: 1180px; }
}

@keyframes victory-dim-in {
  0% { opacity: 0; }
  100% { opacity: 0.4; }
}

@keyframes victory-arch-word-in {
  0% {
    opacity: 0;
    filter: blur(5px) brightness(2.8);
  }
  48% {
    opacity: 1;
    filter: blur(0) brightness(1.9);
  }
  72% {
    opacity: 1;
    filter: blur(0) brightness(1.15);
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
  }
}

.animation-controls {
  width: min(230px, 100%);
  padding: 20px;
  border: 1px solid rgba(35, 238, 211, 0.27);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(18, 36, 41, 0.94), rgba(3, 8, 11, 0.96)),
    #071014;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 34px rgba(0, 221, 190, 0.08);
}

.animation-controls__eyebrow,
.animation-controls h1,
.animation-controls__status {
  margin: 0;
}

.animation-controls__eyebrow {
  color: #50f7d4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.animation-controls h1 {
  margin-top: 5px;
  color: #f4fff9;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.animation-controls__buttons {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.animation-control {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #2a4c52;
  border-radius: 12px;
  color: #c8dadc;
  background: linear-gradient(180deg, #13282e, #09161a);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.animation-control:hover {
  color: #fff;
  border-color: #3bd8c2;
  transform: translateX(2px);
}

.animation-control:focus-visible {
  outline: 2px solid #fff46a;
  outline-offset: 3px;
}

.animation-control.is-active {
  color: #fff;
  border-color: #ffdb32;
  background: linear-gradient(180deg, #254f4e, #0a2125);
  box-shadow: 0 0 18px rgba(255, 214, 33, 0.15), inset 3px 0 #ffde32;
}

.animation-control--breach.is-active {
  border-color: #ff2464;
  box-shadow: 0 0 22px rgba(255, 24, 90, 0.22), inset 3px 0 #ff2464;
}

.animation-control[data-scene-state="server-hacked"].is-active {
  border-color: #35ff83;
  box-shadow: 0 0 24px rgba(40, 255, 128, 0.25), inset 3px 0 #35ff83;
}

.animation-control--danger.is-active {
  border-color: #ff3d2f;
  box-shadow: 0 0 22px rgba(255, 61, 47, 0.2), inset 3px 0 #ff3d2f;
}

.animation-control span {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.055em;
}

.animation-control small {
  color: #789397;
  font-size: 10px;
}

.animation-controls__status {
  margin-top: 15px;
  color: #789397;
  font: 800 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.11em;
}

.phone__speaker {
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 4;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: #111417;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
  transform: translateX(-50%);
}

.phone__side {
  position: absolute;
  z-index: -2;
  width: 4px;
  border: 1px solid #373d43;
  background: linear-gradient(90deg, #050607, #3b4147 55%, #08090a);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.phone__side--mute {
  top: 13%;
  left: -4px;
  height: 35px;
  border-radius: 3px 0 0 3px;
}

.phone__side--volume-up,
.phone__side--volume-down {
  left: -5px;
  height: 62px;
  border-radius: 4px 0 0 4px;
}

.phone__side--volume-up { top: 20%; }
.phone__side--volume-down { top: 29%; }

.phone__side--power {
  top: 22%;
  right: -5px;
  height: 92px;
  border-radius: 0 4px 4px 0;
}

@media (max-width: 520px) {
  .mockup-stage {
    padding: 18px 14px;
  }

  .phone {
    width: min(430px, calc(100vw - 28px), calc((100svh - 36px) * 0.485));
    padding: 8px;
  }
}

@media (max-width: 780px) {
  .mockup-layout {
    flex-direction: column;
    gap: 20px;
  }

  .animation-controls {
    width: min(430px, calc(100vw - 28px));
  }

  .animation-controls__buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene:is(.is-firewall-breached, .is-server-hacked) .layer,
  .scene:is(.is-firewall-breached, .is-server-hacked) .hp-flash,
  .scene:is(.is-firewall-breached, .is-server-hacked) .hp-flash__color,
  .scene:is(.is-firewall-breached, .is-server-hacked) .energy-wave,
  .scene:is(.is-firewall-breached, .is-server-hacked) .energy-wave__ring,
  .scene:is(.is-firewall-breached, .is-server-hacked) .fx-particle,
  .scene:is(.is-firewall-breached, .is-server-hacked) .camera-shell,
  .scene:is(.is-firewall-breached, .is-server-hacked) .camera-visual,
  .scene:is(.is-firewall-breached, .is-server-hacked) .camera-flash,
  .scene:is(.is-firewall-breached, .is-server-hacked) .camera-core,
  .scene.is-server-hacked .scene-world,
  .scene.is-server-hacked .card-energy-source,
  .scene.is-server-hacked .defence-red-aura,
  .scene.is-server-hacked .uplink-wave,
  .scene.is-server-hacked .defence-popup,
  .scene.is-server-hacked .defence-popup__window,
  .scene.is-server-hacked .defence-popup__body,
  .scene.is-server-hacked .defence-popup::before,
  .scene.is-server-hacked .defence-popup::after,
  .scene.is-server-hacked .hack-detonation,
  .scene.is-server-hacked .hack-detonation__ring,
  .scene.is-server-hacked .victory-dim,
  .scene.is-server-hacked .victory-arch-title__word,
  .scene.is-failed .failure-red-field,
  .scene.is-failed .failure-wave,
  .scene.is-failed [data-failed-fall="true"],
  .scene.is-failed .defence-popup,
  .scene.is-failed .defence-popup__window,
  .scene.is-failed .defence-popup__body,
  .scene.is-failed .camera-shell,
  .scene.is-failed .camera-visual,
  .scene.is-failed .camera-flash,
  .scene.is-failed .camera-core,
  .scene.is-failed .camera-idle-spark,
  .scene.is-failed .failure-detonation,
  .scene.is-failed .failure-detonation__ring,
  .scene.is-failed .failure-final-dim,
  .scene.is-failed .failure-title__word {
    animation-duration: 1ms;
    animation-delay: 0ms;
    animation-iteration-count: 1;
  }
}