/* OSINT Dashboard — 4D Depth Effects */
/* Perspective, parallax, holographic shimmer, frosted glass, z-elevation */

/* Global perspective container */
.main{perspective:1200px;perspective-origin:50% 50%}

/* Card elevation system — z-depth layers */
.card,.dash-stat,.ew-region,.fl-region,.mar-card{transform-style:preserve-3d;transition:transform .4s cubic-bezier(.23,1,.32,1),box-shadow .4s ease}

/* 4D parallax tilt on hover */
.dash-stat:hover{transform:translateY(-4px) rotateX(2deg) rotateY(-1deg) scale(1.02);box-shadow:0 12px 40px rgba(0,0,0,.4),0 0 1px rgba(0,212,170,.3)}
.card:hover{transform:translateY(-3px) rotateX(1deg);box-shadow:0 16px 48px rgba(0,0,0,.35),0 0 1px rgba(14,165,233,.2)}

/* Holographic shimmer border */
@keyframes holoShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.dash-stat::after,.card::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(0,212,170,.4),rgba(14,165,233,.3),rgba(139,92,246,.3),rgba(0,212,170,.4));background-size:300% 300%;animation:holoShimmer 6s ease infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:0;transition:opacity .4s ease;z-index:1}
.dash-stat:hover::after,.card:hover::after{opacity:1}

/* Critical threat cards get persistent holo glow */
.card[style*="border-color:var(--danger)"]::after,.dash-stat.critical-glow::after{opacity:.6;animation:holoShimmer 3s ease infinite}

/* Frosted glass depth layers */
.depth-layer-1{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(17,24,39,.7)}
.depth-layer-2{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgba(17,24,39,.5)}
.depth-layer-3{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);background:rgba(17,24,39,.3)}

/* Z-elevation classes */
.z-elevated{box-shadow:0 8px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05)}
.z-floating{box-shadow:0 16px 48px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);transform:translateZ(20px)}
.z-overlay{box-shadow:0 24px 64px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);transform:translateZ(40px)}

/* Ambient glow for active/critical elements */
@keyframes ambientGlow{0%,100%{box-shadow:0 0 15px rgba(0,212,170,.1),0 0 30px rgba(0,212,170,.05)}50%{box-shadow:0 0 25px rgba(0,212,170,.2),0 0 50px rgba(0,212,170,.1)}}
.ambient-glow{animation:ambientGlow 4s ease-in-out infinite}

@keyframes dangerGlow{0%,100%{box-shadow:0 0 15px rgba(239,68,68,.15),0 0 30px rgba(239,68,68,.08)}50%{box-shadow:0 0 30px rgba(239,68,68,.25),0 0 60px rgba(239,68,68,.15)}}
.danger-glow{animation:dangerGlow 3s ease-in-out infinite}

/* Data flow lines — animated borders */
@keyframes dataFlow{0%{background-position:0 0}100%{background-position:200px 0}}
.data-flow-border{border-image:repeating-linear-gradient(90deg,var(--accent) 0,var(--accent) 8px,transparent 8px,transparent 16px) 1;animation:dataFlow 2s linear infinite}

/* Scan line effect for SOC/NOC displays */
@keyframes scanLine{0%{top:-2px}100%{top:100%}}
.scan-line::before{content:'';position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,212,170,.4),transparent);animation:scanLine 4s linear infinite;pointer-events:none;z-index:2}

/* 4D temporal playback bar */
.temporal-bar{background:rgba(10,14,23,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,212,170,.2);padding:6px 16px;display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text2)}
.temporal-bar input[type="range"]{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none;cursor:pointer}
.temporal-bar input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 8px rgba(0,212,170,.4)}
.temporal-bar button{background:none;border:1px solid var(--border);color:var(--text2);font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer;transition:.15s}
.temporal-bar button:hover{border-color:var(--accent);color:var(--accent)}
.temporal-bar button.active{background:var(--accent);color:#000;border-color:var(--accent)}
.temporal-bar .t-time{font-family:'Courier New',monospace;font-size:12px;font-weight:700;color:var(--accent);min-width:80px;text-align:center}
.temporal-bar .t-label{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}

/* === V52.0 — 4D MASTERPIECE EFFECTS === */

/* Radar sweep — rotating conic gradient for threat cards */
@keyframes radarSweep{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.radar-sweep{position:relative;overflow:hidden}
.radar-sweep::before{content:'';position:absolute;top:50%;left:50%;width:200%;height:200%;transform-origin:center;background:conic-gradient(from 0deg,transparent 0deg,transparent 340deg,rgba(0,212,170,.15) 355deg,rgba(0,212,170,.3) 360deg);animation:radarSweep 4s linear infinite;pointer-events:none;z-index:1;margin-top:-100%;margin-left:-100%;border-radius:50%}
.radar-sweep.threat-active::before{background:conic-gradient(from 0deg,transparent 0deg,transparent 340deg,rgba(239,68,68,.2) 355deg,rgba(239,68,68,.4) 360deg);animation-duration:2.5s}

/* Matrix data rain — vertical falling lines on surfaces */
@keyframes matrixRain{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
.matrix-rain{position:relative;overflow:hidden}
.matrix-rain::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(90deg,transparent,transparent 30px,rgba(0,212,170,.03) 30px,rgba(0,212,170,.03) 31px);pointer-events:none;z-index:0}
.matrix-rain::after{content:'';position:absolute;top:-100%;left:0;right:0;height:100%;background:repeating-linear-gradient(0deg,transparent 0,transparent 20px,rgba(0,212,170,.06) 20px,rgba(0,212,170,.06) 21px);animation:matrixRain 8s linear infinite;pointer-events:none;z-index:0;opacity:.5}

/* Tactical grid — subtle animated background grid */
@keyframes gridPulse{0%,100%{opacity:.03}50%{opacity:.08}}
.tactical-grid{background-image:linear-gradient(rgba(0,212,170,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,170,.04) 1px,transparent 1px);background-size:40px 40px;animation:gridPulse 6s ease-in-out infinite}

/* Pulsing crosshair — for target/priority elements */
@keyframes crosshairPulse{0%,100%{box-shadow:inset 0 0 0 1px rgba(0,212,170,.1)}50%{box-shadow:inset 0 0 0 2px rgba(0,212,170,.25),0 0 20px rgba(0,212,170,.08)}}
.crosshair-pulse{animation:crosshairPulse 3s ease-in-out infinite}

/* Enhanced scan line — threat-level aware */
.scan-line-critical::before{background:linear-gradient(90deg,transparent,rgba(239,68,68,.5),transparent)!important;animation:scanLine 2s linear infinite!important}
.scan-line-elevated::before{background:linear-gradient(90deg,transparent,rgba(249,115,22,.4),transparent)!important;animation:scanLine 3s linear infinite!important}

/* Signal pulse — expanding ring from center of element */
@keyframes signalPulse{0%{transform:translate(-50%,-50%) scale(0);opacity:.6}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.signal-pulse::after{content:'';position:absolute;top:50%;left:50%;width:120%;height:120%;border:2px solid var(--accent);border-radius:50%;animation:signalPulse 3s ease-out infinite;pointer-events:none;z-index:1}

/* Data stream — horizontal flowing dots */
@keyframes dataStream{0%{background-position:0 0}100%{background-position:100px 0}}
.data-stream{background-image:radial-gradient(circle 1px,rgba(0,212,170,.3) 1px,transparent 1px);background-size:20px 20px;animation:dataStream 3s linear infinite}

/* Threat level border animations */
@keyframes threatBorderHigh{0%,100%{border-color:rgba(239,68,68,.3)}50%{border-color:rgba(239,68,68,.8)}}
@keyframes threatBorderElevated{0%,100%{border-color:rgba(249,115,22,.2)}50%{border-color:rgba(249,115,22,.6)}}
.threat-border-high{animation:threatBorderHigh 2s ease-in-out infinite}
.threat-border-elevated{animation:threatBorderElevated 3s ease-in-out infinite}

/* Depth-of-field blur for background elements */
.dof-bg{filter:blur(1px);opacity:.7;transition:filter .3s,opacity .3s}
.dof-bg:hover{filter:none;opacity:1}

/* Holographic text shimmer */
@keyframes holoText{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.holo-text{background:linear-gradient(90deg,var(--accent),#06b6d4,#8b5cf6,var(--accent));background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:holoText 4s linear infinite}

/* Tab panel transitions — override layout.css display:none for smooth animation */
.panel{display:block!important;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;pointer-events:none;position:absolute;height:0;overflow:hidden;width:100%}
.panel.active{opacity:1;transform:translateY(0);pointer-events:auto;position:relative;height:auto;overflow:visible}

/* Reduced motion respect */
@media(prefers-reduced-motion:reduce){
  .dash-stat:hover,.card:hover{transform:translateY(-2px);animation:none}
  .dash-stat::after,.card::after{animation:none}
  .scan-line::before,.scan-line-critical::before,.scan-line-elevated::before{animation:none;display:none}
  .ambient-glow,.danger-glow,.radar-sweep::before,.matrix-rain::after,.signal-pulse::after{animation:none}
  .tactical-grid{animation:none}
  .holo-text{animation:none;-webkit-text-fill-color:var(--accent)}
  .panel{transition:none}
}