/* ============================================================================
   holo5.css — סבב נסיה 23.07 (ערב)
   1. פאזות "הסוד" ו"כמה דברים חשובים" במסך 7 — בלי זכוכית, עם אלמנט מאויר
   2. מסך השיקוף — טקסט מהיר/גדול/גבוה יותר, הבמה גבוהה, מיקרופון בתוך הבמה,
      לוגו ממורכז בעיגול, ו-CTA אמיתי בתחתית (האלמנטים אינם ה-CTA!)
   Nesya's device round: no glass on those phases, illustrated elements,
   and a real bottom CTA on the reflect screen.
   ============================================================================ */

/* ═══════════ 1. פאזות 7 — הזכוכית יורדת ═══════════
   ⚠️ ".text-block" מקבל ב-magic.css פאנל זכוכית מלא (data-text="b").
   ".s07-plain" הוא אותו גוש טקסט בלי שום משטח — הקופי חי על העולם. */
.s07-plain {
  width: 100%;
  max-width: calc(var(--u) * 84);
  margin-inline: auto;
  display: grid; gap: calc(var(--air) * 2.2);
  background: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 0 !important; box-shadow: none !important; padding: 0 !important;
}
.s07-plain::before, .s07-plain::after { display: none !important; }

/* האלמנטים המאוירים — קטנים, מעל הטקסט, לא בולעים את המסך */
.s07-shh, .s07-micfairy {
  display: block; height: auto;
  margin: 0 auto calc(var(--air) * 1.4);
  filter: drop-shadow(0 8px 20px rgba(140, 62, 88, .34));
}
.s07-shh      { width: min(58%, calc(var(--u) * 60)); }
.s07-micfairy { width: min(40%, calc(var(--u) * 42)); }

/* ═══════════ 2. מסך השיקוף — תיקוני נסיה ═══════════ */

/* — הטקסט: מהר יותר, גבוה יותר, גדול יותר — */
/* ⚠️ נסיה: "שהטקסט יופיע אחרי זמן קצר יותר... זה יותר מדי המתנה וסתם
   נראה כמו באג". ההשהיות מתקצרות דרך משתנה אחד. */
.rfh .stack { justify-content: flex-start; padding-top: calc(var(--air) * 2.5); }
.rfh .rfh-band { margin-top: calc(var(--air) * 2); margin-bottom: auto; }

.rfh .rfh-title { font-size: calc(var(--fs-greet) * .9); }
/* גוף השיקוף גדל, ו*משפטים חשובים* גדלים עוד — כדי שלא יהיה
   "סתם טקסט ארוך באותו הגודל" (לשונה של נסיה). */
.rfh .rfh-line {
  font-size: calc(var(--fs-body) * 1.12);
  line-height: 1.62;
  margin-block: calc(var(--air) * .5);
}
/* המשפט הראשון והאחרון = עוגני הרגש ⇒ גדולים ובולטים יותר */
.rfh .rfh-line:first-of-type,
.rfh .rfh-line:last-of-type {
  font-size: calc(var(--fs-body) * 1.34);
  line-height: 1.5;
  color: #FFF6E6;
  text-shadow: 0 1px 3px rgba(122, 58, 82, .82), 0 0 16px rgba(201, 148, 72, .45);
}

/* — הבמה: גבוהה יותר על המסך — */
.rfh .rfh-scene { align-items: start; margin-bottom: calc(var(--air) * 6); }
.rfh .rfh-stagewrap { margin-bottom: calc(var(--air) * 3); }

/* — הלוגו ממורכז בעיגול הלבן שבקשת הבמה — */
/* ⚠️ נסיה: "הלוגו... לא ממוקם במרכז העיגול הלבן כמו שצריך".
   המדליון בציור יושב בקשת ולא בראש הפריים; העיגון מדויק כאן. */
.rfh .rfh-crest {
  top: 7.5%;
  width: 26%;
  left: 50%;
  transform: translateX(-50%);
}

/* — המיקרופון: קטן, ורק בתוך הבמה — */
/* ⚠️ נסיה: "לקטין ככה שלא יסתיר את הלוגו, ושיהיה אך ורק בתוך הבמה
   ולא יצא ממנה ולא יהיה על הווילונות". גובה 52% ובסיס בתוך רצפת הבמה. */
.rfh .rfh-mic {
  height: 52%;
  bottom: 6%;
}
.rfh .rfh-mic:hover,
.rfh .rfh-mic:active,
.rfh .rfh-mic[aria-disabled="true"]:hover { transform: translateX(-50%); }
/* המיקרופון אינו כפתור המשך — הוא חלק מהסצנה */
.rfh .rfh-mic { cursor: default; pointer-events: none; }
.rfh .rfh-ring { display: none; }

/* — ה-CTA האמיתי: בתחתית, מרוחק מהשוליים, כמו בכל המסכים — */
.rfh-cta {
  position: relative; z-index: 5;
  align-self: center;
  margin: calc(var(--air) * 2) auto calc(var(--air) * 2.5);
  min-height: 52px;
  padding: .45em 2em .55em;
  border: 1.5px solid var(--lw-gold-line);
  border-radius: 999px;
  background: linear-gradient(175deg, #FFFDF8, #F7ECD9);
  color: var(--c-ink);
  font: inherit; font-size: var(--fs-cta); line-height: 1.15;
  -webkit-text-stroke: var(--stroke-heavy) currentColor;
  box-shadow: 0 6px 22px var(--c-glow), 0 2px 8px rgba(202,132,160,.16), inset 0 1px 0 #fff;
  cursor: pointer;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 520ms var(--ease-enter), transform 520ms var(--ease-enter);
}
.rfh-cta.on { opacity: 1; transform: none; pointer-events: auto; }
.rfh-cta:hover  { transform: translateY(-2px) scale(1.015); }
.rfh-cta:active { transform: scale(.965); }

/* ═══════════ 2ב. מסך 12 — "רק 15 פיות" בהדגשה אמיתית ═══════════
   ⚠️ נסיה: "שיהיה יותר מודגש שהאירוע הוא רק ל-15 פיות בלבד".
   שורת-גיבור מעל שאר הפסקאות, והמספר עצמו כמעט כפול וזוהר. */
.s12h .s12h-paras i.hl {
  font-size: calc(var(--fs-body) * 1.34);
  line-height: 1.42;
  margin-bottom: calc(var(--air) * .9);
}
.s12h .s12h-num {
  font-weight: 400;
  font-size: 1.7em;
  line-height: .9;
  padding-inline: .06em;
  color: #FFF8E4;
  -webkit-text-stroke: .4px currentColor;
  text-shadow: 0 1px 3px rgba(140, 62, 88, .8),
               0 0 14px rgba(255, 214, 236, .9),
               0 0 34px rgba(232, 206, 156, .7);
}

/* ═══════════ 3. מסך 8 — ארבעה כרטיסים מרובעים (ההשראה של נסיה) ═══════════ */
.h5s08 .stack { justify-content: center; gap: calc(var(--air) * 1.6); }
.h5s08 .lw-title { opacity: 0; animation: riseIn 720ms 140ms var(--ease-enter) forwards; }
.h5-lead {
  opacity: 0; animation: riseIn 620ms 420ms var(--ease-enter) forwards;
  text-wrap: balance;
}
.h5-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--air) * 2);
  width: min(94%, calc(var(--u) * 100));
  margin-inline: auto;
}
/* הכרטיס: מרובע, שמנת, אייקון בזר עגול, כותרת, שברון — בדיוק כמו ההשראה */
.h5-card {
  position: relative;
  display: grid; justify-items: center; align-content: start;
  gap: calc(var(--air) * .8);
  padding: calc(var(--air) * 2) calc(var(--air) * 1.4) calc(var(--air) * 1.6);
  border-radius: 18px;
  background: linear-gradient(168deg, #FFFDF8, #FBF3E8);
  border: 1px solid rgba(190, 152, 84, .5);
  box-shadow: 0 8px 20px rgba(202, 132, 160, .2), inset 0 1px 0 #fff;
  cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  animation: riseIn 540ms var(--ease-spring) forwards;
  animation-delay: calc(680ms + var(--i) * 130ms);
  transition: box-shadow 320ms ease, border-color 320ms ease, transform 320ms var(--ease-spring);
}
.h5-card:hover  { transform: translateY(-2px); }
.h5-card:active { transform: scale(.975); }
.h5-card.open {
  border-color: rgba(190, 152, 84, .95);
  box-shadow: 0 12px 28px var(--c-glow), 0 4px 12px rgba(202,132,160,.24), inset 0 1px 0 #fff;
}
.h5-card:focus-visible { outline: 3px solid var(--lw-gold-text); outline-offset: 3px; }
/* האייקון בתוך זר עגול — מדובק מהאייקונים של נסיה */
.h5-ico {
  width: 58%; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(190, 152, 84, .55);
  background: radial-gradient(circle at 36% 30%, #FFFFFF, #FBF1E4);
  box-shadow: inset 0 1px 3px rgba(190, 152, 84, .18);
}
.h5-ico img { width: 74%; height: 74%; object-fit: contain; }
.h5-name {
  font-size: calc(var(--fs-body) * 1.06);
  color: var(--lw-ink-strong);
}
/* הטקסט נפתח בתוך הכרטיס — grid-rows 0fr→1fr, בלי קפיצות גובה */
.h5-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-hero);
  width: 100%;
}
.h5-card.open .h5-body { grid-template-rows: 1fr; }
.h5-body > div { overflow: hidden; }
.h5-body p {
  margin: calc(var(--air) * .8) 0 0;
  font-size: clamp(10px, calc(var(--u) * 3), 14px);
  line-height: 1.5;
  color: var(--lw-ink);
  text-wrap: balance;
}
/* השברון — סימן "יש כאן עוד" */
.h5-chev {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(190, 152, 84, .5);
  color: var(--lw-gold-text);
  transition: transform 380ms var(--ease-spring), background 320ms ease;
  font-size: 11px; line-height: 1;
}
.h5-card.open .h5-chev { transform: rotate(180deg); background: var(--c-glow); }
.h5-foot {
  opacity: 0; animation: riseIn 620ms 1500ms var(--ease-enter) forwards;
  text-wrap: balance;
}
.h5s08 .lw-btn { opacity: 0; animation: riseIn 700ms 1750ms var(--ease-enter) forwards; }

@media (prefers-reduced-motion: reduce) {
  .h5-card, .h5-lead, .h5-foot { animation-duration: 1ms; }
  .h5-body { transition-duration: 1ms; }
}