/* ====== Global Premium Custom CSS ====== */

/* تخصيص شريط التمرير (Scrollbar) ليتناسب مع الهوية */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0A0A0A; /* Matte Black */
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #C5A86B, #B89753); /* Gold Gradient */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #D4AF37;
}

/* تنعيم الانتقال للروابط والأزرار */
a, button {
    transition: all 0.3s ease-in-out;
}

/* ====== Animations for Premium Hero Section ====== */

/* 1. ظهور النصوص من الأسفل للأعلى */
@keyframes fadeUp {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}
.animate-fade-up {
    opacity: 0;
    animation: fadeUp 1s ease-out forwards;
}

/* 2. حركة الخلفية البطيئة (Ken Burns Effect) */
@keyframes kenburns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.1) translate(-1%, -1%); }
}
.animate-kenburns {
    animation: kenburns 20s ease-in-out infinite alternate;
}

/* 3. لمعان الذهب المتحرك (Shimmer Effect) */
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.animate-shimmer {
    background-size: 200% auto;
    animation: shimmer 4s linear infinite;
}

/* ضبط حاوية الفيديو أو الصورة المتحركة لمنع الفيضان */
.overflow-hidden {
    overflow: hidden;
}
/* ====== تنسيقات معرض الأعمال (Portfolio) ====== */
#lightbox { z-index: 9999; }
#lightbox button { z-index: 10000; }
#lightbox-close-btn {
    position: absolute !important;
    top: 1.25rem !important;
    right: 1.25rem !important;
    z-index: 10001 !important;
}
#lightbox-img {
    max-width: 75vw !important;
    max-height: 75vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 0.75rem;
    border: 2px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1024px) {
    #lightbox-img { max-width: 850px !important; }
}
.gallery-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(212, 175, 55, 0.05);
}
.gallery-item.reveal { opacity: 1; transform: translateY(0); }
.gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(212, 175, 55, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(212, 175, 55, 0.4);
    z-index: 10;
}
.gallery-item:active { transform: scale(0.95); transition: transform 0.1s ease; }
.ba-image-top {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    animation: crossfade-pulse 8s ease-in-out infinite;
}
@keyframes crossfade-pulse {
    0%, 35% { opacity: 1; transform: scale(1); }
    50%, 85% { opacity: 0; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}
.ba-dynamic-badge {
    position: absolute; top: 12px; right: 12px;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(212, 175, 55, 0.4); padding: 5px 12px; border-radius: 9999px;
    display: flex; align-items: center; gap: 6px; z-index: 10; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.ba-dynamic-badge svg { width: 12px; height: 12px; color: #d4af37; flex-shrink: 0; }
.ba-text-wrapper { position: relative; width: 45px; height: 14px; overflow: hidden; }
.ba-text-inner {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: white; letter-spacing: 0.5px;
}
.ba-text-vorher { animation: text-slide-vorher 8s ease-in-out infinite; }
@keyframes text-slide-vorher {
    0%, 40% { opacity: 1; transform: translateY(0); }
    45%, 90% { opacity: 0; transform: translateY(-100%); }
    95%, 100% { opacity: 1; transform: translateY(0); }
}
.ba-text-nachher { animation: text-slide-nachher 8s ease-in-out infinite; }
@keyframes text-slide-nachher {
    0%, 40% { opacity: 0; transform: translateY(100%); }
    45%, 90% { opacity: 1; transform: translateY(0); }
    95%, 100% { opacity: 0; transform: translateY(100%); }
}
#lightbox-content { position: relative; overflow: hidden; border-radius: 0.75rem; }
#shine-wipe {
    position: absolute; top: 0; left: -150%; width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.2) 40%, rgba(212, 175, 55, 0.4) 50%, rgba(255, 255, 255, 0.2) 60%, transparent 100%);
    transform: skewX(-20deg); z-index: 15; pointer-events: none; opacity: 0;
}
#shine-wipe.active { opacity: 1; animation: shine-sweep 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes shine-sweep { 0% { left: -150%; } 100% { left: 150%; } }
#progress-rect.animating { animation: draw-border-progress 3s linear forwards; }
@keyframes draw-border-progress { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } }
/* تنسيقات سلايدر المعاينة */
.portfolio-slider { -webkit-overflow-scrolling: touch; }
.portfolio-slider.active { cursor: grabbing; }
.scroll-snap-type-x.mandatory { scroll-snap-type: x mandatory; }
.scroll-snap-align.start { scroll-snap-align: start; }
.portfolio-card:focus-visible { outline: 3px solid #facc15; outline-offset: 4px; }
/* إخفاء شريط التمرير للسلايدر ليبدو احترافياً */
#portfolio-slider {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
#portfolio-slider::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
}