/* ============================================
   RAVE-TECH EXACT - IFCORE (global fixed)
   base + mesh + grid-lines + shapes + orbs
   + particles canvas + mouse parallax + cursor glow
   ============================================ */

:root {
    --rave-deep: #101435;
    --rave-navy-2: #1A1E42;
    --rave-cyan: #00d4ff;
}

html, body {
    background: #101435 !important;
}

/* الحاوية الثابتة ورا الموقع كله */
.epic-fixed-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #101435;
    --mx: 0;
    --my: 0;
    --gx: 50%;
    --gy: 40%;
}

.epic-bg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ---- طبقة الأساس ---- */
.epic-base-gradient {
    background:
        radial-gradient(1100px 600px at 15% 0%, rgba(0, 212, 255, 0.08), transparent 60%),
        radial-gradient(900px 700px at 90% 15%, rgba(88, 28, 135, 0.35), transparent 62%),
        linear-gradient(180deg, #101435 0%, #1A1E42 50%, #101435 100%);
}

/* ---- طبقة الدمج الضوئي ---- */
.hero-mesh-gradient {
    background:
        radial-gradient(600px 420px at 20% 25%, rgba(0, 212, 255, 0.13), transparent 70%),
        radial-gradient(700px 500px at 82% 30%, rgba(0, 108, 255, 0.15), transparent 70%),
        radial-gradient(650px 480px at 55% 85%, rgba(88, 28, 135, 0.30), transparent 70%);
    transform: translate3d(calc(var(--mx) * 18px), calc(var(--my) * 18px), 0);
}

/* ---- خطوط الشبكة ---- */
.hero-grid-lines { transform: translate3d(calc(var(--mx) * -24px), calc(var(--my) * -24px), 0); }

.hero-grid-lines .grid-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.14), transparent);
    animation: gridPulse 6s ease-in-out infinite alternate;
}

.hero-grid-lines .grid-line.horizontal {
    left: 0; right: 0; height: 1px;
}

.hero-grid-lines .grid-line.horizontal:nth-child(1) { top: 22%; }
.hero-grid-lines .grid-line.horizontal:nth-child(2) { top: 52%; animation-delay: -2s; }
.hero-grid-lines .grid-line.horizontal:nth-child(3) { top: 78%; animation-delay: -4s; }

.hero-grid-lines .grid-line.vertical {
    top: 0; bottom: 0; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(0, 212, 255, 0.14), transparent);
}

.hero-grid-lines .grid-line.vertical:nth-child(4) { left: 20%; }
.hero-grid-lines .grid-line.vertical:nth-child(5) { left: 50%; animation-delay: -2s; }
.hero-grid-lines .grid-line.vertical:nth-child(6) { left: 80%; animation-delay: -4s; }

/* ---- الأشكال العائمة ---- */
.hero-shapes { transform: translate3d(calc(var(--mx) * 30px), calc(var(--my) * 30px), 0); }

.hero-shapes .shape {
    position: absolute;
    border: 1px solid rgba(0, 212, 255, 0.20);
    border-radius: 24px;
    animation: shapeFloat 16s ease-in-out infinite alternate;
}

.hero-shapes .shape-1 {
    width: 420px; height: 420px; top: -120px; left: -120px;
    transform: rotate(18deg);
    background: linear-gradient(135deg, rgba(0,212,255,0.06), transparent 60%);
}
.hero-shapes .shape-2 {
    width: 320px; height: 320px; top: 12%; right: -110px;
    border-radius: 50%;
    border-color: rgba(88, 28, 135, 0.5);
    background: radial-gradient(circle, rgba(88,28,135,0.18), transparent 70%);
    animation-delay: -4s;
}
.hero-shapes .shape-3 {
    width: 220px; height: 220px; bottom: 18%; left: 8%;
    animation-delay: -8s;
}
.hero-shapes .shape-4 {
    width: 150px; height: 150px; top: 42%; left: 44%;
    border-radius: 50%; animation-delay: -2s;
}
.hero-shapes .shape-5 {
    width: 500px; height: 180px; bottom: -60px; right: 10%;
    border-radius: 100px; animation-delay: -11s;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,0.07), transparent);
}

/* ---- الكرات المضيئة ---- */
.hero-orbs { transform: translate3d(calc(var(--mx) * 45px), calc(var(--my) * 45px), 0); }

.hero-orbs > div {
    position: absolute;
    border-radius: 50%;
}

.hero-orbs .orb-1 {
    width: 560px; height: 560px; left: -180px; top: -200px;
    background: radial-gradient(circle, rgba(0,190,255,.30) 0%, rgba(0,190,255,0) 68%);
    animation: orb1 14s ease-in-out infinite alternate;
}
.hero-orbs .orb-2 {
    width: 520px; height: 520px; right: -140px; top: 8%;
    background: radial-gradient(circle, rgba(56,90,255,.28) 0%, rgba(56,90,255,0) 68%);
    animation: orb2 18s ease-in-out infinite alternate;
}
.hero-orbs .orb-3 {
    width: 420px; height: 420px; left: 30%; bottom: -220px;
    background: radial-gradient(circle, rgba(88,28,135,.42) 0%, rgba(88,28,135,0) 68%);
    animation: orb3 20s ease-in-out infinite alternate;
}

/* ---- توهج يتبع الماوس ---- */
.mouse-glow {
    background: radial-gradient(480px 480px at var(--gx) var(--gy), rgba(0, 212, 255, 0.13), transparent 70%);
    z-index: 3;
}

/* ---- شبكة النقط ---- */
.hero-particles-network { z-index: 4; }
.hero-particles-network canvas {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.9;
}

/* ---- تغميق سينمائي ---- */
.epic-fixed-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 75% 65% at 50% 45%, transparent 50%, rgba(5, 8, 25, 0.6) 100%);
    z-index: 5;
}

/* ---- الحركات ---- */
@keyframes meshDrift {
    from { opacity: 0.9; }
    to { opacity: 1; }
}
@keyframes gridPulse {
    from { opacity: 0.4; }
    to { opacity: 1; }
}
@keyframes shapeFloat {
    from { margin-top: -14px; opacity: 0.55; }
    to { margin-top: 18px; opacity: 0.9; }
}
@keyframes orb1 {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(300px, 130px) scale(1.22); }
}
@keyframes orb2 {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-260px, 140px) scale(0.86); }
}
@keyframes orb3 {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(120px, -140px) scale(1.15); }
}

/* المحتوى فوق الخلفية */
.site-header, .ticker-bar, .page-content,
.page-hero, .page-body, .site-footer,
.hero-section, .services-section, .portfolio-section {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .hero-orbs .orb-1, .hero-orbs .orb-2 { width: 340px; height: 340px; }
    .hero-orbs .orb-3 { width: 280px; height: 280px; }
    .mouse-glow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-mesh-gradient, .hero-grid-lines .grid-line,
    .hero-shapes .shape, .hero-orbs > div { animation: none !important; }
}


/* ---- أداء: على الموبايل/التابلت بدون حركة ثقيلة ---- */
@media (max-width: 1024px), (hover: none) {
    .hero-orbs, .hero-grid-lines, .hero-mesh-gradient { transform: none !important; }
    .hero-orbs > div, .hero-shapes .shape, .hero-grid-lines .grid-line { animation: none !important; }
    .mouse-glow { display: none; }
}
body.sm-lock .epic-fixed-bg * { animation-play-state: paused !important; }