/* ===========================================
 *  ふわっと現れるスポーツアイコンの装飾
 *  - body 直下に動的に挿入され、ランダムな位置にふわっと現れる
 *  - 少しだけふらふら漂ってすぐ消える
 *  - pointer-events: none でクリック操作を妨げない
 *  - prefers-reduced-motion が指定されたユーザには表示しない
 * =========================================== */

.floating-icon {
    position: fixed;
    pointer-events: none;
    z-index: 40;
    width: var(--fi-size, 56px);
    height: auto;
    opacity: 0;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .12));
    animation: floatingIconPop var(--fi-duration, 4s) ease-in-out forwards;
    will-change: transform, opacity;
}

@keyframes floatingIconPop {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(-8deg) scale(0.5);
    }
    18% {
        opacity: 0.75;
        transform: translate(6px, -8px) rotate(4deg) scale(1.05);
    }
    40% {
        opacity: 0.7;
        transform: translate(-10px, 4px) rotate(-4deg) scale(1);
    }
    65% {
        opacity: 0.6;
        transform: translate(8px, -4px) rotate(6deg) scale(1);
    }
    85% {
        opacity: 0.3;
        transform: translate(-4px, 6px) rotate(-2deg) scale(0.95);
    }
    100% {
        opacity: 0;
        transform: translate(0, 0) rotate(0deg) scale(0.6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-icon {
        display: none;
    }
}