/* style/icon-rain.css */
.zb-anim-rows-wrapper {
    position: absolute;
    top: 50%; left: 50%;
    width: 200vw; height: 200vh;
    transform: translate(-50%, -50%) rotate(30deg);
    display: flex; flex-direction: column; justify-content: center;
}

.zb-anim-row { display: flex; white-space: nowrap; }
.zb-anim-row-inner { display: flex; white-space: nowrap; flex-shrink: 0; }

.zb-anim-row:nth-child(odd) .zb-anim-row-inner { animation-name: zb-moveLeft; animation-timing-function: linear; animation-iteration-count: infinite; }
.zb-anim-row:nth-child(even) .zb-anim-row-inner { animation-name: zb-moveRight; animation-timing-function: linear; animation-iteration-count: infinite; }

.zb-anim-icon {
    cursor: default;
    transition: opacity 1s ease, text-shadow 1s ease;
    /* 顏色用 currentColor，這樣 hover 光暈會自動跟著 JS 設定的顏色走 */
}

.zb-anim-icon.zb-lit {
    opacity: 1 !important;
    box-shadow: 0 0 20px var(--color-blue-icon), 0 0 40px var(--color-blue-icon);
    transition: none;
}

@keyframes zb-moveLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes zb-moveRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }