/**
 * Gradient Background Styles
 * グラデーション背景スタイル
 */

/* Make Tailwind dark: classes work */
.dark,
[data-theme="dark"] {
    color-scheme: dark;
}

body.gradient-bg {
    background-color: #f9fafb;
    position: relative;
    overflow-x: hidden;
}

.dark body.gradient-bg,
[data-theme="dark"] body.gradient-bg {
    background-color: #1f2937;
}

.gradient-bg::before,
.gradient-bg::after {
    content: '';
    position: fixed;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    z-index: -1;
    pointer-events: none;
    filter: blur(40px);
}

/* Light mode gradients */
.gradient-bg::before {
    background: radial-gradient(ellipse at 20% 30%,
        rgba(167, 243, 208, 0.2) 0%,
        rgba(254, 215, 226, 0.15) 20%,
        rgba(191, 219, 254, 0.12) 40%,
        transparent 70%
    ),
    radial-gradient(ellipse at 80% 70%,
        rgba(253, 224, 71, 0.18) 0%,
        rgba(196, 181, 253, 0.15) 25%,
        rgba(165, 243, 252, 0.1) 45%,
        transparent 70%
    ),
    radial-gradient(ellipse at 50% 50%,
        rgba(249, 168, 212, 0.15) 0%,
        rgba(191, 219, 254, 0.1) 30%,
        transparent 60%
    );
}

.gradient-bg::after {
    background: radial-gradient(circle at 70% 20%,
        rgba(196, 181, 253, 0.2) 0%,
        rgba(253, 186, 116, 0.15) 20%,
        rgba(167, 243, 208, 0.1) 40%,
        transparent 65%
    ),
    radial-gradient(circle at 30% 80%,
        rgba(147, 197, 253, 0.18) 0%,
        rgba(252, 211, 77, 0.12) 25%,
        rgba(254, 202, 202, 0.08) 45%,
        transparent 70%
    ),
    radial-gradient(ellipse at 90% 50%,
        rgba(165, 180, 252, 0.15) 0%,
        rgba(253, 164, 175, 0.1) 35%,
        transparent 65%
    );
}

/* Dark mode gradients */
.dark .gradient-bg::before,
[data-theme="dark"] .gradient-bg::before {
    background: radial-gradient(ellipse at 20% 30%,
        rgba(16, 185, 129, 0.15) 0%,
        rgba(219, 39, 119, 0.12) 20%,
        rgba(59, 130, 246, 0.1) 40%,
        transparent 70%
    ),
    radial-gradient(ellipse at 80% 70%,
        rgba(234, 179, 8, 0.12) 0%,
        rgba(139, 92, 246, 0.1) 25%,
        rgba(6, 182, 212, 0.08) 45%,
        transparent 70%
    ),
    radial-gradient(ellipse at 50% 50%,
        rgba(236, 72, 153, 0.1) 0%,
        rgba(59, 130, 246, 0.08) 30%,
        transparent 60%
    );
}

.dark .gradient-bg::after,
[data-theme="dark"] .gradient-bg::after {
    background: radial-gradient(circle at 70% 20%,
        rgba(139, 92, 246, 0.15) 0%,
        rgba(251, 146, 60, 0.12) 20%,
        rgba(16, 185, 129, 0.08) 40%,
        transparent 65%
    ),
    radial-gradient(circle at 30% 80%,
        rgba(37, 99, 235, 0.12) 0%,
        rgba(234, 179, 8, 0.1) 25%,
        rgba(239, 68, 68, 0.08) 45%,
        transparent 70%
    ),
    radial-gradient(ellipse at 90% 50%,
        rgba(99, 102, 241, 0.12) 0%,
        rgba(244, 63, 94, 0.08) 35%,
        transparent 65%
    );
}