/* ============================================================
   SiloV · מוטיב "כדור האור": קול שמדבר ומקשיב
   שכבה נפרדת שנדלקת רק כשעל body יש את המחלקה motif-orb.
   כיבוי מהיר: מורידים את המחלקה מה־body, והדף חוזר לקווי ההנחיה.
   ============================================================ */

/* כשהמוטיב כבוי, הכדור לא קיים בדף */
body:not(.motif-orb) .orb-wrap{display:none}

/* הקווים והקרן יורדים, האור נשאר */
.motif-orb .guides, .motif-orb .beam{display:none}

/* ---------- הירו: טקסט מול הכדור ---------- */
.motif-orb .hero{align-items:center}
.motif-orb .hero-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  align-items:center; gap:clamp(32px,5vw,72px);
}
.motif-orb .hero-copy{max-width:none}
.motif-orb .hero .halo{inset-inline-start:auto; inset-inline-end:-260px; top:-160px; opacity:.55}

.orb-wrap{
  position:relative; width:min(460px,100%); aspect-ratio:1; margin-inline:auto;
  display:grid; place-items:center; isolation:isolate;
  --talk:0; /* 0 שקט, 1 מדבר. motion.js מעלה את זה בזמן גלילה */
}
.orb-wrap > *{position:absolute; border-radius:50%; pointer-events:none}

/* הזוהר החיצוני, רחב ורך */
.orb-glow{
  inset:-18%;
  background:radial-gradient(closest-side, rgba(124,77,238,.55), rgba(124,77,238,.18) 45%, transparent 72%);
  filter:blur(26px); opacity:calc(.75 + var(--talk) * .25);
  animation:orbBreathe 7s ease-in-out infinite;
}
/* הגוף: כדור אור עם עומק, לא דיסקית שטוחה */
.orb-core{
  inset:22%; overflow:hidden;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0, rgba(237,228,255,.9) 6%, rgba(167,139,250,.85) 22%, rgba(124,77,238,.9) 48%, rgba(59,28,143,.95) 76%, #1A0B3D 100%);
  box-shadow:
    inset -18px -24px 60px rgba(10,8,16,.55),
    inset 10px 12px 40px rgba(255,255,255,.18),
    0 0 60px rgba(167,139,250,.45),
    0 0 140px rgba(124,77,238,.35);
  animation:orbBreathe 5.2s ease-in-out infinite, orbWobble 11s ease-in-out infinite;
  transform:scale(calc(1 + var(--talk) * .06));
}
/* מערבולת פנימית איטית, נותנת לכדור תחושה של אנרגיה שזורמת בתוכו */
.orb-swirl, .orb-swirl2{
  position:absolute; inset:-30%; border-radius:50%; mix-blend-mode:screen;
  background:conic-gradient(from 0deg, transparent 0 20%, rgba(233,213,255,.45) 32%, transparent 46%, rgba(167,139,250,.35) 64%, transparent 78%);
  filter:blur(18px); animation:spin 18s linear infinite;
}
.orb-swirl2{inset:-10%; animation-duration:27s; animation-direction:reverse; opacity:.7}
/* טבעות שמתפשטות החוצה כמו קול שנפלט */
.orb-ring{
  inset:22%; border:1px solid rgba(233,213,255,.55);
  box-shadow:0 0 18px rgba(167,139,250,.35), inset 0 0 18px rgba(167,139,250,.15);
  opacity:0; animation:orbRing 4.2s cubic-bezier(.2,.6,.3,1) infinite;
}
.orb-ring.k2{animation-delay:1.4s} .orb-ring.k3{animation-delay:2.8s}
/* כשגוללים, הכדור "מדבר": הטבעות מתחזקות */
.orb-wrap[data-talking] .orb-ring{animation-duration:2.4s; border-color:rgba(233,213,255,.85)}

@keyframes orbBreathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.045)}}
@keyframes orbWobble{
  0%,100%{border-radius:50% 50% 50% 50% / 50% 50% 50% 50%}
  33%{border-radius:52% 48% 50% 50% / 49% 51% 49% 51%}
  66%{border-radius:48% 52% 51% 49% / 51% 49% 52% 48%}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes orbRing{0%{transform:scale(1); opacity:0} 12%{opacity:.7} 100%{transform:scale(1.75); opacity:0}}

/* ---------- המוטיב חוזר בקטן לאורך הדף ---------- */
/* האייקון של כרטיס הסוכן הקולי הוא כדור אור קטן */
.motif-orb .card.flag .icon{
  border:0; color:#fff;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.9) 0, rgba(167,139,250,.9) 30%, rgba(124,77,238,1) 65%, #3B1C8F 100%);
  box-shadow:0 0 24px rgba(167,139,250,.55), inset -6px -8px 16px rgba(10,8,16,.4);
}
/* נקודות ציר הזמן פועמות כמו הכדור */
.motif-orb .steps.in .step::before{animation:ring 3.6s ease-out infinite}
.motif-orb .steps.in .step:nth-child(2)::before{animation-delay:1.2s}
.motif-orb .steps.in .step:nth-child(3)::before{animation-delay:2.4s}
/* סימן ההצלחה בטופס באותו חומר */
.motif-orb .fd-tick{background:radial-gradient(circle at 32% 28%, #fff 0, var(--glow) 35%, var(--brand) 70%, var(--deep) 100%)}

/* ---------- טאבלט ומובייל: הכדור למעלה, הטקסט מתחת, על רקע נקי ---------- */
@media (max-width:900px){
  .motif-orb .hero{align-items:flex-start}
  .motif-orb .hero-grid{grid-template-columns:1fr; gap:28px}
  .orb-wrap{order:-1; width:min(320px,70vw); margin-inline:auto}
  .motif-orb .hero .halo{inset-inline-end:auto; inset-inline-start:50%; transform:translateX(-50%); top:-120px; width:min(640px,120vw)}
}
@media (max-width:500px){
  .orb-wrap{width:min(240px,64vw)}
  .motif-orb .hero{padding-block:44px 64px}
}

@media (prefers-reduced-motion:reduce){
  .orb-glow, .orb-core, .orb-swirl, .orb-swirl2, .orb-ring, .motif-orb .steps.in .step::before{animation:none}
  .orb-ring{opacity:.35; transform:scale(1.3)}
}