/* ============================================================================
   screens-a.css — צוות A בלבד. כל סלקטור בהיקף .s06 / .s07 / .reflect.
   טוקני התנועה של magic.css בלבד (--t-enter/--stagger/--ease-enter/--ease-exit)
   לכניסת תוכן; לולאות אווירה (ריחוף/זוהר) בקצב חופשי כמו worldBreathe/gatePulse.
   opacity+transform בלבד. אפס backdrop-filter/filter מונפשים חדשים.
   ============================================================================ */

/* ═══════════ כניסה משותפת — גל אחד בטוקנים ═══════════
   כל אלמנט מקבל --i (מיקומו בגל); העיכוב נגזר מ---stagger. riseIn מוגדר ב-magic.
   Single entrance wave: --i drives the token-based stagger. */
.s06 .rise, .s07 .rise, .reflect .rise {
  opacity: 0;
  animation: riseIn var(--t-enter) var(--ease-enter) both;
  animation-delay: calc(var(--stagger) * var(--i, 0));
}

/* ═══════════ טקסט־גוף שלנו (.qline) — לא בתוך .lines, לכן בלי השהיות מסך 1 ═══════════
   מסומן גם ב-.st כדי שמנוע ההתאמה ב-app.js יכבד את רצפת הקריאוּת (15.2px). */
.s06 .qline, .s07 .qline, .reflect .qline {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--pearl);
  -webkit-text-stroke: .22px currentColor;
  text-shadow: var(--halo-soft);
}

/* כותרות סצנה — מידה וזוהר כמו env-title, כניסה בטוקנים (לא השהיית מסך 2) */
.s06 .scene-title, .s07 .scene-title, .reflect .scene-title {
  font-size: calc(var(--u) * 6.0);
  line-height: 1.3;
  color: var(--pearl);
  -webkit-text-stroke: .25px currentColor;
  text-shadow: var(--halo-strong);
}
.s07 .s07-sub, .reflect .reflect-title { font-size: calc(var(--u) * 5.4); }

/* ═══════════ מסך 6 — הצצה לערב ═══════════ */
.s06 .stack { padding-bottom: clamp(40px, 9vh, 90px); }
.s06 .s06-block { gap: calc(var(--air) * 2.2); }
.s06 .s06-intro { display: grid; gap: calc(var(--air) * 1.9); }
.s06 .s06-intro .qline { max-width: 32ch; margin-inline: auto; }

/* "ערב של:" — תווית זהב רכה שמכריזה על הרשימה */
.s06 .s06-evening {
  margin-top: calc(var(--air) * 1.4);
  font-size: calc(var(--fs-body) * 1.06);
  color: var(--gold-hi); letter-spacing: .03em;
  text-shadow: 0 1px 2px rgba(15,10,26,.95), 0 0 10px rgba(201,164,92,.55);
}
/* חמש שורות "ערב של" — ריתמוס אוורירי, נגיעת זהב עדינה בקצה */
.s06 .s06-list {
  list-style: none; display: grid;
  gap: calc(var(--air) * 1.5);
  margin-top: calc(var(--air) * 1.1);
}
.s06 .s06-item {
  font-size: calc(var(--fs-body) * 1.04);
  color: #FDF4E8;
  text-shadow: 0 1px 2px rgba(15,10,26,.9), 0 0 12px rgba(232,206,156,.32);
}

/* ═══════════ מסך 7 — רב־פאזות, בלי גלילה ═══════════
   מעבר פאזה: יציאה קצרה (opacity+transform) בקצב --t-micro, ואז כניסת הגל. */
.s07 .s07-stack {
  transition: opacity var(--t-micro) var(--ease-exit),
              transform var(--t-micro) var(--ease-exit);
}
.s07 .s07-stack.phase-out { opacity: 0; transform: translateY(-8px); }
.s07 .s07-block { gap: calc(var(--air) * 2.1); }
.s07 .s07-block .qline { max-width: 34ch; margin-inline: auto; }
.s07 .stack { padding-bottom: clamp(40px, 9vh, 96px); }

/* — ראש השאלה — */
.s07 .s07-quiz-head {
  display: grid; justify-items: center;
  gap: calc(var(--air) * 1.4); width: 100%;
}
.s07 .s07-progress {
  font-size: max(15.2px, calc(var(--fs-body) * .84));
  color: var(--gold-hi); letter-spacing: .04em;
  text-shadow: var(--halo-soft);
}
.s07 .s07-question {
  font-size: calc(var(--u) * 5.4); line-height: 1.4;
  color: var(--pearl); text-shadow: var(--halo-strong);
  max-width: 30ch; margin-inline: auto;
}

/* — ארבע תשובות זכוכית (טקסט בלבד, בלי קריסטלים) — כרובע של .choice — */
.s07 .s07-answers {
  display: grid; gap: calc(var(--air) * 1.8);
  width: 100%; max-width: calc(var(--u) * 92);
  margin-top: calc(var(--air) * 1.6);
}
.s07 .s07-answer {
  position: relative; width: 100%;
  min-height: 48px;
  padding: calc(var(--air) * 1.6) calc(var(--air) * 2.2);
  border: 1.2px solid rgba(253,251,247,.24);
  border-radius: calc(var(--u) * 6);
  background: rgba(30, 22, 46, .34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 240ms var(--ease-out), box-shadow 320ms ease,
              border-color 320ms ease, background 320ms ease, opacity 320ms ease;
}
.s07 .s07-answer-txt {
  display: block;
  font-size: calc(var(--fs-body) * .98); line-height: 1.42;
  color: var(--pearl); text-shadow: var(--halo-soft);
}
.s07 .s07-answer:hover { transform: scale(1.012); border-color: rgba(253,251,247,.4); }
.s07 .s07-answer:active { transform: scale(.985); }
.s07 .s07-answer:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 4px; }
.s07 .s07-answer.chosen {
  border-color: var(--c-primary);
  background: rgba(42, 30, 60, .52);
  box-shadow: 0 0 22px var(--c-glow), inset 0 1px 0 rgba(255,255,255,.18);
  transform: scale(1.015);
}
.s07 .s07-answer.dimmed { opacity: .4; transform: scale(.99); }

/* — פאזת "רגע חופשי מהלב" — תיבת כתיבה בשפת "זכוכית פיות" (שדה־השם) — */
.s07 .s07-lead {
  font-size: calc(var(--fs-body) * 1.04); color: #FDF4E8;
  text-shadow: var(--halo-soft);
}
.s07 .s07-muted {
  font-size: max(15.2px, calc(var(--fs-body) * .9));
  color: #F0E4EA; opacity: .9;
}
.s07 .s07-hint, .s07 .s07-after { display: grid; gap: calc(var(--air) * .8); }
.s07 .s07-area { width: 100%; max-width: 90%; margin: calc(var(--air) * 1.2) auto; }
.s07 .fairy-area {
  width: 100%;
  /* 16px רצפה מוחלטת — מתחת לזה iOS מזנק זום בפוקוס ושובר את הקומפוזיציה */
  font-size: max(16px, calc(var(--u) * 5.0));
  font-family: inherit; line-height: 1.5;
  text-align: center; resize: none;
  padding: calc(var(--air) * 1.8) calc(var(--air) * 2.2);
  min-height: calc(var(--u) * 34);
  box-sizing: border-box;
  color: var(--ink-deep);
  background: rgba(253, 248, 250, .82);
  border: 1.4px solid rgba(232, 206, 156, .72);
  border-radius: calc(var(--u) * 6);
  box-shadow: 0 0 22px rgba(242,175,196,.3), inset 0 1px 0 rgba(255,255,255,.7);
  outline: none;
  transition: box-shadow 240ms ease, border-color 240ms ease, background 240ms ease;
  -webkit-appearance: none; appearance: none;
}
.s07 .fairy-area::placeholder { color: rgba(74, 54, 40, .42); }
.s07 .fairy-area:focus {
  background: rgba(255, 252, 253, .94);
  border-color: var(--gold-hi);
  box-shadow: 0 0 30px rgba(242,175,196,.55), 0 0 0 4px rgba(232,206,156,.22),
              inset 0 1px 0 rgba(255,255,255,.8);
}

/* — פאזת הסוד — הציטוט מודגש מעט — */
.s07 .s07-secret .qline { max-width: 32ch; }
.s07 .s07-quote {
  font-size: calc(var(--fs-body) * 1.08);
  color: #FDF4E8; letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(15,10,26,.95), 0 0 14px rgba(232,206,156,.4);
}

/* — פאזת הזמן + צ'קבוקס שיחת הכנה — */
.s07 .s07-timing { gap: calc(var(--air) * 1.7); }
.s07 .s07-check {
  display: flex; align-items: flex-start; gap: calc(var(--air) * 1.6);
  width: 100%; max-width: 34ch; margin: calc(var(--air) * 1.6) auto 0;
  padding: calc(var(--air) * 1.4) calc(var(--air) * 1.8);
  min-height: 48px;
  border: 1.2px solid rgba(232,206,156,.4);
  border-radius: calc(var(--u) * 5);
  background: rgba(30, 22, 46, .3);
  cursor: pointer; text-align: right;
  transition: border-color 260ms ease, background 260ms ease;
}
.s07 .s07-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.s07 .s07-check-box {
  flex: 0 0 auto; width: 24px; height: 24px; margin-top: 2px;
  border: 1.6px solid var(--gold-hi); border-radius: 7px;
  background: rgba(253,248,250,.14);
  position: relative;
  transition: background 220ms ease, box-shadow 220ms ease;
}
.s07 .s07-check-box::after {
  content: ''; position: absolute; left: 7px; top: 3px;
  width: 6px; height: 11px;
  border: solid var(--ink-deep); border-width: 0 2.4px 2.4px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 220ms var(--ease-out);
}
.s07 .s07-check input:checked ~ .s07-check-box {
  background: var(--gold-hi);
  box-shadow: 0 0 16px rgba(232,206,156,.6);
}
.s07 .s07-check input:checked ~ .s07-check-box::after { transform: rotate(45deg) scale(1); }
.s07 .s07-check input:focus-visible ~ .s07-check-box { outline: 3px solid var(--gold-hi); outline-offset: 3px; }
.s07 .s07-check-txt {
  flex: 1 1 auto; min-width: 0;
  font-size: max(15.2px, calc(var(--fs-body) * .9));
  line-height: 1.42; color: #F3E4EA; text-shadow: var(--halo-soft);
}
.s07 .s07-check:hover { border-color: var(--gold-hi); background: rgba(42,30,60,.4); }

/* ═══════════ reflect — השיקוף + המיקרופון הקסום ═══════════ */
.reflect .reflect-stack { padding-bottom: clamp(30px, 7vh, 80px); }
.reflect .reflect-block { gap: calc(var(--air) * 2.2); }

/* "הפיה מקשיבה" — שלוש נקודות אור (תבנית .typing ממסך 3) + כותרת עדינה */
.reflect .reflect-typing { display: flex; gap: 7px; justify-content: center; padding: calc(var(--air) * 1.4) 0; }
.reflect .reflect-typing i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-primary); opacity: .4;
  animation: reflTyping 1150ms ease-in-out infinite;
}
.reflect .reflect-typing i:nth-child(2) { animation-delay: 190ms; }
.reflect .reflect-typing i:nth-child(3) { animation-delay: 380ms; }
@keyframes reflTyping {
  0%,100% { opacity: .3;  transform: translateY(0) }
  40%     { opacity: .95; transform: translateY(-4px) }
}
.reflect .reflect-typing-label {
  font-size: calc(var(--fs-body) * .98); color: #F0E4EA;
  letter-spacing: .02em; text-align: center;
}

/* השיקוף עצמו — כותרת רכה ומשפטים שנחשפים הדרגתית (opacity+transform בלבד) */
.reflect .reflect-title {
  color: var(--c-air);
  text-shadow: 0 0 18px var(--c-glow), var(--halo-strong);
  transition: opacity 720ms ease;
}
.reflect .reflect-line {
  max-width: 32ch; margin-inline: auto;
  font-size: calc(var(--fs-body) * 1.03); line-height: 1.7;
  color: #FDF4E8;
  transform: translateY(10px);
  transition: opacity 720ms ease, transform 720ms var(--ease-out);
}
.reflect .reflect-line.shown { transform: none; }

/* ── המיקרופון הקסום — חפץ, לא כפתור ── */
.reflect .mic-wand {
  position: relative; z-index: 4;
  width: calc(var(--u) * 34); max-width: 42%;
  aspect-ratio: 1;
  display: grid; place-items: center;
  border: 0; background: transparent; padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;                       /* עד appearMic */
}
.reflect .mic-wand[hidden] { display: none; }
.reflect .mic-img {
  position: relative; z-index: 2;
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 18px var(--c-glow)) drop-shadow(0 6px 20px rgba(20,14,34,.5));
}
/* הילת זוהר רכה מאחוריו */
.reflect .mic-halo {
  position: absolute; z-index: 1; inset: -18%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--c-glow), transparent 72%);
  opacity: .0;
}
/* גל אור מתפשט בלחיצה */
.reflect .mic-wave {
  position: absolute; z-index: 0; left: 50%; top: 50%;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.3);
  background: radial-gradient(closest-side, rgba(253,241,246,.5), var(--c-glow) 50%, transparent 74%);
  opacity: 0; pointer-events: none;
}
/* כוכב־נצנוץ גיבוי אם הנכס חסר — כדי שהמסע לעולם לא יישבר */
.reflect .mic-star {
  position: absolute; z-index: 2; inset: 18%;
  display: none;
  background:
    conic-gradient(from 0deg, transparent 0 8%, var(--c-air) 12%, transparent 18% 32%,
                   var(--c-air) 37%, transparent 43% 57%, var(--c-air) 62%, transparent 68% 82%,
                   var(--c-air) 87%, transparent 93%);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 72%);
  mask: radial-gradient(closest-side, #000 30%, transparent 72%);
  filter: drop-shadow(0 0 12px var(--c-glow));
  border-radius: 50%;
}
.reflect .mic-wand.mic-fallback .mic-img { display: none; }
.reflect .mic-wand.mic-fallback .mic-star { display: block; }

/* כניסה: Fade + Scale + זוהר עדין */
.reflect .mic-wand.mic-in { animation: micIn var(--t-scene) var(--ease-enter) both; }
@keyframes micIn {
  0%   { opacity: 0; transform: scale(.62) }
  60%  { opacity: 1 }
  100% { opacity: 1; transform: scale(1) }
}
/* ריחוף איטי מתמשך (transform בלבד) + נשימת ההילה — לולאות אווירה */
.reflect .mic-wand.mic-in .mic-img { animation: micFloat 3.6s 620ms ease-in-out infinite; }
.reflect .mic-wand.mic-in .mic-halo { animation: micHalo 3.6s 620ms ease-in-out infinite; }
@keyframes micFloat {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-6%) }
}
@keyframes micHalo {
  0%,100% { opacity: .35; transform: scale(.96) }
  50%     { opacity: .7;  transform: scale(1.05) }
}
/* Bounce קטן בלחיצה */
.reflect .mic-wand.mic-press { animation: micPress var(--t-micro) var(--ease-out); }
@keyframes micPress {
  0% { transform: scale(1) } 40% { transform: scale(.9) } 100% { transform: scale(1) }
}
/* גל האור — מתפשט פעם אחת */
.reflect .mic-wave.go { animation: micWave var(--t-scene) var(--ease-out) forwards; }
@keyframes micWave {
  0%   { opacity: .85; transform: translate(-50%,-50%) scale(.3) }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(3.4) }
}
.reflect .mic-wand:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 8px; border-radius: 50%; }

/* ═══════════ תנועה מופחתת — המיקרופון סטטי עם זוהר ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .s06 .rise, .s07 .rise, .reflect .rise { animation: none !important; opacity: 1; }
  .s07 .s07-stack { transition: none; }
  .reflect .reflect-line { transition: opacity 300ms ease; transform: none; }
  .reflect .mic-wand.mic-in { animation: none !important; opacity: 1; transform: none; }
  .reflect .mic-wand.mic-in .mic-img { animation: none !important; }
  .reflect .mic-wand.mic-in .mic-halo { animation: none !important; opacity: .5; }
  .reflect .reflect-typing i { animation: none !important; opacity: .6; }
}

/* ═══════════ מצב QA — הכול נראה, בלי תנועה (צילומי בקרה) ═══════════
   שער בטיחות: אם אלמנט נשאר שקוף במצב בקרה — הצילום משקר. */
html.qa .s06 .rise, html.qa .s07 .rise, html.qa .reflect .rise,
html.qa .s06 .scene-title, html.qa .s07 .scene-title, html.qa .reflect .scene-title,
html.qa .s06 .qline, html.qa .s07 .qline, html.qa .reflect .qline,
html.qa .s07 .s07-answer, html.qa .s07 .s07-check,
html.qa .reflect .reflect-title, html.qa .reflect .reflect-line,
html.qa .reflect .mic-wand {
  opacity: 1 !important; animation: none !important; transform: none !important;
}
html.qa .reflect .reflect-typing { display: none !important; }