/* ------------------------------------------------------
   GLOBAL RESET
------------------------------------------------------ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.depth-layer {
    z-index: -30;
}
body {
    background: #04050a;
    color: #e5e7eb;
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
}
.container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------
   THEME VARIABLES — نفس الفكرة الأصلية بس أوضح
------------------------------------------------------ */

:root {
    --accent: #38bdf8;      /* Cyan */
    --accent-alt: #e879f9;  /* Pink-Purple */
    --bg-soft: rgba(255,255,255,0.05);
    --bg-card: rgba(255,255,255,0.04);
    --border-soft: rgba(255,255,255,0.1);
    --glow: rgba(56,189,248,0.15);
}

 :root {
            --bg: #020617;
            --text: #ffffff;
            --card: #0f172a;
            --accent: #4f46e5;
        }

        /* Theme 1 */
        html[data-theme="t1"] {
    --acc1: #3ae1ff;
    --acc2: #9c6bff;
    --acc3: #ff43b8;

    --acc1-rgb: 58, 225, 255;
    --acc2-rgb: 156, 107, 255;
    --acc3-rgb: 255, 67, 184;
}

        /* Theme 2 */
        html[data-theme="t2"] {
    --acc1: #ffcc66;
    --acc2: #ff9b3d;
    --acc3: #ff6d00;

    --acc1-rgb: 255, 204, 102;
    --acc2-rgb: 255, 155, 61;
    --acc3-rgb: 255, 109, 0;
}

        /* Theme 3 */
        html[data-theme="t3"] {
    --acc1: #4cf3d2;
    --acc2: #00c3a1;
    --acc3: #008f73;

    --acc1-rgb: 76, 243, 210;
    --acc2-rgb: 0, 195, 161;
    --acc3-rgb: 0, 143, 115;
}

        /* Theme 4 */
       html[data-theme="t4"] {
    --acc1: #ff4b6e;
    --acc2: #d31341;
    --acc3: #8a0020;

    --acc1-rgb: 255, 75, 110;
    --acc2-rgb: 211, 19, 65;
    --acc3-rgb: 138, 0, 32;
}

        body {
            background-color: var(--bg);
            color: var(--text);
        }

        .card,
        .bg-card {
            background-color: var(--card);
        }

        .text-accent {
            color: var(--accent);
        }

        .border-accent {
            border-color: var(--accent);
        }

        .bg-accent {
            background-color: var(--accent);
        }
html[data-theme] {
    --bg: #020617;
}

html.theme-wave::before {
    content: "";
    position: fixed;
    inset: -20%;
    pointer-events: none;
    z-index: 9999;
    border-radius: 9999px;
    background: radial-gradient(
        circle at center,
        rgba(var(--acc1-rgb, 255,255,255), 0.14),
        transparent 70%
    );
    mix-blend-mode: soft-light;
    opacity: 0;
    transform: scale(0.5);
    transition:
        opacity 0.45s ease-out,
        transform 0.45s ease-out;
}

html.theme-wave-active::before {
    opacity: 1;
    transform: scale(1.25);
}

/* ------------------------------------------------------
   BACKGROUND ELEMENTS (محسّنة)
------------------------------------------------------ */

.background-grid {
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.13;
    pointer-events: none;
    z-index: -3;
}

.soft-nebula {
    position: fixed;
    width: 600px;
    height: 600px;
    top: -100px;
    left: -100px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    filter: blur(140px);
    opacity: 0.2;
    z-index: -2;
    pointer-events: none;
}

.background-orbit {
    position: fixed;
    width: 900px;
    height: 900px;
    right: -300px;
    bottom: -300px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-alt) 0%, transparent 70%);
    filter: blur(200px);
    opacity: 0.15;
    z-index: -2;
    pointer-events: none;
}


/* ------------------------------------------------------
   HERO CARD (نسخة محسّنة)
------------------------------------------------------ */

.hero-card {
    position: relative;
    background: var(--bg-card);
    backdrop-filter: blur(30px);
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hero-card img {
    object-fit: cover;
    opacity: 0.9;
}

.hero-card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 20%, var(--glow), transparent 70%);
    opacity: 0.5;
    pointer-events: none;
}


/* ------------------------------------------------------
   GRADIENT TEXT (اسمك – محسّن)
------------------------------------------------------ */

.gradient-text {
        background: linear-gradient(
        120deg,
        var(--acc1),
        var(--acc2),
        var(--acc3)
    );
    -webkit-background-clip: text;
    color: transparent;

    background-size: 200% 200%;
    animation: gradientShift 6s ease-in-out infinite;

    text-shadow: 0 0 12px rgba(var(--acc1-rgb), 0.35);
}

.skill-progress {
    height: 6px;
    background: rgba(var(--acc3-rgb), 0.20);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.skill-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--acc1), var(--acc2));
    border-radius: 6px;
}
/* ------------------------------------------------------
   CINEMATIC SCROLL ANIMATION (نسخة راقية)
------------------------------------------------------ */

.animate-on-scroll[data-animate="cinematic"] {
    opacity: 0;
    transform: translateY(45px) scale(0.95);
    filter: blur(10px);
}

.animate-on-scroll[data-animate="cinematic"].in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition:
        opacity 0.9s cubic-bezier(.16,.8,.22,1),
        transform 1.2s cubic-bezier(.16,.8,.22,1),
        filter 0.9s ease-out;
}


/* ------------------------------------------------------
   TILT (محسّن بدون تغيير الـ JS)
------------------------------------------------------ */

.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.tilt-card * {
    pointer-events: none;
}


/* ------------------------------------------------------
   GENERAL CARDS
------------------------------------------------------ */

.section-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    padding: 20px;
    border-radius: 20px;
    backdrop-filter: blur(20px);
}


/* ------------------------------------------------------
   BUTTON STYLE
------------------------------------------------------ */

.btn-main {
    padding: 12px 26px;
    border-radius: 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border-soft);
    color: #fff;
    transition: 0.3s ease;
}

.btn-main:hover {
    background: rgba(255,255,255,0.12);
}


/* ------------------------------------------------------
   FOOTER
------------------------------------------------------ */

footer {
    opacity: 0.7;
    margin-top: 60px;
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
}




@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


section {
    scroll-margin-top: 100px;
}
.glow-breath {
    animation: glowBreath 4s ease-in-out infinite;
}

@keyframes glowBreath {
    0% { filter: drop-shadow(0 0 0px var(--accent)); }
    50% { filter: drop-shadow(0 0 14px var(--accent)); }
    100% { filter: drop-shadow(0 0 0px var(--accent)); }
}


.hero-card {
    animation: cardBreath 6s ease-in-out infinite;
}

@keyframes cardBreath {
    0%   { box-shadow: 0 0 0px rgba(var(--accent-rgb), 0.0); }
    50%  { box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.22); }
    100% { box-shadow: 0 0 0px rgba(var(--accent-rgb), 0.0); }
}
.hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        140deg,
        rgba(var(--accent-rgb), 0.25),
        transparent 60%
    );
    pointer-events: none;
    mix-blend-mode: screen;
}

.cine-card {
    transition: transform 0.5s cubic-bezier(.16,.8,.22,1), 
                box-shadow 0.5s ease;
}

.cine-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
#light-trail {
    position: fixed;
    width: 160px;
    height: 160px;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb),0.25), transparent 70%);
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}
.particle {
    position: fixed;
    width: 4px;
    height: 4px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    from {
        transform: translateY(0) translateX(0);
        opacity: 0.4;
    }
    to {
        transform: translateY(-180px) translateX(40px);
        opacity: 0;
    }
}

.motion-blur {
    filter: blur(20px) brightness(0.8);
    transition: filter 0.6s ease;
}

.motion-blur.in-view {
    filter: blur(0px) brightness(1);
}

.depth-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -5;
}

.layer-back {
    background: radial-gradient(circle at 20% 30%, rgba(var(--acc1-rgb),0.06), transparent 70%);

    filter: blur(90px);
}

.layer-mid {
    background: radial-gradient(circle at 70% 60%, rgba(var(--accent-rgb),0.18), transparent 65%);
    filter: blur(70px);
}

.layer-front {
    background: radial-gradient(circle at 40% 80%, rgba(var(--accent-rgb),0.23), transparent 70%);
    filter: blur(50px);
}

.btn-main {
    padding: 12px 26px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--acc1-rgb), 0.18), rgba(var(--acc2-rgb), 0.18));
    border: 1px solid rgba(var(--acc1-rgb), 0.7);
    color: #ffffff;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    background: linear-gradient(135deg, rgba(var(--acc1-rgb), 0.32), rgba(var(--acc2-rgb), 0.32));
}


#spotlight {
    position: fixed;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
    top: 0;
    left: 0;
    pointer-events: none;
    mix-blend-mode: soft-light;
    opacity: 0.7;
    transition: opacity 0.4s ease-out;
    z-index: 9998;
}
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #0b101d;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--acc1), var(--acc3));
    border-radius: 10px;
}
.btn-primary {
    background: linear-gradient(135deg, var(--acc1), var(--acc2));
    color: #fff;
    border-radius: 12px;
    padding: 10px 22px;
    transition: 0.3s ease;
}

.btn-primary:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 18px rgba(var(--acc1-rgb), 0.45);
}
.theme-border {
    border: 1px solid rgba(var(--acc1-rgb), 0.35);
}
.theme-border:hover {
    border-color: rgba(var(--acc2-rgb), 0.55);
}
.hero-card {
    animation: cardBreath 6s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(var(--acc1-rgb), 0.25);
}#spotlight {
    background: radial-gradient(circle, rgba(var(--acc1-rgb),0.22), transparent 70%);
}
#page-transition {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;

    /* خلفية ناعمة جداً */
    background: radial-gradient(
        circle at 50% 50%,
        rgba(var(--acc1-rgb), 0.08),
        rgba(var(--acc2-rgb), 0.06),
        rgba(0, 0, 0, 0.45) 70%
    );

    backdrop-filter: blur(0px);
    transform: scale(1.05);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        backdrop-filter 0.7s ease;
}

#page-transition.active {
    opacity: 1;
    transform: scale(1);
    backdrop-filter: blur(8px);
}
body {
    scroll-behavior: smooth;
}

.snap-container {
    scroll-snap-type: y proximity; /* أو mandatory لو بدك أقوى */
}

.snap-section {
    scroll-snap-align: start;
}
/* Scroll Indicators */
#scroll-indicators {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    pointer-events: none;
    z-index: 9998;
}

#scroll-indicators .indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.20);
    transition: 0.35s ease;
    cursor: pointer;
    pointer-events: auto; /* ← مهم */
}

#scroll-indicators .indicator.active {
    background: linear-gradient(135deg, var(--acc1), var(--acc2));
    box-shadow: 0 0 12px rgba(var(--acc1-rgb), 0.55);
    transform: scale(1.35);
    border-color: rgba(var(--acc2-rgb), 0.8);
}
#scroll-indicators .indicator {
    position: relative;
}
#scroll-indicators .indicator::after {
    content: attr(data-label);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}
.lang-ar {
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}
.lang-switch {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.lang-switch-active {
    opacity: 1;
    transform: scale(1);
}
/* Cinematic Language Switch FX */
.lang-transition {
    filter: blur(12px) brightness(0.8);
    opacity: 0;
    transform: scale(1.04);
    transition:
        filter 0.45s ease,
        opacity 0.45s ease,
        transform 0.45s ease;
}

.lang-transition-active {
    filter: blur(0px) brightness(1);
    opacity: 1;
    transform: scale(1);
    transition:
        filter 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Light flash (subtle) */
.lang-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at center,
        rgba(255,255,255,0.18),
        transparent 65%);
    opacity: 0;
    transition: opacity 0.35s ease-out;
    z-index: 99999;
}
.lang-flash-show {
    opacity: 1;
}
/* === CINEMATIC LANGUAGE SWITCH === */


#page-root.lang-switch-start {
    filter: blur(8px) brightness(0.7) saturate(0.9);
    transform: scale(1.03);
    opacity: 0;
    transition:
        filter 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.45s ease-out;
}

#page-root.lang-switch-end {
    filter: blur(0px) brightness(1) saturate(1);
    transform: scale(1);
    opacity: 1;
    transition:
        filter 0.60s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.60s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.60s ease-out;
}

#page-root.lang-distort {
    animation: distortionPulse 0.45s ease-out;
}


@keyframes distortionPulse {
    0% { transform: scale(1.03) skewX(1deg) skewY(1deg); }
    50% { transform: scale(1.06) skewX(-1deg) skewY(-1deg); }
    100% { transform: scale(1); }
}

/* وميض ضوء دائري مثل Lens-Flare بسيط */
.lang-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at center,
        rgba(255,255,255,0.18),
        rgba(255,255,255,0.05) 35%,
        transparent 70%);
    opacity: 0;
    transition: opacity 0.35s ease-out;
    z-index: 999999;
}

.lang-flash-show {
    opacity: 1;
}

/* Chromatic aberration subtle */
.lang-chroma {
    mix-blend-mode: screen;
    pointer-events: none;
    position: fixed;
    inset: 0;
    opacity: 0;
    z-index: 999998;
    background:
        radial-gradient(circle at 40% 35%, rgba(0,255,255,0.06), transparent 60%),
        radial-gradient(circle at 60% 65%, rgba(255,0,150,0.07), transparent 60%);
    transition: opacity .4s ease;
}

.lang-chroma-show {
    opacity: 1;
}
html[dir="rtl"] #mobile-menu nav {
    text-align: right;
}

html[dir="rtl"] #mobile-menu {
    /* يضل من اليمين، بس نضمن أن الترانسفورم ما يطلع لبرا الشاشة */
    transform-origin: right center;
}
.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99990;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.35);
    transition: transform .3s ease, box-shadow .3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: 0 0 26px rgba(34, 211, 238, 0.55);
}

/* RTL fix */
html[dir="rtl"] .whatsapp-float {
    right: auto;
    left: 22px;
}

.skill-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.skill-badges span {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
}
.project-thumb {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.project-thumb-img {
    transition: transform 0.6s cubic-bezier(.16,.8,.22,1), opacity 0.4s ease;
}

.project-card:hover .project-thumb-img {
    transform: scale(1.12);
    opacity: 0.9;
}

.project-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.35));
    pointer-events: none;
}
.menu-panel {
  transform: translateZ(0);
}
@media (max-width: 640px) {

    .depth-layer,
    .layer-back,
    .layer-mid,
    .layer-front
    {
        opacity: 0.35 !important;
        filter: blur(20px) !important;
    }
    .tilt-card,
    .tilt-card-small {
        transform: none !important;
    }

   
    .animate-on-scroll {
        transition: opacity .45s ease-out !important;
    }
     .hero-card-glow {
        opacity: 0.25 !important;
        filter: blur(30px) !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }

    .hero-card-glow,
    .depth-layer,
    .layer-back,
    .layer-mid,
    .layer-front {
        opacity: 0.2 !important;
        filter: none !important;
    }
}
.performance-test * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
}

.performance-test .depth-layer,
.performance-test .hero-card-glow {
    display: none !important;
}