/* ============================================================
   رياض فايروركس — تحسينات تصميم إضافية (Astro)
   طبقة فوق site.bundle.css: خلفية hero متحركة بلا صورة + لمسات أرقى
   ============================================================ */

/* منع اختفاء العناوين خلف الهيدر الثابت عند فتح رابط قسم مباشرة */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---------- Hero: خلفية ألعاب نارية حيّة (CSS فقط، بلا صورة) ---------- */
.hero {
    background:
        radial-gradient(ellipse 130% 90% at 50% -15%, #191325 0%, #0c0c15 48%, #07070d 100%),
        #07070d;
}
.hero-fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    will-change: transform, opacity;
}
.hero-glow-1 {
    width: 42vw; height: 42vw; max-width: 460px; max-height: 460px;
    top: -6%; inset-inline-end: 4%;
    background: radial-gradient(circle, rgba(255,107,53,0.42) 0%, transparent 70%);
    animation: heroGlow 8s ease-in-out infinite;
}
.hero-glow-2 {
    width: 38vw; height: 38vw; max-width: 420px; max-height: 420px;
    bottom: -8%; inset-inline-start: 2%;
    background: radial-gradient(circle, rgba(255,215,0,0.28) 0%, transparent 70%);
    animation: heroGlow 9s ease-in-out infinite 1.2s;
}
.hero-glow-3 {
    width: 30vw; height: 30vw; max-width: 340px; max-height: 340px;
    top: 34%; inset-inline-start: 42%;
    background: radial-gradient(circle, rgba(255,71,87,0.20) 0%, transparent 70%);
    animation: heroGlow 11s ease-in-out infinite 0.6s;
}
@keyframes heroGlow {
    0%, 100% { transform: scale(0.9) translateY(0); opacity: 0.4; }
    50%      { transform: scale(1.18) translateY(-12px); opacity: 0.8; }
}

/* طبقة نجوم/شرر خافتة تتلألأ */
.hero-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,215,0,0.9), transparent 60%),
        radial-gradient(1.4px 1.4px at 78% 16%, rgba(255,107,53,0.85), transparent 60%),
        radial-gradient(1.2px 1.2px at 32% 68%, rgba(255,255,255,0.7), transparent 60%),
        radial-gradient(1.5px 1.5px at 64% 74%, rgba(255,215,0,0.8), transparent 60%),
        radial-gradient(1.3px 1.3px at 88% 52%, rgba(255,107,53,0.7), transparent 60%),
        radial-gradient(1.2px 1.2px at 46% 34%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(1.4px 1.4px at 20% 84%, rgba(255,215,0,0.7), transparent 60%);
    animation: heroTwinkle 4.5s ease-in-out infinite;
}
@keyframes heroTwinkle {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.9; }
}

/* أبقِ محتوى الـhero فوق التأثيرات */
.hero-content { position: relative; z-index: 2; }

/* شارة الـhero أرقى */
.hero-badge {
    backdrop-filter: blur(4px);
    box-shadow: 0 0 24px rgba(255,215,0,0.14), inset 0 0 0 1px rgba(255,215,0,0.18);
}

/* ---------- أزرار أرقى ---------- */
.btn {
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}
.btn-primary, .nav-cta {
    box-shadow: 0 6px 20px rgba(255,107,53,0.28);
}
.btn-primary:hover, .nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255,107,53,0.45);
    filter: brightness(1.05);
}
.btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(37,211,102,0.4);
}
.btn-outline:hover {
    transform: translateY(-2px);
}

/* ---------- بطاقات أرقى: خط علوي متدرّج يظهر عند التحويم ---------- */
.card, .service-card, .review-card, .contact-info-card, .blog-card, .team-member {
    position: relative;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.card::after, .service-card::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--gradient);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}
.card:hover, .service-card:hover, .review-card:hover,
.contact-info-card:hover, .blog-card:hover, .team-member:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.45);
    border-color: rgba(255,107,53,0.4);
}
.card:hover::after, .service-card:hover::after { transform: scaleX(1); }

/* ---------- أرقام الإحصائيات بلمعة ذهبية ---------- */
.stat-number {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 12px rgba(255,107,53,0.25));
}

/* ---------- معرض الصور: تكبير ناعم ---------- */
.gallery-item { overflow: hidden; }
.gallery-item img { transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.08); }

/* ---------- زر واتساب العائم: هالة أوضح ---------- */
.whatsapp-float {
    box-shadow: 0 8px 28px rgba(37,211,102,0.45);
}

/* ---------- احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-glow, .hero-stars { animation: none !important; }
    .btn:hover, .card:hover, .service-card:hover, .review-card:hover,
    .contact-info-card:hover, .blog-card:hover, .team-member:hover { transform: none; }
}