/* ══════════════════════════════════════════════════
   تأثيرات إطار الإعلانات — 7 تأثيرات مختلفة كلياً
   ══════════════════════════════════════════════════ */

/* ═══════ الغلاف الخارجي ═══════ */
.ann-effect-wrap {
  position: relative;
  border-radius: 10px;
  padding: 2px;
  margin: 6px 1px 0px;
  isolation: isolate;
}

/* ═══════ الإطار الأساسي (mask لإظهار الحواف فقط 2px) ═══════ */
.ann-effect-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  z-index: 0;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  padding: 2px;
}

/* ═══════ بطاقة الرسالة الداخلية ═══════ */
.ann-effect-wrap > .uzr {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 8px;
  outline: none !important;
  border: none !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════
   1. Shimmer — شريط ضوئي يعبر الإطار
   ══════════════════════════════════════════════════ */
@keyframes shimmer-sweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.ann-effect-wrap[data-ann-effect="shimmer"]::before {
  background: linear-gradient(
    90deg,
    #d4af37 0%, #d4af37 30%,
    #fff7cc 45%, #ffffff 50%, #fff7cc 55%,
    #d4af37 70%, #d4af37 100%
  );
  background-size: 200% 100%;
  animation: shimmer-sweep 2.5s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════
   2. Gradient — تدرج قوس قزح يتحرك أفقياً
   ══════════════════════════════════════════════════ */
@keyframes gradient-flow {
  0%   { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}
.ann-effect-wrap[data-ann-effect="gradient-text"]::before {
  background: linear-gradient(
    90deg,
    #ff6fa5, #ffcf6f, #6fffd6, #8f8fff,
    #ff6fa5, #ffcf6f, #6fffd6, #8f8fff, #ff6fa5
  );
  background-size: 300% 100%;
  animation: gradient-flow 4s linear infinite;
}

/* ══════════════════════════════════════════════════
   3. Glow Pulse — إطار ينبض بالتوهج (يظهر ويخفت)
   ══════════════════════════════════════════════════ */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.3; box-shadow: 0 0 2px #ff6b35; }
  50%      { opacity: 1; box-shadow: 0 0 10px #ff6b35, 0 0 20px #ffa500; }
}
.ann-effect-wrap[data-ann-effect="glow-pulse"]::before {
  background: linear-gradient(90deg, #ff4500, #ff8c00, #ffd700, #ff4500);
  animation: glow-pulse 2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════
   4. Aurora — موجة عمودية تتمايل
   ══════════════════════════════════════════════════ */
@keyframes aurora-wave {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
.ann-effect-wrap[data-ann-effect="aurora"]::before {
  background: linear-gradient(
    135deg,
    #7b00ff, #00d4ff, #00ff88, #ff00c8, #7b00ff
  );
  background-size: 400% 400%;
  animation: aurora-wave 6s ease infinite;
}

/* ══════════════════════════════════════════════════
   5. Glass — وميض شفاف يمر مثل انعكاس الزجاج
   ══════════════════════════════════════════════════ */
@keyframes glass-flash {
  0%   { background-position: -150% 0; opacity: 0.4; }
  50%  { opacity: 1; }
  100% { background-position: 250% 0; opacity: 0.4; }
}
.ann-effect-wrap[data-ann-effect="glass"]::before {
  background: linear-gradient(
    120deg,
    rgba(180,200,255,0.3) 0%, rgba(180,200,255,0.3) 35%,
    rgba(255,255,255,0.95) 45%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.95) 55%,
    rgba(180,200,255,0.3) 65%, rgba(180,200,255,0.3) 100%
  );
  background-size: 200% 100%;
  animation: glass-flash 3s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════
   6. Border Beam — نقطة ضوء تدور حول الإطار
   ══════════════════════════════════════════════════ */
@keyframes beam-rotate {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}
.ann-effect-wrap[data-ann-effect="border-beam"]::before {
  background: radial-gradient(circle at var(--bx, 0%) var(--by, 0%), #ffd700 0%, #ff6b35 20%, transparent 50%);
  background-size: 100% 100%;
  animation: beam-path 3s linear infinite;
}
@keyframes beam-path {
  0%   { background: radial-gradient(circle at 0% 50%, #ffd700 0%, #ff6b35 30%, transparent 60%); }
  25%  { background: radial-gradient(circle at 50% 0%, #ffd700 0%, #ff6b35 30%, transparent 60%); }
  50%  { background: radial-gradient(circle at 100% 50%, #ffd700 0%, #ff6b35 30%, transparent 60%); }
  75%  { background: radial-gradient(circle at 50% 100%, #ffd700 0%, #ff6b35 30%, transparent 60%); }
  100% { background: radial-gradient(circle at 0% 50%, #ffd700 0%, #ff6b35 30%, transparent 60%); }
}

/* ══════════════════════════════════════════════════
   7. Confetti — نقاط ملونة ترقص وتغير أحجامها
   ══════════════════════════════════════════════════ */
@keyframes confetti-dance {
  0%   { background-position: 0% 0%, 25% 50%, 50% 25%, 75% 75%, 100% 0%; }
  50%  { background-position: 10% 50%, 35% 0%, 60% 75%, 85% 25%, 90% 50%; }
  100% { background-position: 0% 0%, 25% 50%, 50% 25%, 75% 75%, 100% 0%; }
}
.ann-effect-wrap[data-ann-effect="confetti"]::before {
  background:
    radial-gradient(circle 3px, #ff6b6b 100%, transparent 100%),
    radial-gradient(circle 2px, #ffd93d 100%, transparent 100%),
    radial-gradient(circle 3px, #6bcbff 100%, transparent 100%),
    radial-gradient(circle 2px, #c56bff 100%, transparent 100%),
    radial-gradient(circle 3px, #6bff9e 100%, transparent 100%);
  background-size: 8px 8px, 6px 6px, 8px 8px, 6px 6px, 8px 8px;
  background-repeat: repeat;
  animation: confetti-dance 2s ease-in-out infinite;
}

/* ═══════ إمكانية الوصول ═══════ */
@media (prefers-reduced-motion: reduce) {
  .ann-effect-wrap::before {
    animation: none !important;
    opacity: 1;
  }
}


/* ═══════ Live Map — نبض النقاط ═══════ */
@keyframes map-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.7; }
}