/* Rainbow Background Animation */
@keyframes rainbowFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body {
    background: linear-gradient(
        135deg, 
        #F0FDF4, /* 縁起の良い薄緑 - 成長・希望 */
        #E6FFFA, /* 青緑 - 清浄・癒し */
        #FEF3C7, /* 薄黄 - 金運・幸運 */
        #FECACA, /* 薄赤 - 情熱・愛情 */
        #DDD6FE, /* 薄紫 - 高貴・神秘 */
        #BFDBFE, /* 薄青 - 平和・信頼 */
        #FFE4E6, /* 薄ピンク - 優しさ・愛 */
        #D1FAE5, /* ミントグリーン - 新鮮・生命力 */
        #FEF9C3, /* クリーム - 温かさ・安心 */
        #E0E7FF, /* ライトブルー - 冷静・知性 */
        #F3E8FF, /* ライトラベンダー - 優雅・気品 */
        #ECFDF5, /* 若葉色 - 新緑・成長 */
        #F0FDF4  /* 戻り - 円環・調和 */
    );
    background-size: 800% 800%;
    animation: rainbowFlow 30s ease infinite;
}

/* Floating elements animation */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(1deg); }
    66% { transform: translateY(5px) rotate(-1deg); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Fade in animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out;
}

/* Slide up animation */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-slide-up {
    animation: slideUp 0.8s ease-out;
}

/* Glass morphism effect for cards */
.glass-effect {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Soft shadow for cards */
.soft-shadow {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Hover effects for better interactivity */
.hover-lift:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

/* Rainbow text gradient - ご縁の七色 */
.rainbow-text {
    background: linear-gradient(
        90deg,
        #10B981, /* 緑 - 成長・繁栄 */
        #F59E0B, /* 金 - 金運・幸運 */
        #EF4444, /* 赤 - 情熱・愛情 */
        #8B5CF6, /* 紫 - 高貴・神秘 */
        #3B82F6, /* 青 - 平和・信頼 */
        #EC4899, /* ピンク - 愛・優しさ */
        #06B6D4, /* 水色 - 清浄・癒し */
        #22C55E  /* 若緑 - 新緑・希望 */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbowFlow 12s ease infinite;
    background-size: 400% 400%;
}

/* ご縁・幸運のカラーパレット */
.lucky-green {
    color: #10B981; /* 縁起の良い緑 */
}

.fortune-gold {
    color: #F59E0B; /* 金運の金色 */
}

.love-pink {
    color: #EC4899; /* 愛情のピンク */
}

.wisdom-purple {
    color: #8B5CF6; /* 知恵の紫 */
}

.peace-blue {
    color: #3B82F6; /* 平和の青 */
}

.purity-white {
    color: #FFFFFF; /* 純粋の白 */
}

.prosperity-red {
    color: #EF4444; /* 繁栄の赤 */
}

/* Soft button styles */
.btn-soft {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-soft:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Navigation glass effect */
nav {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(15px);
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, 
        rgba(16, 185, 129, 0.4), /* 緑 */
        rgba(245, 158, 11, 0.4),  /* 金 */
        rgba(236, 72, 153, 0.4),  /* ピンク */
        rgba(139, 92, 246, 0.4),  /* 紫 */
        rgba(59, 130, 246, 0.4)   /* 青 */
    ) 1;
}

/* Gentle color palette adjustments */
.text-primary-soft {
    color: #10B981; /* Emerald Green */
}

.text-secondary-soft {
    color: #059669; /* Forest Green */
}

.bg-primary-soft {
    background-color: rgba(16, 185, 129, 0.1);
}

.bg-secondary-soft {
    background-color: rgba(5, 150, 105, 0.1);
}

/* Soft green accent colors */
.accent-green-50 {
    background-color: #F0FDF4;
}

.accent-green-100 {
    background-color: #DCFCE7;
}

.accent-green-200 {
    background-color: #BBF7D0;
}

.text-accent-green-600 {
    color: #16A34A;
}

.text-accent-green-700 {
    color: #15803D;
}

.border-accent-green-300 {
    border-color: #86EFAC;
}

/* Custom mint colors */
.bg-mint-50 {
    background-color: #F0FDFA;
}

.bg-mint-50\/90 {
    background-color: rgba(240, 253, 250, 0.9);
}

.bg-mint-50\/85 {
    background-color: rgba(240, 253, 250, 0.85);
}

.bg-mint-300 {
    background-color: #5EEAD4;
}

/* Youth & Rainbow inspired animations */
@keyframes sparkle {
    0%, 100% { 
        opacity: 0.3;
        transform: scale(0.8) rotate(0deg);
    }
    50% { 
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }
}

@keyframes gentleFloat {
    0%, 100% { 
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    25% { 
        transform: translateY(-5px) translateX(3px) rotate(90deg);
    }
    50% { 
        transform: translateY(-10px) translateX(0px) rotate(180deg);
    }
    75% { 
        transform: translateY(-5px) translateX(-3px) rotate(270deg);
    }
}

/* Youth rainbow glow effect */
.rainbow-glow {
    box-shadow: 
        0 0 20px rgba(16, 185, 129, 0.3),
        0 0 40px rgba(6, 182, 212, 0.2),
        0 0 60px rgba(132, 204, 22, 0.1);
}

.rainbow-glow:hover {
    box-shadow: 
        0 0 30px rgba(16, 185, 129, 0.5),
        0 0 60px rgba(6, 182, 212, 0.3),
        0 0 90px rgba(132, 204, 22, 0.2);
}

/* Floating elements with gentle animation */
.animate-float {
    animation: gentleFloat 8s ease-in-out infinite;
}

/* Sparkling effect for special elements */
.sparkle-effect::before {
    content: '✨';
    position: absolute;
    top: -10px;
    right: -10px;
    animation: sparkle 2s ease-in-out infinite;
}

/* Enhanced card hover effects */
.card-hover:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.15);
}

/* Youth energy pulse */
@keyframes youthPulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    70% { 
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
}

.youth-pulse {
    animation: youthPulse 2s infinite;
}