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

/* Glassmorphism Utilities */
@layer components {
    .glass-nav {
        @apply bg-gradient-to-r from-parot-purple via-parot-pink to-parot-blue shadow-lg border-b border-white/20;
    }
    .glass-container {
        @apply bg-white/5 backdrop-blur-lg shadow-[0_8px_32px_0_rgba(31,38,135,0.37)];
    }
    .glass-btn {
        @apply bg-white/10 backdrop-blur-md border border-white/20 text-white shadow-[0_4px_15px_rgba(0,0,0,0.2)];
    }
}

/* Base Body Styles */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* RTL Font Adjustment */
html[dir="rtl"], html[dir="rtl"] body {
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}
html[dir="ltr"], html[dir="ltr"] body {
    font-family: 'Outfit', sans-serif !important;
}

/* Custom Keyframes & Animations */
@layer utilities {
    .animation-delay-2000 {
        animation-delay: 2s;
    }
    .animation-delay-4000 {
        animation-delay: 4s;
    }
    .animation-delay-6000 {
        animation-delay: 6s;
    }
    .pause {
        animation-play-state: paused;
    }
}

@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
}

/* Preloader & Extra Animations */
#preloader {
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
}
#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

@keyframes pulse-glow {
    0%, 100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.5)); }
    50% { transform: scale(1.1); opacity: 0.8; filter: drop-shadow(0 0 25px rgba(236, 72, 153, 0.8)); }
}

.animate-pulse-glow {
    animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Scroll Reveal Classes */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.5, 0, 0, 1);
}

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

/* Marquee Animation */
@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes marquee2 {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}

/* Marquee for RTL layout */
@keyframes marqueeRTL {
    0% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}
@keyframes marquee2RTL {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}

html[dir="ltr"] .animate-marquee {
    animation: marquee 25s linear infinite;
}
html[dir="ltr"] .animate-marquee2 {
    animation: marquee2 25s linear infinite;
}

html[dir="rtl"] .animate-marquee {
    animation: marqueeRTL 25s linear infinite;
}
html[dir="rtl"] .animate-marquee2 {
    animation: marquee2RTL 25s linear infinite;
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #020617; 
}
::-webkit-scrollbar-thumb {
    background: #3B82F6; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #8B5CF6; 
}