/* --- Particle Animation ---
   Usage:
   1. Include this CSS
   2. Add <div id="particles"></div> inside a positioned container
   3. Include js/background.js
*/

#particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.particle {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    will-change: transform;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.particle.circle {
    border-radius: 50%;
    background: rgba(179, 100, 80, 0.45);
}

.particle.line {
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(to right, rgba(180, 175, 238, 0.4), rgba(180, 175, 238, 0.15));
    transform-origin: center center;
}

@keyframes drift {
    0%   { transform: translate(0, 0); opacity: 0; }
    2%   { opacity: 0.7; }
    50%  { transform: translate(40px, -110px); opacity: 0.7; }
    98%  { opacity: 0.7; }
    100% { transform: translate(80px, -220px); opacity: 0; }
}

@keyframes line-drift {
    0%   { transform: translate(0, 0) rotate(110deg); opacity: 0; }
    2%   { opacity: 0.5; }
    50%  { transform: translate(40px, -110px) rotate(114deg); opacity: 0.5; }
    98%  { opacity: 0.5; }
    100% { transform: translate(80px, -220px) rotate(110deg); opacity: 0; }
}

@keyframes flicker {
    0%, 80%, 100% { filter: brightness(1); }
    88% { filter: brightness(1.4); }
}