/* ============================================================================
   holo2-c.css — צוות C · מסך s14: בועות השאלות בעולם האור.
   בועות זכוכית אמיתיות (גרדיאנט זכוכית + הברקה ספקולרית + שפה מוארת — CSS
   בלבד, בלי תמונות), ריחוף transform-בלבד בקצב שונה לכל בועה, פופ מהיר,
   וחלון-תשובה על cream-card (חפץ פיזי — מותר לפי חוקי הברזל).
   Team C · s14: real glass bubbles (gradient glass, specular streak, lit rim —
   pure CSS), transform-only drift at per-bubble tempo, fast pop, and a
   cream-card answer window (a physical object — allowed by the iron rules).
   ============================================================================ */

/* ═══ פריסה: כותרת ↑ שדה בועות (תופס את האוויר) ↓ CTA תמיד למטה ═══ */
.s14h .stack { justify-content: space-between; gap: calc(var(--air) * 1.7); }
.s14h .lw-title { opacity: 0; animation: riseIn 800ms 200ms var(--ease-enter) forwards; }
.s14h .lw-btn   { opacity: 0; animation: riseIn 800ms 1100ms var(--ease-enter) forwards; }

/* כלל נסיה — בלי מילים יתומות (הרחבת הכלל הגלובלי לסלקטורים שלנו) */
.s14h .lw-title, .s14h .s14h-bq, .s14h-win .s14h-q, .s14h-win .s14h-a p {
  text-wrap: balance;
}

/* ═══ שדה הבועות — רשת 2×2 (RTL: תא ראשון מימין), מרחק בטוח מובנה ═══ */
.s14h .s14h-field {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.s14h .s14h-slot { display: grid; place-items: center; min-height: 0; }

/* שכבת הריחוף — transform בלבד, קצב ופאזה שונים לכל בועה (--fdur/--fdel).
   ההיסט הקבוע (--ox/--oy) שזור בתוך הקיפריימים כדי שהאנימציה לא תדרוס אותו.
   Drift layer: transform only; the static offset lives inside the keyframes
   so the animation never stomps it. */
.s14h .s14h-drift {
  transform: translate(var(--ox, 0px), var(--oy, 0px));
  animation: s14hFloat var(--fdur, 7s) var(--fdel, 0s) ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes s14hFloat {
  from { transform: translate(calc(var(--ox, 0px) - 5px), calc(var(--oy, 0px) + 4px)) rotate(-.5deg); }
  to   { transform: translate(calc(var(--ox, 0px) + 5px), calc(var(--oy, 0px) - 5px)) rotate(.5deg); }
}

/* ═══ הבועה — זכוכית אמיתית בשלוש שכבות אור ═══
   ① גוף: radial עם ליבה שקופה ושפה שנאספת חזרה לאור (כמו עדשה);
   ② גוון קשת עדין (ורוד-תכלת-שמנת) — הנשמה האיריסנטית של Fairyness;
   ③ ::before ספקולר אלכסוני + ::after נקודת-אור נגדית בשפה התחתונה.
   Glass in three light layers: lens-like radial body, faint iridescent wash,
   diagonal specular streak + counter-glint on the lower rim. */
.s14h .s14h-bub {
  position: relative;
  width: calc(min(40vw, 19vh, calc(var(--u) * 48)) * var(--bs, 1));
  min-width: 88px;                     /* מטרת מגע נדיבה בכל מסך */
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  padding: 13%;
  border: 1px solid rgba(255, 255, 255, .62);
  background:
    radial-gradient(circle at 33% 27%,
      rgba(255, 255, 255, .62), rgba(255, 255, 255, .16) 30%,
      rgba(255, 252, 255, .05) 48%, rgba(255, 248, 253, .03) 62%,
      rgba(255, 255, 255, .14) 86%, rgba(255, 255, 255, .34) 97%),
    linear-gradient(158deg,
      rgba(255, 214, 245, .16), rgba(214, 236, 255, .12) 55%,
      rgba(255, 243, 220, .16));
  box-shadow:
    inset 0 -10px 22px rgba(255, 255, 255, .26),
    inset 0 8px 18px rgba(255, 255, 255, .14),
    0 12px 28px rgba(178, 106, 134, .24);
  opacity: 0;
  animation: s14hIn 460ms var(--bd, 0ms) var(--ease-spring) both;
}
/* ① ההברקה הספקולרית — פס אור אלכסוני קטן בכתף הבועה */
.s14h .s14h-bub::before {
  content: ''; position: absolute;
  top: 11%; inset-inline-start: 16%;
  width: 34%; height: 16%;
  border-radius: 50%;
  background: linear-gradient(120deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0));
  filter: blur(1px);
  transform: rotate(-24deg);
  pointer-events: none;
}
/* ② נקודת-האור הנגדית בשפה התחתונה — מה שגורם לזכוכית "להסתובב" */
.s14h .s14h-bub::after {
  content: ''; position: absolute;
  bottom: 9%; inset-inline-end: 18%;
  width: 12%; height: 7%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  filter: blur(1.5px);
  pointer-events: none;
}
/* השאלה בתוך הבועה — טקסט בהיר עם מתכון ההצללה של lw-sub (בלי צלחות!) */
.s14h .s14h-bq {
  font-size: calc(var(--fs-micro) * 1.14);
  line-height: 1.4;
  text-align: center;
  color: #FFFDF9;
  -webkit-text-stroke: .2px currentColor;
  text-shadow: 0 1px 2px rgba(122, 58, 82, .78), 0 0 12px rgba(122, 58, 82, .4);
}
@keyframes s14hIn {
  from { opacity: 0; transform: scale(.55); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

/* ═══ הפופ — סקייל+היעלמות מהירה (opacity+transform בלבד, ≤260ms) ═══ */
.s14h .s14h-bub.pop {
  animation: s14hPop 240ms var(--ease-hero) forwards;
  pointer-events: none;
}
@keyframes s14hPop {
  0%   { opacity: 1; transform: scale(1); }
  38%  { opacity: .95; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1.34); }
}
/* בועה שנקראה — חוזרת עמומה (המפרט: opacity .45), עדיין חיה ולחיצה */
.s14h .s14h-bub.asked {
  opacity: .45;
  transition: opacity 420ms ease;
}
.s14h .s14h-bub.asked:hover, .s14h .s14h-bub.asked:focus-visible { opacity: .7; }

/* ═══ חלון התשובה — חפץ שמנת מעל דוק סגלגל ═══ */
.s14h-modal {
  position: absolute; inset: 0; z-index: 40;
  display: grid; place-items: center;
  padding: calc(var(--air) * 3);
}
.s14h-veil {
  position: absolute; inset: 0;
  background: rgba(58, 32, 64, .38);
  opacity: 0;
  transition: opacity 280ms ease;
}
.s14h-win {
  position: relative;
  width: min(100%, calc(var(--u) * 92));
  max-height: 100%;
  overflow: auto;
  padding: calc(var(--air) * 3.4) calc(var(--air) * 3)
           calc(var(--air) * 2.6);
  display: grid; gap: calc(var(--air) * 1.6);
  justify-items: center;
  opacity: 0;
  transform: translateY(14px) scale(.86);
  transition: opacity 300ms ease, transform 340ms var(--ease-spring);
}
.s14h-modal.on .s14h-veil { opacity: 1; }
.s14h-modal.on .s14h-win  { opacity: 1; transform: none; }

/* X בפינה — מטרת מגע 44px, זהב-טקסט נגיש על שמנת */
.s14h-win .s14h-x {
  position: absolute;
  top: 4px; inset-inline-end: 4px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: var(--lw-gold-text);
  border-radius: 50%;
}
.s14h-win .s14h-x svg { width: 20px; height: 20px; display: block; }

.s14h-win .s14h-q {
  font-size: calc(var(--fs-body) * 1.08);
  line-height: 1.45;
  color: var(--lw-ink-strong);
  text-align: center;
  padding-inline: calc(var(--air) * 2);   /* אוויר מה-X בפינה */
}
/* קו זהב עדין מפריד — הדנ"א של הכרטיסים */
.s14h-win .s14h-q::after {
  content: ''; display: block;
  width: calc(var(--u) * 14); height: 1px;
  margin: calc(var(--air) * 1.4) auto 0;
  background: linear-gradient(90deg, transparent, var(--lw-gold-line), transparent);
}
.s14h-win .s14h-a { display: grid; gap: calc(var(--air) * .9); }
.s14h-win .s14h-a p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--lw-ink);
  text-align: center;
}
/* כפתור הסגירה — גליל שמנת-זהב קטן, אחות של lw-btn */
.s14h-win .s14h-close {
  min-height: 46px;
  padding: .4em 2em .5em;
  border: 1.5px solid var(--lw-gold-line);
  border-radius: 999px;
  background: linear-gradient(175deg, #FFFDF8, #F7ECD9);
  color: var(--lw-gold-text);
  font-size: calc(var(--fs-body) * .98);
  box-shadow: 0 4px 14px rgba(202, 132, 160, .18), inset 0 1px 0 #fff;
}

/* ═══ נגישות — reduced-motion מכובד: בלי ריחוף אינסופי, כניסות מיידיות ═══ */
@media (prefers-reduced-motion: reduce) {
  .s14h .s14h-drift { animation: none; }
  .s14h .s14h-bub   { animation-duration: 1ms; animation-delay: 0ms; }
  .s14h .s14h-bub.pop { animation-duration: 1ms; }
  .s14h-veil, .s14h-win { transition-duration: 1ms; }
}