/* TELEMETRY CANVAS & POWERLINE NARRATIVE */

/* 1. CONTAINER: Glass Monitor */
.lex-telemetry-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 180px;
    background: rgba(10, 15, 20, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 0 20px rgba(255,255,255,0.05);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.5s ease;
}

/* 2. UI CHROME: Crosshairs */
.lex-canvas-ui {
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
    z-index: 10;
}

/* New Diegetic System Status */
.system-status {
    position: absolute;
    top: 15px;
    left: 15px;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    z-index: 30;
    opacity: 0.9;
    text-transform: uppercase;
}

.lex-corner-tl, .lex-corner-tr, .lex-corner-bl, .lex-corner-br {
    width: 8px; height: 8px; border-color: rgba(255,255,255,0.4); border-style: solid; position: absolute;
}
.lex-corner-tl { border-width: 1px 0 0 1px; top: 0; left: 0; }
.lex-corner-tr { border-width: 1px 1px 0 0; top: 0; right: 0; }
.lex-corner-bl { border-width: 0 0 1px 1px; bottom: 0; left: 0; }
.lex-corner-br { border-width: 0 1px 1px 0; bottom: 0; right: 0; }

/* 3. DATA FEED: Content Layers */
.lex-data-feed {
    width: 100%; height: 100%;
    background: rgba(10, 15, 20, 0.05); /* See-through glass */
    backdrop-filter: blur(24px); /* Heavy blur for depth */
    position: relative;
    overflow: hidden;
}

/* Layer Management */
.feed-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Active State Logic via Parent Data Attribute */
.lex-telemetry-canvas[data-state="0"] .layer-0,
.lex-telemetry-canvas[data-state="1"] .layer-1,
.lex-telemetry-canvas[data-state="2"] .layer-2,
.lex-telemetry-canvas[data-state="3"] .layer-3,
.lex-telemetry-canvas[data-state="4"] .layer-4 {
    opacity: 1;
}

/* --- STAGE 4: LOOP COMPLETE --- */
.loop-complete-icon {
    font-size: 48px;
    color: #22C55E;
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.6);
    opacity: 0;
    transform: scale(0.5);
    animation: scaleCheck 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.2s;
}

.loop-complete-text {
    position: absolute;
    bottom: 40px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: #22C55E;
    letter-spacing: 2px;
    opacity: 0;
    animation: fadeInCheck 0.5s ease forwards 0.6s;
}

@keyframes scaleCheck {
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeInCheck {
    to { opacity: 1; }
}

/* --- STAGE 0: RAW FEED --- */
.raw-text {
    font-family: 'Space Mono', monospace;
    font-size: 10px; /* Reduced from 12px */
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 1px; /* Tighter tracking */
    
    /* Position Top-Left */
    position: absolute;
    top: 15px; /* Tighter padding */
    left: 15px;
    z-index: 10;
    
    text-shadow: 0 2px 4px rgba(0,0,0,0.9);
    
    /* HUD Scrim for maximum legibility */
    background: rgba(0, 0, 0, 0.6);
    padding: 6px 10px; /* Reduced padding */
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
}

/* --- STAGE 1: ANNOTATE (Tower Scan) --- */
.tower-graphic {
    width: 100%; height: 100%;
    background-image: url('../images/utility-pole.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(20%) contrast(1.1) brightness(0.7) sepia(20%) hue-rotate(180deg); /* Cyberpunk blue tint */
    position: absolute;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.8); /* Vignette */
}
.tower-graphic.dimmed { opacity: 0.3; }

.scan-laser {
    position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: #00FFCC;
    box-shadow: 0 0 10px #00FFCC;
    animation: laserScan 2s linear infinite;
    z-index: 5;
}
@keyframes laserScan { 0% { top: 0; } 100% { top: 100%; } }

.insulatorbox {
    position: absolute;
    border: 1px solid #00FFCC;
    box-shadow: 0 0 5px rgba(0,255,204,0.3);
    z-index: 4;
    background: rgba(0, 255, 204, 0.1); /* Slight fill to pop against real image */
}
/* DENSE ANNOTATION POSITIONS (Refined for Precision & Readability) */
/* Transformers - Tighter fit */
.box-tf-1 { top: 49%; left: 49%; width: 38px; height: 50px; } 
.box-tf-2 { top: 46%; left: 63%; width: 38px; height: 50px; }

/* Insulators - Smaller, more precise targets */
.box-in-1 { top: 23%; left: 59%; width: 22px; height: 18px; } /* Top High */
.box-in-2 { top: 33%; left: 46%; width: 18px; height: 28px; } /* Side Fuse */
.box-in-3 { top: 59%; left: 63%; width: 16px; height: 20px; } /* Lower Small 1 */
.box-in-4 { top: 66%; left: 61%; width: 16px; height: 20px; } /* Lower Small 2 */

/* Staggered Reveal for Density */
.box-tf-1 .anno-label { animation-delay: 0.1s; }
.box-tf-2 .anno-label { animation-delay: 0.2s; }
.box-in-1 .anno-label { animation-delay: 0.3s; }
.box-in-2 .anno-label { animation-delay: 0.4s; }
.box-in-3 .anno-label { animation-delay: 0.5s; }
.box-in-4 .anno-label { animation-delay: 0.6s; }

.red-alert {
    animation: flashRed 1s infinite;
}
@keyframes flashRed {
    0%, 100% { border-color: #00FFCC; }
    50% { border-color: #FF4500; box-shadow: 0 0 10px #FF4500; }
}

/* STAGE 2: INTEL (Taxonomy Enrichment) */
.purple-box {
    border-color: #8A2BE2 !important;
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.4) !important;
    background: rgba(138, 43, 226, 0.1);
}

.purple-box .anno-label {
    background: #8A2BE2 !important;
    color: #FFF !important;
    top: -20px !important;
}

.taxonomy-card {
    position: absolute;
    background: rgba(15, 10, 20, 0.95);
    border: 1px solid #8A2BE2;
    border-radius: 4px;
    padding: 8px;
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    color: #FFF;
    width: 95px;
    opacity: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    animation: cardPop 0.4s ease-out forwards;
    z-index: 10;
}

.card-tf { top: 45%; right: 5%; left: auto; animation-delay: 0.2s; }
.card-in { top: 10%; left: 5%; right: auto; animation-delay: 0.4s; }

.tax-header {
    color: #8A2BE2;
    font-weight: 800;
    border-bottom: 1px solid rgba(138, 43, 226, 0.3);
    margin-bottom: 4px;
    padding-bottom: 2px;
    letter-spacing: 0.5px;
}

.tax-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}

.tax-row .key { color: #888; }
.tax-row .val { color: #FFF; text-align: right; font-weight: bold; }

.tax-line {
    position: absolute;
    background: #8A2BE2;
    height: 1px;
    transform-origin: 0 50%;
    opacity: 0;
    animation: lineGrow 0.4s ease-out forwards;
}

.line-tf { 
    top: 52%; right: 38%; left: auto; width: 15px; 
    animation-delay: 0.2s; 
}
.line-in { 
    top: 26%; left: 40%; width: 50px; transform: none; 
    animation-delay: 0.4s; 
}

@keyframes cardPop {
    0% { transform: translateY(5px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes lineGrow {
    0% { transform: scaleX(0); opacity: 0; }
    100% { transform: scaleX(1); opacity: 1; }
}

/* --- STAGE 3: OPERATE (Snow/Anomaly) --- */
.snow-overlay {
    position: absolute; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.7; /* Increased for visibility */
    animation: snowFall 0.2s steps(4) infinite;
    mix-blend-mode: overlay;
    z-index: 5; /* Ensure on top of graphic */
}
@keyframes snowFall { 0% { transform: translateY(0); } 100% { transform: translateY(10px); } }

/* Loop Visual: Curved Arrow */
.retrain-loop-visual {
    position: absolute;
    inset: 15px; /* Slight margin */
    pointer-events: none;
    z-index: 30;
    opacity: 0;
    animation: loopAppear 1s ease-out forwards 1.5s; /* Delay after red alert */
}

.loop-curve {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    border: 2px dashed #FF4500;
    border-radius: 50%;
    border-bottom-color: transparent; /* Open bottom */
    border-right-color: transparent;  /* Open right */
    transform: rotate(-45deg); /* Arc from top-right to bottom-left */
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.2);
}

.loop-head {
    position: absolute;
    top: 15%; left: 15%; /* End of arc */
    width: 0; height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 12px solid #FF4500; /* Arrow pointing left */
    transform: rotate(-30deg); /* Angle to match arc tangent */
    filter: drop-shadow(0 0 5px #FF4500);
}

.loop-label {
    position: absolute;
    top: 5px;
    left: 5px;
    /* Remove centering transform */
    transform: none;
    color: #FF4500;
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.9);
    padding: 3px 6px;
    border: 1px solid #FF4500;
    border-radius: 3px;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(255,69,0,0.5);
    z-index: 40;
}

@keyframes loopAppear {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.flicker { animation: boxFlicker 0.1s infinite; }
@keyframes boxFlicker { 0% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 1; } }

.anomaly-warning {
    position: absolute;
    bottom: 20px;
    left: 10px;
    background: #FF4500;
    color: #000;
    font-weight: bold;
    font-size: 8px; /* Reduced font size */
    padding: 3px 6px; /* Reduced padding */
    animation: warnPulse 0.5s infinite;
    z-index: 20;
}
@keyframes warnPulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* Technical Details Block for Stage 3 */
.anomaly-details {
    position: absolute;
    bottom: 20px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #FF4500;
    padding: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    z-index: 20;
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.3);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    width: 90px;
    margin-bottom: 2px;
}
.detail-row:last-child { margin-bottom: 0; }

.detail-row .lbl { color: #888; }
.detail-row .val { color: #FFF; font-weight: bold; text-align: right; }
.detail-row .text-red { color: #FF4500; }

/* Critical Label Override */
.failure-label {
    background: #FF4500 !important;
    color: #000 !important;
    font-weight: 900 !important;
    animation: none !important; /* Don't fade in/out with box, stay visible */
    opacity: 1 !important;
    top: -18px !important;
    box-shadow: 0 0 8px #FF4500 !important;
}

/* Ensure Red Alert Box pulses heavily */
.red-alert {
    border-color: #FF4500 !important;
    box-shadow: 0 0 15px #FF4500 !important;
    background: rgba(255, 69, 0, 0.2) !important;
    animation: alertFlash 0.5s infinite !important;
}

@keyframes alertFlash {
    0%, 100% { opacity: 1; border-color: #FF4500; }
    50% { opacity: 0.4; border-color: #FFF; }
}

/* Modifiers for Step Blocks */
.lex-step-block.active .lex-h1 {
    color: #fff;
    text-shadow: none;
}

.lex-step-block.active .lex-step-title {
    color: #fff;
    text-shadow: 0 0 20px rgba(255,255,255,0.4);
}

.lex-step-block {
    opacity: 0.1;
    transition: all 0.5s;
    filter: blur(2px); /* Default state is blurred */
}

.lex-step-block.active {
    opacity: 1;
    filter: blur(0); /* Active state is sharp */
}

.lex-step-block:not(.active) {
    /* Redundant but keeps the logic clear if specific overrides needed later */
    filter: blur(2px);
}