/* =============================================================================
   ✨ ANIMATED ELEMENTS COMPONENTS - 汎用アニメーション要素コンポーネント
   ============================================================================= */

/* 🔧🔧🔧 【回転するスプラッシュ】背景装飾要素 🔧🔧🔧 */
.rotating-circle {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 60% 40% 50% 30%;
    background: radial-gradient(circle, rgba(255, 182, 193, 0.6), rgba(173, 216, 230, 0.4));
    animation: bubble_rotate 8s linear infinite;
    transition: all 0.2s ease;
    box-shadow: 0 0 20px rgba(255, 182, 193, 0.3);
}

/* 🔧🔧🔧 【回転円の配置バリエーション】位置別スタイル 🔧🔧🔧 */
.circle-1 {
    top: 20%;
    left: 10%;
    animation-duration: 6s;
}

.circle-2 {
    top: 60%;
    right: 15%;
    animation-duration: 10s;
    animation-delay: -2s;
}

.circle-3 {
    bottom: 25%;
    left: 20%; 
    animation-duration: 8s;
    animation-delay: -4s;
}

.circle-4 {
    top: 80%;
    right: 35%;
    animation-duration: 12s;
    animation-delay: -1s;
}

.circle-5 {
    top: 35%;
    left: 75%;
    animation-duration: 9s;
    animation-delay: -3s;
}

/* 🔧🔧🔧 【サイズバリエーション】大きさ別 🔧🔧🔧 */
.circle-sm {
    width: 40px;
    height: 40px;
}

.circle-md {
    width: 60px;
    height: 60px;
}

.circle-lg {
    width: 80px;
    height: 80px;
}

.circle-xl {
    width: 100px;
    height: 100px;
}

/* 🔧🔧🔧 【カラーバリエーション】色別スタイル 🔧🔧🔧 */
.circle-pink {
    background: radial-gradient(circle, rgba(255, 182, 193, 0.6), rgba(255, 182, 193, 0.3));
    box-shadow: 0 0 20px rgba(255, 182, 193, 0.3);
}

.circle-blue {
    background: radial-gradient(circle, rgba(173, 216, 230, 0.6), rgba(173, 216, 230, 0.3));
    box-shadow: 0 0 20px rgba(173, 216, 230, 0.3);
}

.circle-green {
    background: radial-gradient(circle, rgba(144, 238, 144, 0.6), rgba(144, 238, 144, 0.3));
    box-shadow: 0 0 20px rgba(144, 238, 144, 0.3);
}

.circle-orange {
    background: radial-gradient(circle, rgba(255, 218, 185, 0.6), rgba(255, 218, 185, 0.3));
    box-shadow: 0 0 20px rgba(255, 218, 185, 0.3);
}

.circle-purple {
    background: radial-gradient(circle, rgba(221, 160, 221, 0.6), rgba(221, 160, 221, 0.3));
    box-shadow: 0 0 20px rgba(221, 160, 221, 0.3);
}

/* 🔧🔧🔧 【浮遊要素】フローティングアニメーション 🔧🔧🔧 */
.floating-element {
    position: absolute;
    animation: float 6s ease-in-out infinite;
}

.floating-bubble {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    animation: bubble_float 8s ease-in-out infinite;
}

.floating-star {
    width: 20px;
    height: 20px;
    background: linear-gradient(45deg, #ffd700, #ffed4e);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: twinkle 4s ease-in-out infinite;
}

/* 🔧🔧🔧 【パルス効果】点滅・鼓動効果 🔧🔧🔧 */
.pulse-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4ecdc4;
    animation: pulse 2s ease-in-out infinite;
    display: inline-block;
}

.pulse-ring {
    width: 40px;
    height: 40px;
    border: 3px solid #4ecdc4;
    border-radius: 50%;
    animation: pulse-ring 2s ease-in-out infinite;
}

/* 🔧🔧🔧 【回転要素】スピン効果 🔧🔧🔧 */
.spinning-element {
    animation: spin 4s linear infinite;
}

.spinning-slow {
    animation: spin 8s linear infinite;
}

.spinning-fast {
    animation: spin 2s linear infinite;
}

/* 🔧🔧🔧 【スケール効果】拡大縮小アニメーション 🔧🔧🔧 */
.breathing-element {
    animation: breathe 4s ease-in-out infinite;
}

.bouncing-element {
    animation: bounce 2s ease-in-out infinite;
}

/* 🔧🔧🔧 【アニメーション制御】再生制御 🔧🔧🔧 */
.animation-paused {
    animation-play-state: paused;
}

.animation-running {
    animation-play-state: running;
}

.animation-slow {
    animation-duration: 8s;
}

.animation-fast {
    animation-duration: 2s;
}

/* 🔧🔧🔧 【キーフレーム】基本アニメーション定義 🔧🔧🔧 */
@keyframes bubble_float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 1;
    }
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.7;
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes breathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}