/* ============================================================================
   holo2-a.css — צוות A בהרצת-הלילה (plan/23): reflect (.rfh) · s08 (.s08h) ·
   s09 (.s09h) בעור "הולוגרמה רגישה". שכבה על holo.css — משתמשים בטוקנים
   הקיימים בלבד (‎--u/--air/--fs-*/--ease-*‎) ולא מגדירים שפה חדשה.
   Team A night-run: reflect / s08 / s09 in the light-world skin, tokens only.

   חוקי הברזל שנשמרים כאן: טקסט בהיר ישירות על העולם (מתכון lw-title/lw-sub) ·
   cream-card רק לחפצים (כרטיסי המהות, כרטיס הטלפון) · תנועה opacity+transform
   בלבד, כניסות ≤460ms על רשת 80ms · reduced-motion מכבד · אפס גלילה.
   ============================================================================ */

/* ═══ חוק 4 — בלי מילים יתומות: הסלקטורים שלנו מצטרפים לכלל הגלובלי ═══ */
.rfh .rfh-typing, .rfh .rfh-line,
.s08h .s08h-body-in i,
.s09h .s09h-intro i, .s09h .s09h-line span, .s09h .s09h-ask {
  text-wrap: balance;
}

/* כניסה משותפת לצוות: ≤460ms, על riseIn הגלובלי מ-magic.css.
   Shared entrance — global riseIn keyframes, 420ms, 80ms grid delays. */

/* ════════════════════════════════════════════════════════════════════════
   reflect — הבמה של נסיה: הטקסט מעל, הבמה+לוגו+מיקרופון במרכז-תחתית
   ════════════════════════════════════════════════════════════════════════ */
/* הטקסט מרחף *ממש מעל הבמה* (בקשת נסיה) — לא נדבק לראש המסך עם חלל ריק
   באמצע (נצפה ב-QC של המוח). margin-top:auto בולע את השארית למעלה.
   Text floats right above the stage; the leftover space collects on top. */
.rfh .stack { justify-content: flex-end; gap: calc(var(--air) * 2.2); }

.rfh .rfh-band {
  display: grid; gap: calc(var(--air) * 1.3);
  justify-items: center;
  margin-top: auto;
}

/* — מצב ההקשבה: שלוש נקודות-אור נושמות + "הפיה מקשיבה לך..." — */
.rfh .rfh-dots {
  display: flex; gap: 7px; justify-content: center;
  opacity: 0; animation: riseIn 420ms 80ms var(--ease-enter) forwards;
}
.rfh .rfh-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #FFFDF9;
  box-shadow: 0 0 10px var(--c-glow), 0 1px 2px rgba(122, 58, 82, .5);
  animation: rfhDot 1.25s ease-in-out infinite;
}
.rfh .rfh-dots i:nth-child(2) { animation-delay: .16s; }
.rfh .rfh-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes rfhDot {
  0%, 100% { transform: translateY(0);    opacity: .45; }
  50%      { transform: translateY(-5px); opacity: 1; }
}
.rfh .rfh-typing {
  text-align: center;
  opacity: 0; animation: riseIn 420ms 160ms var(--ease-enter) forwards;
}

/* — השיקוף שנחשף: כותרת + שורות, חשיפה מדורגת בשליטת JS (.shown) — */
.rfh .rfh-title {
  font-size: calc(var(--fs-greet) * .78);
  opacity: 0; transform: translateY(10px);
  transition: opacity 420ms var(--ease-enter), transform 420ms var(--ease-enter);
}
.rfh .rfh-line {
  opacity: 0; transform: translateY(10px);
  transition: opacity 420ms var(--ease-enter), transform 420ms var(--ease-enter);
}
.rfh .rfh-title.shown, .rfh .rfh-line.shown,
.rfh .shown-all .rfh-title, .rfh .shown-all .rfh-line {
  opacity: 1; transform: none;
}

/* — סצנת הבמה —
   העטיפה שומרת על יחס הציור האמיתי (900×781) ⇒ העיגונים באחוזים מדויקים.
   רוחב ~78% מסך, מוגבל גם בגובה כדי שלעולם לא תיווצר גלילה (חוק 11).
   The wrap keeps the art's true aspect so % anchors always land right. */
.rfh .rfh-scene {
  position: relative;
  flex: 0 0 auto; min-height: 0;   /* לא בולעת את החלל — הסרט שמעליה עושה זאת */
  width: 100%;
  display: grid; place-items: end center;
}
.rfh .rfh-stagewrap {
  position: relative;
  width: min(78vw, calc(46vh * 900 / 781), calc(var(--u) * 118));
  aspect-ratio: 900 / 781;
  opacity: 0; animation: riseIn 460ms 240ms var(--ease-enter) forwards;
}
.rfh .rfh-stage {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  filter: drop-shadow(0 14px 30px rgba(178, 106, 134, .3));
}
/* הלוגו המפואר — בתוך קשת הבמה, למעלה במרכז */
.rfh .rfh-crest {
  position: absolute; top: 5.5%; left: 50%;
  width: 33%; height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 8px rgba(122, 58, 82, .4));
}

/* — המיקרופון הקסום: גדול לפני הבמה, זוהר בהקשבה, נפתח כ-CTA —
   מטרת מגע ענקית (המיקרופון כולו); ~30% גובה מסך דרך גובה העטיפה. */
.rfh .rfh-mic {
  position: absolute; bottom: -2%; left: 50%;
  height: 88%; width: auto;
  transform: translateX(-50%);
  display: grid; place-items: end center;
  padding: 0; border: 0; background: none;
  z-index: 3;
  cursor: pointer;
}
.rfh .rfh-mic[aria-disabled="true"] { cursor: default; }
/* .lw-press מגדיר transform משלו — משחזרים את העיגון האופקי בכל מצב */
.rfh .rfh-mic:hover  { transform: translateX(-50%) translateY(-2px) scale(1.02); }
.rfh .rfh-mic:active { transform: translateX(-50%) scale(.96); }
.rfh .rfh-mic[aria-disabled="true"]:hover,
.rfh .rfh-mic[aria-disabled="true"]:active { transform: translateX(-50%); }
.rfh .rfh-mic-img {
  position: relative; z-index: 2;
  height: 100%; width: auto; display: block;
  filter: drop-shadow(0 8px 20px rgba(140, 62, 88, .45));
}
/* הילת הזוהר — נושמת בזמן ההקשבה, מתחזקת כשהשיקוף מוכן */
.rfh .rfh-halo {
  position: absolute; left: 50%; bottom: 26%;
  width: 175%; aspect-ratio: 1;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255, 231, 186, .55), rgba(255, 214, 245, .28) 45%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0; pointer-events: none;
  transition: opacity 500ms ease;
}
.rfh .rfh-mic.listening .rfh-halo { opacity: .75; animation: rfhBreath 2.4s ease-in-out infinite; }
.rfh .rfh-mic.ready     .rfh-halo { opacity: 1;   animation: rfhBreath 1.6s ease-in-out infinite; }
@keyframes rfhBreath {
  0%, 100% { transform: translate(-50%, 50%) scale(.92); }
  50%      { transform: translate(-50%, 50%) scale(1.07); }
}
/* טבעת ההזמנה — רק כשהמיקרופון מוכן: "געי בי" בלי מילים */
.rfh .rfh-ring {
  position: absolute; left: 50%; bottom: 36%;
  width: 78%; aspect-ratio: 1;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  border: 2px solid rgba(255, 243, 220, .9);
  opacity: 0; pointer-events: none;
}
.rfh .rfh-mic.ready .rfh-ring { animation: rfhRing 1.9s ease-out infinite; }
@keyframes rfhRing {
  from { opacity: .7; transform: translate(-50%, 50%) scale(.55); }
  to   { opacity: 0;  transform: translate(-50%, 50%) scale(1.45); }
}
/* קפיצת "אני מוכן" חד-פעמית כשהשיקוף הושלם */
.rfh .rfh-mic.ready .rfh-mic-img { animation: rfhPop 460ms var(--ease-spring) 1; }
@keyframes rfhPop {
  from { transform: scale(.9); }
  60%  { transform: scale(1.05); }
  to   { transform: scale(1); }
}

/* ════════════════════════════════════════════════════════════════════════
   s08 — "המהות": 4 כרטיסי שמנת באקורדיון, אייקוני הזר של נסיה
   ════════════════════════════════════════════════════════════════════════ */
.s08h .stack { justify-content: center; gap: calc(var(--air) * 1.9); }
.s08h .lw-title { opacity: 0; animation: riseIn 420ms 80ms var(--ease-enter) forwards; }

.s08h .s08h-cards {
  display: grid; gap: calc(var(--air) * 1.15);
  width: min(92%, calc(var(--u) * 88));
  margin-inline: auto;
}
.s08h .s08h-card {
  overflow: hidden;                       /* חותך את הברק החוצה בתוך הכרטיס */
  padding: calc(var(--air) * 1.05) calc(var(--air) * 1.7);
  text-align: start;
  opacity: 0;
  animation: riseIn 420ms var(--ease-enter) forwards;
  animation-delay: calc(160ms + var(--i) * 80ms);       /* רשת 80ms (חוק 6) */
}
.s08h .s08h-head {
  display: flex; align-items: center; gap: calc(var(--air) * 1.4);
  min-height: 44px;                       /* מטרת מגע (חוק 7) */
}
.s08h .s08h-ico {
  width: clamp(32px, calc(var(--u) * 10), 48px); height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 5px rgba(202, 132, 160, .28));
  transition: transform 420ms var(--ease-spring);
}
.s08h .s08h-card.open .s08h-ico { transform: scale(1.12); }
.s08h .s08h-chev {
  width: 17px; height: 17px; flex: 0 0 auto;
  margin-inline-start: auto;              /* RTL: השברון בקצה השמאלי */
  color: var(--lw-gold-text);
  transition: transform 420ms var(--ease-spring);
}
.s08h .s08h-card.open .s08h-chev { transform: rotate(180deg); }

/* פתיחה קפיצית רכה: grid-rows 0fr→1fr — תנועת גובה בלי למדוד פיקסלים */
.s08h .s08h-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 460ms var(--ease-spring);
}
.s08h .s08h-card.open .s08h-body { grid-template-rows: 1fr; }
.s08h .s08h-body-in { display: block; overflow: hidden; min-height: 0; }
.s08h .s08h-body-in i {
  display: block; font-style: normal;
  color: var(--lw-ink);
  font-size: var(--fs-body); line-height: var(--lh-body);
  padding-top: calc(var(--air) * .85);
}
/* "דרך חזרה הביתה לעצמך" — זהב טקסט נגיש (AA על שמנת), לא אוקר כהה */
.s08h .s08h-body-in i.hl { color: var(--lw-gold-text); }

/* הברק החוצה בכרטיס שנפתח — חד-פעמי, RTL: מימין לשמאל */
.s08h .s08h-card::after {
  content: ''; position: absolute; top: -30%; bottom: -30%; width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: translateX(480%) skewX(-14deg);
  pointer-events: none;
}
.s08h .s08h-card.sheen::after { animation: s08hSheen 850ms ease-out 1; }
@keyframes s08hSheen { to { transform: translateX(-340%) skewX(-14deg); } }

.s08h .lw-btn { opacity: 0; animation: riseIn 420ms 560ms var(--ease-enter) forwards; }

/* ════════════════════════════════════════════════════════════════════════
   s09 — "הערב מחכה לך": זיקוקון שורות + כרטיס הטלפון
   ════════════════════════════════════════════════════════════════════════ */
.s09h .stack { justify-content: center; gap: calc(var(--air) * 1.7); }
.s09h .lw-title { opacity: 0; animation: riseIn 420ms 80ms var(--ease-enter) forwards; }

.s09h .s09h-intro { display: grid; gap: calc(var(--air) * .95); }
.s09h .s09h-intro i {
  display: block; font-style: normal;
  opacity: 0; animation: riseIn 420ms var(--ease-enter) forwards;
  animation-delay: calc(240ms + var(--i) * 80ms);
}

.s09h .s09h-wait {
  display: grid; gap: calc(var(--air) * 1.05);
  width: fit-content; max-width: 94%;
  margin-inline: auto;
  justify-items: start;                   /* RTL: הכל מתחיל מימין */
}
.s09h .s09h-waitlbl {
  font-size: calc(var(--fs-body) * 1.06);
  opacity: 0; animation: riseIn 420ms 560ms var(--ease-enter) forwards;
}
/* שורת זיקוקון: מוסתרת עד שה-JS מדליק (.lit) — יחד עם ניצוץ השרביט */
.s09h .s09h-line {
  display: flex; align-items: center; gap: calc(var(--air) * 1.2);
  text-align: start;
  opacity: 0; transform: translateY(8px) scale(.97);
  transition: opacity 420ms var(--ease-enter), transform 420ms var(--ease-spring);
}
.s09h .s09h-line.lit { opacity: 1; transform: none; }
/* הניצוץ — יהלום זעיר בצד הימני של השורה (פריט 1 מימין, RTL) */
.s09h .s09h-spark {
  width: 8px; height: 8px; flex: 0 0 auto;
  border-radius: 2px;
  background: #FFF3DC;
  box-shadow: 0 0 10px rgba(232, 206, 156, .95), 0 0 20px var(--c-glow);
  transform: rotate(45deg) scale(0);
  transition: transform 460ms var(--ease-spring);
}
.s09h .s09h-line.lit .s09h-spark { transform: rotate(45deg) scale(1); }

/* — כרטיס הטלפון: חפץ שמנת (חוק 2), דיו כהה על בהיר — */
.s09h .s09h-card {
  width: min(88%, calc(var(--u) * 78));
  margin-inline: auto;
  padding: calc(var(--air) * 1.5) calc(var(--air) * 1.9);
  display: grid; gap: calc(var(--air) * .9);
  opacity: 0; animation: riseIn 420ms 720ms var(--ease-enter) forwards;
}
.s09h .s09h-ask {
  color: var(--lw-ink-strong);
  font-size: var(--fs-body); line-height: 1.5;
  text-align: center;
}
.s09h .s09h-field {
  width: 100%; min-height: 48px;          /* מטרת מגע (חוק 7) */
  border: 1.4px solid var(--lw-gold-line);
  border-radius: 14px;
  background: #FFFDF8;
  color: var(--lw-ink-strong);
  font: inherit; font-size: calc(var(--fs-body) * 1.05);
  text-align: center;
  padding: .35em .8em;
  box-shadow: inset 0 1px 3px rgba(202, 132, 160, .12);
}
.s09h .s09h-field::placeholder { color: rgba(92, 70, 87, .42); }
.s09h .s09h-field:focus-visible { outline: 3px solid var(--lw-gold-text); outline-offset: 2px; }
/* הלחישה: מופיעה רק במצב nudge — עדינה, לא שגיאה אדומה */
.s09h .s09h-note {
  color: var(--lw-ink);
  font-size: max(12px, var(--fs-micro));
  text-align: center;
  opacity: 0;
  transition: opacity 320ms ease;
}
.s09h .s09h-card.nudge .s09h-note { opacity: .92; }
.s09h .s09h-card.nudge { animation: s09hShake 360ms ease 1; }
@keyframes s09hShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(4px); }
  50%      { transform: translateX(-4px); }
  75%      { transform: translateX(2px); }
}

.s09h .lw-btn { opacity: 0; animation: riseIn 420ms 880ms var(--ease-enter) forwards; }

/* ═══ נגישות: reduced-motion — מבטלים אינסופיות, מקצרים כניסות (חוק 6) ═══ */
@media (prefers-reduced-motion: reduce) {
  .rfh .rfh-dots i,
  .rfh .rfh-mic.listening .rfh-halo, .rfh .rfh-mic.ready .rfh-halo,
  .rfh .rfh-mic.ready .rfh-ring,
  .rfh .rfh-mic.ready .rfh-mic-img,
  .s08h .s08h-card.sheen::after,
  .s09h .s09h-card.nudge { animation: none !important; }
  /* ההילה נשארת דלוקה סטטית — הזוהר קיים, בלי נשימה */
  .rfh .rfh-mic.listening .rfh-halo, .rfh .rfh-mic.ready .rfh-halo { opacity: .8; }
  .rfh .rfh-title, .rfh .rfh-line,
  .s09h .s09h-line, .s09h .s09h-spark { transition: none; }
  .rfh .rfh-dots, .rfh .rfh-typing, .rfh .rfh-stagewrap,
  .s08h .lw-title, .s08h .s08h-card, .s08h .lw-btn,
  .s09h .lw-title, .s09h .s09h-intro i, .s09h .s09h-waitlbl,
  .s09h .s09h-card, .s09h .lw-btn {
    animation-duration: 1ms !important; animation-delay: 0ms !important;
  }
  .s08h .s08h-body { transition-duration: 1ms; }
}