/* adhkar-tasbih.css — الأذكار، العدّادات، السبحة، الختمة، الاحتفالات */

/* ── index.html 277–306 ── */

/* Ripple effect (lightweight) */
.ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple-anim 520ms var(--ease-premium); background-color: rgba(255,255,255,0.09); pointer-events: none; z-index: 0; }
.ripple.dark { background-color: rgba(255,255,255,0.25); }

/* Floating counter badge (+1 / +3) */
.floater { position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 5; font-weight: 800; color: var(--accent); text-shadow: 0 1px 6px rgba(0,0,0,0.4); font-size: calc(var(--font-size) * 0.8); animation: floatUp 900ms var(--ease-out-quart) forwards; }

/* Burst particles (used on bookmark, completion) */
.burst-particle { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); pointer-events: none; z-index: 1; animation: burstFly 700ms var(--ease-out-quart) forwards; }
@keyframes burstFly { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--bx, 0), var(--by, 0)) scale(0.4); opacity: 0; } }

/* Confetti pieces */
.confetti-piece { position: fixed; top: -10vh; width: 8px; height: 14px; border-radius: 2px; pointer-events: none; z-index: 10001; animation: confettiDrop 1800ms cubic-bezier(0.2, 0.6, 0.4, 1) forwards; }

/* Tap pulse on thikr / count buttons */
.tap-pulse { animation: tapPulse 420ms var(--ease-out-quart); }

/* Button microinteraction — الضغط موحّد عبر مجموعة base.css (scale 0.97) */
.btn-scale:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px var(--accent-dim); }
.btn-scale { position: relative; overflow: hidden; }

/* Magnetic pull: data-magnetic target (subtle, capped) */
[data-magnetic] { transition: transform 180ms var(--ease-out-quart); }

/* Stagger helper for lists — يتّبع تأخير JS (--reveal-delay) أو قاعدة nth-child (--stagger-delay) */
[data-stagger] > * { opacity: 0; transform: translateY(6px); }
[data-stagger].mounted > * { opacity: 1; transform: none; transition: opacity 420ms var(--ease-out-quart) var(--reveal-delay, var(--stagger-delay)), transform 480ms var(--ease-out-quart) var(--reveal-delay, var(--stagger-delay)); }

/* ── index.html 307–330 ── */
[data-stagger].mounted > *:nth-child(1)  { --stagger-delay: 0ms; }
[data-stagger].mounted > *:nth-child(2)  { --stagger-delay: 50ms; }
[data-stagger].mounted > *:nth-child(3)  { --stagger-delay: 100ms; }
[data-stagger].mounted > *:nth-child(4)  { --stagger-delay: 150ms; }
[data-stagger].mounted > *:nth-child(5)  { --stagger-delay: 200ms; }
[data-stagger].mounted > *:nth-child(6)  { --stagger-delay: 250ms; }
[data-stagger].mounted > *:nth-child(7)  { --stagger-delay: 300ms; }
[data-stagger].mounted > *:nth-child(8)  { --stagger-delay: 350ms; }
[data-stagger].mounted > *:nth-child(9)  { --stagger-delay: 400ms; }
[data-stagger].mounted > *:nth-child(10) { --stagger-delay: 450ms; }
[data-stagger].mounted > *:nth-child(11) { --stagger-delay: 500ms; }
[data-stagger].mounted > *:nth-child(12) { --stagger-delay: 550ms; }
[data-stagger].mounted > *:nth-child(n+13) { --stagger-delay: 600ms; }

/* FLIP support: when a list re-orders, items get a brief transform */
.flip-anim { transition: transform 380ms var(--ease-out-quart) !important; }

/* Smooth number transitions */
.count-anim { display: inline-block; transition: transform 360ms var(--ease-spring-snap), color 360ms var(--ease-out-quart); will-change: transform; }
.count-anim.pop { animation: countPop 480ms var(--ease-spring-snap); }

/* شريط التقدّم: التدرّج الموحّد معرّف في layout.css — لا قواعد تدرّج مكررة هنا */

/* ── index.html 535–535 ── */
#nav:not(.nav-hidden) ~ .nav-scrim { opacity: 1; }

/* ── index.html 1611–1617 ── */
/* ==================== تنفّس دائرة السبحة (هدوء، بلا توهج) ==================== */
#tasbih-tap-btn.breathe { animation: tasbihBreathe 3.6s ease-in-out infinite; }
@keyframes tasbihBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }

/* ==================== حلقة التقدم بحركة زنبركية ==================== */
.circle-path { transition: stroke-dasharray 900ms var(--ease-spring), stroke 0.4s; }