/* ==========================================
   Safha - Advanced Custom CSS
   ========================================== */

/* --- Scrollbar --- */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #fafaf9;
}
::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* --- Typography Tweaks --- */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.03em;
}

/* --- Glassmorphism Utilities --- */
.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* --- Reveal Animations (Intersection Observer) --- */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Shine Effect for CTA Buttons --- */
.shine-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    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: skewX(-20deg);
    animation: shine 4s infinite;
    pointer-events: none;
}

@keyframes shine {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

/* --- Background Patterns --- */
.islamic-pattern-white {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20v-2H0V8h20V6H0V4h20V2H0V0h22v20h2V0h2v20h2V0h2v20h2V0h2v20h2V0h2v20h2v2H20v-1.5zM0 20h2v20H0V20zm4 0h2v20H4V20zm4 0h2v20H8V20zm4 0h2v20h-2V20zm4 0h2v20h-2V20zm4 4h20v2H20v-2zm0 4h20v2H20v-2zm0 4h20v2H20v-2zm0 4h20v2H20v-2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* --- Magnetic Button Reset --- */
.magnetic-btn {
    /* Handled via JS, but setting transition for smooth return */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}