/* 2. 容器 */
#fireRainContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* 3. 火雨粒子樣式 */
.fire-particle {
    position: absolute;
    
    /* 核心：火焰漸變色 */
    background: radial-gradient(circle, rgba(255, 100, 0, 1) 0%, rgba(192, 16, 0, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    /* 發光效果 */
    box-shadow: 0 0 5px rgba(255, 100, 0, 0.8), 0 0 10px rgba(255, 50, 0, 0.6);
    
    opacity: 0; 
    
    /* 核心變動: 旋轉粒子 45 度，使其與左上到右下的路徑對齊 */
    transform: rotate(45deg); 
    
    /* 應用兩個動畫：移動 (fireRainfall) 和閃爍/拉伸 (fireflicker) */
    animation-name: fireRainfall, fireflicker;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* 4. 移動動畫：從左上到右下 */
@keyframes fireRainfall {
    0% {
        /* 確保旋轉角度與 .fire-particle 初始設置一致 */
        transform: translate(-50vw, -50vh) rotate(-45deg); 
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1; 
    }
    100% {
        /* 將粒子群體移出視口右下方 */
        transform: translate(120vw, 120vh) rotate(-45deg); 
        opacity: 0;
    }
}

/* 5. 閃爍和長度變化動畫 (模擬火苗動態) */
@keyframes fireflicker {
    0%, 100% {
        height: var(--initial-height); /* 初始高度 (由 JS 設置) */
        width: 2px;
    }
    25% {
        height: calc(var(--initial-height) * 1.5); /* 拉長 */
        width: 3px;
    }
    50% {
        height: var(--initial-height); 
        width: 2px;
    }
    75% {
        height: calc(var(--initial-height) * 1.2); /* 略微拉長 */
        width: 2.5px;
    }
}