/**
 * Component: Background Gradient Animation
 * 背景グラデーションアニメーション - テーマカラー3色がゆっくり3D回転
 */

/* 背景アニメーションコンテナ */
:where(.c-bg-gradient-animation) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(135deg,
        var(--wp--preset--color--white) 0%,
        var(--wp--preset--color--gray-lightest) 100%);
    pointer-events: none;
}

/* グラデーション球体 - 共通スタイル */
:where(.c-bg-gradient-animation__sphere) {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    will-change: transform;
}

/* 球体1 - ピンク（Primary） */
:where(.c-bg-gradient-animation__sphere--pink) {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle,
        var(--wp--preset--color--primary-light) 0%,
        var(--wp--preset--color--primary-lighter) 50%,
        transparent 100%);
    top: -10%;
    left: -10%;
    animation:
        sphereRotate1 15s ease-in-out infinite,
        sphereMove1 20s ease-in-out infinite;
}

/* 球体2 - ゴールド（Tertiary） */
:where(.c-bg-gradient-animation__sphere--gold) {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle,
        var(--wp--preset--color--tertiary-light) 0%,
        var(--wp--preset--color--tertiary-lighter) 50%,
        transparent 100%);
    top: 50%;
    right: -10%;
    animation:
        sphereRotate2 18s ease-in-out infinite,
        sphereMove2 23s ease-in-out infinite;
    animation-delay: -5s;
}

/* 球体3 - グリーン（Success） */
:where(.c-bg-gradient-animation__sphere--green) {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle,
        var(--wp--preset--color--success-light) 0%,
        var(--wp--preset--color--success-lighter) 50%,
        transparent 100%);
    bottom: -10%;
    left: 40%;
    animation:
        sphereRotate3 20s ease-in-out infinite,
        sphereMove3 25s ease-in-out infinite;
    animation-delay: -10s;
}

/* アニメーション1 - 3D回転 + 移動 */
@keyframes sphereRotate1 {
    0%, 100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
    }
    25% {
        transform: rotateX(30deg) rotateY(90deg) rotateZ(15deg) scale(1.1);
    }
    50% {
        transform: rotateX(60deg) rotateY(180deg) rotateZ(30deg) scale(1);
    }
    75% {
        transform: rotateX(30deg) rotateY(270deg) rotateZ(15deg) scale(1.1);
    }
}

@keyframes sphereMove1 {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(20%, 15%);
    }
    50% {
        transform: translate(-10%, 25%);
    }
    75% {
        transform: translate(15%, -10%);
    }
}

/* アニメーション2 - 3D回転 + 移動 */
@keyframes sphereRotate2 {
    0%, 100% {
        transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg) scale(1);
    }
    33% {
        transform: rotateX(-20deg) rotateY(240deg) rotateZ(-20deg) scale(0.9);
    }
    66% {
        transform: rotateX(40deg) rotateY(120deg) rotateZ(20deg) scale(1.05);
    }
}

@keyframes sphereMove2 {
    0%, 100% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(-15%, 20%);
    }
    66% {
        transform: translate(10%, -15%);
    }
}

/* アニメーション3 - 3D回転 + 移動 */
@keyframes sphereRotate3 {
    0%, 100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg) scale(1);
    }
    20% {
        transform: rotateX(25deg) rotateY(-30deg) rotateZ(288deg) scale(1.08);
    }
    40% {
        transform: rotateX(-15deg) rotateY(-60deg) rotateZ(216deg) scale(0.95);
    }
    60% {
        transform: rotateX(35deg) rotateY(-90deg) rotateZ(144deg) scale(1.05);
    }
    80% {
        transform: rotateX(-10deg) rotateY(-120deg) rotateZ(72deg) scale(0.98);
    }
}

@keyframes sphereMove3 {
    0%, 100% {
        transform: translate(0, 0);
    }
    20% {
        transform: translate(-12%, -18%);
    }
    40% {
        transform: translate(18%, 10%);
    }
    60% {
        transform: translate(-8%, 22%);
    }
    80% {
        transform: translate(14%, -12%);
    }
}

/* レスポンシブ対応 - タブレット */
@media (max-width: 1024px) {
    :where(.c-bg-gradient-animation__sphere--pink) {
        width: 400px;
        height: 400px;
    }

    :where(.c-bg-gradient-animation__sphere--gold) {
        width: 350px;
        height: 350px;
    }

    :where(.c-bg-gradient-animation__sphere--green) {
        width: 380px;
        height: 380px;
    }
}

/* レスポンシブ対応 - スマートフォン */
@media (max-width: 768px) {
    :where(.c-bg-gradient-animation__sphere) {
        filter: blur(60px);
        opacity: 0.4;
    }

    :where(.c-bg-gradient-animation__sphere--pink) {
        width: 300px;
        height: 300px;
    }

    :where(.c-bg-gradient-animation__sphere--gold) {
        width: 280px;
        height: 280px;
    }

    :where(.c-bg-gradient-animation__sphere--green) {
        width: 290px;
        height: 290px;
    }
}

/* アクセシビリティ - モーション削減設定 */
@media (prefers-reduced-motion: reduce) {
    :where(.c-bg-gradient-animation__sphere) {
        animation: none;
        opacity: 0.15;
    }
}