/* ==============================================
   Anima WebUI - Animations
   ============================================== */

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes orbit-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 20px var(--accent-glow);
    }

    50% {
        box-shadow: 0 0 35px var(--accent-glow-strong);
    }
}

/* ── Utility Classes ── */
.animate-fade-in {
    animation: fadeIn 0.3s ease;
}

.animate-slide-up {
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* ── Image Load Fade-in ──
   ネットワーク越しで画像が上からじわじわ出るのを防ぐ。
   ロード完了まで透明にし、完了後にフェードインさせる。 */
.img-loading {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.img-loaded {
    opacity: 1;
}