/**
 * Super Minds - Common Styles
 * Shared CSS variables, keyframes, and utility classes
 */

/* ============================================
   CSS Variables
   ============================================ */
:root {
    /* Brand Colors */
    --color-primary: #FF6B6B;
    --color-secondary: #FF8E53;
    --color-accent: #FFD93D;
    --color-blue: #4ECDC4;
    
    /* Background Gradients */
    --bg-gradient-sky: linear-gradient(180deg, #87CEEB 0%, #98FB98 40%, #228B22 100%);
    
    /* Typography */
    --font-chinese: 'Noto Serif SC', 'Noto Sans SC', serif;
    --font-english: 'Nunito', sans-serif;
}

/* ============================================
   Base Styles
   ============================================ */
.sm-body {
    font-family: var(--font-english), var(--font-chinese), sans-serif;
    background: var(--bg-gradient-sky);
    min-height: 100vh;
}

.sm-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.3) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
    }
    50% { 
        transform: translateY(-10px) rotate(5deg); 
    }
}

/* ============================================
   Utility Classes
   ============================================ */
.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.float-anim {
    animation: float 3s ease-in-out infinite;
}

/* Calligraphy font class */
.calligraphy {
    font-family: 'Ma Shan Zheng', cursive;
}

/* Cinnabar color (Chinese red) */
.cinnabar {
    color: #FF6B6B;
}

.bg-cinnabar {
    background-color: #FF6B6B;
}

/* Ink gradient (common header style) */
.ink-gradient {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 50%, #FF6B6B 100%);
    border-bottom: 6px solid #FFD93D;
    box-shadow: 0 8px 0 rgba(0,0,0,0.1);
}

/* Glass card effect */
.glass-card {
    background: linear-gradient(145deg, #ffffff 0%, #f0f8ff 100%);
    border: 5px solid #FF6B6B;
    border-radius: 25px;
    box-shadow: 
        0 10px 0 #FFD93D,
        0 20px 40px rgba(0,0,0,0.2);
}

/* Card hover effect */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px) rotate(2deg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2), 0 0 0 6px #FFD93D;
}

/* Unit badge */
.unit-badge {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
    border: 4px solid #FFD93D;
    box-shadow: 0 6px 0 rgba(0,0,0,0.2), 0 8px 15px rgba(0,0,0,0.2);
    border-radius: 20px;
    transform: rotate(-3deg);
}