/* ============================================================================
   holo4.css — סבב נסיה על המכשיר (23.07)
   הצ'אט החי והנושם (מסכים 3 · 15) · וילון הבמה בהרשמה (16).
   אפס קופסאות זכוכית — זו הייתה ההערה המרכזית.
   Living chat for her letters; a real opening stage curtain for signup.
   ============================================================================ */

/* ═══════════════════════════════════════════════════════════════════════
   הצ'אט — "חי ונושם"
   ═══════════════════════════════════════════════════════════════════════ */
.h4chat .stack { justify-content: center; gap: calc(var(--air) * 1.4); }
.h4chat .content { padding-inline: max(14px, env(safe-area-inset-left)); }

/* מי מדברת — קרסט קטן + שם, כמו כותרת שיחה */
.h4-from {
  display: flex; align-items: center; gap: calc(var(--air) * 1.4);
  align-self: flex-start;                 /* RTL: נצמד לימין */
  opacity: 0; animation: riseIn 520ms 200ms var(--ease-enter) forwards;
}
.h4-avatar {
  width: calc(var(--u) * 11); height: calc(var(--u) * 11);
  min-width: 34px; min-height: 34px;
  border-radius: 50%; object-fit: contain;
  padding: 3px;
  background: radial-gradient(circle at 34% 30%, #FFFDF8, #FBF3E8);
  border: 1.2px solid rgba(217, 188, 126, .85);
  box-shadow: 0 3px 10px var(--c-glow);
}
.h4-name {
  font-size: calc(var(--fs-micro) * 1.1);
  color: #FFF3DC;
  text-shadow: 0 1px 2px rgba(122, 58, 82, .8), 0 0 12px rgba(201, 148, 72, .5);
}

.h4-chat {
  display: flex; flex-direction: column;
  align-items: flex-start;                /* RTL: הבועות נצמדות לימין */
  gap: calc(var(--air) * 1.15);
  width: 100%;
}

/* בועת ההודעה — נייר-שמנת רך, פינה אחת "מחוברת" לדוברת.
   ⚠️ זו אינה "קופסת זכוכית": היא בגודל התוכן, נכנסת אחת-אחת, ומשתייכת
   לדמות. Sized to its content and owned by a speaker — not a panel. */
.h4-msg {
  position: relative;
  max-width: 86%;
  padding: calc(var(--air) * 1.5) calc(var(--air) * 2.2) calc(var(--air) * 1.65);
  border-radius: 20px 20px 20px 6px;      /* RTL: הזנב בפינה הימנית-תחתונה */
  background: linear-gradient(168deg, rgba(255,253,248,.95), rgba(250,241,230,.92));
  border: 1px solid rgba(190, 152, 84, .45);
  box-shadow: 0 6px 18px rgba(202, 132, 160, .2), inset 0 1px 0 #fff;
  color: var(--lw-ink-strong);
  font-size: calc(var(--fs-body) * .97);
  line-height: 1.55;
  text-align: start;
  opacity: 0; transform: translateY(14px) scale(.94);
  transition: opacity 420ms var(--ease-enter),
              transform 480ms var(--ease-spring),
              filter 600ms ease;
}
.h4-msg.in  { opacity: 1; transform: none; }
/* הודעות ישנות נסוגות מעט — העין תמיד על החדשה */
.h4-msg.dim { filter: saturate(.85) brightness(.985); opacity: .72; }
.h4-msg span { display: block; text-wrap: balance; }
.h4-msg em {
  font-style: normal; color: #8A5A2E;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

/* שלוש הנקודות — נסיה מקלידה */
.h4-typing {
  display: none; align-items: center; gap: 5px;
  padding: calc(var(--air) * 1.5) calc(var(--air) * 2);
  border-radius: 20px 20px 20px 6px;
  background: rgba(255, 253, 248, .8);
  border: 1px solid rgba(190, 152, 84, .35);
  box-shadow: 0 4px 12px rgba(202, 132, 160, .16);
}
.h4-typing.on { display: inline-flex; }
.h4-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-deep); opacity: .5;
  animation: h4Dot 1.15s ease-in-out infinite;
}
.h4-typing i:nth-child(2) { animation-delay: .15s; }
.h4-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes h4Dot {
  0%, 100% { transform: translateY(0);   opacity: .38; }
  50%      { transform: translateY(-4px); opacity: 1; }
}

/* ה-CTA נחשף רק כשההודעה האחרונה הגיעה */
.h4-cta {
  align-self: center;
  margin-top: calc(var(--air) * 1.2);
  min-height: 52px;
  padding: .45em 2.1em .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);
}
.h4-cta.on { opacity: 1; transform: none; pointer-events: auto; }

/* מסך 3 יושב על ארט המעטפה הכהה — הבועות בהירות וזה מספיק */
.h4chat.s03 .h4-name { color: #FFF3DC; }

/* ═══════════════════════════════════════════════════════════════════════
   מסך 6 — פריסת חמישה קלפי טארוט (חפיסה משלה, cards6)
   ═══════════════════════════════════════════════════════════════════════ */
.h4s06 .stack { justify-content: center; gap: calc(var(--air) * 1.5); }
.h4s06 .lw-title { opacity: 0; animation: riseIn 720ms 160ms var(--ease-enter) forwards; }
.h4-s06-intro { display: grid; gap: calc(var(--air) * .85); }
.h4-s06-intro i {
  display: block; font-style: normal; text-wrap: balance;
  opacity: 0; animation: riseIn 560ms var(--ease-enter) forwards;
  animation-delay: calc(620ms + var(--i) * 250ms);
}
.h4-of {
  font-size: calc(var(--fs-body) * 1.1);
  opacity: 0; animation: riseIn 560ms 1500ms var(--ease-enter) forwards;
}

/* המניפה — קשת טארוט קלאסית. הכרטיסים הם הגיבורים; הטקסט משרת אותם. */
.h4-spread {
  position: relative;
  width: 100%;
  aspect-ratio: 10 / 7;
  max-height: 42vh;
  margin-inline: auto;
  perspective: 1000px;
}
.h4-card {
  position: absolute; top: 50%; left: 50%;
  width: 30%;
  padding: 0; border: 0; background: none;
  z-index: var(--z, 5);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 92%;              /* מסתובב סביב הבסיס — כמו יד שפורשת */
  transform: translate(-50%, -46%)
             translate(calc(var(--tx) * 1%), calc(var(--ty) * 1%))
             rotate(calc(var(--rot) * 1deg));
  transition: transform 560ms var(--ease-spring), filter 460ms ease;
  filter: drop-shadow(0 8px 18px rgba(178, 106, 134, .32));
  opacity: 0;
  animation: h4Deal 640ms var(--d, 0ms) var(--ease-spring) forwards;
}
/* החלוקה: הקלפים "נפרשים" מהמרכז אל מקומם — רגע הפתיחה של קריאה */
@keyframes h4Deal {
  from { opacity: 0;
         transform: translate(-50%, -30%) rotate(0deg) scale(.72); }
  to   { opacity: 1;
         transform: translate(-50%, -46%)
                    translate(calc(var(--tx) * 1%), calc(var(--ty) * 1%))
                    rotate(calc(var(--rot) * 1deg)); }
}
.h4-card img { display: block; width: 100%; height: auto; border-radius: 7px; }
/* הקלף שמציג את עצמו — עולה, מתיישר ומתקרב */
.h4-card.up {
  z-index: 20;
  transform: translate(-50%, -62%)
             translate(calc(var(--tx) * .55%), 0)
             rotate(0deg) scale(1.3);
  filter: drop-shadow(0 18px 34px rgba(178, 106, 134, .46)) brightness(1.04);
  animation: none; opacity: 1;
}
.h4-spread:has(.h4-card.up) .h4-card:not(.up) { filter: drop-shadow(0 8px 18px rgba(178,106,134,.3)) brightness(.9) saturate(.9); }
.h4-card:focus-visible { outline: 3px solid #FFF3DC; outline-offset: 5px; border-radius: 8px; }

/* שם הקלף — גדול, אבל תמיד קטן מהאיור. מופיע רק כשקלף מציג את עצמו. */
.h4-label {
  min-height: calc(var(--u) * 8);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(8px);
  transition: opacity 380ms var(--ease-enter), transform 380ms var(--ease-enter);
}
.h4-label.on { opacity: 1; transform: none; }
.h4-label span {
  font-size: calc(var(--fs-body) * 1.12);
  color: #FFFDF9;
  -webkit-text-stroke: var(--stroke-soft) currentColor;
  text-shadow: 0 1px 2px rgba(122, 58, 82, .82), 0 0 14px rgba(122, 58, 82, .5);
  text-wrap: balance;
}

/* ═══════════════════════════════════════════════════════════════════════
   מסך 16 — וילון הבמה נפתח (ההרשמה)
   ═══════════════════════════════════════════════════════════════════════ */
.h4s16 .stack { justify-content: center; gap: calc(var(--air) * 1.8); }

.h4-curtain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  overflow: hidden;
}
/* קו-האור שמבצבץ מבין הכנפיים — הבטחה למה שמאחור */
.h4-cur-glow {
  position: absolute; left: 50%; top: 8%; bottom: 2%;
  width: 40%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
              rgba(255, 244, 214, .85), rgba(255, 220, 246, .38) 44%, transparent 74%);
  mix-blend-mode: screen;
  opacity: .8;
  transition: opacity 900ms ease, width 1200ms var(--ease-hero);
}
/* ⚠️ שתי כנפי קטיפה — *מסגרות*, לא קיר. הגרסה הראשונה כיסתה 92% מהמסך
   בסגול אטום וכהה: הרקע היפה נעלם והמסך הרגיש כבד. עכשיו כל כנף 33%,
   נשאר פתח-אור אמיתי במרכז, והגוונים ורודים-לבנדר בהירים ושקופים למחצה.
   Two velvet wings that FRAME rather than wall off: the first version
   covered 92% of the screen in flat dark purple and killed the art. */
/* כנפי הקטיפה — נכס מאויר אחד, מימין במראה. גובה מלא, רוחב מדוד כך
   שנשאר פתח-אור אמיתי במרכז (~30% מהמסך). */
/* ⚠️ object-fit:fill מתח את הקטיפה לרצועה מעוותת — מוט הזהב נעלם והגדיל
   נמרח. cover שומר על הפרופורציה האמיתית של הציור וחותך היכן שצריך.
   fill stretched the velvet into a distorted band; cover keeps the art's
   true proportions. */
.h4-cur-half {
  position: absolute; top: 0; height: 100%;
  width: 34%;
  object-fit: cover; object-position: 50% 22%;
  filter: drop-shadow(0 6px 20px rgba(176, 104, 132, .3));
  transition: transform 1500ms var(--ease-hero), opacity 1200ms ease;
}
.h4-cur-half.l { left: -1%; }
.h4-cur-half.r { right: -1%; transform: scaleX(-1); }
/* המיקרופון ממתין מאחורי הווילון */
.h4-cur-stage {
  position: absolute; left: 50%; bottom: 4%;
  height: 42%; width: auto;
  transform: translateX(-50%) scale(.7);
  opacity: 0;
  transition: opacity 1100ms ease 500ms, transform 1400ms var(--ease-hero) 400ms;
  filter: drop-shadow(0 8px 22px rgba(140, 62, 88, .5));
}
/* ⚠️ ברגע האמת — הווילון באמת נפתח. זה השיא של המסע כולו. */
.step.opened .h4-cur-half.r { transform: scaleX(-1) translateX(-108%); }
.step.opened .h4-cur-half.l { transform: translateX(-108%); }
.step.opened .h4-cur-glow   { opacity: 1; width: 78%; }
.step.opened .h4-cur-stage  { opacity: 1; transform: translateX(-50%) scale(1); }

/* כרטיס הכניסה — נשלף מבין הווילונות. אין מסגרת-פאנל: שוליים מחוררים
   בלבד, כמו כרטיס אמיתי. A real ticket, not a panel. */
.h4-ticket {
  position: relative; z-index: 3;
  width: min(88%, calc(var(--u) * 86));
  margin-inline: auto;
  display: grid; gap: calc(var(--air) * .7);
  padding: calc(var(--air) * 2.6) calc(var(--air) * 2.6) calc(var(--air) * 2.8);
  text-align: center;
  background:
    radial-gradient(circle at left  center, transparent 6px, #FFFDF8 6.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at right center, transparent 6px, #FBF3E8 6.5px) right / 51% 100% no-repeat;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(178, 106, 134, .34), inset 0 1px 0 #fff;
}
.h4-ticket::before {
  content: ''; position: absolute; inset: 6px; border-radius: 9px;
  border: 1px dashed rgba(190, 152, 84, .55); pointer-events: none;
}
.h4-ticket i {
  display: block; font-style: normal;
  font-size: calc(var(--fs-body) * .97); line-height: 1.5;
  color: var(--lw-ink-strong); text-wrap: balance;
  opacity: 0; animation: riseIn 480ms var(--ease-enter) forwards;
  animation-delay: calc(520ms + var(--i) * 120ms);
}
.h4-ticket.sent i { animation-delay: calc(180ms + var(--i) * 130ms); }
/* חותמת שעווה ורודה עם השם — סוגרת את הלולאה עם חותם המעטפה במסך 2 */
.h4-stamp {
  position: absolute; bottom: -14px; left: 16%;
  width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #F6C2D8, #DE87AE 60%, #B86A90);
  box-shadow: 0 3px 12px rgba(150, 70, 110, .45), inset 0 1px 2px rgba(255,255,255,.6);
  opacity: 0; transform: scale(2.4) rotate(-26deg);
  animation: h4Stamp 620ms 900ms var(--ease-spring) forwards;
}
.h4-stamp::after {
  content: ''; position: absolute; inset: 22%; border-radius: 50%;
  border: 1.4px solid rgba(255, 245, 250, .75);
}
@keyframes h4Stamp {
  to { opacity: 1; transform: scale(1) rotate(-9deg); }
}
.h4s16 .h4-join { position: relative; z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .h4-typing i { animation: none; }
  .h4-msg { transition-duration: 1ms; }
  .h4-cur-half, .h4-cur-stage, .h4-cur-glow { transition-duration: 1ms; }
}