/* ===== INDEPENDENT DRIFT ANIMATIONS ===== */

/* Title section drift */
.title {
animation: titleDrift 28s ease-in-out infinite alternate;
}

@keyframes titleDrift {
0%   { transform: translateX(0px) translateY(0px); }
50%  { transform: translateX(-8px) translateY(5px); }
100% { transform: translateX(8px) translateY(-5px); }
}

/* Subtitle drift */
.subtitle {
animation: subtitleDrift 32s ease-in-out infinite alternate;
}

@keyframes subtitleDrift {
0%   { transform: translateX(0px) translateY(0px); }
50%  { transform: translateX(6px) translateY(-4px); }
100% { transform: translateX(-6px) translateY(4px); }
}

/* Menu drift */
.menu {
animation: menuDrift 35s ease-in-out infinite alternate;
}

@keyframes menuDrift {
0%   { transform: translateX(0px) translateY(0px); }
50%  { transform: translateX(-10px) translateY(6px); }
100% { transform: translateX(10px) translateY(-6px); }
}

/* About section drift */
.about {
animation: aboutDrift 40s ease-in-out infinite alternate;
}

@keyframes aboutDrift {
0%   { transform: translateX(0px) translateY(0px); }
50%  { transform: translateX(7px) translateY(-5px); }
100% { transform: translateX(-7px) translateY(5px); }
}

/* Favorites section drift */
.favorites {
animation: favoritesDrift 38s ease-in-out infinite alternate;
}

@keyframes favoritesDrift {
0%   { transform: translateX(0px) translateY(0px); }
50%  { transform: translateX(-9px) translateY(4px); }
100% { transform: translateX(9px) translateY(-4px); }
}

/* System panel drift */
.system-panel {
animation: panelDrift 30s ease-in-out infinite alternate;
}

@keyframes panelDrift {
0%   { transform: translateX(0px) translateY(0px); }
50%  { transform: translateX(5px) translateY(3px); }
100% { transform: translateX(-5px) translateY(-3px); }
}

/* ===== CRT SCANLINES ===== */

body::after {
content:"";
pointer-events:none;
position:fixed;
inset:0;
z-index:9999;
background:repeating-linear-gradient(
to bottom,
rgba(0,0,0,0.15) 0px,
rgba(0,0,0,0.15) 1px,
transparent 1px,
transparent 3px
);
mix-blend-mode:multiply;
animation:scanlineMove 8s linear infinite;
}

@keyframes scanlineMove {
from { background-position:0 0; }
to { background-position:0 100px; }
}

/* ===== PARTICLES ===== */

.particles {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
overflow: hidden;
z-index: 1;
}

.particle {
position: absolute;
bottom: -40px;
border-radius: 50%;
opacity: 0;
animation: floatUp linear infinite;
}

/* Depth layers - brighter and more visible */

.particle.far {
width: 3px;
height: 3px;
background: rgba(150,190,255,0.5);
filter: blur(1px);
}

.particle.mid {
width: 4px;
height: 4px;
background: rgba(180,210,255,0.7);
}

.particle.near {
width: 6px;
height: 6px;
background: rgba(200,230,255,0.9);
filter: blur(0.5px);
}

@keyframes floatUp {
0%   { transform: translateY(0); opacity: 0; }
5%   { opacity: 0.8; }
95%  { opacity: 0.6; }
100% { transform: translateY(-120vh); opacity: 0; }
}

.page-transition {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.page-transition.fade-out {
    opacity: 0;
}