/* ==================== BASE ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Cairo', sans-serif;
    background: #1b0029;
    color: #fff;
    overflow-x: hidden
}

::selection {
    background: rgba(249, 198, 10, 0.26);
    color: #fff
}

::-webkit-scrollbar {
    width: 5px
}

::-webkit-scrollbar-track {
    background: #1b0029
}

::-webkit-scrollbar-thumb {
    background: rgba(249, 198, 10, 0.3);
    border-radius: 3px
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 198, 10, 0.5)
}

/* ==================== PRELOADER ==================== */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #1b0029;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 1s cubic-bezier(.76, 0, .24, 1)
}

#preloader.done {
    transform: translateY(-100%)
}

.pre-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 6vw, 4.5rem);
    letter-spacing: .3em;
    color: #f9c60a;
    animation: prePulse 1.5s ease-in-out infinite
}

.pre-bar {
    width: 180px;
    height: 2px;
    background: rgba(27, 0, 41, 0.08);
    margin-top: 2rem;
    border-radius: 2px;
    overflow: hidden
}

.pre-bar-in {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #f9c60a, #ff3c00);
    animation: preFill 2.2s ease-out forwards
}

@keyframes prePulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .4
    }
}

@keyframes preFill {
    to {
        width: 100%
    }
}

/* ==================== GRAIN & SCANLINES ==================== */
.grain {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: .03
}

.grain::after {
    content: '';
    position: absolute;
    inset: -200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    animation: grainA .8s steps(6) infinite
}

@keyframes grainA {

    0%,
    100% {
        transform: translate(0)
    }

    10% {
        transform: translate(-5%, -10%)
    }

    20% {
        transform: translate(-15%, 5%)
    }

    30% {
        transform: translate(7%, -25%)
    }

    40% {
        transform: translate(-5%, 25%)
    }

    50% {
        transform: translate(-15%, 10%)
    }

    60% {
        transform: translate(15%, 0)
    }

    70% {
        transform: translate(0%, 15%)
    }

    80% {
        transform: translate(3%, 35%)
    }

    90% {
        transform: translate(-10%, 10%)
    }
}

.scanlines {
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(27, 0, 41, 0.01) 2px, rgba(27, 0, 41, 0.01) 4px)
}

/* ==================== GLITCH ==================== */
.glitch {
    position: relative;
    display: inline-block
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.glitch::before {
    color: #ffffff;
    animation: g1 3s infinite linear alternate-reverse;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%)
}

.glitch::after {
    color: #ffffff;
    animation: g2 2.5s infinite linear alternate-reverse;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%)
}

@keyframes g1 {

    0%,
    78%,
    100% {
        transform: translate(0)
    }

    80% {
        transform: translate(-5px, 2px)
    }

    82% {
        transform: translate(5px, -2px)
    }

    84% {
        transform: translate(-3px, 1px)
    }

    86% {
        transform: translate(3px, -3px)
    }

    88% {
        transform: translate(-2px, 2px)
    }

    90% {
        transform: translate(4px, -1px)
    }

    92% {
        transform: translate(-1px, 3px)
    }

    94% {
        transform: translate(2px, -2px)
    }
}

@keyframes g2 {

    0%,
    73%,
    100% {
        transform: translate(0)
    }

    75% {
        transform: translate(3px, -1px)
    }

    77% {
        transform: translate(-4px, 2px)
    }

    79% {
        transform: translate(2px, -3px)
    }

    81% {
        transform: translate(-3px, 1px)
    }

    83% {
        transform: translate(1px, 2px)
    }

    85% {
        transform: translate(-2px, -2px)
    }

    87% {
        transform: translate(4px, 1px)
    }

    89% {
        transform: translate(-1px, -1px)
    }
}

/* ==================== REVEAL ==================== */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all .9s cubic-bezier(.16, 1, .3, 1)
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0)
}

.reveal-d1 {
    transition-delay: .1s
}

.reveal-d2 {
    transition-delay: .2s
}

.reveal-d3 {
    transition-delay: .3s
}

.reveal-d4 {
    transition-delay: .4s
}

.reveal-d5 {
    transition-delay: .5s
}

.reveal-d6 {
    transition-delay: .6s
}

.reveal-left {
    opacity: 0;
    transform: translateX(60px);
    transition: all .9s cubic-bezier(.16, 1, .3, 1)
}

.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0)
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all .9s cubic-bezier(.16, 1, .3, 1)
}

.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0)
}

.reveal-scale {
    opacity: 0;
    transform: scale(.85);
    transition: all .9s cubic-bezier(.16, 1, .3, 1)
}

.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1)
}

/* ==================== MISC UI ==================== */
.cursor-glow {
    position: fixed;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(52, 1, 84, 0.09) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    transition: opacity .3s
}

.nav-hide {
    transform: translateY(-100%)
}

.mob-menu {
    transform: translateX(100%);
    transition: transform .5s cubic-bezier(.76, 0, .24, 1)
}

.mob-menu.open {
    transform: translateX(0)
}

.pulse-glow {
    animation: pulseG 2s ease-in-out infinite
}

@keyframes pulseG {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(249, 198, 10, 0.3)
    }

    50% {
        box-shadow: 0 0 40px rgba(249, 198, 10, 0.6), 0 0 80px rgba(249, 198, 10, 0.15)
    }
}

.scroll-ind {
    animation: scrollB 2s ease-in-out infinite
}

@keyframes scrollB {

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

    50% {
        transform: translateY(12px);
        opacity: .4
    }
}

.hero-line {
    width: 0;
    animation: lineEx 1.2s ease-out 2.5s forwards
}

@keyframes lineEx {
    to {
        width: 120px
    }
}

.cine-sep {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(249, 198, 10, 0.25), transparent)
}

.shimmer {
    background: linear-gradient(90deg, #fff 0%, #f9c60a 50%, #fff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerA 3s linear infinite
}

@keyframes shimmerA {
    to {
        background-position: 200% center
    }
}

.badge-live::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: #ff0000;
    border-radius: 50%;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
    animation: livePulse 1.5s ease-in-out infinite
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(249, 198, 10, 0.4)
    }

    50% {
        opacity: .7;
        box-shadow: 0 0 0 6px rgba(249, 198, 10, 0)
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px)
    }

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

/* ==================== HERO VIDEO BG ==================== */
.hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden
}

.hero-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(12px) brightness(0.4)
}

.hero-video-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(to bottom, transparent, #1b0029);
    pointer-events: none
}

/* ==================== MASONRY PORTFOLIO ==================== */
/* شبكة الفيديوهات بتصميم Masonry - متوافقة مع جميع الأجهزة */
.masonry-grid {
    columns: 3;
    column-gap: 12px;
    padding: 0 6px;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 12px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #1b0029;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.masonry-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(249, 198, 10, 0.15);
}

/* حاوية الفيديو */
.masonry-thumb {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #1b0029;
}

.masonry-thumb video {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* طبقة التعتيم فوق الفيديو */
.masonry-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(27, 0, 41) 0%, transparent 50%);
    pointer-events: none;
    transition: opacity 0.3s;
}

.masonry-item:hover .masonry-overlay {
    opacity: 0.5;
}

/* زر التشغيل - في وسط الفيديو */
.masonry-play-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(249, 198, 10, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    color: #fff;
    backdrop-filter: blur(6px);
    opacity: 0.9;
}

.masonry-play-center:hover {
    background: rgb(249, 198, 10);
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 0 25px rgba(249, 198, 10, 0.5);
    opacity: 1;
}

.masonry-play-center.playing {
    background: rgba(249, 198, 10, 0.01);
    border-color: rgba(249, 198, 10, 0.2);
    opacity: 0;
}

.masonry-item:hover .masonry-play-center.playing {
    opacity: 0.8;
}

/* زر فتح الفيديو في نافذة عائمة */
.masonry-expand {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(27, 0, 41, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0;
}

.masonry-item:hover .masonry-expand {
    opacity: 1;
}

.masonry-expand:hover {
    background: rgba(249, 198, 10, 0.7);
    border-color: rgba(249, 198, 10, 0.5);
    color: #fff;
    transform: scale(1.1);
}

/* اسم الفيديو تحت الصورة */
.masonry-title {
    padding: 10px 12px;
    font-size: 0.8rem;
    color: #bbb;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.masonry-title span {
    color: #ffc107;
    font-weight: 400;
    font-size: 0.7rem;
    display: block;
    margin-top: 2px;
}

/* ==================== VIDEO MODAL (نافذة عرض الفيديو) ==================== */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(27, 0, 41, 0.92);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.video-modal.active {
    opacity: 1;
    visibility: visible;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    border-radius: 16px;
    overflow: hidden;
    background: #1b0029;
    box-shadow: 0 0 60px rgba(249, 198, 10, 0.15);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-modal.active .video-modal-content {
    transform: scale(1) translateY(0);
}

.video-modal-content video {
    width: 100%;
    max-height: 85vh;
    display: block;
    object-fit: contain;
    background: #1b0029;
}

.video-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(249, 198, 10, 0.2);
    border: 1px solid rgba(249, 198, 10, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: #fff;
    transition: all 0.3s;
}

.video-modal-close:hover {
    background: rgba(249, 198, 10, 0.7);
    transform: scale(1.1);
}

.video-modal-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 24px;
    background: linear-gradient(to top, rgb(27, 0, 41), transparent);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

.video-modal-title span {
    color: #ffc107;
    font-size: 0.8rem;
    font-weight: 400;
    margin-left: 8px;
}

/* ==================== TESTIMONIALS ==================== */
.testi-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    min-width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color 0.3s
}

.testi-card:hover {
    border-color: rgba(249, 198, 10, 0.2)
}

.audio-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem
}

.play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(249, 198, 10, 0.15);
    border: 1px solid rgba(249, 198, 10, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    color: #f9c60a;
    flex-shrink: 0
}

.play-btn:hover {
    background: rgba(249, 198, 10, 0.3)
}

.wave-container {
    flex-grow: 1;
    position: relative;
    height: 36px
}

.wave-canvas {
    width: 100%;
    height: 100%;
    display: block
}

.audio-time {
    font-size: 0.75rem;
    color: #888;
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 1px;
    min-width: 35px;
    text-align: left
}

.testi-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem
}

.testi-name {
    font-weight: 700;
    color: #fff;
    font-size: 0.9rem
}

.testi-proj {
    font-size: 0.8rem;
    color: #ffc107
}

.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none
}

.hide-scrollbar::-webkit-scrollbar {
    display: none
}

/* ==================== BACK TO TOP ==================== */
#btt-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(249, 198, 10, 0.15);
    border: 1px solid rgba(249, 198, 10, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f9c60a;
    z-index: 999;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(5px)
}

#btt-btn.visible {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0)
}

#btt-btn:hover {
    background: rgba(249, 198, 10, 0.4);
    box-shadow: 0 0 15px rgba(249, 198, 10, 0.3);
    color: #fff
}

/* ==================== RESPONSIVE ==================== */
/* الموبايل - إخفاء النافبار تماماً */
@media (max-width: 768px) {
    #navbar {
        display: none !important
    }

    .mob-menu {
        display: none !important
    }

    body {
        overflow-x: hidden;
        width: 100%
    }

    /* شبكة عمودين على الموبايل */
    .masonry-grid {
        columns: 2;
        column-gap: 8px;
        padding: 0 4px
    }

    .masonry-item {
        margin-bottom: 8px;
        border-radius: 8px
    }

    .masonry-title {
        padding: 6px 8px;
        font-size: 0.7rem
    }

    .masonry-play-center {
        width: 36px;
        height: 36px;
    }

    .masonry-expand {
        width: 26px;
        height: 26px;
        bottom: 6px;
        right: 6px;
        opacity: 1;
    }

    /* Testimonials */
    .testi-card {
        min-width: 260px;
        padding: 1rem
    }

    /* Back to top */
    #btt-btn {
        bottom: 1.2rem;
        right: 1.2rem;
        width: 42px;
        height: 42px
    }

    /* Modal على الموبايل */
    .video-modal-content {
        width: 96%;
        border-radius: 10px;
    }

    .video-modal-close {
        top: 8px;
        right: 8px;
        width: 34px;
        height: 34px;
    }
}

/* شاشات صغيرة جداً */
@media (max-width: 400px) {
    .masonry-grid {
        column-gap: 6px
    }

    .masonry-item {
        margin-bottom: 6px
    }

    .masonry-title {
        font-size: 0.65rem;
        padding: 5px 6px
    }

    .masonry-play-center {
        width: 30px;
        height: 30px;
    }
}

/* أجهزة كبيرة - 4 أعمدة */
@media (min-width: 1200px) {
    .masonry-grid {
        columns: 4;
        column-gap: 16px
    }
}

/* Safe area for iPhone notch */
@supports (padding: env(safe-area-inset-bottom)) {
    #btt-btn {
        bottom: calc(1.2rem + env(safe-area-inset-bottom))
    }
}