@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Inter:wght@400;600;700;800&display=swap');

html,
body {
    scroll-behavior: smooth;
}

html[lang="ar"] body {
    font-family: 'Cairo', sans-serif;
}

html[lang="en"] body {
    font-family: 'Inter', sans-serif;
}

/* Custom Gradients and Colors */
.bg-primary-gradient {
    background: linear-gradient(135deg, #1E6FB8 0%, #2D8CFF 100%);
}

.text-primary-gradient {
    background: linear-gradient(135deg, #1E6FB8 0%, #2D8CFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-secondary {
    background-color: #F5B400;
}

.text-secondary {
    color: #F5B400;
}

/* Glassmorphism Dynamic */
.glass {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
}

.dark .glass {
    background: rgba(17, 24, 39, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-scrolled {
    background: rgba(255, 255, 255, 0.9) !important;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.dark .header-scrolled {
    background: rgba(17, 24, 39, 0.9) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Masterpiece Intro Animations */
.intro-letter {
    animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--delay);
}

.lightning-bolt {
    animation: lightningStrike 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate, slideUpFade 0.5s ease forwards;
    animation-delay: var(--delay);
    z-index: 10;
}

.loading-bar-container,
.loading-text {
    animation: fadeIn 0.5s ease forwards;
    animation-delay: var(--delay);
}

.loading-progress {
    animation: fillBar 2.5s cubic-bezier(0.8, 0, 0.2, 1) forwards;
    animation-delay: 1s;
    /* Start after letters */
}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes lightningStrike {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1.2) rotate(-5deg);
    }

    5%,
    15% {
        transform: translate(-50%, -50%) scale(1.3) rotate(5deg);
        opacity: 1;
    }

    10%,
    20% {
        transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
    }
}

@keyframes fillBar {
    0% {
        width: 0%;
    }

    40% {
        width: 45%;
    }

    70% {
        width: 80%;
    }

    100% {
        width: 100%;
        box-shadow: 0 0 20px #F5B400, 0 0 40px #F5B400;
    }
}

/* 3D and Lightning Masterpiece */
.perspective-1000 {
    perspective: 1000px;
}

.g-3d-rotate {
    animation: gRotate3D 4s ease-in-out infinite alternate;
    transform-style: preserve-3d;
}

@keyframes gRotate3D {
    0% {
        transform: rotateY(-15deg) rotateX(5deg);
    }

    100% {
        transform: rotateY(15deg) rotateX(-5deg);
    }
}

.animate-lightning-stroke {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: drawStroke 2s ease-out forwards infinite;
}

@keyframes drawStroke {
    0% {
        stroke-dashoffset: 400;
    }

    50% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -400;
    }
}

.animate-lightning-glow {
    animation: lightningPulse 1s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 15px rgba(229, 57, 53, 0.9));
}

@keyframes lightningPulse {
    0% {
        opacity: 0.6;
        filter: drop-shadow(0 0 5px rgba(229, 57, 53, 0.5));
    }

    100% {
        opacity: 1;
        filter: drop-shadow(0 0 25px rgba(229, 57, 53, 1));
    }
}

/* Toasts */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rtl #toast-container {
    right: 1.5rem;
}

.ltr #toast-container {
    left: 1.5rem;
}

.toast {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 1rem;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 250px;
    animation: toast-in 0.3s ease-out;
}

.dark .toast {
    background: rgba(31, 41, 55, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: white;
}

@keyframes toast-in {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Particle Animation */
.particle {
    animation: particleMove var(--p-d) ease-in-out infinite alternate;
    animation-delay: var(--p-delay);
}

@keyframes particleMove {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: translate(var(--p-x), var(--p-y));
        opacity: 0;
    }
}

.fade-out-super {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.hide-intro-instantly #intro-screen {
    display: none !important;
}

/* Card Hover Effects */
.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.dark .hover-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}