/* Custom Fonts */
.font-arabic {
    font-family: 'Amiri', 'Lateef', serif;
}

.font-serif {
    font-family: 'Playfair Display', serif;
}

body {
    font-family: 'Raleway', sans-serif;
    overflow-x: hidden;
    position: relative;
}

/* Define Custom Variables */
:root {
    --primary: #23DE00;
    --primary-dark: #1CA900;
    --primary-light: #5AFF3D;
    --primary-10: rgba(35, 222, 0, 0.1);
    --primary-20: rgba(35, 222, 0, 0.2);
    --primary-50: rgba(35, 222, 0, 0.5);
}

/* Islamic Pattern Background */
.pattern-islamic {
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9V0zm25.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm-20 20l1.732 1-10 17.32-1.732-1 10-17.32zM58.16 4.134l1 1.732-17.32 10-1-1.732 17.32-10zm-40 40l1 1.732-17.32 10-1-1.732 17.32-10zM80 9v2H60V9h20zM20 69v2H0v-2h20zm79.32-55.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 49v2H40v-2h20zm19.32 34.134l-1 1.732-17.32-10 1-1.732 17.32 10zM100 29v2H80v-2h20zm19.32 5.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 89v2H40v-2h20zm60-10v2H100v-2h20zm0 40v-2h20v2h-20zM109.32 55.134l-1 1.732-17.32-10 1-1.732 17.32 10zM120 69v2h-20v-2h20zm0 20v2h-20v-2h20zm-84.134 9.16l-1.732 1-10-17.32 1.732-1 10 17.32zm64.134 0l-1.732 1-10-17.32 1.732-1 10 17.32zm-79.32-60l-1.732-1 10-17.32 1.732 1-10 17.32zM60 0v2H40V0h20zm0 100v2H40v-2h20zm-20-90v2H0v-2h20zm0 60v2H0v-2h20zM100 0v2H80V0h20zm0 100v2H80v-2h20zm40-90v2h-20v-2h20zm0 60v2h-20v-2h20zm-20-90v2H100V0h20zm0 100v2H100v-2h20z' fill='%2323DE00' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Enhanced Page Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px var(--primary-20); }
    50% { box-shadow: 0 0 20px var(--primary-50); }
}

/* Section Animations */
main {
    animation: fadeIn 0.8s ease-out;
}

[x-show="activeTab === 'biography'"],
[x-show="activeTab === 'narrations'"],
[x-show="activeTab === 'chains'"],
[x-show="activeTab === 'legacy'"] {
    animation: slideInUp 0.5s ease-out;
}

/* Card Hover Effects */
.hover\:shadow-md {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

.hover\:shadow-2xl {
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Enhanced Visual Elements */
blockquote {
    position: relative;
}

blockquote::before {
    content: '"';
    position: absolute;
    top: -15px;
    left: -10px;
    font-size: 40px;
    color: var(--primary-20);
    font-family: 'Playfair Display', serif;
}

/* Custom Gradient Backgrounds */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.bg-gradient-primary-light {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
}

.custom-gradient {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.custom-gradient-light {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
}

.custom-gradient-diagonal {
    background: linear-gradient(45deg, var(--primary-dark), var(--primary), var(--primary-light));
}

.custom-shine {
    position: relative;
    overflow: hidden;
}

.custom-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(30deg);
    animation: shine 5s infinite linear;
}

/* Enhanced Cards */
.card-enhanced {
    transition: all 0.3s ease;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.card-enhanced:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.07);
}

/* Button Styles */
button {
    transition: all 0.3s ease;
}

button.primary {
    background-color: var(--primary);
    color: white;
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    border: none;
    box-shadow: 0 4px 6px rgba(35, 222, 0, 0.25);
    transition: all 0.3s ease;
}

button.primary:hover {
    background-color: var(--primary-dark);
    box-shadow: 0 6px 10px rgba(35, 222, 0, 0.3);
    transform: translateY(-2px);
}

/* Interactive Elements */
.interactive {
    cursor: pointer;
    transition: all 0.3s ease;
}

.interactive:hover {
    transform: scale(1.05);
}

.hover-lift {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hover-lift:hover {
    transform: translateY(-5px);
}

.hover-glow:hover {
    box-shadow: 0 0 15px var(--primary-20);
}

/* Shimmer Effect for loading states */
.shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(35, 222, 0, 0.3);
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(35, 222, 0, 0.5);
}

/* Enhanced Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .dark-mode {
        background: linear-gradient(to bottom right, #1a202c, #2d3748);
        color: #e2e8f0;
    }
    
    .dark-mode .bg-white {
        background-color: #2d3748;
        color: #e2e8f0;
    }
    
    .dark-mode .text-gray-700,
    .dark-mode .text-gray-800,
    .dark-mode .text-gray-900 {
        color: #e2e8f0;
    }
    
    .dark-mode .text-gray-500,
    .dark-mode .text-gray-600 {
        color: #a0aec0;
    }
    
    .dark-mode .border-gray-200 {
        border-color: #4a5568;
    }
    
    .dark-mode .bg-gray-50 {
        background-color: #2d3748;
    }
    
    .dark-mode .bg-gray-100 {
        background-color: #4a5568;
    }
    
    .dark-mode .text-primary {
        color: var(--primary-light);
    }
    
    .dark-mode .bg-primary\/10 {
        background-color: rgba(90, 255, 61, 0.1);
    }
}

/* Print Styles */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    .no-print {
        display: none !important;
    }
    
    .bg-white {
        box-shadow: none !important;
    }
    
    main {
        max-width: 100% !important;
    }
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .sm\:space-x-8 {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    
    blockquote::before {
        font-size: 30px;
    }
}

/* Additional Decorative Elements */
.decorative-circle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(35, 222, 0, 0.1), transparent);
    z-index: -1;
}

/* Enhanced Tab Transitions */
[x-cloak] {
    display: none !important;
}

/* Subtle background pattern for page */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(to right, rgba(249, 250, 251, 0.8), rgba(249, 250, 251, 0.8)),
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2323DE00' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
    z-index: -1;
}

/* Floating Animation for Decorative Elements */
.float {
    animation: float 6s ease-in-out infinite;
}

.float-slow {
    animation: float 8s ease-in-out infinite;
}

.float-fast {
    animation: float 4s ease-in-out infinite;
}

/* Particle Animations */
.particle {
    position: absolute;
    border-radius: 50%;
    background-color: white;
    opacity: 0.5;
}

.particle-1 {
    width: 8px;
    height: 8px;
    animation: float 6s infinite ease-in-out;
}

.particle-2 {
    width: 12px;
    height: 12px;
    animation: float 8s infinite ease-in-out;
}

.particle-3 {
    width: 6px;
    height: 6px;
    animation: float 5s infinite ease-in-out;
}

/* Interactive elements */
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Material Design Ripple Effect */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255,255,255,0.7) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10,10);
    opacity: 0;
    transition: transform .3s, opacity .5s;
}

.ripple:active:after {
    transform: scale(0,0);
    opacity: 0.3;
    transition: 0s;
}