/* 
  identity.css
  The Premium Visual DNA for ZimArtist
*/

@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&family=Inter:wght@100..900&display=swap');

:root {
    --gold: #f59e0b;
    --bg: #050505;
    --text: #F5F5F5;
}

body { 
    background: var(--bg); 
    color: var(--text); 
    font-family: 'Inter', sans-serif; 
    overflow-x: hidden; 
    position: relative; 
    min-height: 100vh;
}

/* Premium Noise Texture */
body::before {
    content: '';
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.05;
    pointer-events: none;
    z-index: 100;
}

/* Global Vignette */
.vignette {
    position: fixed; inset: 0;
    background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
    z-index: 2;
}

.gold-glow { 
    background: radial-gradient(circle at 50% -10%, rgba(245, 158, 11, 0.12) 0%, transparent 80%); 
}

.font-anton { font-family: 'Antonio', sans-serif; }

/* Global Typography System */
h1, h2, h3, h4, .font-anton {
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
    font-weight: 900 !important;
    transform: scaleY(0.92);
    transform-origin: bottom;
    display: inline-block;
}

@keyframes zimColorBreathe {
    0%, 100% { background-color: #FFCA2B; box-shadow: 0 0 12px #FFCA2B; } /* Zimbabwe Gold */
    25% { background-color: #00844F; box-shadow: 0 0 12px #00844F; }   /* Zimbabwe Green */
    50% { background-color: #D40000; box-shadow: 0 0 12px #D40000; }   /* Zimbabwe Red */
    75% { background-color: #FFFFFF; box-shadow: 0 0 12px #FFFFFF; }   /* White */
}
.zim-color-glow {
    animation: zimColorBreathe 8s infinite ease-in-out;
    border-radius: 99px;
    filter: blur(0.5px);
}


/* System Reveal animations */
.reveal-node {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-node.active {
    opacity: 1;
    transform: translateY(0);
}

/* Ambient Scanning */
.energy-scan {
    position: fixed; top: 0; left: 0; width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.1), transparent);
    z-index: 5;
    animation: scanVertical 15s infinite linear;
    pointer-events: none;
}

@keyframes scanVertical {
    0% { transform: translateY(-100vh); }
    100% { transform: translateY(100vh); }
}

.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s ease;
}
.glass-panel:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(245, 158, 11, 0.3);
}

/* Artist Card System */
.artist-card-aura {
    animation: auraBreathe 8s infinite ease-in-out;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes auraBreathe {
    0%, 100% { box-shadow: 0 0 40px rgba(245, 158, 11, 0.05); }
    50% { box-shadow: 0 0 100px rgba(245, 158, 11, 0.15); }
}

.light-sweep {
    position: relative; overflow: hidden;
}
.light-sweep::after {
    content: '';
    position: absolute; top: -100%; left: -100%; width: 300%; height: 300%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.02), transparent);
    transform: rotate(45deg);
    animation: lightSweep 15s infinite linear;
    pointer-events: none;
}

@keyframes lightSweep {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

/* System Footer */
.footer-system {
    opacity: 0;
    transition: opacity 2s ease;
    pointer-events: none;
    user-select: none;
}
.footer-system.ready { opacity: 1; }
.footer-glow-line {
    width: 160px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.5), transparent);
    filter: blur(2px);
    opacity: 0;
    margin-bottom: 24px;
}
.footer-text {
    font-size: 8px;
    font-weight: 300;
    letter-spacing: 0.8em;
    color: rgba(255, 255, 255, 0.15);
    opacity: 0;
}

.footer-active .footer-glow-line { animation: footerGlowCycle 10s infinite; }
.footer-active .footer-text { animation: footerTextCycle 10s infinite; }

@keyframes footerGlowCycle {
    0%, 40%, 90%, 100% { opacity: 0; transform: scaleX(0.7); }
    50%, 80% { opacity: 1; transform: scaleX(1); }
}
@keyframes footerTextCycle {
    0%, 50%, 85%, 100% { opacity: 0; transform: translateY(5px); }
    60%, 75% { opacity: 1; transform: translateY(0); }
}