/* --- ANIMATION-SPECIFIC STYLES for identity.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; }
.user.compromised { border-color: var(--color-bad); background-color: #332020; }
.server { width: 120px; height: 120px; border-radius: 12px; }
.attacker { border-color: var(--color-warning); }
.callout { font-size: 12px; padding: 5px 8px; border-color: var(--color-neutral); color: var(--text-muted); }
.arrow { position: absolute; stroke: var(--text-muted); stroke-width: 2; z-index: 5; }

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

/* 1. Attack Chain */
.credential-packet { font-size: 24px; }
.darknet-market { font-size: 48px; border-color: var(--color-defense); }
.botnet { font-size: 48px; border-color: var(--color-warning); }
.email-packet { font-size: 24px; transform: rotate(-15deg); }

/* 2. Phishing */
.social-icon { font-size: 32px; border: none; background: transparent; padding: 0; }
.email-icon { font-size: 48px; padding: 0; border: none; background: transparent; }

/* 3. Brute Force */
.terminal { font-family: 'Courier New', monospace; font-size: 14px; text-align: left; min-height: 120px; width: 450px; background-color: #0c0c0c; }
.login-attempt { position: absolute; width: 10px; height: 10px; border-radius: 50%; }

/* 4. Social Engineering (SET) */
.set-terminal { border-color: var(--color-bad); background-color: #1a0000; width: 600px; padding: 10px; font-family: 'Courier New', monospace; white-space: pre; font-size: 13px; text-align: left;}
.set-terminal div { margin-bottom: 2px; opacity: 0; }
.set-terminal span { color: var(--color-warning); }
.pdf-icon { font-size: 48px; border: none; background: transparent; }

/* 5. Pass the Hash */
.hash-icon { background: var(--color-bad); color: white; padding: 8px; font-family: 'Courier New', monospace; font-size: 12px; border-radius: 4px; text-align: center; }

/* 6. Mobile Theft */
.mobile-device { width: 220px; height: 420px; background: #111; border: 5px solid var(--secondary-surface); border-radius: 30px; }
.mobile-screen { position: absolute; width: 200px; height: 400px; background: var(--dark-bg); top: 10px; left: 10px; }
.keyboard-icon, .otp-code { position: absolute; color: var(--text-color); font-size: 14px; }
.otp-code { padding: 5px; background: #005a9e; border-radius: 4px; }
.app-icon { position: absolute; font-size: 40px; text-align: center; }
.app-icon.legit { border-bottom: 3px solid var(--color-good); }
.app-icon.malicious { border-bottom: 3px solid var(--color-bad); }

/* 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; }