@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,400&display=swap');

body {
    background-color: #050505;
    color: #ffffff;
    font-family: 'Satoshi', 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Typography Overrides */
h1,
h2,
h3,
h4,
.font-display {
    font-family: 'Satoshi', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* --- THE GLOWING RING (CSS Version) --- */
/* Used for buttons and cards where WebGL is too heavy */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.glowing-ring {
    position: relative;
    isolation: isolate;
}

.glowing-ring::before {
    content: "";
    position: absolute;
    inset: -2px;
    /* Ring Thickness */
    border-radius: inherit;
    background: conic-gradient(from var(--angle),
            transparent 0%,
            #ff4500 20%,
            #ff8800 50%,
            #ff4500 80%,
            transparent 100%);
    z-index: -1;
    animation: spin 3s linear infinite;
    filter: blur(8px);
    /* The Glow */
    opacity: 0.8;
}

.glowing-ring::after {
    content: "";
    position: absolute;
    inset: -1px;
    /* Sharp bright line */
    border-radius: inherit;
    background: conic-gradient(from var(--angle),
            transparent 0%,
            #ff8800 20%,
            #ffffff 50%,
            #ff8800 80%,
            transparent 100%);
    z-index: -1;
    animation: spin 3s linear infinite;
    opacity: 0.9;
}

@keyframes spin {
    to {
        --angle: 360deg;
    }
}

/* Subtler Border Gradient for cards */
.border-gradient {
    position: relative;
    background: #0a0a0a;
    background-clip: padding-box;
    border: 1px solid transparent;
}

.border-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: inherit;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
}

/* Text Gradients */
.text-gradient-gold {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFD700 50%, #FF8C00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-magma {
    background: linear-gradient(to right, #ff8a00, #e52e71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Utility Animations */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Noise Texture Overlay */
.bg-noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.5'/%3E%3C/svg%3E");
}