/* Custom clean styles that extend Tailwind */
body {
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Sora', sans-serif;
    letter-spacing: -0.02em;
}

.glass-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-reveal {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

.reveal {
    opacity: 0;
    transform: translateY(20px);
}

@keyframes text-gradient {
    0% { background-position: 0% center; }
    100% { background-position: -200% center; }
}

.animate-text-gradient {
    background-size: 200% auto;
    animation: text-gradient 4s linear infinite;
}

.text-glow {
    text-shadow: 0 0 40px rgba(45, 212, 191, 0.4);
}

/* Infinite Marquee Slider */
@keyframes scroll-x {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 1rem)); } /* -50% and half the gap (gap-8 is 2rem) */
}

.animate-scroll-x {
    animation: scroll-x 40s linear infinite;
}

.animate-scroll-x:hover {
    animation-play-state: paused;
}

/* Custom Scrollbar for a premium feel */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f9fafb; 
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}

/* Zoho Style Hero Animations */
@keyframes dash {
    from { stroke-dashoffset: 1000; }
    to { stroke-dashoffset: 0; }
}
@keyframes dash-reverse {
    from { stroke-dashoffset: -1000; }
    to { stroke-dashoffset: 0; }
}
.animate-dash {
    animation: dash 30s linear infinite;
}
.animate-dash-reverse {
    animation: dash-reverse 30s linear infinite;
}

@keyframes float-1 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}
@keyframes float-2 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(-2deg); }
}
@keyframes float-3 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(15px); }
}
@keyframes float-4 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(20px) rotate(1deg); }
}

#widget-1 { animation: float-1 6s ease-in-out infinite; }
#widget-2 { animation: float-2 7s ease-in-out infinite 1s; }
#widget-3 { animation: float-3 5s ease-in-out infinite 2s; }
#widget-4 { animation: float-4 6.5s ease-in-out infinite 0.5s; }