/* ================================================== */
/* شاشة بدء (Splash Screen) - تفجير قوي مع شرار ونار  */
/* ================================================== */

/* 1. الخلفية السماوية والنصوص أسفل الشعار */
html::before {
  content: "سعر أقل .. قيمة أكثر\A\A رقم النسخة 2.2.0" !important;
  white-space: pre-wrap !important;
  text-align: center !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: #f2f9f9 !important;
  padding-top: 55vh !important;
  box-sizing: border-box !important;
  color: #047857 !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  line-height: 1.8 !important;
  z-index: 99999998 !important;
  pointer-events: none !important;
  direction: rtl !important;
  animation: splashUnifiedFade 1.9s forwards ease-in-out !important;
}

/* 2. الشعار المخصص مع انميشن التفجير والانفجار الضوئي */
html::after {
  content: "" !important;
  position: fixed !important;
  top: 32% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 180px !important;
  height: 160px !important;
  background-image: url('https://mt2023.com/app1/it/02.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  z-index: 99999999 !important;
  pointer-events: none !important;

  /* تطبيق انميشن التفجير الناري القوي */
  animation: logoFireExplosion 0.65s cubic-bezier(0.1, 0.9, 0.2, 1.2) forwards,
             splashUnifiedFade 1.9s forwards ease-in-out !important;
}

/* 3. شظايا وشرار النار المتطاير حول الشعار عند الانفجار */
body::before {
  content: "" !important;
  position: fixed !important;
  top: 32% !important;
  left: 50% !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 100000000 !important;
  
  /* إنشاء شظايا نار وشرار متناثرة في جهات متعددة */
  box-shadow: 
    -90px -70px 10px #f97316,
    80px -80px 12px #ef4444,
    -110px 50px 8px #f59e0b,
    100px 60px 15px #10b981,
    0px -120px 14px #fbbf24,
    -60px 100px 10px #ea580c,
    70px 110px 12px #dc2626 !important;

  /* انميشن تطاير شرار النار */
  animation: fireSparksFly 0.65s cubic-bezier(0.05, 0.85, 0.2, 1) forwards !important;
}

/* 4. حركة انشطار وتفجير الشعار القوي (Logo Fire Explosion) */
@keyframes logoFireExplosion {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.05) rotate(-15deg);
    filter: brightness(6) contrast(3) drop-shadow(0 0 50px #ef4444);
  }
  45% {
    opacity: 1;
    /* تضخم الانفجار لأقصى حد مع هالة نارية حمراء وخضراء */
    transform: translate(-50%, -50%) scale(1.45) rotate(5deg);
    filter: brightness(2.5) drop-shadow(0 0 35px #f97316) drop-shadow(0 0 20px #10b981);
  }
  75% {
    /* ارتداد صدمة الانفجار */
    transform: translate(-50%, -50%) scale(0.9) rotate(-2deg);
    filter: brightness(1.3) drop-shadow(0 0 15px #10b981);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    filter: brightness(1) drop-shadow(0 0 0px transparent);
  }
}

/* 5. انميشن تطاير وتبدد شرار النار وشظايا الانفجار */
@keyframes fireSparksFly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.8);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.8);
    filter: blur(6px);
  }
}

/* 6. التلاشي الموحد والتام (اختفاء كافة الطبقات معاً) */
@keyframes splashUnifiedFade {
  0% {
    opacity: 1;
    visibility: visible;
  }
  75% {
    opacity: 1;
    visibility: visible;
  }
  98% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    display: none !important;
  }
}