/* --- ANIMATION-SPECIFIC STYLES for recovery-process.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;
}
.server { width: 100px; height: 100px; border-radius: 12px; font-size: 14px; }
.server.failed { border-color: var(--color-bad); background-color: #332020; }
.user, .team { width: 120px; height: 60px; font-size: 14px; }
.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;}
.disaster { font-size: 64px; border: none; background: transparent; padding: 0; text-shadow: 0 0 15px var(--color-bad); }

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

/* 1. DR Planning Process */
.plan-step {
    width: 150px; height: 80px; font-size: 14px; line-height: 1.3;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--secondary-surface); border-radius: 10px;
    transition: all 0.3s ease;
}
.plan-step.active {
    border-color: var(--accent-color);
    background-color: var(--primary-surface);
    transform: scale(1.05);
}

/* 2. BCDR Concepts */
.business-ops { border-color: var(--color-good); }
.it-ops { border-color: var(--accent-color); position: absolute; width: 300px; height: 100px; top: 300px; left: 450px; } /* Corrected position */
.bc-plan { position: absolute; top: 100px; left: 150px; border: 2px dashed var(--color-good); border-radius: 20px; padding: 20px; text-align: center; }
.dr-plan { position: absolute; top: 300px; left: 150px; border: 2px dashed var(--accent-color); border-radius: 20px; padding: 20px; }

/* 3. Backups */
.storage { width: 100px; height: 100px; font-size: 48px; border-color: var(--color-neutral); }
.data-packet { position: absolute; background-color: var(--color-data); width: 20px; height: 20px; border-radius: 50%; }

/* 4. Alternative Sites */
.site { width: 220px; height: 180px; padding-top: 15px; border: 2px solid; }
.site-title { font-weight: bold; font-size: 16px; }
.site-desc { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.site.primary { border-color: var(--color-good); }
.site.cold { border-color: #aaa; }
.site.warm { border-color: var(--color-warning); }
.site.hot { border-color: var(--color-bad); }

/* 5. Live Recovery */
.os-install {
    position: absolute; width: 300px; height: 200px; background-color: var(--dark-bg);
    border: 2px solid var(--color-bad); border-radius: 10px; text-align: center;
}
.live-cd {
    font-size: 48px; width: 80px; height: 80px; display: grid; place-content: center;
    border-radius: 50%; border: 2px dashed var(--color-good); cursor: pointer;
}
.recovery-tool { position: absolute; z-index: 15; background: #1c4b38; border: 1px solid var(--color-good); padding: 15px; border-radius: 8px; width: 250px; text-align: left; }

/* 6. Plan Testing */
.simulation {
    border: 2px dashed var(--secondary-surface); border-radius: 10px;
    width: 600px; height: 350px; padding-top: 20px;
}
.checklist { width: 250px; font-size: 14px; text-align: left; }
.checklist li { list-style-type: ' ☐ '; transition: all 0.3s; }
.checklist li.checked { list-style-type: ' ✅ '; color: var(--color-good); }

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