/* workflow.css */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;900&family=Fira+Code:wght@400;600&display=swap');

:root {
    --color-primary: #3b82f6; /* Blue */
    --color-accent: #8b5cf6; /* Purple */
    --color-emerald: #10b981;
    --color-rose: #f43f5e;
    --color-amber: #f59e0b;
    --color-bg: #020617; /* Slate 950 */
}

body {
    background-color: var(--color-bg);
    color: #f8fafc;
    font-family: 'Outfit', sans-serif;
    overflow-x: hidden;
}

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, var(--color-primary), var(--color-emerald));
}

.text-gradient-rose {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, var(--color-rose), var(--color-amber));
}

.glass-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Animations */
.step-container {
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-container.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Data Particle Animation */
.particle-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.in-view .particle-path {
    animation: dash 3s linear forwards;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

/* Floating Elements */
.float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* Pulse Glow */
.glow-primary {
    box-shadow: 0 0 40px -10px var(--color-primary);
}
.glow-emerald {
    box-shadow: 0 0 40px -10px var(--color-emerald);
}
.glow-rose {
    box-shadow: 0 0 40px -10px var(--color-rose);
}

/* Terminal typing effect */
.typing-effect {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--color-emerald);
    width: 0;
}

.in-view .typing-effect {
    animation: typing 2s steps(40, end) forwards, blink 1s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: var(--color-emerald); }
}

/* Radar Sweep */
.radar {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}
.radar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    background: conic-gradient(from 0deg, transparent 70%, rgba(59, 130, 246, 0.5) 100%);
    transform-origin: 0% 0%;
    animation: scan 4s linear infinite;
}

@keyframes scan {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}