/* ===================================================
   ORYS · ia.css — Styles spécifiques IA Industrie 4.1
   Couleur accent : bleu #0096C7 (identique à index.html)
   =================================================== */

:root {
    --neon: #0096C7;
    --neon-rgb: 0, 150, 199;
    --grid: #404040;
}

/* WebGL opacity */
#webgl-container { opacity: 0.5; }

/* Tech cards avec animation verticale au hover */
.tech-card {
    background: linear-gradient(180deg, rgba(26,26,26,0.8) 0%, rgba(10,10,10,0.9) 100%);
    border: 1px solid #404040;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
.tech-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 2px; height: 100%;
    background-color: var(--neon);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s ease;
}
.tech-card:hover::before { transform: scaleY(1); }
.tech-card:hover {
    border-color: rgba(var(--neon-rgb), 0.4);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Pulse glow pour indicateur actif */
@keyframes pulse-glow {
    0%   { box-shadow: 0 0 0 0 rgba(var(--neon-rgb), 0.4); }
    70%  { box-shadow: 0 0 0 10px rgba(var(--neon-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--neon-rgb), 0); }
}
.data-pulse { animation: pulse-glow 2s infinite; }

/* Flux de données MLOps */
@keyframes dashFlow { to { stroke-dashoffset: -20; } }
.data-flow-line { stroke-dasharray: 10; animation: dashFlow 1.5s linear infinite; }

/* Nœuds actifs réseau neuronal */
.node-active { animation: nodeBlink 1.5s infinite alternate; }
@keyframes nodeBlink { from { opacity: 0.3; } to { opacity: 1; } }