/* Custom styling for Toss-like Smooth Scrolling and Glassmorphism */

/* Scroll Reveal animation classes */
.toss-reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.toss-reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.toss-reveal-delay-1 { transition-delay: 0.1s; }
.toss-reveal-delay-2 { transition-delay: 0.2s; }
.toss-reveal-delay-3 { transition-delay: 0.3s; }
.toss-reveal-delay-4 { transition-delay: 0.4s; }

/* Dynamic Glassmorphism backdrop */
.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.08);
}

.glass-panel-light {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-nav {
    background: rgba(11, 17, 32, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Gradient Texts */
.text-gradient-blue {
    background: linear-gradient(135deg, #36a5f7 0%, #0054a3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

.text-gradient-cyan {
    background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Shimmer Glow */
.glow-blue {
    box-shadow: 0 0 50px -10px rgba(12, 135, 232, 0.4);
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0b1120;
}
::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #334155;
}