/* ========================================
   SKYFALL V3 - PROTOCOL PAGE STYLES
   Enhanced simulation with 14s loop
   Synced with 3-step cards
======================================== */

/* ===========================================
   SIMULATION CONTAINER
   =========================================== */
.sim-container {
    position: relative;
    background: rgba(5, 5, 5, 0.95);
    border: 1px solid rgba(234, 88, 12, 0.3);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    overflow: hidden;
    border-radius: 0;
}

.sim-hud-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #EA580C;
    transition: all 0.3s ease;
    z-index: 10;
}

.sim-tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.sim-tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.sim-bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.sim-br { bottom: 0; right: 0; border-left: none; border-top: none; }

/* ===========================================
   PROTOCOL CARDS - Active State Sync
   =========================================== */
.protocol-card {
    transition: all 0.4s ease;
}

.protocol-card .card-active-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(234, 88, 12, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

/* ===========================================
   BOOT SCREEN (0-14% of 14s = 0-2s)
   =========================================== */
.sim-boot-screen {
    animation: simBootSequence 14s linear infinite;
    pointer-events: none;
}

.sim-boot-bar {
    animation: simBootBar 14s linear infinite;
}

@keyframes simBootSequence {
    0% { opacity: 1; z-index: 50; }
    12% { opacity: 1; }
    14% { opacity: 0; z-index: -1; }
    96% { opacity: 0; z-index: -1; }
    100% { opacity: 1; z-index: 50; }
}

@keyframes simBootBar {
    0% { width: 0; }
    12% { width: 100%; }
    14%, 100% { width: 100%; }
}

/* ===========================================
   NETWORK GRID BACKGROUND
   =========================================== */
.sim-network-grid {
    background-image:
        linear-gradient(rgba(234, 88, 12, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(234, 88, 12, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: simGridPulse 14s linear infinite;
}

@keyframes simGridPulse {
    0%, 14% { opacity: 0; }
    20% { opacity: 0.5; }
    70% { opacity: 0.5; }
    78% { opacity: 1; }
    85% { opacity: 0.3; }
    96% { opacity: 0; }
    100% { opacity: 0; }
}

/* ===========================================
   SCAN LINE
   =========================================== */
.sim-scan-line {
    animation: simScanLine 14s linear infinite;
    height: 2px;
    filter: blur(1px);
}

@keyframes simScanLine {
    0%, 14% { top: 0; opacity: 0; }
    20% { top: 0; opacity: 0.6; }
    50% { top: 100%; opacity: 0.6; }
    51%, 100% { opacity: 0; }
}

/* ===========================================
   SOURCE & DESTINATION NODES
   =========================================== */
.sim-node {
    animation: simNodePulse 14s linear infinite;
}

@keyframes simNodePulse {
    0%, 14% { opacity: 0.3; }
    20% { opacity: 1; }
    90% { opacity: 1; }
    96% { opacity: 0.3; }
    100% { opacity: 0.3; }
}

/* ===========================================
   GATE - Enhanced
   =========================================== */
.sim-gate-container {
    animation: simGateFadeIn 14s linear infinite;
}

@keyframes simGateFadeIn {
    0%, 14% { opacity: 0; transform: translateX(-50%) scale(0.9); }
    20% { opacity: 1; transform: translateX(-50%) scale(1); }
    90% { opacity: 1; }
    96% { opacity: 0; }
    100% { opacity: 0; }
}

/* Scanner beam sweeps down */
.sim-scanner-beam {
    animation: simScannerBeam 14s linear infinite;
}

@keyframes simScannerBeam {
    0%, 14% { top: -20px; opacity: 0; }
    20% { top: -20px; opacity: 0.8; }
    35% { top: 100%; opacity: 0.4; }
    36% { top: -20px; opacity: 0; }
    50% { top: -20px; opacity: 0.8; }
    65% { top: 100%; opacity: 0.4; }
    66%, 100% { top: -20px; opacity: 0; }
}

/* Gate shield activation on threat - synced with threat at 55% */
.sim-gate-shield {
    animation: simGateShield 14s linear infinite;
}

@keyframes simGateShield {
    0%, 64% {
        background: transparent;
        box-shadow: none;
    }
    65% {
        background: rgba(239, 68, 68, 0.2);
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.3), inset 0 0 15px rgba(239, 68, 68, 0.2);
    }
    73% {
        background: rgba(239, 68, 68, 0.4);
        box-shadow: 0 0 40px rgba(239, 68, 68, 0.6), inset 0 0 25px rgba(239, 68, 68, 0.4);
    }
    76% {
        background: rgba(239, 68, 68, 0.6);
        box-shadow: 0 0 60px rgba(239, 68, 68, 0.9), inset 0 0 35px rgba(239, 68, 68, 0.6);
    }
    82% {
        background: rgba(234, 88, 12, 0.2);
        box-shadow: 0 0 20px rgba(234, 88, 12, 0.3);
    }
    88%, 100% {
        background: transparent;
        box-shadow: none;
    }
}

/* Gate alert pulse - synced with threat approaching */
.sim-gate-alert {
    animation: simGateAlert 14s linear infinite;
}

@keyframes simGateAlert {
    0%, 63% { border-color: transparent; transform: scale(1); }
    65% { border-color: rgba(239, 68, 68, 0.8); transform: scale(1); }
    68% { border-color: rgba(239, 68, 68, 0); transform: scale(1.3); }
    70% { border-color: rgba(239, 68, 68, 0.8); transform: scale(1); }
    73% { border-color: rgba(239, 68, 68, 0); transform: scale(1.3); }
    75% { border-color: rgba(239, 68, 68, 0.8); transform: scale(1); }
    78% { border-color: rgba(239, 68, 68, 0); transform: scale(1.4); }
    80%, 100% { border-color: transparent; transform: scale(1); }
}

/* Gate status text - green while safe, red when threat detected */
.sim-gate-status {
    animation: simGateStatus 14s linear infinite;
}

@keyframes simGateStatus {
    0%, 14% { opacity: 0; }
    20%, 54% { color: #22c55e; opacity: 1; }
    55%, 80% { color: #ef4444; opacity: 1; }
    82%, 90% { color: #22c55e; opacity: 1; }
    96% { opacity: 0; }
    100% { opacity: 0; }
}

/* ===========================================
   PACKETS - Safe Traffic
   =========================================== */
.sim-packet {
    opacity: 0;
}

.sim-packet-safe {
    animation: simSafePacket1 14s linear infinite;
}

.sim-packet-safe-2 {
    animation: simSafePacket2 14s linear infinite;
}

.sim-packet-safe-3 {
    animation: simSafePacket3 14s linear infinite;
}

@keyframes simSafePacket1 {
    0%, 18% { left: 0; opacity: 0; }
    20% { left: 0; opacity: 1; }
    40% { left: 100%; opacity: 0; }
    100% { opacity: 0; }
}

@keyframes simSafePacket2 {
    0%, 28% { left: 0; opacity: 0; }
    30% { left: 0; opacity: 1; }
    50% { left: 100%; opacity: 0; }
    100% { opacity: 0; }
}

@keyframes simSafePacket3 {
    0%, 38% { left: 0; opacity: 0; }
    40% { left: 0; opacity: 1; }
    60% { left: 100%; opacity: 0; }
    100% { opacity: 0; }
}

/* ===========================================
   THREAT PACKET - starts at 55% to sync with alert log
   =========================================== */
.sim-packet-threat {
    animation: simThreatPacket 14s linear infinite;
}

.sim-threat-ping {
    animation: simThreatPing 14s linear infinite;
}

@keyframes simThreatPacket {
    0%, 54% { left: 0; opacity: 0; transform: translateY(-50%) scale(1); }
    55% { left: 0; opacity: 1; }
    74% { left: 48%; opacity: 1; transform: translateY(-50%) scale(1); }
    76% { left: 49%; opacity: 1; transform: translateY(-50%) scale(1.5); }
    78% { left: 50%; opacity: 0; transform: translateY(-50%) scale(2); }
    100% { opacity: 0; }
}

@keyframes simThreatPing {
    0%, 54% { transform: scale(1); opacity: 0; }
    55%, 73% { transform: scale(1); opacity: 0.5; }
    74% { transform: scale(1.5); opacity: 0.8; }
    76% { transform: scale(2); opacity: 0; }
    100% { opacity: 0; }
}

/* ===========================================
   EXPLOSION EFFECT - synced with neutralization at 75-78%
   =========================================== */
.sim-explosion-ring {
    animation: simExplosionRing 14s linear infinite;
}

.sim-explosion-ring-2 {
    animation: simExplosionRing2 14s linear infinite;
}

@keyframes simExplosionRing {
    0%, 74% { width: 0; height: 0; opacity: 0; }
    75% { width: 0; height: 0; opacity: 1; }
    82% { width: 120px; height: 120px; opacity: 0; }
    100% { opacity: 0; }
}

@keyframes simExplosionRing2 {
    0%, 75% { width: 0; height: 0; opacity: 0; }
    77% { width: 0; height: 0; opacity: 0.8; }
    85% { width: 180px; height: 180px; opacity: 0; }
    100% { opacity: 0; }
}

/* ===========================================
   PHASE INDICATORS
   =========================================== */
.sim-phase .phase-dot {
    transition: all 0.3s ease;
}

.sim-phase.phase-1 .phase-dot {
    animation: simPhase1Dot 14s linear infinite;
}

.sim-phase.phase-2 .phase-dot {
    animation: simPhase2Dot 14s linear infinite;
}

.sim-phase.phase-3 .phase-dot {
    animation: simPhase3Dot 14s linear infinite;
}

@keyframes simPhase1Dot {
    0%, 13% { background: rgba(255, 255, 255, 0.3); box-shadow: none; }
    14%, 54% { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); }
    55%, 100% { background: rgba(255, 255, 255, 0.3); box-shadow: none; }
}

@keyframes simPhase2Dot {
    0%, 54% { background: rgba(255, 255, 255, 0.3); box-shadow: none; }
    55%, 74% { background: #eab308; box-shadow: 0 0 8px rgba(234, 179, 8, 0.5); }
    75%, 100% { background: rgba(255, 255, 255, 0.3); box-shadow: none; }
}

@keyframes simPhase3Dot {
    0%, 74% { background: rgba(255, 255, 255, 0.3); box-shadow: none; }
    75%, 90% { background: #f97316; box-shadow: 0 0 8px rgba(249, 115, 22, 0.5); }
    92%, 100% { background: rgba(255, 255, 255, 0.3); box-shadow: none; }
}

/* ===========================================
   PROGRESS BAR
   =========================================== */
#sim-progress-bar {
    animation: simProgressBar 14s linear infinite;
}

@keyframes simProgressBar {
    0% { height: 0; }
    14% { height: 0; }
    20% { height: 15%; }
    40% { height: 30%; }
    55% { height: 45%; }
    70% { height: 60%; }
    85% { height: 80%; }
    92% { height: 100%; }
    96%, 100% { height: 0; }
}

/* ===========================================
   TEXT LINES SYNC - Matched to visual events
   Timeline: Boot 0-14%, Detection 14-55%, Analysis 55-75%, Neutralization 75-90%
   =========================================== */
.sim-text-line {
    transition: all 0.3s ease;
    opacity: 0.3;
    filter: blur(0.5px);
}

/* Line 1: System Init - Right after boot (14-22%) */
.sim-text-line:nth-child(1) {
    animation: simTextLine1 14s linear infinite;
}

/* Line 2: Safe Traffic - When green packets flow (20-40%) matches simSafePacket1 */
.sim-text-line:nth-child(2) {
    animation: simTextLine2 14s linear infinite;
}

/* Line 3: Alert - When threat packet appears (55-68%) matches simThreatPacket start at 64% */
.sim-text-line:nth-child(3) {
    animation: simTextLine3 14s linear infinite;
}

/* Line 4: P3 Analysis - During analysis phase (65-75%) */
.sim-text-line:nth-child(4) {
    animation: simTextLine4 14s linear infinite;
}

/* Line 5: Neutralization - When threat is blocked (75-82%) matches explosion at 78% */
.sim-text-line:nth-child(5) {
    animation: simTextLine5 14s linear infinite;
}

/* Line 6: Complete - After explosion settles (82-90%) */
.sim-text-line:nth-child(6) {
    animation: simTextLine6 14s linear infinite;
}

@keyframes simTextLine1 {
    0%, 13% { opacity: 0.4; color: rgba(255, 255, 255, 0.8); transform: translateX(0); filter: blur(0.5px); }
    14%, 22% { opacity: 1; color: #fff; transform: translateX(4px); filter: none; }
    24%, 100% { opacity: 0.4; color: rgba(255, 255, 255, 0.8); transform: translateX(0); filter: blur(0.5px); }
}

@keyframes simTextLine2 {
    0%, 19% { opacity: 0.4; color: rgba(255, 255, 255, 0.8); transform: translateX(0); filter: blur(0.5px); }
    20%, 42% { opacity: 1; color: #4ade80; transform: translateX(4px); filter: none; }
    45%, 100% { opacity: 0.4; color: rgba(255, 255, 255, 0.8); transform: translateX(0); filter: blur(0.5px); }
}

@keyframes simTextLine3 {
    0%, 54% { opacity: 0.4; color: rgba(255, 255, 255, 0.8); transform: translateX(0); filter: blur(0.5px); }
    55%, 68% { opacity: 1; color: #ef4444; transform: translateX(4px); filter: none; }
    70%, 100% { opacity: 0.4; color: rgba(255, 255, 255, 0.8); transform: translateX(0); filter: blur(0.5px); }
}

@keyframes simTextLine4 {
    0%, 64% { opacity: 0.4; color: rgba(255, 255, 255, 0.8); transform: translateX(0); filter: blur(0.5px); }
    65%, 75% { opacity: 1; color: #eab308; transform: translateX(4px); filter: none; }
    77%, 100% { opacity: 0.4; color: rgba(255, 255, 255, 0.8); transform: translateX(0); filter: blur(0.5px); }
}

@keyframes simTextLine5 {
    0%, 74% { opacity: 0.4; color: rgba(255, 255, 255, 0.8); transform: translateX(0); filter: blur(0.5px); }
    75%, 82% { opacity: 1; color: #f97316; transform: translateX(4px); filter: none; }
    84%, 100% { opacity: 0.4; color: rgba(255, 255, 255, 0.8); transform: translateX(0); filter: blur(0.5px); }
}

@keyframes simTextLine6 {
    0%, 81% { opacity: 0.4; color: rgba(255, 255, 255, 0.8); transform: translateX(0); filter: blur(0.5px); }
    82%, 90% { opacity: 1; color: #3b82f6; transform: translateX(4px); filter: none; }
    92%, 100% { opacity: 0.4; color: rgba(255, 255, 255, 0.8); transform: translateX(0); filter: blur(0.5px); }
}

/* Alert dot pulse during alert phase - synced with Line 3 */
.sim-alert-dot {
    animation: simAlertDotPulse 14s linear infinite !important;
}

@keyframes simAlertDotPulse {
    0%, 54% { box-shadow: none; }
    55%, 68% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3); }
    70%, 100% { box-shadow: none; }
}

/* ===========================================
   CARD SYNC ANIMATIONS
   =========================================== */
.protocol-card[data-step="1"] {
    animation: simCard1Active 14s linear infinite;
}

.protocol-card[data-step="2"] {
    animation: simCard2Active 14s linear infinite;
}

.protocol-card[data-step="3"] {
    animation: simCard3Active 14s linear infinite;
}

@keyframes simCard1Active {
    0%, 13% {
        border-color: rgba(113, 113, 122, 0.15);
        box-shadow: none;
    }
    14%, 54% {
        border-color: rgba(34, 197, 94, 0.4);
        box-shadow: 0 0 25px rgba(34, 197, 94, 0.15), inset 0 0 15px rgba(34, 197, 94, 0.03);
    }
    55%, 100% {
        border-color: rgba(113, 113, 122, 0.15);
        box-shadow: none;
    }
}

@keyframes simCard2Active {
    0%, 54% {
        border-color: rgba(113, 113, 122, 0.15);
        box-shadow: none;
    }
    55%, 74% {
        border-color: rgba(234, 179, 8, 0.4);
        box-shadow: 0 0 25px rgba(234, 179, 8, 0.15), inset 0 0 15px rgba(234, 179, 8, 0.03);
    }
    75%, 100% {
        border-color: rgba(113, 113, 122, 0.15);
        box-shadow: none;
    }
}

@keyframes simCard3Active {
    0%, 74% {
        border-color: rgba(249, 115, 22, 0.15);
        box-shadow: none;
    }
    75%, 90% {
        border-color: rgba(249, 115, 22, 0.5);
        box-shadow: 0 0 35px rgba(249, 115, 22, 0.25), inset 0 0 20px rgba(249, 115, 22, 0.05);
    }
    92%, 100% {
        border-color: rgba(249, 115, 22, 0.15);
        box-shadow: none;
    }
}

/* Card step numbers sync */
.protocol-card[data-step="1"] .step-number,
.protocol-card[data-step="1"] .step-icon {
    animation: simStepColor1 14s linear infinite;
}

.protocol-card[data-step="2"] .step-number,
.protocol-card[data-step="2"] .step-icon {
    animation: simStepColor2 14s linear infinite;
}

@keyframes simStepColor1 {
    0%, 13% { color: #374151; }
    14%, 54% { color: #22c55e; }
    55%, 100% { color: #374151; }
}

@keyframes simStepColor2 {
    0%, 54% { color: #374151; }
    55%, 74% { color: #eab308; }
    75%, 100% { color: #374151; }
}

/* Card corners sync */
.protocol-card[data-step="1"] .hud-corner {
    animation: simCorner1 14s linear infinite;
}

.protocol-card[data-step="2"] .hud-corner {
    animation: simCorner2 14s linear infinite;
}

.protocol-card[data-step="3"] .hud-corner {
    animation: simCorner3 14s linear infinite;
}

@keyframes simCorner1 {
    0%, 13% { border-color: #71717a; width: 12px; height: 12px; }
    14%, 54% { border-color: #22c55e; width: 18px; height: 18px; }
    55%, 100% { border-color: #71717a; width: 12px; height: 12px; }
}

@keyframes simCorner2 {
    0%, 54% { border-color: #71717a; width: 12px; height: 12px; }
    55%, 74% { border-color: #eab308; width: 18px; height: 18px; }
    75%, 100% { border-color: #71717a; width: 12px; height: 12px; }
}

@keyframes simCorner3 {
    0%, 74% { border-color: #f97316; width: 12px; height: 12px; }
    75%, 90% { border-color: #f97316; width: 20px; height: 20px; }
    92%, 100% { border-color: #f97316; width: 12px; height: 12px; }
}

/* ===========================================
   PROTOCOL BLOCKQUOTE
   =========================================== */
.protocol-blockquote {
    position: relative;
    border-left: 3px solid #EA580C;
}

.protocol-blockquote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 4rem;
    color: rgba(234, 88, 12, 0.2);
    font-family: Georgia, serif;
    line-height: 1;
}

/* ===========================================
   SPECS ROW HOVER
   =========================================== */
.specs-row {
    transition: all 0.3s ease;
}

.specs-row:hover {
    background: rgba(234, 88, 12, 0.05) !important;
    border-color: rgba(234, 88, 12, 0.3);
}

.specs-row:hover .hud-corner::before {
    background: #EA580C;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 768px) {
    .sim-container {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .sim-text-line {
        font-size: 0.65rem;
    }

    .sim-phase-indicator {
        gap: 0.5rem;
    }

    .sim-explosion-ring,
    .sim-explosion-ring-2 {
        display: none;
    }
}