body {
            background-color: #0f172a;
            color: #f8fafc;
            overflow-x: hidden;
            /* Hide scrollbar during splash screen */
        }
        body.splash-active {
            overflow: hidden;
        }

        /* --- Premium Minimalist Splash Screen --- */
        #splash-screen {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background-color: #0f172a; /* Deep brand dark */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1), visibility 0.8s cubic-bezier(0.65, 0, 0.35, 1), transform 1s cubic-bezier(0.65, 0, 0.35, 1);
        }
        
        #splash-screen.hide {
            opacity: 0;
            visibility: hidden;
            transform: scale(1.05); /* Subtle zoom out on exit for a premium feel */
        }

        .splash-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .splash-logo {
            font-size: 3.5rem;
            color: #fbbf24;
            filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.4));
            opacity: 0;
            transform: scale(0.5) translateY(20px);
            animation: premium-icon-reveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        }

        .splash-title {
            font-family: 'Cairo', sans-serif;
            font-size: 3.5rem;
            font-weight: 900;
            color: #ffffff;
            margin-top: 1rem;
            opacity: 0;
            transform: translateY(15px);
            /* Expanding letter spacing */
            animation: premium-text-reveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards;
        }

        .splash-subtitle {
            font-family: 'Tajawal', sans-serif;
            font-size: 1rem;
            color: #3b82f6;
            text-transform: uppercase;
            font-weight: 700;
            opacity: 0;
            transform: translateY(10px);
            animation: premium-subtitle-reveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
        }

        .splash-line {
            width: 0px;
            height: 1px;
            background: linear-gradient(90deg, transparent, #fbbf24, transparent);
            margin-top: 2.5rem;
            opacity: 0;
            animation: premium-line-sweep 2s cubic-bezier(0.65, 0, 0.35, 1) 0.8s forwards;
        }

        @keyframes premium-icon-reveal {
            0% { opacity: 0; transform: scale(0.5) translateY(20px); }
            100% { opacity: 1; transform: scale(1) translateY(0); }
        }

        @keyframes premium-text-reveal {
            0% { opacity: 0; transform: translateY(15px); letter-spacing: 2px; }
            100% { opacity: 1; transform: translateY(0); letter-spacing: 12px; }
        }

        @keyframes premium-subtitle-reveal {
            0% { opacity: 0; transform: translateY(10px); letter-spacing: 4px; }
            100% { opacity: 1; transform: translateY(0); letter-spacing: 16px; }
        }

        @keyframes premium-line-sweep {
            0% { width: 0px; opacity: 0; }
            30% { width: 150px; opacity: 1; }
            100% { width: 0px; opacity: 0; transform: translateX(100px); }
        }

        /* Main Content Wrapper (Hidden initially) */
        #main-content {
            opacity: 0;
            transform: translateY(20px);
            transition: all 1s ease 0.5s; /* Delay to let splash finish */
        }
        #main-content.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Scroll Reveal Utility */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }

        /* Glassmorphism */
        .glass-nav {
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        /* Modern Dynamic Navbar Classes */
        #navbar {
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .nav-scrolled {
            max-width: 1050px !important;
            padding-top: 10px !important;
            padding-bottom: 10px !important;
            background: rgba(255, 255, 255, 0.98) !important;
            backdrop-filter: blur(24px) saturate(200%) !important;
            border: 1px solid rgba(0, 0, 0, 0.05) !important;
            box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1) !important;
            border-radius: 100px !important;
            margin-top: 10px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        
        .nav-scrolled a.text-gray-300 {
            color: #1e293b !important;
        }
        .nav-scrolled a.text-gray-300:hover {
            color: #1d4ed8 !important;
            background: rgba(29, 78, 216, 0.08) !important;
        }
        
        .nav-scrolled #mobile-menu-toggle {
            background: rgba(0, 0, 0, 0.05) !important;
            border-color: rgba(0, 0, 0, 0.1) !important;
            color: #1e293b !important;
        }

        .glass-card {
            background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        /* Hover Effects */
        .hover-gold-glow:hover {
            box-shadow: 0 0 25px rgba(251, 191, 36, 0.3);
            border-color: rgba(251, 191, 36, 0.5);
        }
        .hover-blue-glow:hover {
            box-shadow: 0 0 25px rgba(59, 130, 246, 0.4);
        }

        /* Player Card Specifics */
        .player-card {
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
        }
        .player-card::before {
            content: '';
            position: absolute;
            top: 0; right: -100%; width: 50%; height: 100%;
            background: linear-gradient(to left, transparent, rgba(255,255,255,0.1), transparent);
            transform: skewX(25deg); /* Adjusted for RTL */
            transition: all 0.6s ease;
            z-index: 10;
        }
        .player-card:hover::before {
            right: 200%;
        }
        .player-img-wrapper {
            transition: transform 0.5s ease;
        }
        .player-card:hover .player-img-wrapper {
            transform: scale(1.08) translateY(-10px);
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: #0f172a; }
        ::-webkit-scrollbar-thumb { background: #1d4ed8; border-radius: 5px; }
        ::-webkit-scrollbar-thumb:hover { background: #3b82f6; }

        /* Magic Particle Animation */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
        .floating { animation: float 4s ease-in-out infinite; }
        
        /* Floating Animation */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
        .floating { animation: float 4s ease-in-out infinite; }
        
        /* Fix Arabic Typography Overlap */
        h1, h2, h3, h4, h5, h6 {
            line-height: 1.6 !important;
        }
        p {
            line-height: 1.8 !important;
        }
        .player-card h4 {
            line-height: 1.4 !important;
        }
        .player-card div, .player-card span {
            line-height: normal !important;
        }

        /* Video Card Play Button Overlay */
        .video-card-overlay {
            background: rgba(15, 23, 42, 0.4);
            transition: background 0.3s ease;
        }
        .video-card:hover .video-card-overlay {
            background: rgba(15, 23, 42, 0.1);
        }
        .play-btn {
            transition: all 0.3s ease;
        }
        .video-card:hover .play-btn {
            transform: scale(1.2);
            color: #fbbf24;
        }
    </style>