/* Global & Reset */
:root {
    --color-primary: #22c55e; /* Green */
    --color-secondary: #f97316; /* Orange */
    --color-void: #050505;
    --color-void-light: #0a0a0a;
    --color-gold: #ffd700;
    --color-red: #ef4444;
}

body {
    background-color: var(--color-void);
    color: #e5e5e5;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-void);
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* Sacred Geometry Patterns (SVG Backgrounds) */
.pattern-metatron {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 L93.3 25 L93.3 75 L50 100 L6.7 75 L6.7 25 Z' fill='none' stroke='%2322c55e' stroke-width='0.5'/%3E%3Cpath d='M50 0 L6.7 25 M50 0 L93.3 25 M50 100 L6.7 75 M50 100 L93.3 75 M6.7 25 L6.7 75 M93.3 25 L93.3 75 M50 0 L50 100 M6.7 25 L93.3 75 M93.3 25 L6.7 75' stroke='%2322c55e' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    animation: rotateSlow 120s linear infinite;
}

.pattern-flower {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='10' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='50' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='10' cy='30' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='30' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='47.3' cy='17.3' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='12.7' cy='42.7' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='12.7' cy='17.3' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='47.3' cy='42.7' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 120px 120px;
    animation: rotateReverse 240s linear infinite;
}

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

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

/* Utility Animations */
.animate-pulse-gold {
    animation: pulse-gold 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-gold {
    0%, 100% { opacity: 1; text-shadow: 0 0 10px var(--color-gold); }
    50% { opacity: .7; text-shadow: 0 0 2px var(--color-gold); }
}

/* Glassmorphism Helpers */
.glass-panel {
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}