/* fx.css — تأثيرات CSS خفيفة: لمعة وإطار متحرك للباقة المميزة، شريط الرعاة، ونبضة العداد (مع fx.js) */

/* عدّاد: نبضة خفيفة وأرقام بعرض ثابت عشان ما يرتج النص */
.fx-num{font-variant-numeric:tabular-nums;display:inline-block}
.fx-ticking{animation:fx-bump .5s ease-out}
@keyframes fx-bump{40%{transform:scale(1.12)}}

/* Shine button: لمعة تمر على الزر كل ٣ ثواني (اتجاهها يتبع RTL) */
.fx-shine{position:relative;overflow:hidden;isolation:isolate}
.fx-shine::after{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);animation:fx-shine 3s ease-in-out infinite}
[dir="rtl"] .fx-shine::after{animation-name:fx-shine-rtl}
.fx-shine>*{position:relative}
@keyframes fx-shine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes fx-shine-rtl{0%,55%{transform:translateX(120%)}100%{transform:translateX(-120%)}}

/* Border Beam: إطار متحرك للباقة المميزة (conic-gradient + @property) */
@property --fx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.fx-beam{position:relative;border:2px solid transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
    conic-gradient(from var(--fx-a),transparent 0 70%,var(--ochre) 82%,var(--red) 90%,transparent 100%) border-box;
  animation:fx-spin 4s linear infinite}
@keyframes fx-spin{to{--fx-a:360deg}}
.fx-badge{position:absolute;top:-10px;inset-inline-start:14px;background:var(--red);color:#FBF5EA;font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:999px}

/* Marquee: شريط رعاة يتحرك باتجاه القراءة العربية، يوقف باللمس/المرور */
.fx-mq{display:flex;overflow:hidden;gap:var(--fx-mq-gap,28px);direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.fx-mq-track{display:flex;flex:none;gap:var(--fx-mq-gap,28px);min-width:100%;justify-content:space-around;align-items:center;
  animation:fx-mq var(--fx-mq-dur,20s) linear infinite}
[dir="rtl"] .fx-mq-track{animation-direction:reverse}
.fx-mq:hover .fx-mq-track,.fx-mq:active .fx-mq-track{animation-play-state:paused}
@keyframes fx-mq{to{transform:translateX(calc(-100% - var(--fx-mq-gap,28px)))}}
.fx-mq-track>*{direction:rtl;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .fx-ticking{animation:none}
  .fx-shine::after{animation:none;display:none}
  .fx-beam{animation:none;background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(var(--ochre),var(--red)) border-box}
  .fx-mq{direction:rtl;-webkit-mask-image:none;mask-image:none}
  .fx-mq-track{animation:none;flex:1 1 100%;min-width:0;flex-wrap:wrap;justify-content:center;gap:6px 16px}
  .fx-mq-track[aria-hidden]{display:none}
}