/* Forest Background Effects */
.forest-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.tree {
    position: absolute;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to top, var(--medium-gray), transparent);
    opacity: 0.3;
}

.tree-1 { left: 10%; height: 80%; animation: sway 20s ease-in-out infinite; }
.tree-2 { left: 25%; height: 90%; animation: sway 25s ease-in-out infinite reverse; }
.tree-3 { left: 45%; height: 70%; animation: sway 18s ease-in-out infinite; }
.tree-4 { left: 70%; height: 85%; animation: sway 22s ease-in-out infinite reverse; }
.tree-5 { left: 85%; height: 75%; animation: sway 19s ease-in-out infinite; }

@keyframes sway {
    0%, 100% { transform: skewX(0deg); }
    50% { transform: skewX(1deg); }
}

.fog {
    position: absolute;
    width: 200%;
    height: 100%;
    background: radial-gradient(ellipse at center, var(--fog) 0%, transparent 70%);
}

.fog-1 {
    bottom: 0;
    left: -50%;
    animation: drift 60s ease-in-out infinite;
}

.fog-2 {
    top: 0;
    right: -50%;
    animation: drift 80s ease-in-out infinite reverse;
}

@keyframes drift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(20%); }
}