/* ============================================================================
   holo3.css — עיצוב-מחדש 23.07: סצנות עם גיבור מאויר (s08 · s09 · s11 · s13 · s14)
   נטען אחרי holo2-* וגובר עליהם. כל מסך כאן הוא קומפוזיציה, לא רשימה:
   האיור נושא את המסך, הקופי חי בתוכו, והתנועה היא האירוע.
   Each screen is a composition around an illustrated hero, not a container.
   ============================================================================ */

/* ═══ משותף ═══ */
.lw .h3-hero { display: block; width: 100%; height: auto; }
.lw .h3-cta { opacity: 0; transform: translateY(10px);
  transition: opacity 520ms var(--ease-enter), transform 520ms var(--ease-enter); }
.lw .h3-cta.on { opacity: 1; transform: none; }
/* מסכים שה-CTA שלהם זמין מיד */
.h3s09 .h3-cta, .h3s11 .h3-cta, .h3s13 .h3-cta, .h3s14 .h3-cta { opacity: 1; transform: none; }

/* קו-הפרדה זהב עדין — הדנ"א של הכרטיסים */
.lw .h3-rule {
  display: block; width: 46%; height: 1px; margin: calc(var(--air) * 1.2) auto;
  background: linear-gradient(90deg, transparent, rgba(176, 138, 70, .75), transparent);
}
.lw .h3-s13 .h3-rule, .lw .h3-ans .h3-rule { width: 58%; }

/* ════════════════════════════════════════════════════════════════════════
   מסך 8 — שיר הנשימה: שורה אחת גדולה בכל רגע, מעל אישה שהאור זורם ממנה
   ════════════════════════════════════════════════════════════════════════ */
.h3s08 .stack { justify-content: flex-start; gap: calc(var(--air) * 1.6); }
.h3s08 .lw-title { opacity: 0; animation: riseIn 760ms 160ms var(--ease-enter) forwards; }

/* אזור השיר — גובה קבוע כדי שהמסך לא "יקפוץ" בין שורות באורך שונה */
.h3s08 .h3-verse {
  position: relative;
  flex: 1 1 auto; min-height: calc(var(--u) * 30);
  display: grid; place-items: center;
  margin-top: calc(var(--air) * 1.2);
}
.h3s08 .h3-line {
  grid-area: 1 / 1;
  margin: 0; max-width: 20ch;
  text-align: center; text-wrap: balance;
  font-size: calc(var(--fs-greet) * .86);
  line-height: 1.5;
  color: #FFFDF9;
  -webkit-text-stroke: var(--stroke-soft) currentColor;
  text-shadow: 0 1px 2px rgba(122, 58, 82, .8), 0 2px 14px rgba(122, 58, 82, .45);
  opacity: 0; transform: translateY(12px) scale(.985);
  transition: opacity 620ms var(--ease-enter), transform 620ms var(--ease-enter);
  pointer-events: none;
}
.h3s08 .h3-line.on { opacity: 1; transform: none; }
/* השורה האחרונה — "דרך חזרה הביתה לעצמך" — בזהב מואר */
.h3s08 .h3-line.last {
  color: #FFF3DC;
  text-shadow: 0 1px 2px rgba(90, 52, 30, .75), 0 0 14px rgba(201, 148, 72, .65),
               0 0 30px rgba(232, 206, 156, .5);
}

/* הגיבורה + פריחת האור מתוכה */
.h3s08 .h3-hero-wrap {
  position: relative;
  width: min(96%, calc(var(--u) * 106));
  margin: 0 auto;
  flex: 0 0 auto;
  opacity: 0; animation: riseIn 900ms 420ms var(--ease-enter) forwards;
}
/* פריחת האור — ממורכזת על גופה, גדולה ובועטת: זה הרגע של "התשובות
   כבר קיימות". Centred on her body and unmistakably visible. */
.h3s08 .h3-bloom {
  position: absolute; z-index: 0; pointer-events: none;
  left: 46%; top: 62%; width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.35);
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255, 240, 205, .95), rgba(255, 220, 248, .45) 34%,
              rgba(255, 214, 245, .16) 56%, transparent 74%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1500ms ease, transform 1800ms var(--ease-hero);
}
.h3s08 .h3-bloom.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.h3s08 .h3-inner { position: relative; z-index: 1;
  filter: drop-shadow(0 10px 26px rgba(178, 106, 134, .26)); }

/* ════════════════════════════════════════════════════════════════════════
   מסך 9 — השער הקסום: השער נפתח, ומה שמחכה נדלק לפניו
   ════════════════════════════════════════════════════════════════════════ */
/* המסך הזה נושא הרבה קופי + שדה. הפריסה מרוכזת והשער קטן ומסגר —
   הוא הרקע הנרטיבי, לא הגיבור שבולע את המסך.
   Content-dense screen: the gate frames rather than dominates. */
.h3s09 .stack { justify-content: center; gap: calc(var(--air) * 1.25); }
.h3s09 .lw-title { opacity: 0; animation: riseIn 760ms 140ms var(--ease-enter) forwards; }

/* שכבת השער — מאחורי התוכן, נעוצה לתחתית המסך */
.h3-gate-layer {
  position: absolute; inset: auto 0 -2% 0; z-index: 1;
  display: grid; place-items: end center;
  pointer-events: none;
}
.h3-gate {
  width: min(66vw, calc(var(--u) * 78)); height: auto; display: block;
  opacity: 0; transform: scale(.94) translateY(14px);
  transition: opacity 1100ms ease, transform 1400ms var(--ease-hero);
  filter: drop-shadow(0 8px 26px rgba(178, 106, 134, .22));
}
.h3-gate-glow {
  position: absolute; bottom: 6%; left: 50%; width: 54%; aspect-ratio: 1.1;
  transform: translateX(-50%) scale(.5);
  background: radial-gradient(ellipse at center,
              rgba(255, 236, 196, .8), rgba(255, 214, 245, .3) 45%, transparent 72%);
  mix-blend-mode: screen; opacity: 0;
  transition: opacity 1600ms ease, transform 1800ms var(--ease-hero);
}
.h3-gate-layer.open .h3-gate { opacity: .96; transform: none; }
.h3-gate-layer.open .h3-gate-glow { opacity: 1; transform: translateX(-50%) scale(1); }

.h3s09 .h3-intro { display: grid; gap: calc(var(--air) * .9); }
.h3s09 .h3-intro i {
  display: block; font-style: normal;
  opacity: 0; animation: riseIn 560ms var(--ease-enter) forwards;
  animation-delay: calc(700ms + var(--i) * 240ms);
}
.h3s09 .h3-waiting {
  display: grid; gap: calc(var(--air) * 1.15);
  justify-items: start;                        /* RTL: מתחיל מימין */
  margin-top: calc(var(--air) * 1.2);
}
.h3s09 .h3-waiting-t {
  font-size: calc(var(--fs-body) * 1.08);
  opacity: 0; animation: riseIn 520ms 1560ms var(--ease-enter) forwards;
}
.h3s09 .h3-w-line {
  display: flex; align-items: center; gap: calc(var(--air) * 1.4);
  font-size: calc(var(--fs-body) * .98);
  color: #FFFBF5;
  -webkit-text-stroke: .2px currentColor;
  text-shadow: 0 1px 2px rgba(122, 58, 82, .78), 0 0 12px rgba(122, 58, 82, .4);
  text-wrap: balance;
  opacity: 0; animation: riseIn 560ms var(--ease-enter) forwards;
  animation-delay: calc(1780ms + var(--i) * 260ms);
}
/* נקודת-אור במקום תבליט — לא רשימה, אלא אורות שנדלקים */
.h3s09 .h3-spark {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: #FFF6E2;
  box-shadow: 0 0 8px var(--c-glow), 0 0 18px var(--c-glow);
  animation: h3Spark 2.6s ease-in-out infinite;
}
@keyframes h3Spark { 0%,100% { opacity: .6; transform: scale(.9) } 50% { opacity: 1; transform: scale(1.18) } }

/* לוחית הטלפון — חפץ קטן ומעודן, לא שדה-טופס גנרי */
.h3-plaque {
  display: grid; gap: calc(var(--air) * .7);
  width: min(86%, calc(var(--u) * 80));
  margin: calc(var(--air) * 1.4) auto 0;
  padding: calc(var(--air) * 1.5) calc(var(--air) * 2.2) calc(var(--air) * 1.7);
  border-radius: calc(var(--u) * 3.4);
  background: linear-gradient(168deg, rgba(255,253,248,.93), rgba(250,240,228,.88));
  border: 1px solid rgba(190, 152, 84, .6);
  box-shadow: 0 8px 22px rgba(202, 132, 160, .2), inset 0 1px 0 #fff;
  opacity: 0; animation: riseIn 620ms 2900ms var(--ease-enter) forwards;
}
.h3-plaque-ask { font-size: calc(var(--fs-body) * .94); color: var(--lw-ink-strong); text-wrap: balance; }
.h3-phone {
  font: inherit; font-size: calc(var(--fs-body) * 1.02);
  text-align: center; letter-spacing: .06em;
  padding: calc(var(--air) * 1.1) calc(var(--air) * 1.2);
  min-height: 46px;
  border: 1px solid rgba(190, 152, 84, .5);
  border-radius: calc(var(--u) * 2.4);
  background: #FFFDF8; color: var(--lw-ink-strong);
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
.h3-phone:focus { outline: 0; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-glow); }
.h3-nudge { font-size: calc(var(--fs-micro) * .98); color: #96707E; text-wrap: balance; }
.h3-plaque.bad .h3-phone { border-color: #C05A7E; box-shadow: 0 0 0 3px rgba(192,90,126,.22); }
.h3-plaque.bad { animation: h3Shake 420ms ease; }
@keyframes h3Shake {
  0%,100% { transform: translateX(0) } 25% { transform: translateX(-5px) }
  50% { transform: translateX(5px) } 75% { transform: translateX(-3px) }
}

/* ════════════════════════════════════════════════════════════════════════
   מסך 11 — היומן: המילים נכתבות אל תוך הדפים הפתוחים
   ════════════════════════════════════════════════════════════════════════ */
.h3s11 .stack { justify-content: center; gap: calc(var(--air) * 1.8); }
.h3s11 .lw-title { opacity: 0; animation: riseIn 760ms 160ms var(--ease-enter) forwards; }
/* ⚠️ נסיה: "המחברת תהיה יותר גדולה כך שתכיל את כל הפסקה, וישר מול
   העיניים ולא מוטה הצידה". הנכס הוחלף ביומן שטוח וסימטרי, והספר תופס
   כמעט את כל רוחב המסך כדי שכל שש השורות ייכנסו על הדפים.
   Nesya: bigger and straight-on so the whole paragraph fits the spread. */
.h3s11 .h3-book {
  position: relative;
  width: min(100%, calc(var(--u) * 124));
  margin-inline: auto;
  opacity: 0; animation: riseIn 860ms 380ms var(--ease-enter) forwards;
}
.h3s11 .h3-journal { filter: drop-shadow(0 12px 28px rgba(178, 106, 134, .25)); }
/* אזור הכתיבה — בדיוק על מפתח הדפים של האיור */
/* ⚠️ אזור הכתיבה נמדד מהאיור המרונדר עצמו (סריקת פיקסלים בדפדפן, לא ניחוש):
   מפתח הדפים הוא x 17%-90% · y 20.4%-67.5%. מוסיפים שוליים פנימיים כדי
   שהדיו לא ינשק את קפל הדף. Page spread measured by scanning the rendered
   artwork in-browser, then inset for margins. */
/* אזור הכתיבה נמדד מהנכס החדש: הדפים x 3.6%-87% · y 18%-90%.
   כל שש השורות של הקופי יושבות עליהם במלואן. */
.h3s11 .h3-page {
  position: absolute; inset: 23% 17% 15% 9%;
  display: grid; align-content: center; gap: calc(var(--air) * .55);
  text-align: center;
}
.h3s11 .h3-page i {
  display: block; font-style: normal;
  font-size: clamp(11px, calc(var(--u) * 3.5), 17px);
  line-height: 1.5;
  color: #7A4A56;                       /* דיו על נייר — לא לבן */
  text-wrap: balance;
  opacity: 0; animation: h3Ink 700ms var(--ease-enter) forwards;
  animation-delay: calc(1150ms + var(--i) * 420ms);
}
@keyframes h3Ink {
  from { opacity: 0; filter: blur(2px); transform: translateY(4px); }
  to   { opacity: .92; filter: none; transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   מסך 13 — ההזמנה: כרטיס מודפס אמיתי שמתהפך ומגלה מה מחכה
   ════════════════════════════════════════════════════════════════════════ */
.h3s13 .stack { justify-content: center; gap: calc(var(--air) * 1.6); }
.h3s13 .lw-title { opacity: 0; animation: riseIn 720ms 140ms var(--ease-enter) forwards; }
.h3-invite-wrap {
  position: relative;
  width: min(84%, calc(var(--u) * 84), 52vh);
  margin-inline: auto;
  perspective: 1200px;
  opacity: 0; animation: riseIn 900ms 340ms var(--ease-enter) forwards;
}
.h3-invite { filter: drop-shadow(0 14px 32px rgba(178, 106, 134, .3)); }
/* חלון ההזמנה נמדד מהאיור: x 20.3%-81.3% · y 9%-83.2%. מוסיפים שוליים
   פנימיים כדי שהטקסט לעולם לא ינשק את מסגרת הזהב.
   Measured from the artwork so type never touches the gold frame. */
.h3-inv-in {
  position: absolute; inset: 13% 23% 21% 23%;
  display: grid; align-content: center; justify-items: center;
  gap: calc(var(--air) * .35);
  text-align: center;
  color: #6B4550;
  transition: opacity 420ms ease;
}
.h3-inv-in.h3-p2 { opacity: 0; pointer-events: none; }
.h3-invite-wrap.flip .h3-p1 { opacity: 0; pointer-events: none; }
.h3-invite-wrap.flip .h3-p2 { opacity: 1; pointer-events: auto; }
/* ההיפוך — הכרטיס מסתובב קלות סביב הציר האנכי, כמו נייר שמתהפך ביד */
.h3-invite-wrap { transition: transform 700ms var(--ease-hero); }
.h3-invite-wrap.flip { transform: rotateY(-6deg); }

.h3-inv-name {
  font-size: clamp(15px, calc(var(--u) * 5.4), 24px); font-weight: 400;
  color: #8A5A2E;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
  text-wrap: balance; line-height: 1.3;
}
.h3-inv-name.sm { font-size: clamp(12px, calc(var(--u) * 3.7), 17px); }
.h3-inv-when { font-size: clamp(12px, calc(var(--u) * 3.9), 18px); letter-spacing: .02em; }
.h3-inv-where { font-size: clamp(11px, calc(var(--u) * 3.4), 16px);
  margin-top: calc(var(--air) * .4); text-wrap: balance; line-height: 1.35; }
.h3-inv-sub { font-size: clamp(8.5px, calc(var(--u) * 2.5), 12px); color: #946C79;
  text-wrap: balance; line-height: 1.4; }
.h3-inv-price { font-size: clamp(14px, calc(var(--u) * 4.8), 22px); color: #8A5A2E; }
.h3-inv-seats { font-size: clamp(9px, calc(var(--u) * 2.8), 13px); color: #946C79; text-wrap: balance; }
.h3-what {
  font-size: clamp(10.5px, calc(var(--u) * 3.3), 15px);
  line-height: 1.45; text-wrap: balance;
  opacity: 0; animation: riseIn 460ms var(--ease-enter) forwards;
  animation-delay: calc(var(--i) * 90ms);
}
.h3-invite-wrap:not(.flip) .h3-what { animation: none; opacity: 0; }

/* חותמת שעווה זהובה שנוחתת בפינה */
/* חותמת השעווה — בתוך שולי הכרטיס, קטנה ומעודנת (קודם חרגה החוצה) */
.h3-seal {
  position: absolute; bottom: 15%; left: 21%;
  width: 9.5%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #F2D9A4, #C29A4E 62%, #A87F38);
  box-shadow: 0 3px 10px rgba(120, 80, 60, .45), inset 0 1px 2px rgba(255,255,255,.6);
  opacity: 0; transform: scale(2.2) rotate(-24deg);
  transition: opacity 320ms ease, transform 520ms var(--ease-spring);
}
.h3-seal::after {
  content: ''; position: absolute; inset: 22%; border-radius: 50%;
  border: 1.2px solid rgba(255, 250, 235, .7);
}
.h3-invite-wrap.sealed .h3-seal { opacity: 1; transform: scale(1) rotate(-8deg); }

/* ════════════════════════════════════════════════════════════════════════
   מסך 14 — בועות סבון אמיתיות (נכס מרונדר, לא עיגול CSS)
   ════════════════════════════════════════════════════════════════════════ */
.h3s14 .stack { justify-content: flex-start; gap: calc(var(--air) * 1.4); }
.h3s14 .lw-title { opacity: 0; animation: riseIn 720ms 140ms var(--ease-enter) forwards; }
.h3-field {
  position: relative;
  flex: 1 1 auto; min-height: calc(var(--u) * 62);
  width: 100%;
}
.h3-bub {
  position: absolute;
  width: 38%; aspect-ratio: 1;
  padding: 0; border: 0; background: none;
  display: grid; place-items: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform: scale(var(--sc, 1));
  animation: h3Float var(--d, 8s) var(--dl, 0s) ease-in-out infinite alternate;
  transition: opacity 420ms ease;
}
.h3-bub img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(140, 90, 140, .28));
}
.h3-bub span {
  position: relative; z-index: 1;
  max-width: 74%;
  font-size: clamp(11px, calc(var(--u) * 3.4), 16px);
  line-height: 1.42; text-align: center; text-wrap: balance;
  color: #5E3B47;                        /* דיו כהה — נקרא על זכוכית בהירה */
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 0 8px rgba(255,255,255,.85);
  pointer-events: none;
}
/* ⚠️ הסחיפה כוללת את ה-scale של הבועה, אחרת הגדלים מתאפסים באנימציה */
@keyframes h3Float {
  from { transform: scale(var(--sc, 1)) translate(-4px, -6px); }
  to   { transform: scale(var(--sc, 1)) translate(4px, 7px); }
}
.h3-bub:hover  { filter: brightness(1.05); }
.h3-bub:active { transform: scale(calc(var(--sc, 1) * .94)); }
.h3-bub:focus-visible { outline: 3px solid #FFF3DC; outline-offset: 6px; border-radius: 50%; }
.h3-bub.popping { animation: h3Pop 260ms ease-out forwards; }
@keyframes h3Pop {
  0%   { transform: scale(var(--sc,1)); opacity: 1; }
  55%  { transform: scale(calc(var(--sc,1) * 1.22)); opacity: .75; }
  100% { transform: scale(calc(var(--sc,1) * 1.4)); opacity: 0; }
}
.h3-bub.read { opacity: .42; animation: none; transform: scale(calc(var(--sc,1) * .9)); }

/* חלון התשובה */
.h3-veil {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center;
  padding: 6vw;
  background: rgba(58, 30, 52, .42);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity 300ms ease;
}
.h3-veil.on { opacity: 1; }
.h3-ans {
  position: relative;
  width: min(84vw, 380px);
  padding: calc(var(--air) * 3.4) calc(var(--air) * 3) calc(var(--air) * 2.6);
  display: grid; justify-items: center; gap: calc(var(--air) * .5);
  text-align: center;
  transform: scale(.9) translateY(10px);
  transition: transform 340ms var(--ease-spring);
}
.h3-veil.on .h3-ans { transform: none; }
.h3-ans-q { font-size: calc(var(--fs-body) * 1.04); color: var(--lw-ink-strong); text-wrap: balance; }
.h3-ans-a { display: grid; gap: calc(var(--air) * .5); }
.h3-ans-a i {
  display: block; font-style: normal;
  font-size: calc(var(--fs-body) * .96); line-height: 1.6;
  color: var(--lw-ink); text-wrap: balance;
}
.h3-ans-a i:first-child { color: #8A5A2E; font-size: calc(var(--fs-body) * 1.06); }
.h3-x {
  position: absolute; top: 2px; inset-inline-end: 2px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: #AE8C96;
}
.h3-x:hover { color: var(--lw-ink-strong); }
.h3-ans-ok {
  margin-top: calc(var(--air) * 1.2);
  padding: .4em 1.9em .5em;
  border: 1px solid var(--lw-gold-line); border-radius: 999px;
  background: linear-gradient(175deg, #FFFDF8, #F7ECD9);
  color: var(--c-ink); font-size: calc(var(--fs-body) * .98);
  min-height: 44px; cursor: pointer;
}

/* ═══ נגישות ═══ */
@media (prefers-reduced-motion: reduce) {
  .h3-bub { animation: none; }
  .h3s09 .h3-spark { animation: none; }
  .h3s08 .h3-line { transition-duration: 1ms; }
  .h3-gate, .h3-gate-glow { transition-duration: 1ms; }
}