/* =============================================================
   יום־יומי · site-animate.css
   שכבת אנימציה משותפת לכל הדפים הפנימיים — בסגנון דף הבית:
   כותרת מנצנצת · הילה מונפשת · חשיפת כרטיסים מדורגת בגלילה.
   נטען אחרי שאר ה-CSS · תוספתי בלבד · נופל בחן אם ה-JS לא רץ.
   ============================================================= */

/* ---------- page-hero: animated shimmer title + entrance glow ---------- */
.page-hero { position: relative; }

.page-hero h1 .ph-txt {
  background: linear-gradient(110deg,
    #ffffff 0%,
    color-mix(in srgb, var(--pc, var(--gold)) 90%, #fff) 42%,
    #ffffff 70%,
    color-mix(in srgb, var(--pc, var(--gold)) 90%, #fff) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sa-shimmer 6s linear infinite;
}
@keyframes sa-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 240% 50%; }
}

.page-hero h1 .ph-ico {
  display: inline-block;
  animation: sa-bob 4.5s ease-in-out infinite;
}
@keyframes sa-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-4deg); }
}

/* soft animated glow behind the hero */
.sa-hero-glow {
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 320px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 78% 40%, color-mix(in srgb, var(--pc, var(--gold)) 45%, transparent), transparent),
    radial-gradient(closest-side at 22% 60%, rgba(108,99,255,0.35), transparent);
  filter: blur(38px);
  opacity: 0.55;
  animation: sa-glow 9s ease-in-out infinite;
}
@keyframes sa-glow {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50%      { transform: translate(2%, 8px) scale(1.06); opacity: 0.7; }
}

/* ---------- ambient floating orbs (whole page, very soft) ---------- */
.sa-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.sa-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(95px);
  opacity: 0.16;
  animation: sa-float 13s ease-in-out infinite;
}
.sa-orb.g { width: 40vw; height: 40vw; top: -10vw; right: -8vw; background: var(--gold, #d4a843); }
.sa-orb.a { width: 34vw; height: 34vw; bottom: -10vw; left: -8vw; background: var(--pc-page, #6c63ff); animation-delay: -6s; }
@keyframes sa-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(2vw, -3vh) scale(1.05); }
}

/* ---------- scroll-staggered card reveals (gated by body.sa-anim) ---------- */
body.sa-anim .card {
  animation: none;                 /* replace the one-shot load fade-up */
  opacity: 0;
  transform: translateY(30px) scale(0.992);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--sa-d, 0s);
}
body.sa-anim .card.sa-in { opacity: 1; transform: none; }

/* rabbi video blocks (video page) reveal too */
body.sa-anim .rav-block {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--sa-d, 0s);
}
body.sa-anim .rav-block.sa-in { opacity: 1; transform: none; }

/* ---------- reduced motion / safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-hero h1 .ph-txt,
  .page-hero h1 .ph-ico,
  .sa-hero-glow, .sa-orb { animation: none !important; }
  body.sa-anim .card,
  body.sa-anim .rav-block { opacity: 1 !important; transform: none !important; transition: none !important; }
}