/* ════════════════════════════════════════════════════════════
   enhance.css — שדרוג עיצוב דף הבית (בריף ניר, 2026-06-10)
   scroll-reveal · קצב רקעים · חוט גלילה · Hero-in · פס אמון ·
   hover כרטיסים · canvas חלקיקים.
   עיקרון: צבעים מטוקני theme.css בלבד; כיבוי מלא ב-reduced-motion.
   גידור no-JS: כל כללי ההסתרה תחת html.enhance-on (שמוסיף enhance.js
   בשורתו הראשונה) — אם הסקריפט לא נטען, האתר נשאר גלוי במלואו.
   ════════════════════════════════════════════════════════════ */

/* ── reduced-motion: הכול כבוי, הכול גלוי ── */
@media (prefers-reduced-motion: reduce) {
  .reveal, [data-reveal], [data-reveal-stagger] > *, .hero-in {
    opacity: 1 !important; transform: none !important;
    transition: none !important; animation: none !important;
  }
  .scroll-thread__fill { transition: none !important; }
  .hero-canvas { display: none !important; }
}

/* ── שלב 1: scroll-reveal ── */
html.enhance-on [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
html.enhance-on [data-reveal].is-visible { opacity: 1; transform: none; }

/* הופעה מדורגת לילדים (כרטיסי שירות, שלבי תהליך) */
html.enhance-on [data-reveal-stagger] > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
html.enhance-on [data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }

/* ── שלב 2: קצב רקעים — מקטע "טבול" בטורקיז עמוק ── */
.section-tinted {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(45, 212, 191, .05), transparent 60%),
    var(--bg-base);
}

/* ── שלב 3: חוט הגלילה (מסע המסמך) ── */
.scroll-thread {
  position: fixed; top: 0; right: 18px; width: 2px; height: 100vh; z-index: 30;
  background: var(--border-soft); pointer-events: none;
}
.scroll-thread__fill {
  position: absolute; top: 0; right: 0; width: 100%; height: 0;
  background: var(--gradient-trust);
  box-shadow: 0 0 8px rgba(45, 212, 191, .6);
  transition: height .1s linear;
}
/* נקודות-ציון מול המקטעים — נדלקות כשהמקטע פעיל */
.scroll-thread__dot {
  position: absolute; right: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.scroll-thread__dot.active {
  background: var(--accent-trust); border-color: var(--accent-trust);
  box-shadow: 0 0 10px rgba(45, 212, 191, .7);
}
@media (max-width: 768px) { .scroll-thread { right: 8px; } }

/* ── שלב 4: כניסת Hero (פעם אחת בטעינה) ── */
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
html.enhance-on .hero-in { opacity: 0; animation: heroIn .8s cubic-bezier(.22,.61,.36,1) forwards; }
html.enhance-on .hero-in.d1 { animation-delay: .1s; }
html.enhance-on .hero-in.d2 { animation-delay: .25s; }
html.enhance-on .hero-in.d3 { animation-delay: .4s; }

/* ── שלב 5: פס אמון עם מונים ── */
.trust-bar { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.trust-bar > div { text-align: center; }
.trust-bar .cu {
  font: 700 1.75rem/1 var(--font-display);
  background: var(--gradient-trust);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.trust-bar small { display: block; color: var(--text-muted); margin-top: .25rem; }

/* ── שלב 6: שדרוג כרטיסי שירות ── */
.srv-card { position: relative; }
.srv-card:hover {
  transform: translateY(-4px);
  border-color: rgba(45, 212, 191, .4);
  box-shadow: 0 12px 30px -10px rgba(45, 212, 191, .25);
}
/* כרטיס "פופולרי" — הילה עדינה */
.srv-card.is-popular { border-color: rgba(45, 212, 191, .35); }
.srv-card.is-popular::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(45, 212, 191, .25), 0 0 24px -6px rgba(45, 212, 191, .3);
  pointer-events: none;
}

/* ── שלב 7: canvas חלקיקים ב-Hero ── */
.hero-canvas {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
@media (max-width: 768px) { .hero-canvas { display: none; } }