/* ============================================ */
/* Rokn Al-Snam — Premium Styles v2             */
/* ============================================ */

:root {
    --gold: #D4A853;
    --gold-light: #E8C97A;
    --gold-dark: #B8912F;
    --navy: #1e1a2e;
    --navy-light: #2a2540;
    --navy-dark: #140f1e;
}

/* ============================================ */
/* Base & Typography                            */
/* ============================================ */
html {
    scroll-behavior: smooth;
}
html[lang="ar"] { font-family: 'Cairo', sans-serif; }
html[lang="en"] { font-family: 'Inter', sans-serif; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
::selection {
    background: rgba(212, 168, 83, 0.3);
    color: #fff;
}

/* ============================================ */
/* Hero — Smooth animated background            */
/* ============================================ */
.hero-bg {
    background: radial-gradient(ellipse at 20% 50%, rgba(212,168,83,0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(212,168,83,0.04) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 80%, rgba(42,37,64,0.8) 0%, transparent 50%),
                linear-gradient(180deg, var(--navy-dark) 0%, var(--navy) 50%, var(--navy-dark) 100%);
}

/* Floating orbs */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    animation: orbFloat 8s ease-in-out infinite;
}
.hero-orb-1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(212,168,83,0.12), transparent 70%);
    top: 10%; left: 15%;
    animation-delay: 0s;
    animation-duration: 12s;
}
.hero-orb-2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(212,168,83,0.08), transparent 70%);
    bottom: 20%; right: 10%;
    animation-delay: -4s;
    animation-duration: 10s;
}
.hero-orb-3 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(232,201,122,0.1), transparent 70%);
    top: 60%; left: 60%;
    animation-delay: -2s;
    animation-duration: 14s;
}

@keyframes orbFloat {
    0%, 100% { opacity: 0.4; transform: translate(0, 0) scale(1); }
    25% { opacity: 0.7; transform: translate(30px, -20px) scale(1.1); }
    50% { opacity: 0.5; transform: translate(-20px, 15px) scale(0.95); }
    75% { opacity: 0.8; transform: translate(15px, 25px) scale(1.05); }
}

/* Canvas for particles — sits in hero */
#hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Diagonal gold lines — seamless loop */
.hero-lines {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.04;
}
.hero-lines::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -50%;
    right: -50%;
    bottom: 0;
    height: 300%;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 80px,
        var(--gold) 80px,
        var(--gold) 81px
    );
    animation: linesScroll 25s linear infinite;
}

@keyframes linesScroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(33.333%); }
}

/* ============================================ */
/* Navbar                                       */
/* ============================================ */
#navbar {
    background: transparent;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
#navbar.scrolled {
    background: rgba(30, 26, 46, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(212, 168, 83, 0.08);
}

/* Active nav link */
.nav-link.active-section {
    color: var(--gold) !important;
    position: relative;
}
.nav-link.active-section::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gold);
    border-radius: 1px;
    animation: navUnderline 0.3s ease forwards;
}
@keyframes navUnderline {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ============================================ */
/* Scroll Animations — multiple types           */
/* ============================================ */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger per grid position */
.animate-on-scroll:nth-child(1) { transition-delay: 0s; }
.animate-on-scroll:nth-child(2) { transition-delay: 0.08s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.16s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.24s; }
.animate-on-scroll:nth-child(5) { transition-delay: 0.12s; }
.animate-on-scroll:nth-child(6) { transition-delay: 0.20s; }
.animate-on-scroll:nth-child(7) { transition-delay: 0.28s; }

/* ============================================ */
/* Section Headers — decorative                 */
/* ============================================ */
.section-badge {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid rgba(212, 168, 83, 0.25);
    border-radius: 100px;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(212, 168, 83, 0.06);
    backdrop-filter: blur(4px);
}

/* ============================================ */
/* Service Cards — premium glass style          */
/* ============================================ */
.service-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(42,37,64,0.5) 0%, rgba(30,26,46,0.3) 100%);
    border: 1px solid rgba(212, 168, 83, 0.08);
    backdrop-filter: blur(8px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: scaleX(0);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(212,168,83,0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
}
.service-card:hover {
    border-color: rgba(212, 168, 83, 0.25);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(212, 168, 83, 0.05);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover::after { opacity: 1; }

/* Icon container glow on hover */
.service-card:hover .service-icon {
    box-shadow: 0 0 20px rgba(212, 168, 83, 0.2);
}

/* ============================================ */
/* Filter Buttons                               */
/* ============================================ */
.filter-btn {
    color: rgba(255, 255, 255, 0.45);
    background: transparent;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.filter-btn:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(212, 168, 83, 0.06);
}
.filter-btn.active {
    color: var(--navy-dark);
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 4px 15px rgba(212, 168, 83, 0.3);
}

/* ============================================ */
/* Swiper — premium styling                     */
/* ============================================ */
.projects-swiper {
    padding-bottom: 50px;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--gold) !important;
    background: rgba(30, 26, 46, 0.8);
    backdrop-filter: blur(8px);
    width: 48px !important;
    height: 48px !important;
    border-radius: 50%;
    border: 1px solid rgba(212, 168, 83, 0.2);
    transition: all 0.3s;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: var(--gold);
    color: var(--navy-dark) !important;
    box-shadow: 0 4px 20px rgba(212, 168, 83, 0.3);
}
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 16px !important;
    font-weight: bold;
}

/* RTL arrow flip */
[dir="rtl"] .swiper-button-next::after { content: 'prev' !important; }
[dir="rtl"] .swiper-button-prev::after { content: 'next' !important; }

.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.2) !important;
    width: 10px !important;
    height: 10px !important;
    opacity: 1 !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.swiper-pagination-bullet-active {
    background: var(--gold) !important;
    width: 32px !important;
    border-radius: 5px !important;
    box-shadow: 0 0 10px rgba(212, 168, 83, 0.3);
}

.swiper-slide.slide-hidden { display: none; }

/* Project slide image hover */
.project-slide img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-slide:hover img {
    transform: scale(1.08);
}

/* ============================================ */
/* Stats — polished counters                    */
/* ============================================ */
.stat-card {
    position: relative;
    padding: 2rem 1rem;
}
.stat-card::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 50%;
    background: linear-gradient(180deg, transparent, rgba(212,168,83,0.2), transparent);
}
[dir="rtl"] .stat-card::after { left: 0; }
[dir="ltr"] .stat-card::after { right: 0; }
.stat-card:last-child::after { display: none; }

.counter {
    display: inline-block;
    min-width: 2ch;
    background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================ */
/* Lightbox — cinematic                         */
/* ============================================ */
#lightbox {
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    pointer-events: none;
}
#lightbox.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}
#lightbox-img {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}
#lightbox.active #lightbox-img {
    animation: lbZoomIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes lbZoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ============================================ */
/* About — decorative accents                   */
/* ============================================ */
.about-image-wrapper {
    position: relative;
}
.about-image-wrapper::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 1rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(212,168,83,0.3), transparent 50%, rgba(212,168,83,0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* VMV cards glow */
.vmv-card {
    background: linear-gradient(135deg, rgba(42,37,64,0.6) 0%, rgba(30,26,46,0.3) 100%);
    border: 1px solid rgba(212, 168, 83, 0.08);
    backdrop-filter: blur(8px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.vmv-card:hover {
    border-color: rgba(212, 168, 83, 0.2);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* ============================================ */
/* Section Dividers                             */
/* ============================================ */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 168, 83, 0.05) 15%,
        rgba(212, 168, 83, 0.3) 50%,
        rgba(212, 168, 83, 0.05) 85%,
        transparent 100%
    );
}

/* ============================================ */
/* Footer                                       */
/* ============================================ */
footer a {
    position: relative;
}
footer .footer-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}
[dir="rtl"] footer .footer-link::after {
    transform-origin: left;
}
footer .footer-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}
[dir="rtl"] footer .footer-link:hover::after {
    transform-origin: right;
}

/* ============================================ */
/* WhatsApp floating button                     */
/* ============================================ */
.wa-float {
    position: fixed;
    bottom: 24px;
    z-index: 40;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: all 0.3s;
    animation: waFloat 3s ease-in-out infinite;
}
[dir="rtl"] .wa-float { left: 24px; }
[dir="ltr"] .wa-float { right: 24px; }

.wa-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5);
}
@keyframes waFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ============================================ */
/* Scrollbar                                    */
/* ============================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--navy-dark); }
::-webkit-scrollbar-thumb {
    background: rgba(212, 168, 83, 0.25);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 168, 83, 0.45);
}

/* ============================================ */
/* Responsive — Mobile polish                   */
/* ============================================ */
@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev { display: none !important; }
    #lightbox-prev, #lightbox-next { width: 40px; height: 40px; }
    .hero-orb { display: none; }

    /* Stat cards: 2x2 grid with center divider only */
    .stat-card { padding: 1.25rem 0.5rem; }
    .stat-card::after { display: none; }

    /* Service cards: tighter on small screens, gold left-border accent */
    .service-card {
        border-left: 2px solid rgba(212, 168, 83, 0.15) !important;
        border-right: none !important;
    }
    [dir="rtl"] .service-card {
        border-right: 2px solid rgba(212, 168, 83, 0.15) !important;
        border-left: none !important;
    }
    .service-card::before { display: none; }
    .service-card:hover { transform: none; }

    /* VMV cards on mobile: clean vertical stack */
    .vmv-card {
        padding: 1.25rem !important;
        text-align: center;
    }
    .vmv-card .w-14 {
        width: 2.75rem !important;
        height: 2.75rem !important;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0.75rem !important;
    }
    .vmv-card .w-14 svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    .vmv-card h3 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    .vmv-card p {
        font-size: 0.8rem !important;
        line-height: 1.6 !important;
    }

    /* Filter buttons compact */
    .filter-btn {
        padding: 6px 12px;
        font-size: 0.7rem;
    }

    /* Lightbox mobile padding */
    #lightbox .max-w-5xl { margin: 0 0.75rem; }

    /* WhatsApp float smaller */
    .wa-float { width: 48px; height: 48px; bottom: 16px; }
    [dir="rtl"] .wa-float { left: 16px; }
    [dir="ltr"] .wa-float { right: 16px; }
    .wa-float svg { width: 24px; height: 24px; }
}

/* Small phones */
@media (max-width: 380px) {
    .service-card { padding: 0.75rem !important; }
    .service-card h3 { font-size: 0.75rem !important; }
    .service-card p { font-size: 0.65rem !important; line-height: 1.4 !important; }
}