/* Background Styles - Moonlit Forest Theme */

/* ====================================
   INTERACTIVE NIGHT BACKGROUND
   ==================================== */
#night-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.bg-layer {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* Sky gradient - warm horizon */
#bg-sky {
    background: linear-gradient(
        to bottom,
        #0a0a16 0%,
        #0d1025 15%,
        #111833 30%,
        #1a2040 50%,
        #1f2849 65%,
        #252f52 78%,
        #2d3050 88%,
        #342e48 100%
    );
}

/* Moon */
#bg-moon {
    pointer-events: none;
}

.moon {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background:
        /* Crater shadows - subtle dark spots */
        radial-gradient(circle at 28% 55%, rgba(180, 150, 80, 0.3) 0%, transparent 8%),
        radial-gradient(circle at 55% 30%, rgba(170, 140, 70, 0.25) 0%, transparent 10%),
        radial-gradient(circle at 40% 70%, rgba(160, 130, 60, 0.2) 0%, transparent 6%),
        radial-gradient(circle at 65% 55%, rgba(150, 120, 50, 0.15) 0%, transparent 7%),
        radial-gradient(circle at 22% 35%, rgba(170, 140, 70, 0.2) 0%, transparent 5%),
        radial-gradient(circle at 48% 48%, rgba(180, 150, 80, 0.15) 0%, transparent 12%),
        /* Mare (dark plains) */
        radial-gradient(ellipse at 35% 45%, rgba(160, 135, 70, 0.12) 0%, transparent 25%),
        radial-gradient(ellipse at 50% 60%, rgba(150, 125, 60, 0.1) 0%, transparent 20%),
        /* Base moon surface - realistic coloring */
        radial-gradient(circle at 38% 35%, #faf5e0 0%, #f0e6c0 15%, #e5d8a8 30%, #d4c48a 55%, #c0a868 80%, #a89050 100%);
    box-shadow:
        0 0 30px rgba(240, 220, 160, 0.3),
        0 0 70px rgba(220, 190, 120, 0.15),
        0 0 120px rgba(200, 170, 100, 0.08),
        inset -8px -4px 16px rgba(0, 0, 0, 0.12),
        inset 3px 2px 8px rgba(255, 255, 240, 0.08);
}

/* Moon phase shadow overlay */
.moon-phase-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #0a0a16;
    transition: clip-path 0.5s ease;
}

/* Moon glow halo - softer, more atmospheric */
.moon::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(220, 200, 140, 0.06) 0%,
        rgba(200, 180, 120, 0.04) 30%,
        rgba(180, 160, 100, 0.02) 50%,
        transparent 70%);
    pointer-events: none;
}

/* Subtle terminator softness */
.moon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 60% 50%, transparent 40%, rgba(0, 0, 0, 0.06) 100%);
    pointer-events: none;
}

/* Stars container */
#bg-stars {
    pointer-events: none;
}

.star {
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
    animation: twinkle var(--twinkle-duration, 3s) ease-in-out infinite;
    animation-delay: var(--twinkle-delay, 0s);
}

.star.small {
    width: 1px;
    height: 1px;
    box-shadow: 0 0 2px #ffffff;
}

.star.medium {
    width: 2px;
    height: 2px;
    box-shadow: 0 0 4px #ffffff, 0 0 6px rgba(255, 255, 255, 0.4);
}

.star.large {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 6px #ffffff, 0 0 10px rgba(255, 255, 255, 0.3);
}

.star.bright {
    background: #fef9c3;
    box-shadow: 0 0 8px #fef9c3, 0 0 15px rgba(254, 249, 195, 0.4);
}

.star.warm {
    background: #fde68a;
    box-shadow: 0 0 6px #fde68a, 0 0 10px rgba(253, 230, 138, 0.4);
}

.star.cool {
    background: #c4d4ff;
    box-shadow: 0 0 6px #c4d4ff, 0 0 10px rgba(196, 212, 255, 0.3);
}

@keyframes twinkle {
    0%, 100% { opacity: var(--star-opacity, 0.6); transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Shooting stars */
#bg-shooting-stars {
    pointer-events: none;
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.shooting-star {
    position: absolute;
    width: 80px;
    height: 2px;
    background: linear-gradient(to left, #fef9c3, rgba(253, 230, 138, 0.6), transparent);
    border-radius: 2px;
    box-shadow: 0 0 6px 2px rgba(253, 230, 138, 0.5), 0 0 12px 4px rgba(212, 164, 76, 0.2);
    transform: rotate(45deg);
    transform-origin: left center;
    animation: shoot 0.9s ease-out forwards;
}

@keyframes shoot {
    0% {
        opacity: 1;
        transform: rotate(45deg) translateX(0) scaleX(0.3);
    }
    20% {
        opacity: 1;
        transform: rotate(45deg) translateX(60px) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translateX(350px) scaleX(0.4);
    }
}

/* Clouds */
#bg-clouds {
    pointer-events: none;
    opacity: 0.12;
}

.cloud {
    position: absolute;
    background: radial-gradient(ellipse at center, rgba(200, 200, 210, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(20px);
    animation: cloud-drift linear infinite;
}

@keyframes cloud-drift {
    0% { transform: translateX(-10%); }
    100% { transform: translateX(110%); }
}

/* Fireflies */
#bg-fireflies {
    pointer-events: none;
}

.firefly {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #d4a44c;
    box-shadow: 0 0 6px 2px rgba(212, 164, 76, 0.6), 0 0 12px 4px rgba(212, 164, 76, 0.2);
    animation: firefly-glow var(--ff-duration, 4s) ease-in-out infinite, firefly-drift var(--ff-drift, 8s) ease-in-out infinite;
    animation-delay: var(--ff-delay, 0s);
}

@keyframes firefly-glow {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    30%, 70% { opacity: var(--ff-brightness, 0.7); transform: scale(1); }
}

@keyframes firefly-drift {
    0%, 100% { translate: 0 0; }
    25% { translate: var(--ff-dx, 15px) var(--ff-dy, -10px); }
    50% { translate: calc(var(--ff-dx, 15px) * -0.5) calc(var(--ff-dy, -10px) * 1.2); }
    75% { translate: calc(var(--ff-dx, 15px) * 0.8) calc(var(--ff-dy, -10px) * -0.6); }
}

/* Fog layer */
#bg-fog {
    pointer-events: none;
    opacity: 0.5;
}

.fog-band {
    position: absolute;
    background: radial-gradient(ellipse at center, rgba(180, 190, 210, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(30px);
    animation: fog-drift ease-in-out infinite;
}

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

/* Forest layers - silhouettes */
#bg-forest-back,
#bg-forest-mid,
#bg-forest-front {
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: auto 100%;
}

#bg-forest-back {
    bottom: 0;
    height: 42%;
    top: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath fill='%23101828' d='M0,300 L0,180 Q30,170 40,185 L50,175 Q80,160 100,180 L120,165 Q150,140 180,170 L200,155 Q220,130 250,160 L280,145 Q310,120 340,150 L370,135 Q400,110 430,140 L460,125 Q490,100 520,130 L550,115 Q580,90 610,120 L640,105 Q670,80 700,110 L730,95 Q760,70 790,100 L820,85 Q850,60 880,90 L910,75 Q940,50 970,80 L1000,65 Q1030,40 1060,70 L1090,55 Q1120,30 1150,60 L1180,45 Q1200,35 1200,50 L1200,300 Z'/%3E%3C/svg%3E");
    opacity: 0.7;
}

#bg-forest-mid {
    bottom: 0;
    height: 34%;
    top: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 250' preserveAspectRatio='none'%3E%3Cpath fill='%230f1520' d='M0,250 L0,140 L20,150 L30,100 L40,140 L60,145 L80,90 L95,130 L120,135 L140,80 L160,125 L180,130 L200,70 L220,120 L250,125 L270,65 L290,115 L320,120 L340,60 L360,110 L390,115 L410,55 L430,105 L460,110 L480,50 L500,100 L530,105 L550,45 L570,95 L600,100 L620,40 L640,90 L670,95 L690,35 L710,85 L740,90 L760,30 L780,80 L810,85 L830,25 L850,75 L880,80 L900,20 L920,70 L950,75 L970,15 L990,65 L1020,70 L1040,10 L1060,60 L1090,65 L1110,5 L1130,55 L1160,60 L1180,0 L1200,50 L1200,250 Z'/%3E%3C/svg%3E");
    opacity: 0.85;
}

#bg-forest-front {
    bottom: 0;
    height: 28%;
    top: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath fill='%230a0c12' d='M0,200 L0,100 L15,110 L25,50 L35,90 L55,95 L70,40 L85,85 L105,90 L120,35 L135,80 L155,85 L170,30 L185,75 L205,80 L220,25 L235,70 L255,75 L270,20 L285,65 L305,70 L320,15 L335,60 L355,65 L370,10 L385,55 L405,60 L420,5 L435,50 L455,55 L470,0 L485,45 L505,50 L520,0 L535,40 L555,45 L570,0 L585,35 L605,40 L620,0 L635,30 L655,35 L670,0 L685,25 L705,30 L720,0 L735,20 L755,25 L770,0 L785,15 L805,20 L820,0 L835,10 L855,15 L870,0 L885,5 L905,10 L920,0 L950,15 L980,10 L1010,20 L1040,15 L1070,25 L1100,20 L1130,30 L1160,25 L1200,35 L1200,200 Z'/%3E%3C/svg%3E");
    opacity: 1;
}

/* Parallax depth multipliers (controlled via JS) */
#bg-sky { --parallax-strength: 0.01; }
#bg-stars { --parallax-strength: 0.02; }
#bg-moon { --parallax-strength: 0.015; }
#bg-clouds { --parallax-strength: 0.025; }
#bg-fireflies { --parallax-strength: 0.04; }
#bg-forest-back { --parallax-strength: 0.03; }
#bg-forest-mid { --parallax-strength: 0.05; }
#bg-fog { --parallax-strength: 0.06; }
#bg-forest-front { --parallax-strength: 0.08; }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .star { animation: none !important; opacity: 0.7; }
    .shooting-star { display: none; }
    .cloud { animation: none !important; }
    .firefly { animation: none !important; opacity: 0.5; }
    .fog-band { animation: none !important; }
    .bg-layer { transition: none !important; }
}

/* ====================================
   PIXEL WOLF CANVAS
   ==================================== */
#bg-wolves {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 42vh;
    z-index: 0;
    pointer-events: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Wolf Color Options */
.wolf-color-options {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.wolf-color-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.wolf-color-btn:hover {
    transform: scale(1.1);
}

.wolf-color-btn.active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px currentColor;
}

.color-picker-input {
    width: 48px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    cursor: pointer;
    vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
    #bg-wolves { display: none; }
}

/* ====================================
   WOLF PAW CURSOR (Desktop)
   ==================================== */
@media (pointer: fine) {
    *, *::before, *::after {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg opacity='0.85'%3E%3Cellipse cx='12' cy='15' rx='5' ry='4' fill='%23d8dce4'/%3E%3Cellipse cx='7.5' cy='9.5' rx='2.2' ry='2.5' fill='%23d8dce4' transform='rotate(-15 7.5 9.5)'/%3E%3Cellipse cx='16.5' cy='9.5' rx='2.2' ry='2.5' fill='%23d8dce4' transform='rotate(15 16.5 9.5)'/%3E%3Cellipse cx='10' cy='7' rx='1.8' ry='2.2' fill='%23d8dce4' transform='rotate(-5 10 7)'/%3E%3Cellipse cx='14' cy='7' rx='1.8' ry='2.2' fill='%23d8dce4' transform='rotate(5 14 7)'/%3E%3C/g%3E%3C/svg%3E") 12 12, auto;
    }

    a, button, [role="button"], input, textarea, select, .btn, .channel-btn, .member-item, .dm-item,
    .emoji-btn, .theme-btn, .accent-btn, .wolf-color-btn, .toggle, .dashboard-tab, .filter-btn,
    .sidebar-tab, .modal-close-btn, .message-delete-btn, .role-item, .channel-item, .user-management-item {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg opacity='0.95'%3E%3Cellipse cx='12' cy='15' rx='5' ry='4' fill='%23d4a44c'/%3E%3Cellipse cx='7.5' cy='9.5' rx='2.2' ry='2.5' fill='%23d4a44c' transform='rotate(-15 7.5 9.5)'/%3E%3Cellipse cx='16.5' cy='9.5' rx='2.2' ry='2.5' fill='%23d4a44c' transform='rotate(15 16.5 9.5)'/%3E%3Cellipse cx='10' cy='7' rx='1.8' ry='2.2' fill='%23d4a44c' transform='rotate(-5 10 7)'/%3E%3Cellipse cx='14' cy='7' rx='1.8' ry='2.2' fill='%23d4a44c' transform='rotate(5 14 7)'/%3E%3C/g%3E%3C/svg%3E") 12 12, pointer;
    }
}

/* ====================================
   WOLF PAWPRINT TAPS (Mobile) - Amber
   ==================================== */
.wolf-pawprint {
    position: fixed;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 10000;
    opacity: 0.7;
    animation: pawprintFade 0.8s ease-out forwards;
    transform: translate(-50%, -50%);
}

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