/* One selected cluster feeds an eight-second report/response cycle.
   Requests have an independent clock; the shared controller pauses all motion. */
.waf-scene {
  container: waf / inline-size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  border: 1px solid #303444;
  border-radius: 24px;
  background: #111827;
  color: #f9fafb;
  box-shadow: 0 24px 48px -28px #11182780;
}
.waf-scene::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at 45% 28%, #fb516815, transparent 58%);
  pointer-events: none;
}
.waf-scene [hidden] { display: none !important; }
.waf-scene__defs { position: absolute; overflow: hidden; }
.waf-scene__header { padding: 28px 28px 12px; }
.waf-scene__eyebrow { display: flex; align-items: center; gap: 9px; color: #ffafb2; font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.waf-scene__eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: #fb5168; box-shadow: 0 0 12px #fb516880; }
.waf-scene__title { margin-top: 12px; font-size: 34px; line-height: 1.08; letter-spacing: -.035em; font-weight: 600; }
.waf-scene__title span { color: #ffafb2; }
.waf-scene__stage { --waf-layout: wide; }
.waf-scene__diagram { display: block; width: 100%; height: auto; overflow: hidden; }
.waf-scene__compact { display: none; }
.waf-scene__label { fill: #aeb8c8; font-size: 10px; letter-spacing: 1.4px; }
.waf-scene__story { padding: 0 28px 20px; }
.waf-scene__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; font-size: 11px; }
.waf-scene__step { padding-top: 10px; border-top: 2px solid currentColor; opacity: .35; white-space: nowrap; }
.waf-scene__step--flow { color: #e5e7eb; animation: waf-event-step-flow 10s linear infinite; }
.waf-scene__step--block { color: #ff858e; animation: waf-event-step-block 10s linear infinite; }
.waf-scene__step--share { color: #9de8d2; animation: waf-event-step-share 10s linear infinite; }
/* A layout-free clock coordinates the responsive diagrams and attack cycles. */
.waf-scene__clock { position: absolute; width: 0; height: 0; animation: waf-event-clock 8s linear infinite; }
.waf-scene__footer { padding: 8px 28px; border-top: 1px solid #ffffff12; background: #0b122080; }
.waf-scene__controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.waf-scene__attack-button, .waf-scene__toggle { min-height: 28px; padding: 0; border: 0; border-radius: 2px; background: none; font: inherit; font-size: 12px; cursor: pointer; }
.waf-scene__attack-button { color: #ffafb2; font-weight: 600; }
.waf-scene__attack-button:hover, .waf-scene__toggle:hover { text-decoration: underline; text-underline-offset: 4px; }
.waf-scene__attack-button:disabled { opacity: .4; cursor: default; }
.waf-scene__toggle { color: #d1d5db; }
.waf-scene__attack-button:focus-visible, .waf-scene__toggle:focus-visible { outline: 2px solid #ffafb2; outline-offset: 3px; }
.waf-scene__motion { animation-play-state: paused !important; }
.waf-scene[data-running='true'] .waf-scene__motion { animation-play-state: running !important; }


.waf-hub__legend { display: flex; flex-wrap: wrap; gap: 10px 17px; padding: 2px 28px 0; color: #aeb8c8; font-size: 10px; }
.waf-hub__legend span { display: inline-flex; align-items: center; gap: 7px; }
.waf-hub__legend i { display: inline-block; flex: none; }
.waf-hub__legend-good { width: 5px; height: 5px; border-radius: 50%; background: #9de8d2; }
.waf-hub__legend-threat { width: 6px; height: 6px; transform: rotate(45deg); background: #ff858e; }
.waf-hub__legend-report, .waf-hub__legend-protection { width: 13px; height: 2px; background: #ffc98d; }
.waf-hub__legend-protection { background: #defff0; }
.waf-scene__step { animation-duration: 8s; }
.waf-scene__step--flow { color: #ff858e; }
.waf-scene__step--block { color: #ffc98d; }
/* Hidden targets have no active animations. Responsive SVGs share the selection. */
.waf-hub [data-waf-attack-node] { display: none; }
.waf-hub[data-attack-node="0"] [data-waf-attack-node="0"],
.waf-hub[data-attack-node="1"] [data-waf-attack-node="1"],
.waf-hub[data-attack-node="2"] [data-waf-attack-node="2"],
.waf-hub[data-attack-node="3"] [data-waf-attack-node="3"],
.waf-hub[data-attack-node="4"] [data-waf-attack-node="4"],
.waf-hub[data-attack-node="5"] [data-waf-attack-node="5"],
.waf-hub[data-attack-node="6"] [data-waf-attack-node="6"],
.waf-hub[data-attack-node="7"] [data-waf-attack-node="7"] { display: inline; --waf-threat: waf-event-hub-threat; --waf-blocked: waf-event-hub-blocked; --waf-report: waf-event-hub-report; }
.waf-hub__arrival { opacity: 0; animation: waf-upstream-arrival 4.8s linear infinite; }
@keyframes waf-upstream-arrival {
  0%, 88% { opacity: 0; }
  92%, 96% { opacity: 1; }
  100% { opacity: 0; }
}
.waf-scene__traffic { animation: waf-traffic 4.8s linear infinite; }
.waf-hub__threat { opacity: 0; animation: var(--waf-threat, none) 8s linear infinite; }
.waf-hub__blocked { opacity: 0; animation: var(--waf-blocked, none) 8s linear infinite; }
.waf-hub__report { opacity: 0; stroke-dasharray: .13 1; stroke-dashoffset: .15; animation: var(--waf-report, none) 8s linear infinite; }
.waf-hub__received { opacity: 0; animation: waf-event-hub-received 8s linear infinite; }
.waf-hub__broadcast-ring { opacity: 0; animation: waf-event-hub-ring 8s ease-out infinite; }
.waf-hub__outbound { opacity: 0; stroke-dasharray: .12 1; stroke-dashoffset: .14; animation: waf-event-hub-outbound 8s ease-in-out infinite; }
.waf-hub__link-glow { opacity: 0; animation: waf-event-hub-links 8s linear infinite; }
.waf-hub__response { opacity: 0; animation: waf-event-hub-response 8s linear infinite; }
@keyframes waf-traffic {
  0% { opacity: 0; transform: translateY(0); }
  12%, 90% { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--waf-request-distance)); }
}
/* Attack/contact: 0.8–2.1s; report travels inward at 2.2–3.3s. */
@keyframes waf-event-hub-threat {
  0%, 10% { opacity: 0; transform: translateY(0); }
  12.5%, 22.5% { opacity: 1; }
  25% { opacity: 1; transform: translateY(26px); }
  26.25%, 100% { opacity: 0; transform: translateY(26px); }
}
@keyframes waf-event-hub-blocked {
  0%, 24% { opacity: 0; }
  25%, 31.5% { opacity: 1; }
  37.5%, 100% { opacity: 0; }
}
@keyframes waf-event-hub-report {
  0%, 27.5% { opacity: 0; stroke-dashoffset: .15; }
  28.125% { opacity: 1; stroke-dashoffset: .15; }
  41.25% { opacity: 1; stroke-dashoffset: -1; }
  42.5%, 100% { opacity: 0; stroke-dashoffset: -1; }
}
/* Approximated receives, then broadcasts; acknowledgements follow arrival. */
@keyframes waf-event-hub-received {
  0%, 40% { opacity: 0; }
  42%, 45% { opacity: 1; }
  52.5%, 100% { opacity: 0; }
}
@keyframes waf-event-hub-ring {
  0%, 44% { opacity: 0; transform: scale(.85); }
  46% { opacity: .8; transform: scale(1); }
  61%, 100% { opacity: 0; transform: scale(1.7); }
}
@keyframes waf-event-hub-outbound {
  0%, 44% { opacity: 0; stroke-dashoffset: .14; }
  45% { opacity: 1; stroke-dashoffset: .14; }
  58% { opacity: 1; stroke-dashoffset: -1; }
  60%, 100% { opacity: 0; stroke-dashoffset: -1; }
}
@keyframes waf-event-hub-links {
  0%, 44% { opacity: 0; }
  53%, 75% { opacity: 1; }
  94%, 100% { opacity: 0; }
}
@keyframes waf-event-hub-response {
  0%, 58% { opacity: 0; }
  61%, 75% { opacity: 1; }
  94%, 100% { opacity: 0; }
}
@keyframes waf-event-step-flow { 0%, 20% { opacity: .35; } 25%, 31% { opacity: 1; } 36%, 100% { opacity: .35; } }
@keyframes waf-event-step-block { 0%, 26% { opacity: .35; } 30%, 42% { opacity: 1; } 48%, 100% { opacity: .35; } }
@keyframes waf-event-step-share { 0%, 44% { opacity: .35; } 52%, 86% { opacity: 1; } 97%, 100% { opacity: .35; } }
@keyframes waf-event-clock { from { opacity: 0; } to { opacity: 1; } }
@container waf (max-width: 420px) {
  .waf-scene__stage { --waf-layout: compact; }
  .waf-scene__wide { display: none; }
  .waf-scene__compact { display: block; }
  .waf-scene__header { padding: 24px 20px 16px; }
  .waf-scene__title { font-size: clamp(24px, 7.6cqi, 32px); }
  .waf-scene__story { padding: 0 20px 18px; }
  .waf-scene__steps { gap: 7px; font-size: 10px; }
  .waf-scene__step { white-space: normal; }
  .waf-scene__footer { padding: 8px 20px; }
}

@container waf (max-width: 420px) {
  .waf-hub__legend { padding-inline: 20px; gap: 8px 12px; font-size: 9px; }
}
/* Wide cards use compact chrome so the diagram remains the focal point. */
@container waf (min-width: 421px) {
  .waf-scene__header { padding: 20px 24px 10px; }
  .waf-scene__title { margin-top: 10px; font-size: clamp(24px, 5.2cqi, 32px); line-height: 1.15; }
  .waf-scene__title br { display: none; }
  .waf-hub__legend { padding-inline: 24px; }
  .waf-scene__wide { max-height: 480px; }
  .waf-scene__story { padding: 0 24px 16px; }
  .waf-scene__footer { padding: 8px 24px; }
}
/* The panel extends slightly beyond the copy; the SVG fits the remaining space. */
@media (min-width: 1024px) {
  .waf-visual-column { contain: size; align-self: stretch; min-height: 0; }
  .waf-hub { display: flex; flex-direction: column; height: calc(100% + 32px); margin-block: -16px; }
  .waf-scene__stage { flex: 1; min-height: 0; }
  .waf-scene__diagram { height: 100%; max-height: none; }
}
/* Pause and no-JS render the same settled network, never an interrupted attack.
   Removing the animations also lets Play begin a fresh, synchronized sequence. */
.waf-hub[data-overview='true'] .waf-scene__motion { animation: none !important; }
.waf-hub[data-overview='true'] .waf-scene__traffic { opacity: 0; }
.waf-hub[data-overview='true'] .waf-hub__link-glow { opacity: .45; }
.waf-hub[data-overview='true'] .waf-hub__response { opacity: 1; }
.waf-hub[data-overview='true'] .waf-scene__step { opacity: .65; }
.waf-hub[data-overview='true'] .waf-scene__step--share { opacity: 1; }
.waf-hub[data-overview='true'][data-static-result='true'] .waf-hub__blocked { opacity: 1; }