/* ===============================
   ❄️ Snowfall Effect (Responsive)
   Desktop / Tablet / Mobile
   =============================== */

body::before,
body::after {
    content: "❄";
    position: fixed;
    top: -10vh;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    color: white;
    font-size: 14px;
    opacity: 0.5;

    text-shadow:
        8vw 15vh white,
        22vw 35vh white,
        36vw 55vh white,
        50vw 25vh white,
        64vw 65vh white,
        78vw 40vh white,
        92vw 60vh white;

    animation: snowfall 15s linear infinite;
}

/* ชั้นหิมะใหญ่ */
body::after {
    font-size: 22px;
    opacity: 0.7;
    animation-duration: 22.5s;
    text-shadow:
        15vw 10vh white,
        45vw 45vh white,
        75vw 30vh white;
}

/* Animation */
@keyframes snowfall {
    0% {
        transform: translateY(-10vh);
    }

    100% {
        transform: translateY(110vh);
    }
}

/* ===============================
   📱 หน้าจอเล็ก (มือถือ)
   =============================== */
@media (max-width: 768px) {
    body::before {
        font-size: 12px;
        opacity: 0.45;
        animation-duration: 12s;
        /* เร็วขึ้นนิด */
        text-shadow:
            12vw 20vh white,
            35vw 45vh white,
            60vw 30vh white,
            85vw 55vh white;
    }

    body::after {
        font-size: 18px;
        opacity: 0.6;
        animation-duration: 18s;
        text-shadow:
            25vw 15vh white,
            70vw 40vh white;
    }
}

/* ===============================
   📱 จอเล็กมาก (เครื่องแรงน้อย)
   =============================== */
@media (max-width: 480px) {
    body::after {
        display: none;
        /* ปิดชั้นใหญ่ */
    }

    body::before {
        font-size: 11px;
        opacity: 0.4;
        animation-duration: 10s;
        text-shadow:
            20vw 25vh white,
            50vw 45vh white,
            80vw 35vh white;
    }
}