@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --color-bg: #050507;
    --color-blue-glow: #007AFF;
}

body {
    background-color: var(--color-bg);
    font-family: 'Inter', sans-serif;
}

/* Chinese Font Override */
h1, h2, h3, h4, .font-zh {
    font-family: 'Noto Sans SC', sans-serif;
}

/* Custom Grid Background */
.grid-bg {
    background-size: 50px 50px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}

/* Typography Effects */
.text-stroke-white {
    -webkit-text-stroke: 1px rgba(255,255,255,0.8);
    color: transparent;
}

.text-stroke-blue {
    -webkit-text-stroke: 2px #007AFF;
    color: transparent;
}

.text-stroke-blue-dark {
    -webkit-text-stroke: 1px #1e3a8a;
    color: transparent;
}

.gradient-text {
    background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Animations */
@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

.brain-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 5s linear infinite alternate;
}

.delay-1 {
    animation-delay: 1s;
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.dash-rotate {
    stroke-dasharray: 10;
    animation: spin-slow 20s linear infinite;
    transform-origin: center;
}

.dash-rotate-reverse {
    stroke-dasharray: 5;
    animation: spin-slow 15s linear infinite reverse;
    transform-origin: center;
}

/* Utility Overrides */
.counter {
    font-variant-numeric: tabular-nums;
}

/* Hide Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #000;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555;
}