/**
 * Nanimation Studios — CSS Background Animations
 * Each animation is scoped to a body class set in functions.php.
 * The HTML elements are still added via YooTheme HTML element per page.
 *
 * @version 1.0.0
 */

/* ==========================================================================
   PARTICLES — Homepage + Services (lighter variant)
   Body class: .animation-particles, .animation-particles-light
   ========================================================================== */

.particle-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background: radial-gradient(ellipse at center, #1a0d3d 0%, #0a0a2e 35%, #16213e 70%, #000000 100%);
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(0.3px);
    opacity: 0.8;
    box-shadow: 0 0 25px currentColor, 0 0 50px currentColor;
    will-change: transform, opacity;
}

.particle.tiny { width: 2px; height: 2px; }
.particle.small { width: 4px; height: 4px; }
.particle.medium { width: 7px; height: 7px; }
.particle.large { width: 12px; height: 12px; }
.particle.xl { width: 16px; height: 16px; }
.particle.xxl { width: 22px; height: 22px; }

.glow-white { background: radial-gradient(circle, #ffffff 0%, #f0f0ff 40%, #e6e6ff 100%); color: #ffffff; }
.glow-light { background: radial-gradient(circle, #e6e6ff 0%, #ccccff 40%, #b3b3ff 100%); color: #e6e6ff; }
.glow-blue { background: radial-gradient(circle, #66b3ff 0%, #4d79ff 40%, #1a53ff 100%); color: #66b3ff; }
.glow-purple { background: radial-gradient(circle, #b380ff 0%, #8066ff 40%, #5033cc 100%); color: #b380ff; }
.glow-deep { background: radial-gradient(circle, #6633cc 0%, #3d1a78 40%, #1a0d3d 100%); color: #6633cc; }
.glow-cyan { background: radial-gradient(circle, #00ffff 0%, #33ccff 40%, #0099cc 100%); color: #00ffff; }
.glow-pink { background: radial-gradient(circle, #ff66cc 0%, #cc4499 40%, #990066 100%); color: #ff66cc; }
.glow-electric { background: radial-gradient(circle, #9966ff 0%, #7744cc 40%, #552299 100%); color: #9966ff; }

@keyframes particleFloat1 {
    0% { transform: translate(0, 100vh) scale(0.1) rotate(0deg); opacity: 0; filter: blur(3px); }
    10% { opacity: 0.8; filter: blur(0.3px); }
    50% { transform: translate(-10vw, 45vh) scale(2.2) rotate(180deg); opacity: 1; }
    90% { opacity: 0.6; }
    100% { transform: translate(-20vw, -10vh) scale(0.05) rotate(360deg); opacity: 0; filter: blur(3px); }
}

@keyframes particleFloat2 {
    0% { transform: translate(0, 100vh) scale(0.2) rotate(0deg); opacity: 0; }
    15% { opacity: 1; }
    40% { transform: translate(15vw, 35vh) scale(2.5) rotate(-120deg); opacity: 1; }
    100% { transform: translate(30vw, -8vh) scale(0.08) rotate(-240deg); opacity: 0; }
}

@keyframes particleFloat3 {
    0% { transform: translate(0, 100vh) scale(0.3) rotate(0deg); opacity: 0; }
    8% { opacity: 0.9; }
    55% { transform: translate(8vw, 30vh) scale(2.0) rotate(270deg); opacity: 1; }
    100% { transform: translate(12vw, -15vh) scale(0.06) rotate(540deg); opacity: 0; }
}

@keyframes particleFloat4 {
    0% { transform: translate(0, 100vh) scale(0.4) rotate(0deg); opacity: 0; }
    20% { opacity: 1; }
    60% { transform: translate(-15vw, 40vh) scale(1.8) rotate(-200deg); opacity: 1; }
    100% { transform: translate(-25vw, -12vh) scale(0.07) rotate(-400deg); opacity: 0; }
}

@keyframes particleFloat5 {
    0% { transform: translate(0, 100vh) scale(0.5) rotate(0deg); opacity: 0; }
    12% { opacity: 1; }
    65% { transform: translate(22vw, 25vh) scale(2.8) rotate(450deg); opacity: 1; }
    100% { transform: translate(35vw, -20vh) scale(0.04) rotate(720deg); opacity: 0; }
}

@keyframes particleFloat6 {
    0% { transform: translate(0, 100vh) scale(0.15) rotate(0deg); opacity: 0; }
    25% { opacity: 0.7; }
    70% { transform: translate(-8vw, 50vh) scale(1.5) rotate(300deg); opacity: 1; }
    100% { transform: translate(-18vw, -5vh) scale(0.09) rotate(600deg); opacity: 0; }
}

.particle:nth-child(1) { left: 5vw; animation: particleFloat1 11s infinite ease-out; animation-delay: 0s; }
.particle:nth-child(2) { left: 15vw; animation: particleFloat2 9s infinite ease-out; animation-delay: 0.4s; }
.particle:nth-child(3) { left: 25vw; animation: particleFloat3 12s infinite ease-out; animation-delay: 0.8s; }
.particle:nth-child(4) { left: 35vw; animation: particleFloat4 8s infinite ease-out; animation-delay: 1.2s; }
.particle:nth-child(5) { left: 45vw; animation: particleFloat5 10s infinite ease-out; animation-delay: 1.6s; }
.particle:nth-child(6) { left: 55vw; animation: particleFloat6 13s infinite ease-out; animation-delay: 2.0s; }
.particle:nth-child(7) { left: 65vw; animation: particleFloat1 9s infinite ease-out; animation-delay: 2.4s; }
.particle:nth-child(8) { left: 75vw; animation: particleFloat2 11s infinite ease-out; animation-delay: 2.8s; }
.particle:nth-child(9) { left: 85vw; animation: particleFloat3 8s infinite ease-out; animation-delay: 3.2s; }
.particle:nth-child(10) { left: 95vw; animation: particleFloat4 12s infinite ease-out; animation-delay: 3.6s; }
.particle:nth-child(11) { left: 10vw; animation: particleFloat5 10s infinite ease-out; animation-delay: 4.0s; }
.particle:nth-child(12) { left: 20vw; animation: particleFloat6 9s infinite ease-out; animation-delay: 4.4s; }
.particle:nth-child(13) { left: 30vw; animation: particleFloat1 13s infinite ease-out; animation-delay: 4.8s; }
.particle:nth-child(14) { left: 40vw; animation: particleFloat2 8s infinite ease-out; animation-delay: 5.2s; }
.particle:nth-child(15) { left: 50vw; animation: particleFloat3 11s infinite ease-out; animation-delay: 5.6s; }
.particle:nth-child(16) { left: 60vw; animation: particleFloat4 10s infinite ease-out; animation-delay: 6.0s; }
.particle:nth-child(17) { left: 70vw; animation: particleFloat5 12s infinite ease-out; animation-delay: 6.4s; }
.particle:nth-child(18) { left: 80vw; animation: particleFloat6 9s infinite ease-out; animation-delay: 6.8s; }
.particle:nth-child(19) { left: 90vw; animation: particleFloat1 8s infinite ease-out; animation-delay: 7.2s; }
.particle:nth-child(20) { left: 2vw; animation: particleFloat2 13s infinite ease-out; animation-delay: 7.6s; }
.particle:nth-child(21) { left: 12vw; animation: particleFloat3 10s infinite ease-out; animation-delay: 8.0s; }
.particle:nth-child(22) { left: 22vw; animation: particleFloat4 11s infinite ease-out; animation-delay: 8.4s; }
.particle:nth-child(23) { left: 32vw; animation: particleFloat5 9s infinite ease-out; animation-delay: 8.8s; }
.particle:nth-child(24) { left: 42vw; animation: particleFloat6 12s infinite ease-out; animation-delay: 9.2s; }
.particle:nth-child(25) { left: 52vw; animation: particleFloat1 8s infinite ease-out; animation-delay: 9.6s; }
.particle:nth-child(26) { left: 62vw; animation: particleFloat2 10s infinite ease-out; animation-delay: 10.0s; }
.particle:nth-child(27) { left: 72vw; animation: particleFloat3 13s infinite ease-out; animation-delay: 10.4s; }
.particle:nth-child(28) { left: 82vw; animation: particleFloat4 11s infinite ease-out; animation-delay: 10.8s; }
.particle:nth-child(29) { left: 92vw; animation: particleFloat5 9s infinite ease-out; animation-delay: 11.2s; }
.particle:nth-child(30) { left: 7vw; animation: particleFloat6 12s infinite ease-out; animation-delay: 11.6s; }
.particle:nth-child(31) { left: 17vw; animation: particleFloat1 10s infinite ease-out; animation-delay: 12.0s; }
.particle:nth-child(32) { left: 27vw; animation: particleFloat2 8s infinite ease-out; animation-delay: 12.4s; }
.particle:nth-child(33) { left: 37vw; animation: particleFloat3 11s infinite ease-out; animation-delay: 12.8s; }
.particle:nth-child(34) { left: 47vw; animation: particleFloat4 13s infinite ease-out; animation-delay: 13.2s; }
.particle:nth-child(35) { left: 57vw; animation: particleFloat5 9s infinite ease-out; animation-delay: 13.6s; }
.particle:nth-child(36) { left: 67vw; animation: particleFloat6 12s infinite ease-out; animation-delay: 14.0s; }
.particle:nth-child(37) { left: 77vw; animation: particleFloat1 10s infinite ease-out; animation-delay: 14.4s; }
.particle:nth-child(38) { left: 87vw; animation: particleFloat2 8s infinite ease-out; animation-delay: 14.8s; }
.particle:nth-child(39) { left: 97vw; animation: particleFloat3 11s infinite ease-out; animation-delay: 15.2s; }
.particle:nth-child(40) { left: 3vw; animation: particleFloat4 13s infinite ease-out; animation-delay: 15.6s; }

.sparkle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #ffffff;
    border-radius: 50%;
    animation: sparkleFloat 4s infinite ease-in-out;
    opacity: 0.4;
    box-shadow: 0 0 10px #ffffff;
}

@keyframes sparkleFloat {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.3) rotate(0deg); }
    25% { opacity: 0.6; transform: translateY(-20px) scale(1.2) rotate(90deg); }
    50% { opacity: 1; transform: translateY(-60px) scale(1.8) rotate(180deg); }
    75% { opacity: 0.8; transform: translateY(-40px) scale(1.5) rotate(270deg); }
}

/* Lighter variant for Services page — reduce particle opacity */
.animation-particles-light .particle { opacity: 0.5; }
.animation-particles-light .sparkle { opacity: 0.2; }


/* ==========================================================================
   AI BRAIN — AI page + Studio
   Body class: .animation-brain
   ========================================================================== */

.ai-brain-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background: radial-gradient(ellipse at center, #0f0326 0%, #070213 35%, #030108 70%, #000000 100%);
    overflow: hidden;
    pointer-events: none;
}

.brain-hemisphere {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 400px;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: brainForm 10s infinite ease-in-out;
}

.brain-left {
    border: 2px solid #00ffff;
    border-radius: 50% 0 0 50% / 60% 0 0 60%;
    border-right: none;
    margin-left: -150px;
    box-shadow: inset 0 0 40px rgba(0, 255, 255, 0.3), 0 0 40px rgba(0, 255, 255, 0.2);
}

.brain-right {
    border: 2px solid #ff00ff;
    border-radius: 0 50% 50% 0 / 0 60% 60% 0;
    border-left: none;
    margin-left: 150px;
    box-shadow: inset 0 0 40px rgba(255, 0, 255, 0.3), 0 0 40px rgba(255, 0, 255, 0.2);
}

@keyframes brainForm {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    20%, 80% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
}

.synapse-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: synapseFire 8s infinite ease-out;
    box-shadow: 0 0 30px currentColor;
}

@keyframes synapseFire {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    10% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(3); }
}

.thought-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border: 2px solid currentColor;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: waveExpand 6s infinite ease-out;
}

@keyframes waveExpand {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    20% { opacity: 0.8; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2.5); }
}

.ai-symbol {
    position: absolute;
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: currentColor;
    opacity: 0;
    animation: symbolFloat 12s infinite ease-in-out;
    text-shadow: 0 0 20px currentColor;
}

@keyframes symbolFloat {
    0%, 100% { opacity: 0; transform: translateY(100vh) rotate(0deg) scale(0.5); }
    20% { opacity: 0.8; }
    50% { transform: translateY(50vh) rotate(180deg) scale(1.2); opacity: 1; }
    80% { opacity: 0.8; }
}

.scan-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, currentColor 50%, transparent 100%);
    opacity: 0.5;
    animation: scanMove 8s infinite linear;
    box-shadow: 0 0 20px currentColor;
}

@keyframes scanMove {
    0% { top: -10%; opacity: 0; }
    10% { opacity: 0.5; }
    90% { opacity: 0.5; }
    100% { top: 110%; opacity: 0; }
}

.code-stream {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: currentColor;
    writing-mode: vertical-lr;
    opacity: 0;
    animation: streamFall 15s infinite linear;
    text-shadow: 0 0 10px currentColor;
    letter-spacing: 2px;
}

@keyframes streamFall {
    0% { opacity: 0; transform: translateY(-20vh); }
    10% { opacity: 0.4; }
    90% { opacity: 0.4; }
    100% { opacity: 0; transform: translateY(120vh); }
}

.lightning {
    position: absolute;
    width: 2px;
    height: 150px;
    background: linear-gradient(to bottom, transparent 0%, currentColor 50%, transparent 100%);
    transform-origin: top center;
    opacity: 0;
    animation: lightningStrike 5s infinite ease-in-out;
    box-shadow: 0 0 15px currentColor;
}

@keyframes lightningStrike {
    0%, 90%, 100% { opacity: 0; }
    92%, 96% { opacity: 1; }
    94%, 98% { opacity: 0.3; }
}

/* Brain animation color classes */
.cyan { color: #00ffff; }
.magenta { color: #ff00ff; }
.electric { color: #00d4ff; }
.violet { color: #9933ff; }
.neon-green { color: #00ff88; }
.pink { color: #ff0080; }

/* Brain synapse positioning */
.synapse-pulse:nth-child(1) { --x: -300px; --y: -200px; animation-delay: 0s; }
.synapse-pulse:nth-child(2) { --x: 300px; --y: -200px; animation-delay: 1s; }
.synapse-pulse:nth-child(3) { --x: -400px; --y: 100px; animation-delay: 2s; }
.synapse-pulse:nth-child(4) { --x: 400px; --y: 100px; animation-delay: 3s; }
.synapse-pulse:nth-child(5) { --x: 0px; --y: -350px; animation-delay: 4s; }
.synapse-pulse:nth-child(6) { --x: -250px; --y: 250px; animation-delay: 5s; }
.synapse-pulse:nth-child(7) { --x: 250px; --y: 250px; animation-delay: 6s; }
.synapse-pulse:nth-child(8) { --x: 0px; --y: 350px; animation-delay: 7s; }


/* ==========================================================================
   MATRIX CODE — Web Development
   Body class: .animation-matrix
   ========================================================================== */

.matrix-code-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background: radial-gradient(ellipse at center, #0a0f1c 0%, #020408 35%, #1a1a2e 70%, #000000 100%);
    overflow: hidden;
    pointer-events: none;
}

.code-line {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-weight: normal;
    line-height: 1.2;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 0 0 8px currentColor, 0 0 15px currentColor;
    will-change: transform, opacity;
    letter-spacing: 1px;
}

.code-line.tiny { font-size: 10px; }
.code-line.small { font-size: 12px; }
.code-line.medium { font-size: 14px; }
.code-line.large { font-size: 16px; }
.code-line.xl { font-size: 18px; }

.glow-matrix-green { color: #00ff41; }
.glow-bright-green { color: #39ff14; }
.glow-cyan { color: #00ffff; }
.glow-electric { color: #00ff88; }
.glow-blue { color: #0088ff; }
.glow-white { color: #ffffff; }
.glow-purple { color: #8a2be2; }
.glow-orange { color: #ff6600; }

@keyframes matrixScroll1 {
    0% { transform: translateX(-100vw); opacity: 0; }
    5% { opacity: 0.8; }
    50% { opacity: 1; }
    95% { opacity: 0.6; }
    100% { transform: translateX(100vw); opacity: 0; }
}

@keyframes matrixScroll2 {
    0% { transform: translateX(100vw); opacity: 0; }
    8% { opacity: 0.9; }
    50% { opacity: 1; }
    92% { opacity: 0.5; }
    100% { transform: translateX(-100vw); opacity: 0; }
}

@keyframes matrixScroll3 {
    0% { transform: translateX(-100vw); opacity: 0; }
    10% { opacity: 0.7; }
    50% { opacity: 1; }
    90% { opacity: 0.4; }
    100% { transform: translateX(100vw); opacity: 0; }
}

@keyframes matrixScroll4 {
    0% { transform: translateX(100vw); opacity: 0; }
    12% { opacity: 0.8; }
    50% { opacity: 1; }
    88% { opacity: 0.6; }
    100% { transform: translateX(-100vw); opacity: 0; }
}

.code-line:nth-child(1) { top: 5vh; animation: matrixScroll1 25s infinite linear; animation-delay: 0s; }
.code-line:nth-child(2) { top: 8vh; animation: matrixScroll2 30s infinite linear; animation-delay: 2s; }
.code-line:nth-child(3) { top: 12vh; animation: matrixScroll3 28s infinite linear; animation-delay: 4s; }
.code-line:nth-child(4) { top: 16vh; animation: matrixScroll4 32s infinite linear; animation-delay: 6s; }
.code-line:nth-child(5) { top: 20vh; animation: matrixScroll1 26s infinite linear; animation-delay: 8s; }
.code-line:nth-child(6) { top: 24vh; animation: matrixScroll2 29s infinite linear; animation-delay: 10s; }
.code-line:nth-child(7) { top: 28vh; animation: matrixScroll3 31s infinite linear; animation-delay: 12s; }
.code-line:nth-child(8) { top: 32vh; animation: matrixScroll4 27s infinite linear; animation-delay: 14s; }
.code-line:nth-child(9) { top: 36vh; animation: matrixScroll1 33s infinite linear; animation-delay: 16s; }
.code-line:nth-child(10) { top: 40vh; animation: matrixScroll2 25s infinite linear; animation-delay: 18s; }
.code-line:nth-child(11) { top: 44vh; animation: matrixScroll3 30s infinite linear; animation-delay: 20s; }
.code-line:nth-child(12) { top: 48vh; animation: matrixScroll4 28s infinite linear; animation-delay: 22s; }
.code-line:nth-child(13) { top: 52vh; animation: matrixScroll1 29s infinite linear; animation-delay: 24s; }
.code-line:nth-child(14) { top: 56vh; animation: matrixScroll2 31s infinite linear; animation-delay: 26s; }
.code-line:nth-child(15) { top: 60vh; animation: matrixScroll3 27s infinite linear; animation-delay: 28s; }
.code-line:nth-child(16) { top: 64vh; animation: matrixScroll4 32s infinite linear; animation-delay: 30s; }
.code-line:nth-child(17) { top: 68vh; animation: matrixScroll1 26s infinite linear; animation-delay: 32s; }
.code-line:nth-child(18) { top: 72vh; animation: matrixScroll2 30s infinite linear; animation-delay: 34s; }
.code-line:nth-child(19) { top: 76vh; animation: matrixScroll3 28s infinite linear; animation-delay: 36s; }
.code-line:nth-child(20) { top: 80vh; animation: matrixScroll4 29s infinite linear; animation-delay: 38s; }
.code-line:nth-child(21) { top: 84vh; animation: matrixScroll1 31s infinite linear; animation-delay: 40s; }
.code-line:nth-child(22) { top: 88vh; animation: matrixScroll2 27s infinite linear; animation-delay: 42s; }
.code-line:nth-child(23) { top: 92vh; animation: matrixScroll3 33s infinite linear; animation-delay: 44s; }
.code-line:nth-child(24) { top: 96vh; animation: matrixScroll4 25s infinite linear; animation-delay: 46s; }

.digital-element {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: bold;
    opacity: 0.3;
    animation: digitalFloat 40s infinite ease-in-out;
    text-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
}

@keyframes digitalFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(0.8); opacity: 0; }
    25% { transform: translate(50px, -30px) rotate(45deg) scale(1.1); opacity: 0.4; }
    50% { transform: translate(-30px, -80px) rotate(90deg) scale(1.3); opacity: 0.6; }
    75% { transform: translate(70px, -50px) rotate(135deg) scale(1.0); opacity: 0.3; }
}


/* ==========================================================================
   HOLOGRAPHIC — Graphic Design + Video Production
   Body class: .animation-holographic
   ========================================================================== */

.holographic-tech-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #0a0a0f 100%);
    overflow: hidden;
    pointer-events: none;
}

.grid-line {
    position: absolute;
    background: linear-gradient(90deg, transparent 0%, #00d4ff 50%, transparent 100%);
    opacity: 0.3;
    animation: gridPulse 4s infinite ease-in-out;
}

.grid-line.horizontal { width: 100vw; height: 1px; left: 0; }
.grid-line.vertical { width: 1px; height: 100vh; top: 0; }

@keyframes gridPulse {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.6; }
}

.data-node {
    position: absolute;
    width: 6px;
    height: 6px;
    border: 2px solid;
    border-radius: 50%;
    background: radial-gradient(circle, currentColor 0%, transparent 70%);
    box-shadow: 0 0 15px currentColor, 0 0 30px currentColor, inset 0 0 10px currentColor;
    animation: nodeFloat 8s infinite ease-in-out;
    opacity: 0.8;
}

@keyframes nodeFloat {
    0%, 100% { transform: translate(0, 0) scale(0.8); opacity: 0.4; }
    25% { transform: translate(20px, -30px) scale(1.2); opacity: 0.9; }
    50% { transform: translate(-15px, -60px) scale(1.5); opacity: 1; }
    75% { transform: translate(25px, -40px) scale(1.1); opacity: 0.7; }
}

.data-stream {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: 300;
    color: #00d4ff;
    opacity: 0.7;
    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
    animation: dataFlow 20s infinite linear;
    white-space: nowrap;
    letter-spacing: 2px;
}

@keyframes dataFlow {
    0% { transform: translateX(-100vw) skewX(-15deg); opacity: 0; }
    10% { opacity: 0.8; }
    50% { opacity: 1; }
    90% { opacity: 0.6; }
    100% { transform: translateX(100vw) skewX(-15deg); opacity: 0; }
}

.node-cyan { color: #00d4ff; border-color: #00d4ff; }
.node-electric { color: #00ff88; border-color: #00ff88; }
.node-blue { color: #0099ff; border-color: #0099ff; }
.node-purple { color: #9966ff; border-color: #9966ff; }
.node-orange { color: #ff6b35; border-color: #ff6b35; }
.node-white { color: #ffffff; border-color: #ffffff; }

.tech-shape {
    position: absolute;
    border: 1px solid;
    background: transparent;
    opacity: 0.4;
    animation: shapeRotate 15s infinite ease-in-out;
}

@keyframes shapeRotate {
    0%, 100% { transform: rotate(0deg) scale(0.8); opacity: 0.2; }
    50% { transform: rotate(180deg) scale(1.2); opacity: 0.6; }
}

.tech-shape.diamond { width: 20px; height: 20px; transform: rotate(45deg); border-color: #00d4ff; }
.tech-shape.hexagon { width: 25px; height: 25px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); border-color: #00ff88; }
.tech-shape.triangle { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 20px solid #9966ff; border-top: none; }


/* ==========================================================================
   MOBILE + ACCESSIBILITY
   ========================================================================== */

@media (max-width: 768px) {
    .brain-hemisphere { width: 200px; height: 300px; }
    .code-stream, .lightning { display: none; }
    .particle.xxl, .particle.xl { display: none; }
    .code-line.xl, .code-line.large { display: none; }
    .data-stream { font-size: 9px; opacity: 0.5; }
    .data-node { width: 4px; height: 4px; }
    .tech-shape { opacity: 0.3; }
    .sparkle { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .particle-background *,
    .ai-brain-background *,
    .matrix-code-background *,
    .holographic-tech-background * {
        animation: none !important;
        opacity: 0.3;
    }
}