/* ============================================================
   tehillim.co.il — חבילת אנימציות זהב (v1, מותאם לאתר)
   קובץ נלווה: tehillim-animations.js
   כל האנימציות על transform/opacity/background-position בלבד,
   מופעלות רק כשהאלמנט על המסך, ומכבדות prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. הברקת זהב חולפת על אריחי מזמורים זמינים ----------
   פס אור אלכסוני עדין שחולף על האריח אחת ל-7 שניות.
   מופעל רק כשהרשת נראית (class .tlm-shimmer-on מנוהל ב-JS).
   פיזור ההשהיות ב-nth-child כדי שישרוד את בניית הרשת מחדש
   בכל החלפת שפה (buildPsalmGrid). */
.tlm-shimmer-on .psalm-card.available::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255, 234, 170, 0.16) 50%,
    transparent 58%
  );
  background-size: 300% 100%;
  background-position: 180% 0;
  animation: tlm-shimmer 7s linear infinite;
}

/* פיזור — האור "נודד" על הרשת במקום להבהב על כולם יחד */
.tlm-shimmer-on .psalm-card.available:nth-child(2n + 1)::before { animation-delay: 0.9s; }
.tlm-shimmer-on .psalm-card.available:nth-child(3n)::before     { animation-delay: 1.8s; }
.tlm-shimmer-on .psalm-card.available:nth-child(5n)::before     { animation-delay: 2.9s; }
.tlm-shimmer-on .psalm-card.available:nth-child(7n)::before     { animation-delay: 4.3s; }
.tlm-shimmer-on .psalm-card.available:nth-child(11n)::before    { animation-delay: 5.7s; }

@keyframes tlm-shimmer {
  0%   { background-position: 180% 0; }
  22%  { background-position: -80% 0; }
  100% { background-position: -80% 0; }
}

/* ---------- 2. כניסה מדורגת של רשת המזמורים ----------
   האריחים נסתרים רק כשה-JS פעיל (מוסיף .tlm-stagger), עולים בגל
   לפי השהיה פר-אריח (--tlm-d), והמחלקות מוסרות בסיום —
   כך אין שום התנגשות עם עיצוב/hover הקיימים של האתר. */
.psalm-grid.tlm-stagger:not(.tlm-in) .psalm-card {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}

.psalm-grid.tlm-stagger.tlm-in .psalm-card {
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: var(--tlm-d, 0s);
}

/* ---------- 5. קצה זוהר לפס ההתקדמות ----------
   אנימציית המילוי עצמה קיימת באתר; ה-JS שלנו רק מציב את האחוז
   המדויק (מחושב מ"78 / 150") במקום ה-50% הקבוע בקוד. */
.progress-bar-fill.tlm-tip {
  position: relative;
}

.progress-bar-fill.tlm-tip::after {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  inset-inline-end: -3px;
  width: 16px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(255, 240, 190, 0.85),
    transparent
  );
  filter: blur(1px);
  pointer-events: none;
}

/* ---------- 7. קו זהב נמתח מתחת לפסוק המרכזי ----------
   כמו קולמוס שמסיים שורה — נמתח מהמרכז כשהכרטיס נכנס למסך. */
.psalm-quote {
  position: relative;
  padding-bottom: 0.9rem;
}

.psalm-quote::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 150px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright, #e8cc7a), transparent);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 1.4s ease 0.3s;
}

.tlm-underline .psalm-quote::after {
  transform: translateX(-50%) scaleX(1);
}

/* ---------- 8. אקולייזר שמגיב לניגון בפועל ----------
   חמישה פסי זהב מתחת למונה השירים; רוקדים רק כשהנגן באמת מנגן
   (ה-JS בודק את מצב נגן היוטיוב), נחים בעדינות כשלא. */
.tlm-eq-wrap {
  text-align: center;
  margin-top: 6px;
  min-height: 16px;
}

.tlm-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
}

.tlm-eq i {
  width: 3px;
  height: 100%;
  border-radius: 1px;
  background: var(--gold, #c9a84c);
  transform: scaleY(0.22);
  transform-origin: bottom;
  opacity: 0.35;
  transition: opacity 0.4s, transform 0.4s;
}

.tlm-eq.tlm-playing i {
  opacity: 1;
  animation: tlm-eq-bounce 1s ease-in-out infinite;
}

.tlm-eq.tlm-playing i:nth-child(1) { animation-duration: 0.9s; }
.tlm-eq.tlm-playing i:nth-child(2) { animation-duration: 0.7s; animation-delay: 0.12s; }
.tlm-eq.tlm-playing i:nth-child(3) { animation-duration: 1.1s; animation-delay: 0.05s; }
.tlm-eq.tlm-playing i:nth-child(4) { animation-duration: 0.8s; animation-delay: 0.2s; }
.tlm-eq.tlm-playing i:nth-child(5) { animation-duration: 1s;   animation-delay: 0.32s; }

@keyframes tlm-eq-bounce {
  0%, 100% { transform: scaleY(0.25); }
  50%      { transform: scaleY(1); }
}

/* ---------- 10. נדנוד עדין של פעמון ההרשמה ----------
   נדנוד קצר אחת ל-12 שניות — מושך עין בלי להציק. */
.tlm-bell {
  display: inline-block;
  transform-origin: top center;
  animation: tlm-bell-ring 12s ease-in-out infinite;
}

@keyframes tlm-bell-ring {
  0%, 86%, 100% { transform: rotate(0); }
  88% { transform: rotate(14deg); }
  90% { transform: rotate(-12deg); }
  92% { transform: rotate(9deg); }
  94% { transform: rotate(-6deg); }
  96% { transform: rotate(3deg); }
  98% { transform: rotate(-1deg); }
}

/* ---------- כיבוד העדפת "פחות תנועה" ---------- */
@media (prefers-reduced-motion: reduce) {
  .tlm-shimmer-on .psalm-card.available::before { animation: none; }
  .psalm-grid.tlm-stagger:not(.tlm-in) .psalm-card { opacity: 1; transform: none; }
  .progress-bar-fill { transition: none; }
  .psalm-quote::after { transition: none; transform: translateX(-50%) scaleX(1); }
  .tlm-eq i, .tlm-eq.tlm-playing i { animation: none; }
  .tlm-bell { animation: none; }
}