/* Premium System Design Core Foundations with Breathing Background Matrix */

/* Keyframe for slowly shifting luxurious background matrix */
@keyframes luxuryAmbientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.luxury-breathing-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1;
    /* Deep charcoal slate base layered with luxurious dark amber/bronze hues */
    background: linear-gradient(-45deg, #020203, #0b0b0e, #14110d, #050507, #0d0e12);
    background-size: 400% 400%;
    animation: luxuryAmbientShift 22s ease-in-out infinite;
}

html, body {
    background-color: transparent;
    color: #f5f5f7;
    margin: 0; padding: 0;
}

* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
input, textarea, select {
    -webkit-user-select: auto;
    user-select: auto;
}
img, video {
    pointer-events: none;
    -webkit-user-drag: none;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #000000; }
::-webkit-scrollbar-thumb { background: #26262b; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #c8a56a; }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ambient-layer {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle 800px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(200,165,106,0.06), transparent 80%);
    z-index: 0;
    pointer-events: none;
    transition: opacity 1s ease;
    animation: breathAmbient 6s ease-in-out infinite alternate;
}
@keyframes breathAmbient {
    0% { opacity: 0.4; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.05); }
}

.btn-breath-bg {
    background: linear-gradient(90deg, #ffffff, #e5d1a5, #ffffff, #e5d1a5);
    background-size: 300% 100%;
    animation: gradient-slide 4s linear infinite;
    color: #000;
    border: none;
}
.btn-breath-bg:hover {
    background: linear-gradient(90deg, #c8a56a, #ffffff, #c8a56a, #ffffff);
    background-size: 300% 100%;
}
@keyframes gradient-slide {
    0% { background-position: 100% 0%; }
    100% { background-position: 0% 0%; }
}

.btn-colorful-gradient {
    background: linear-gradient(90deg, #ff3366, #ff9933, #3b82f6, #00d2ff, #ff3366);
    background-size: 400% 100%; animation: gradient-slide 5s linear infinite;
    border: none; box-shadow: 0 10px 30px -10px rgba(59, 130, 246, 0.4);
}
.btn-colorful-gradient:hover {
    box-shadow: 0 15px 40px -10px rgba(255, 51, 102, 0.6);
    transform: translateY(-2px) scale(1.01);
}

.text-breath-gradient {
    background: linear-gradient(90deg, #60a5fa, #c084fc, #60a5fa);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: text-gradient-slide 3s linear infinite;
}
@keyframes text-gradient-slide {
    to { background-position: 200% center; }
}

.glass {
    background: rgba(13, 13, 15, 0.4);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.glass-nav {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.noise-bg {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 9998; opacity: 0.035;
    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.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.modal-overlay {
    opacity: 0; pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-panel {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.chart-container {
    position: relative; width: 100%; max-width: 920px;
    margin-left: auto; margin-right: auto;
    height: 42vh; max-height: 420px; min-height: 260px;
}

.hero-glow {
    position: absolute; width: 100vw; height: 100vw;
    background: radial-gradient(circle, rgba(200,165,106,0.04) 0%, rgba(0,0,0,0) 65%);
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 0; pointer-events: none;
}

@keyframes deep-breath {
    0%, 100% { transform: scale(1) translateY(0); filter: brightness(1); }
    50% { transform: scale(1.04) translateY(-6px); filter: brightness(1.2); }
}
.animate-deep-breath { animation: deep-breath 7s ease-in-out infinite; }

@keyframes scroll-line {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(200%); }
}
.animate-scroll-line { animation: scroll-line 2.2s cubic-bezier(0.75, 0, 0.25, 1) infinite; }

.ai-loader {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 50%; border-top-color: #ffffff;
    animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ai-tab { border-bottom: 2px solid transparent; transition: all 0.3s ease; }
.ai-tab.active { border-bottom-color: #3b82f6; color: #60a5fa; }

.playing-audio { animation: pulse-border 1.5s infinite; }
@keyframes pulse-border {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255, 0.35); }
    70% { box-shadow: 0 0 0 8px rgba(255,255,255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255, 0); }
}
input:focus, select:focus, textarea:focus { outline: none; }