/* ==========================================================================
   ZOVA TRADING - STRONG MOTION & VISIBLE ANIMATIONS (GLOBAL BOOST)
   هذه الطبقة مسؤولة عن حركات قوية وواضحة تطبق على كافة صفحات الموقع
   ========================================================================== */

/* ==========================================================================
   1) KEYFRAMES LIBRARY
   ========================================================================== */
@keyframes zovaKenburns {
    0%   { transform: scale(1) translate(0, 0); }
    50%  { transform: scale(1.12) translate(1.2%, -1.2%); }
    100% { transform: scale(1) translate(0, 0); }
}

@keyframes zovaFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-18px); }
}

@keyframes zovaFloatSoft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

@keyframes zovaGlowPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(212, 175, 55, 0.35); }
    50%      { box-shadow: 0 0 55px rgba(212, 175, 55, 0.85); }
}

@keyframes zovaSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes zovaSpinReverse {
    from { transform: rotate(360deg); }
    to   { transform: rotate(0deg); }
}

@keyframes zovaShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

@keyframes zovaPulseRing {
    0%   { transform: scale(1); opacity: 0.8; }
    70%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}

@keyframes zovaHeartbeat {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(1.06); }
    40%      { transform: scale(1); }
    60%      { transform: scale(1.05); }
    80%      { transform: scale(1); }
}

@keyframes zovaRiseParticle {
    0%   { background-position: 0 100%, 140px 50%, 300px 120%, 480px 20%; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { background-position: 0 0%, 140px -50%, 300px 0%, 480px -60%; opacity: 0; }
}

@keyframes zovaSlideUp {
    from { transform: translateY(70px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes zovaSlideDown {
    from { transform: translateY(-70px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes zovaZoomIn {
    from { transform: scale(0.72); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

@keyframes zovaFlipIn {
    from { transform: rotateY(-90deg) scale(0.85); opacity: 0; }
    to   { transform: rotateY(0deg) scale(1); opacity: 1; }
}

@keyframes zovaSlideLeftIn {
    from { transform: translateX(70px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes zovaSlideRightIn {
    from { transform: translateX(-70px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes zovaTickerMove {
    0%   { background-position: 0 0; }
    100% { background-position: 60px 0; }
}

@keyframes zovaArrowMove {
    0%, 100% { transform: translateX(9px); opacity: 0; }
    40%      { opacity: 1; }
    50%      { transform: translateX(3px); }
    90%      { opacity: 0; transform: translateX(-8px); }
}

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

@keyframes zovaWave {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(18deg); }
    50%      { transform: rotate(-14deg); }
    75%      { transform: rotate(8deg); }
}

@keyframes zovaSweep {
    0%   { transform: translateX(-150%) skewX(-25deg); }
    100% { transform: translateX(350%) skewX(-25deg); }
}

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

/* ==========================================================================
   2) GLOBAL SCROLL PROGRESS BAR (بوكس تقدم التمرير)
   ========================================================================== */
#zovaScrollProg {
    position: fixed;
    top: 0;
    right: 0;
    height: 4px;
    width: 0%;
    z-index: 999999;
    background: linear-gradient(90deg, #a88219, #e5c158, #ffffff, #e5c158, #a88219);
    background-size: 200% 100%;
    animation: zovaShimmer 3s linear infinite;
    box-shadow: 0 2px 12px rgba(212, 175, 55, 0.8);
    border-radius: 0 0 4px 4px;
    pointer-events: none;
}

/* ==========================================================================
   3) HERO - KEN BURNS (حركة الـ زووم الداخلية للخلفيات) + FLOATING
   ========================================================================== */
.zova-panel-bg {
    animation: zovaKenburns 16s ease-in-out infinite !important;
    will-change: transform;
}

.zova-hero-panel:nth-child(even) .zova-panel-bg {
    animation-duration: 20s !important;
    animation-direction: reverse !important;
}

/* أيقونات الوفت الطافية */
.zova-panel-icon-circle {
    animation: zovaFloatSoft 3.2s ease-in-out infinite;
}

.zova-center-circle-logo {
    animation: zovaFloatSoft 5s ease-in-out infinite;
}

.zova-center-main-title {
    background: linear-gradient(90deg, #ffffff 0%, #e5c158 25%, #ffffff 50%, #e5c158 75%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 30px rgba(229, 193, 88, 0.45);
    animation: zovaTitleShimmer 5s linear infinite;
}

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

/* حلقة دوارة حول الشعار المركزي (يُضاف في الـ HTML عند الحاجة) */
.zova-center-circle-ring-slow {
    animation: zovaSpin 22s linear infinite;
    transform-origin: center;
}

/* نبض زر الـ CTA الرئيسي */
.zova-hero-btn-gold {
    animation: zovaGlowPulse 2.4s ease-in-out infinite;
}


/* سهم متحرك داخل الأزرار */
.zova-hero-btn-gold .fa-arrow-left,
.zova-hero-btn-outline .fa-arrow-left,
.zova-about-btn-gold .fa-arrow-left {
    animation: zovaArrowMove 1.6s ease-in-out infinite;
}

/* دخول درامي لخانات النص في الهيرو */
.zova-panel-text-block {
    animation: zovaSlideUp 1s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

/* غلاف أكثس دراماتيكي في الهيرو */
.zova-panoramic-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(2px 2px at 12% 22%, rgba(229, 193, 88, 0.9), transparent 55%),
        radial-gradient(3px 3px at 62% 15%, rgba(212, 175, 55, 0.8), transparent 60%),
        radial-gradient(2px 2px at 88% 55%, rgba(255, 255, 255, 0.7), transparent 55%),
        radial-gradient(3px 3px at 35% 75%, rgba(229, 193, 88, 0.85), transparent 60%),
        radial-gradient(2px 2px at 68% 40%, rgba(212, 175, 55, 0.7), transparent 55%)
        !important;
    background-size: 400px 400px, 320px 320px, 280px 280px, 360px 360px, 240px 240px;
    animation: zovaParticlesRise 14s linear infinite;
    pointer-events: none;
    z-index: 4;
}

@keyframes zovaParticlesRise {
    0%   { background-position: 0 0%, 0 0%, 0 0%, 0 0%, 0 0%; opacity: 0.4; }
    50%  { opacity: 0.9; }
    100% { background-position: 0 -600px, 0 -500px, 0 -650px, 0 -400px, 0 -700px; opacity: 0.4; }
}


/* ==========================================================================
   5) HEADER NAVBAR - تحتخط متحرك يزحف على الروابط
   ========================================================================== */
.zova-nav-link::after {
    transition: all 0.4s ease !important;
}

.zova-nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: right;
}

/* نبض أيقونة شعار الهيدر */
.zova-header-logo-wrapper {
    display: inline-block;
}

/* ==========================================================================
   6) SECTION TITLES — توهج ذهبي وحركة خفقان (عناوين الأقسام)
   ========================================================================== */
.zova-section-title-wrapper h2,
.ebfq3-title,
.ebpt1-title,
.ebatc1-title,
.zova-gallery-title,
.ebci2-contact-section-title,
.zova-about-title {
    animation: zovaTitleGlow 3s ease-in-out infinite;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

@keyframes zovaTitleGlow {
    0%, 100% { text-shadow: 0 0 8px rgba(212, 175, 55, 0.3); }
    50%      { text-shadow: 0 0 26px rgba(229, 193, 88, 0.85); }
}

/* خط زخرفي متوهج تحت العناوين */
.zova-section-title-wrapper h2::before,
.zova-section-title-wrapper h2::after {
    background: linear-gradient(90deg, #a8822a, #e5c158, #ffffff, #e5c158, #a8822a) !important;
    background-size: 200% 100% !important;
    animation: zovaTickerMove 2s linear infinite !important;
}

@keyframes zovaTickerMove {
    0%   { background-position: 0 0; }
    100% { background-position: -60px 0; }
}

/* ==========================================================================
   7) ACTIVITY CARDS - حركات ويس، رفع عند التمرير والانيميشن تلقائي
   ========================================================================== */
.zova-activity-card {
    animation: zovaFloatSoft 6s ease-in-out infinite;
}

.zova-activity-card:nth-child(even) {
    animation-delay: 1s;
}

.zova-activity-card:hover {
    animation-play-state: paused;
}

/* لمعANCE متحرك على صور البطاقات */
.zova-activity-img-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-150%) skewX(-25deg);
    animation: zovaSweep 3.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

/* أيقونة البطاقة تدور ببطء وتهتز */
.zova-activity-icon-circle {
    animation: zovaGlowPulse 3s ease-in-out infinite;
}

.zova-activity-icon-circle i {
    display: inline-block;
    transition: transform 0.3s ease;
}

.zova-activity-card:hover .zova-activity-icon-circle i {
    animation: zovaWave 0.8s linear infinite;
}

/* ==========================================================================
   8) TRADING BANNER — زوم ناعم مستمر
   ========================================================================== */
.zova-trading-image-sec {
    overflow: hidden;
}

.zova-trading-image {
    animation: zovaKenburns 22s ease-in-out infinite;
    transform-origin: center;
    will-change: transform;
}

/* ==========================================================================
   9) ABOUT SECTION
   ========================================================================== */
.zova-about-float-badge {
    animation: zovaFloat 4s ease-in-out infinite;
}

.zova-about-exp-badge {
    animation: zovaZoomIn 1.1s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

.zova-about-badge-icon {
    animation: zovaGlowPulse 2.8s ease-in-out infinite;
}

.zova-about-img-frame {
    animation: zovaFloatSoft 7s ease-in-out infinite;
}

.zova-about-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(2px 2px at 15% 25%, rgba(229, 193, 88, 0.8), transparent 55%),
        radial-gradient(3px 3px at 70% 12%, rgba(212, 175, 55, 0.7), transparent 60%),
        radial-gradient(2px 2px at 85% 65%, rgba(255, 255, 255, 0.6), transparent 55%),
        radial-gradient(2px 2px at 40% 85%, rgba(229, 193, 88, 0.75), transparent 55%);
    background-size: 360px 360px, 300px 300px, 260px 260px, 400px 400px;
    animation: zovaParticlesRise 15s linear infinite;
    pointer-events: none;
}

/* أيقونة الهويسة تدور */
.zova-about-badge-icon i {
    display: inline-block;
    animation: zovaSpinReverse 14s linear infinite;
}

/* ==========================================================================
   9) WHY US CARDS (Points 1)
   ========================================================================== */
.ebpt1-card {
    transition: all 0.35s ease;
}

.ebpt1-card:hover .ebpt1-card-box {
    transform: translateY(-10px);
}

.ebpt1-card-num {
    animation: zovaGlowPulse 3.4s ease-in-out infinite;
}

/* ==========================================================================
   10) ACHIEVEMENT ORBS - خاتم دوّار حول كل دائرة + نبض
   ========================================================================== */
.ebatc1-orb-graphic::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 2px dashed rgba(212, 175, 55, 0.55);
    animation: zovaSpin 14s linear infinite;
    pointer-events: none;
}

.ebatc1-orb-card {
    animation: zovaFloatSoft 5s ease-in-out infinite;
}

.ebatc1-orb-card:nth-child(odd) {
    animation-delay: 0.8s;
}

.ebatc1-orb-value {
    text-shadow: 0 0 18px rgba(212, 175, 55, 0.6);
    animation: zovaTitleGlow 2.4s ease-in-out infinite;
}

/* ==========================================================================
   11) FAQ - غمز/انتشار بلطف عند الفتح
   ========================================================================== */
.ebfq3-item {
    transition: all 0.3s ease;
}

.ebfq3-item.ebfq3-open .ebfq3-icon {
    animation: none;
}

.ebfq3-icon {
    transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}

/* ==========================================================================
   12) CONTACT CARDS - قلب نابض للأرقام
   ========================================================================== */
.ebci2-contact-card {
    transition: all 0.35s ease;
}

.ebci2-contact-card:hover {
    transform: translateY(-8px) scale(1.02);
}

.ebci2-contact-card .ebci2-contact-icon i {
    animation: zovaHeartbeat 3s ease-in-out infinite;
    display: inline-block;
}

/* ==========================================================================
   13) FOOTER
   ========================================================================== */
.ebftr1-social-icon {
    animation: zovaFloatSoft 3.6s ease-in-out infinite;
    transition: all 0.3s ease;
}

.ebftr1-social-icon:nth-child(odd) {
    animation-delay: 0.6s;
}

.ebftr1-cta-btn {
    animation: zovaGlowPulse 2.6s ease-in-out infinite;
}

.ebftr1-back-to-top {
    animation: zovaFloat 2.8s ease-in-out infinite;
}

/* ==========================================================================
   14) FLOATING CONTACT BUTTONS - نثر أمواج ولفروع
   ========================================================================== */
.floating-whatsapp::before,
.floating-phone::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    z-index: -1;
    background: rgba(37, 211, 102, 0.35);
    animation: zovaPulseRing 2s ease-out infinite;
    pointer-events: none;
}

.floating-phone::before {
    background: rgba(212, 175, 55, 0.45);
    animation-delay: 0.4s;
}

.floating-whatsapp {
    animation: zovaFloatSoft 2.5s ease-in-out infinite;
}

.floating-phone {
    animation: zovaFloatSoft 2.5s ease-in-out infinite;
    animation-delay: 0.5s;
}

.floating-whatsapp i,
.floating-phone i {
    animation: zovaHeartbeat 2.4s ease-in-out infinite;
}

/* ==========================================================================
   15) BTN AND LINKS - شحن قلم طفأ
   ========================================================================== */
.zova-about-btn-gold,
.zova-header-cta-btn,
.zova-card-btn {
    position: relative;
    overflow: hidden;
}

.zova-about-btn-gold::after,
.zova-header-cta-btn::after,
.zova-card-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: translateX(-180%) skewX(-25deg);
    animation: zovaSweep 3s ease-in-out infinite;
    pointer-events: none;
}

/* ==========================================================================
   16) PILLAR ITEMS + VALUE CARDS - رفع عند التطوير
   ========================================================================== */
.zova-pillar-icon {
    animation: zovaFloatSoft 3.4s ease-in-out infinite;
}

.zova-pillar-icon i {
    display: inline-block;
}

.zova-value-icon i {
    display: inline-block;
    animation: zovaFloatSoft 3s ease-in-out infinite;
}

/* ==========================================================================
   17) SCROLL REVEAL - عناصر تنزل بأسلوب درامي في مكانها (يتم تشغيله بالـ JS)
   ========================================================================== */
.zvReveal {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.9s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.9s cubic-bezier(0.16, 0.84, 0.44, 1);
    will-change: opacity, transform;
}

.zvReveal.zvLeft  { transform: translateX(90px); }
.zvReveal.zvRight { transform: translateX(-90px); }
.zvReveal.zvZoom  { transform: scale(0.65); }
.zvReveal.zvFlip  { transform: rotateY(-110deg) scale(0.8); transform-origin: left; }

.zvReveal.zvIn {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) rotateY(0deg);
}

/* أعطاء الهيرو دخول أوّلي */
.zvReveal[data-zv-initial="true"] {
    transition-delay: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
    .zvReveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   18) HERO LOGO — TWO-PART ENTRANCE (Top from distance, Bottom from below)
   ========================================================================== */
.zova-assembled-logo-container {
    position: relative;
    width: 210px;
    height: 220px;
    margin: -10px auto 2px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    overflow: hidden;
}

/* ── Shared Part Styles ── */
.zova-assembled-logo-container .zova-logo-part {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform, opacity;
    pointer-events: none;
}

.zova-assembled-logo-container .zova-logo-part img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: none !important;
    box-shadow: none !important;
}

/* ── Top Part: Letters Z+A, Globe, Leaf ── */
.zova-assembled-logo-container .zova-logo-top {
    clip-path: polygon(0 0, 100% 0, 100% 67%, 0 67%);
    animation: zovaLogoTopEntrance 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.1s;
    opacity: 0;
    transform: scale(0.05);
    transform-origin: center 55%;
}

/* ── Bottom Part: ZOVA TRADING text ── */
.zova-assembled-logo-container .zova-logo-bottom {
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    animation: zovaLogoBottomEntrance 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.6s;
    opacity: 0;
    transform: translateY(100px);
}

/* ── Keyframes: Top comes from far away (smooth scale up, no blur) ── */
@keyframes zovaLogoTopEntrance {
    0% {
        opacity: 0;
        transform: scale(0.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Keyframes: Bottom slides up from below ── */
@keyframes zovaLogoBottomEntrance {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}