/* ========== Traffic Flow Diagram Animation ========== */

@keyframes anim-pulse {
  0%   { transform: scale(1);   filter: drop-shadow(0 0 4px currentColor);  }
  50%  { transform: scale(1.4); filter: drop-shadow(0 0 12px currentColor); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 4px currentColor);  }
}

.traffic-anim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;

  /* Scroll wrapper — isolate overflow so shadow is not clipped */
  & .anim-scroll {
    /*overflow-x: auto;*/
    /*width: 100%;*/
    /*padding: 24px;          !* room for box-shadow to breathe *!*/
    /*margin: -24px;          !* offset the extra layout space *!*/
    box-sizing: border-box;
  }

  & .diagram-container {
    width: 910px;
    height: 400px;
    background-color: var(--bg-elev);
    border-radius: var(--r-md);
    border: 1px solid var(--hairline);
    position: relative;
    box-shadow: var(--shadow-lg);
    font-family: var(--font-mono);
    transition: background-color .3s, border-color .3s;

    & svg {
      width: 100%;
      height: 100%;
    }

    /* Block groups */
    & .block-group {
      opacity: 0.45;
      transition: opacity .4s ease;

      &.active { opacity: 1; }
    }

    /* Box fills */
    & .box {
      fill: var(--surface);
      stroke: var(--hairline);
      stroke-width: 1.5;
      transition: fill .3s, stroke .3s;
    }

    & .entry-box {
      fill: var(--bg-elev);
      stroke: var(--hairline-strong);
      stroke-width: 1.5;
      transition: fill .3s, stroke .3s;
    }

    & .block-group.active .entry-box {
      stroke: var(--fg-faint);
    }

    & .log-box {
      fill: var(--bg);
      stroke: var(--hairline);
      stroke-width: 1;
      transition: fill .3s, stroke .3s;
    }

    /* Text elements */
    & .text-header {
      fill: var(--fg-muted);
      font-family: "Ubuntu", sans-serif;
      font-size: 18px;
      font-weight: bold;
      transition: fill .3s;
    }

    & .text-normal {
      fill: var(--fg-soft);
      font-size: 13px;
      transition: fill .3s;

      .block-group.active & { fill: var(--fg); }
    }

    & .text-addr {
      fill: var(--fg-faint);
      font-size: 12px;
      transition: fill .3s;

      .block-group.active & { fill: var(--fg-soft); }
    }

    & .text-sub {
      fill: var(--fg-soft);
      font-size: 12px;
      transition: fill .3s;
    }

    /* Check row text */
    & .chk-txt {
      fill: var(--fg-soft);
      font-size: 13px;
      transition: fill .3s, opacity .3s;

      &.bright { fill: var(--fg); font-weight: bold; }
      &.faded  { opacity: 0.45; }
      &.fail   { fill: var(--err); font-weight: bold; }
    }

    /* Check row SVG icons */
    & g[id^="chk-"] {
      & > svg {
        color: var(--fg-soft);
        transition: color .3s, opacity .3s;
      }

      &.bright > svg { color: var(--fg); }
      &.faded  > svg { opacity: 0.15; }
      &.fail   > svg { color: var(--err); }
    }

    /* Network boundary dashes */
    & .network-bound {
      stroke: var(--hairline-strong);
      stroke-width: 1.5;
      stroke-dasharray: 6 6;
      opacity: 0.5;
      transition: stroke .3s;
    }

    & .network-label {
      fill: var(--fg-faint);
      font-size: 11px;
      font-weight: bold;
      text-anchor: middle;
      letter-spacing: 2px;
      transition: fill .3s;
    }

    /* Check dots (inside node box) — r is a CSS geometry property for SVG circles */
    & .chk-dot {
      r: 4px;
      fill: var(--surface-2);
      transition: fill .3s, r .3s, filter .3s;

      &.faded  { opacity: 0.15; }
      &.bright { r: 5.5px; filter: drop-shadow(0 0 6px currentColor); }
      &.fail   { r: 5.5px; fill: var(--err) !important; filter: drop-shadow(0 0 6px var(--err)); }
    }

    /* Border connection dots — r must be set here; no r attribute in SVG markup */
    & .border-dot {
      r: 4.5px;
      stroke: none;
      opacity: 0;
      transition: filter .3s;

      &.active { opacity: 1; }
      &.fail   { fill: var(--err) !important; filter: drop-shadow(0 0 6px var(--err)); }
    }

    /* Pulsing end dot on destination */
    & .end-dot {
      r: 6px;
      opacity: 0;
      transition: opacity .3s, fill .3s;
      transform-origin: center;

      &.active {
        opacity: 1;
        animation: anim-pulse 1.5s infinite;
      }
    }

    /* Animated path lines */
    & .path-line {
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0;

      &.active { opacity: 1; }
    }

    /* Block title bar */
    & .block-title-bg {
      fill: var(--surface-2);
      stroke: var(--hairline-strong);
      stroke-width: 1;
      transition: fill .3s, stroke .3s;
    }

    & .block-title-text {
      fill: var(--fg);
      font-size: 13px;
      font-weight: bold;
      letter-spacing: 0.5px;
      transition: fill .3s;
    }

    /* Console log lines */
    & .log-text {
      fill: var(--ok);
      font-size: 13px;
      font-family: var(--font-mono);
      opacity: 0;
      transition: opacity .3s;
    }
  }

  /* Scenario navigation dots */
  & .anim-controls {
    display: flex;
    gap: 12px;
    align-items: center;

    & .nav-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      cursor: pointer;
      opacity: 0.55;
      transition: opacity .3s, transform .3s, box-shadow .3s;

      &:hover {
        opacity: 0.75;
        transform: scale(1.15);
      }

      &.active {
        opacity: 1;
        transform: scale(1.35);
      }
    }
  }
}