/* --- ANIMATION-SPECIFIC STYLES for active-sensors.js --- */

/* Base nodes used across scenes */
.node {
    position: absolute; padding: 15px; border: 2px solid var(--secondary-surface);
    background-color: var(--dark-bg); border-radius: 8px;
    text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 10;
}
.user { width: 100px; height: 60px; }
.server, .dc { width: 120px; height: 120px; border-radius: 12px; }
.attacker { border-color: var(--color-bad); }
.blue-team { border-color: var(--color-good); }
.callout { font-size: 12px; padding: 5px 8px; color: var(--text-muted); }
.arrow { position: absolute; stroke: var(--text-muted); stroke-width: 2; z-index: 5; fill: none;}

/* --- Scene Specific Styles --- */

/* 1. Behavior Analytics (UEBA) */
.ueba-system { width: 150px; height: 150px; border-radius: 50%; border-color: var(--color-defense); display: grid; place-content: center; font-size: 32px; }
.baseline-graph { position: absolute; width: 300px; height: 80px; border: 1px solid var(--secondary-surface); }
.baseline-graph .line { position: absolute; bottom: 10px; left: 10px; width: 280px; height: 30px; background: linear-gradient(to right, #00bcd422, #00bcd4aa); border-bottom: 2px solid var(--accent-color);}
.baseline-graph .anomaly { position: absolute; background-color: var(--color-bad); width: 5px; height: 60px; bottom: 10px; left: 150px; transform-origin: bottom; transform: scaleY(0); transition: transform 0.5s; }
.activity-log { position: absolute; text-align: left; font-size: 13px; font-family: monospace; padding: 8px; background: var(--primary-surface); width: 250px; line-height: 1.6;}
.activity-log div { opacity: 0; }
.activity-log .anomaly-text { color: var(--color-bad); }

/* 2. IDS vs IPS */
.sensor { width: 20px; height: 100px; border-radius: 10px; }
.sensor.ids { border-color: var(--color-neutral); }
.sensor.ips { border-color: var(--accent-color); }
.packet { position: absolute; font-size: 24px; padding: 0; border: none; background: transparent; z-index: 15; }
.packet.malicious { color: var(--color-bad); }
.alert-packet { color: var(--color-warning); }

/* 3. Rule-Based Detection */
.firewall-ips { width: 150px; height: 300px; border-color: var(--accent-color); padding-top: 10px;}
.rule { font-family: monospace; font-size: 12px; background: var(--secondary-surface); padding: 5px; border-radius: 4px; margin: 10px auto; border: 1px solid #555; transition: all 0.2s;}

/* 4. Anomaly-Based Detection */
.traffic-meter { width: 300px; height: 40px; border: 1px solid var(--secondary-surface); padding: 2px; }
.traffic-meter-bar { width: 20%; height: 100%; background: var(--color-good); transition: all 0.5s ease-out; }
.data-packet { position: absolute; width: 10px; height: 5px; border-radius: 2px; }

/* Sub-step Navigation */
.sub-step-nav { position: absolute; bottom: 15px; right: 20px; z-index: 100; }
.sub-step-button { background-color: var(--secondary-surface); color: var(--text-muted); border: 1px solid #555; padding: 8px 15px; border-radius: 8px; cursor: pointer; transition: all 0.2s; margin-left: 5px; }
.sub-step-button:hover:not(:disabled) { background-color: var(--accent-color); color: var(--dark-bg); }
.sub-step-button:disabled { cursor: not-allowed; opacity: 0.3; }