:root {
    --bg-dark: #050a0e;
    --accent-cyan: #22d3ee;
    --accent-purple: #a855f7;
    --text-primary: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.15);
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

html { 
    scroll-behavior: smooth; 
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    cursor: none;
}

/* Apply Arabic font when dir is rtl */
[dir="rtl"] body, 
[dir="rtl"] h1, 
[dir="rtl"] h2, 
[dir="rtl"] h3, 
[dir="rtl"] h4, 
[dir="rtl"] h5 { 
    font-family: 'Tajawal', sans-serif; 
}

h1, h2, h3, h4, h5 { 
    font-family: 'Space Grotesk', sans-serif; 
}

#bgCanvas { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 0; 
    pointer-events: none !important; 
}

#bgElements { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    pointer-events: none !important; 
    overflow: hidden; 
}

#movingProfile { 
    display: none; 
}

@media (min-width: 1024px) {
    #movingProfile {
        display: block;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 30vw; 
        max-width: 400px;
        z-index: 2; 
        pointer-events: none !important; 
        will-change: transform, opacity;
    }
    #movingProfile img {
        width: 100%; 
        aspect-ratio: 4/5; 
        object-fit: cover; 
        border-radius: 24px; 
        border: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 30px rgba(168, 85, 247, 0.1);
    }
}

.content-wrapper { 
    position: relative; 
    z-index: 3; 
}

#navbar { z-index: 50; }
#mobileMenu { z-index: 60; }
#projectModal { z-index: 70; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--accent-cyan), var(--accent-purple)); border-radius: 10px; }

.glass {
    background: var(--glass-bg); 
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border); 
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.gradient-text {
    background: linear-gradient(to right, var(--accent-cyan), var(--accent-purple));
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}

.custom-cursor-dot, .custom-cursor-ring {
    position: fixed; 
    top: 0; 
    left: 0; 
    pointer-events: none !important; 
    z-index: 9999;
    border-radius: 50%; 
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
}

.custom-cursor-dot { width: 8px; height: 8px; background: var(--accent-cyan); }
.custom-cursor-ring { width: 36px; height: 36px; border: 1.5px solid var(--accent-cyan); transition: transform 0.12s linear, width 0.3s ease, height 0.3s ease; }
.custom-cursor-ring.hovered { width: 64px; height: 64px; background: rgba(34, 211, 238, 0.1); }

.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

.floating-icon { position: absolute; opacity: 0.15; color: var(--text-primary); text-shadow: 0 0 15px var(--accent-cyan); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); font-size: 2rem; }
@media (min-width: 768px) { .floating-icon { font-size: 3rem; } }

.css-laptop {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotateX(10deg) rotateY(-20deg);
    width: 90%; max-width: 600px; height: auto; perspective: 1000px;
    opacity: 0.15; pointer-events: none !important; transition: transform 0.5s ease; display: none;
}
@media (min-width: 1024px) { .css-laptop { display: block; } }

.laptop-screen { width: 100%; height: 380px; background: rgba(13, 17, 23, 0.8); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 10px 10px 0 0; padding: 20px; overflow: hidden; position: relative; box-shadow: 0 0 50px rgba(34, 211, 238, 0.1); }
.laptop-base { width: 110%; height: 12px; background: rgba(255, 255, 255, 0.1); margin-left: -5%; border-radius: 0 0 10px 10px; transform: rotateX(80deg); transform-origin: top center; position: absolute; bottom: -6px; left: 0; }
.code-line { height: 8px; background: rgba(255, 255, 255, 0.2); margin-bottom: 12px; border-radius: 4px; font-family: 'Fira Code', monospace; }
.code-line:nth-child(odd) { width: 80%; background: rgba(34, 211, 238, 0.3); }
.code-line:nth-child(even) { width: 60%; background: rgba(168, 85, 247, 0.3); }

@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin-slow 20s linear infinite; }

@keyframes float-icon {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}
.animate-float-icon { animation: float-icon 4s ease-in-out infinite; }

@media (max-width: 1024px) {
    body { cursor: auto; }
    .custom-cursor-dot, .custom-cursor-ring { display: none; }
}

/* RTL Support Adjustments */
[dir="rtl"] .md\:text-right { text-align: left !important; }
[dir="rtl"] .md\:text-left { text-align: right !important; }
[dir="rtl"] .lg\:text-left { text-align: right !important; }
[dir="rtl"] .md\:pr-12 { padding-right: 0; padding-left: 3rem; }
[dir="rtl"] .md\:pl-12 { padding-left: 0; padding-right: 3rem; }
[dir="rtl"] .md\:flex-row-reverse { flex-direction: row; }
[dir="rtl"] .md\:flex-row { flex-direction: row-reverse; }
[dir="rtl"] .ml-12 { margin-left: 0; margin-right: 3rem; }