/* ============================================================================
   screens-c.css — צוות C בלבד. היקף: .s12 / .s13 / .s14 / .s15 / .s16 בלבד.
   טוקני התנועה של magic.css בלבד (--t-enter/--stagger/--ease-enter). ללא
   backdrop-filter חדש (מלבד זכוכית-הפנינה הקיימת של .text-block ב-s12/s16).
   Team C only. Scoped to .s12–.s16. Motion tokens from magic.css. No NEW
   backdrop-filter (s12/s16 reuse the existing .text-block pearl-glass).
   ============================================================================ */

/* ═══════════ כותרת משותפת (s12/s14/s16) ═══════════
   ⚠️ לא משתמשים ב-.greet .lead: יש לו white-space:nowrap שנועד לשורה קצרה
   ("ברוכה הבאה..."), והכותרות שלנו משפטים שלמים שהיו גולשים אופקית.
   אין opacity בסיסי — הכניסה דרך animation עם both; במצב QA (animation:none)
   האלמנט חוזר לאטימות 1 וגלוי. זה מונע "מסך ריק" בצילומי בקרה.
   Not .greet .lead (its nowrap is for a short line; our titles are full
   sentences that would clip). No base opacity — entrance via `both`-fill
   animation, so QA (animation:none) falls back to opacity 1 and stays visible. */
.s12 .c-title, .s14 .c-title, .s16 .c-title {
  font-size: calc(var(--u) * 5.5);
  line-height: 1.4;
  color: var(--pearl);
  -webkit-text-stroke: .25px currentColor;
  text-shadow: var(--halo-strong);
  animation: riseIn var(--t-enter) var(--ease-enter) both;
}

/* גוף הטקסט הפואטי (s12/s16) — מדרגה נקייה שמנצחת את תזמון nth-child של מסך 1.
   הכפילות ב-specificity (.s1x .lines .st = 3 מחלקות) גוברת על .lines .st:nth-child. */
.s12 .lines .st, .s16 .lines .st {
  animation: riseIn var(--t-enter) var(--ease-enter) both;
  animation-delay: calc(120ms + var(--stagger) * var(--st-i, 0));
}
/* מרווח קצת צפוף יותר בין הפסקאות (ברירת המחדל של .lines גדולה): s12 הוא
   המסך הצפוף ביותר (כותרת דו-שורתית ארוכה + 5 פסקאות), וזה משחרר לחץ אנכי
   כדי שלא ייכנס למצב-גלילה של מוצא-אחרון.
   Tighter inter-paragraph gap than .lines default — relieves s12 (the densest
   screen) so it never falls back to the last-resort scroll mask. */
.s12 .lines { gap: calc(var(--air) * 2.0); }

/* הכפתור — מבטלים את השהיית 3050ms של מסך 1; נכנס מיד אחרי הטקסט */
.s12 .dust-btn, .s13 .dust-btn, .s14 .dust-btn, .s15 .dust-btn, .s16 .dust-btn {
  animation: riseIn var(--t-enter) var(--ease-enter) both;
  animation-delay: calc(var(--stagger) * 4);
}

/* ═══════════ s12 — מעגל 15 נקודות האור ═══════════
   נקודה יחידה מעוגנת בנקודה אחת (50%,44%), מסובבת ב-i*24° ונדחפת החוצה
   ברדיוס אחיד ⇒ טבעת. האנימציה נוגעת ב-opacity בלבד — כדי לא לדרוס את
   ה-transform שממקם. הנדלקוּת במדרגה של 80ms נקראת כרגע אחד של הצתה.
   One anchor point, each dot rotated i*24° and pushed out by a fixed radius
   ⇒ a ring. Animation touches OPACITY ONLY so it won't clobber the positioning
   transform. The 80ms stagger reads as a single ignition. */
.s12 .fifteen { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.s12 .fifteen i {
  position: absolute; left: 50%; top: 44%;
  width: 7px; height: 7px; margin: -3.5px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 4px var(--c-primary), 0 0 10px var(--c-glow);
  opacity: 0;
  transform: rotate(calc(var(--i) * 24deg)) translateY(calc(-1 * min(38vw, 32vh)));
  animation: dotIgnite 900ms var(--ease-enter) both;
  animation-delay: calc(200ms + var(--i) * 80ms);
}
@keyframes dotIgnite { 0% { opacity: 0 } 55% { opacity: .95 } 100% { opacity: .78 } }

/* ═══════════ s13 — כרטיס הפרטים (שני שלבים) ═══════════
   סקרים כהה-שקוף (בלי backdrop-filter) לקריאוּת מעל הרקע הפרחוני העמוס.
   *לא* .text-block — כדי לא לרשת את זכוכית-הפנינה של מצב b (שמביאה
   backdrop-filter), וכדי שמנוע ההתאמה ימדוד את הסטאק בלבד. */
.s13 .s13-card {
  width: 100%; max-width: calc(var(--u) * 88);
  margin-block: auto;
  display: grid; gap: calc(var(--air) * 1.6);
  padding: calc(var(--air) * 2.6) calc(var(--air) * 2.6);
  border-radius: calc(var(--u) * 7);
  background: rgba(22, 15, 36, .55);
  border: 1px solid rgba(253, 251, 247, .18);
  box-shadow: 0 0 42px rgba(242,175,196,.2), inset 0 1px 0 rgba(255,255,255,.12);
}
.s13 .stack { padding-bottom: clamp(30px, 7vh, 70px); }

/* שם האירוע — הכותרת של הכרטיס, בזהב רך */
.s13 .s13-name {
  text-align: center;
  font-size: calc(var(--u) * 5.6);
  line-height: 1.2;
  color: var(--gold-hi);
  -webkit-text-stroke: .3px currentColor;
  text-shadow: 0 1px 2px rgba(15,10,26,.9), 0 0 14px rgba(232,206,156,.5);
  padding-bottom: calc(var(--air) * 1.2);
  border-bottom: 1px solid rgba(232,206,156,.28);
}
.s13 .s13-facts { list-style: none; display: grid; gap: calc(var(--air) * 1.5); }
/* שורת עובדה: מפתח מימין, ערך אחריו; תת-שורות בשורה מלאה מתחת (RTL) */
.s13 .frow {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: calc(var(--air) * 1.6);
  text-align: right;
}
.s13 .fk {
  font-size: max(15.2px, calc(var(--fs-body) * .92));
  color: var(--c-air); opacity: .9;
  white-space: nowrap;
  text-shadow: var(--halo-soft);
}
.s13 .fv {
  font-size: max(15.2px, calc(var(--fs-body) * 1.02));
  color: var(--pearl);
  text-shadow: var(--halo-soft);
}
.s13 .fsubs { grid-column: 1 / -1; display: grid; gap: calc(var(--air) * .5); margin-top: calc(var(--air) * .3); }
.s13 .fsub {
  font-size: max(15.2px, calc(var(--fs-body) * .82));
  color: #F3E4EA; opacity: .82; line-height: 1.4;
  text-shadow: var(--halo-soft);
}

/* שלב 2 — "מה מחכה" */
.s13 .s13-whattitle {
  text-align: center;
  font-size: calc(var(--u) * 5.0);
  line-height: 1.35; color: var(--pearl);
  -webkit-text-stroke: .22px currentColor;
  text-shadow: var(--halo-strong);
  padding-bottom: calc(var(--air) * .8);
}
.s13 .s13-what { list-style: none; display: grid; gap: calc(var(--air) * 1.5); }
.s13 .wrow {
  display: grid; grid-template-columns: auto 1fr;
  align-items: start; gap: calc(var(--air) * 1.6);
  text-align: right;
  font-size: max(15.2px, calc(var(--fs-body) * .96));
  line-height: 1.5; color: var(--pearl);
  text-shadow: var(--halo-soft);
}
.s13 .wdot {
  width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4);
  min-width: 7px; min-height: 7px;
  margin-top: .62em; border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 8px var(--c-glow);
}

/* מדרגת הכניסה של השורות (s13) — שלב אחר שלב */
.s13 .st {
  animation: riseIn var(--t-enter) var(--ease-enter) both;
  animation-delay: calc(60ms + var(--stagger) * var(--st-i, 0));
}

/* ═══════════ s14 — אקורדיון השאלות ═══════════ */
.s14 .stack { padding-bottom: clamp(30px, 7vh, 70px); }
.s14 .s14-top {
  width: 100%; max-width: calc(var(--u) * 90);
  margin-block: auto;
  display: grid; gap: calc(var(--air) * 2.2);
}
.s14 .c-title { text-align: center; }
.s14 .faq { display: grid; gap: calc(var(--air) * 1.6); }

/* בועת זכוכית מזויפת — בלי backdrop-filter (סקר כהה-שקוף בלבד) */
.s14 .faq-item {
  border-radius: calc(var(--u) * 6);
  border: 1px solid rgba(253, 251, 247, .2);
  background: rgba(24, 16, 40, .5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  overflow: hidden;
  animation: riseIn var(--t-enter) var(--ease-enter) both;
  animation-delay: calc(120ms + var(--stagger) * var(--st-i, 0));
  transition: border-color 280ms ease, background 280ms ease;
}
.s14 .faq-item.open {
  border-color: rgba(232, 206, 156, .5);
  background: rgba(34, 24, 54, .6);
}
.s14 .faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--air) * 1.6);
  padding: calc(var(--air) * 1.9) calc(var(--air) * 2.2);
  min-height: 46px;
  border: 0; background: transparent; cursor: pointer; text-align: right;
  -webkit-tap-highlight-color: transparent;
}
.s14 .faq-qt {
  flex: 1 1 auto; min-width: 0;
  font-size: max(15.4px, calc(var(--fs-body) * 1.0));
  line-height: 1.4; color: var(--pearl);
  text-shadow: var(--halo-soft);
}
/* סימן + / − רך, מסתובב בפתיחה */
.s14 .faq-mark {
  position: relative; flex: 0 0 auto;
  width: calc(var(--u) * 5); height: calc(var(--u) * 5);
  min-width: 18px; min-height: 18px;
}
.s14 .faq-mark::before, .s14 .faq-mark::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: var(--c-primary); border-radius: 2px;
  box-shadow: 0 0 8px var(--c-glow);
  transition: transform 280ms var(--ease-out), opacity 280ms ease;
}
.s14 .faq-mark::before { width: 60%; height: 2px; }         /* קו אופקי */
.s14 .faq-mark::after  { width: 2px; height: 60%; }         /* קו אנכי */
.s14 .faq-item.open .faq-mark::after { transform: rotate(90deg); opacity: 0; }  /* + → − */

/* גוף התשובה — צמיחה רכה דרך grid-template-rows (0fr→1fr), בלי height thrash */
.s14 .faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease-out), opacity 260ms ease;
  opacity: 0;
}
.s14 .faq-item.open .faq-a { grid-template-rows: 1fr; opacity: 1; }
.s14 .faq-a-inner {
  overflow: hidden;
  transform: translateY(-4px);
  transition: transform 300ms var(--ease-out);
}
.s14 .faq-item.open .faq-a-inner { transform: none; }
.s14 .faq-a-inner p {
  padding: 0 calc(var(--air) * 2.2);
  font-size: max(15.2px, calc(var(--fs-body) * .92));
  line-height: 1.55; color: #F3E4EA;
  text-shadow: var(--halo-soft);
}
.s14 .faq-a-inner p:first-child { padding-top: calc(var(--air) * .2); }
.s14 .faq-a-inner p:last-child  { padding-bottom: calc(var(--air) * 1.9); }

/* ═══════════ s15 — המכתב האישי (נייר, דיו כהה) ═══════════
   מנטרלים את זכוכית-הפנינה הכהה של מצב b (specificity: 3 מחלקות > מצב-b),
   ומחליפים בשטיפת-קרם רכה עם קצוות ממוסכים — בדיוק כמו s03. */
.s15 .stack { padding-bottom: clamp(24px, 6vh, 60px); }
.s15 .s15-crest {
  width: calc(var(--air) * 46);
  max-width: 56%;
  margin: 0 auto calc(var(--air) * .6);
  filter: drop-shadow(0 2px 10px rgba(20,14,34,.5)) drop-shadow(0 0 20px rgba(242,175,196,.4));
  animation: riseIn var(--t-enter) var(--ease-enter) both;
}
@media (min-aspect-ratio: 4/5) { .s15 .s15-crest { max-width: 26%; } }

.s15 .text-block.letter {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: none; box-shadow: none;
  padding: clamp(16px, 2.4vh, 28px) clamp(18px, 3.4vw, 34px);
  max-width: min(86vw, 34rem);
  position: relative;
  gap: calc(var(--air) * 2.2);
}
@media (min-aspect-ratio: 4/5) { .s15 .text-block.letter { max-width: min(62vw, 46rem); } }
/* השטיפה — דורסת את מסגרת הקוני של מצב b (::before) בקצוות ממוסכים */
.s15 .text-block.letter::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: 20px;
  background: radial-gradient(86% 76% at 50% 48%,
              rgba(255,248,236,.9), rgba(253,242,228,.82) 60%, rgba(252,238,224,.5) 86%, rgba(252,238,224,.18) 97%);
  -webkit-mask-image: radial-gradient(96% 90% at 50% 50%, #000 74%, transparent 99%);
  mask-image: radial-gradient(96% 90% at 50% 50%, #000 74%, transparent 99%);
}
/* דיו כהה על נייר — היפוך מכל שאר המסע (כמו s03) */
.s15 .letter .lines {
  color: #4A3628; text-shadow: none; -webkit-text-stroke: 0;
  gap: calc(var(--air) * 2.1);
}
.s15 .letter .st {
  color: #4A3628;
  animation: riseIn var(--t-enter) var(--ease-enter) both;
  animation-delay: calc(120ms + var(--stagger) * var(--st-i, 0));
}
.s15 .letter .s15-title {
  font-size: calc(var(--fs-body) * 1.12);
  color: #3E2C1E; letter-spacing: .01em;
  padding-bottom: calc(var(--air) * .4);
}
.s15 .letter .s15-sign {
  margin-top: calc(var(--air) * 1.2);
  font-size: max(15.2px, calc(var(--fs-body) * .98));
  color: #6B4A2E;
}

/* ═══════════ s16 — הרשמה + מצב אישור ═══════════ */
.s16 .stack { padding-bottom: clamp(30px, 8vh, 80px); }

/* מצב האישור — חותם אור רך שפורח מאחורי הטקסט */
.s16 .s16-done { position: relative; }
.s16 .s16-seal {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 42%; width: 62%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
              var(--c-glow), rgba(242,175,196,.16) 55%, transparent 78%);
  opacity: 0;
  animation: sealBloom 1600ms var(--ease-enter) both;
}
@keyframes sealBloom {
  0%   { opacity: 0;   transform: translate(-50%,-50%) scale(.4) }
  45%  { opacity: 1;   transform: translate(-50%,-50%) scale(1.05) }
  100% { opacity: .85; transform: translate(-50%,-50%) scale(1) }
}
.s16 .s16-done .c-title { color: var(--c-air); text-shadow: 0 0 22px var(--c-glow), var(--halo-strong); }

/* ═══════════ מצב QA — כל אלמנט מונפש חייב להיראות בצילום הבקרה ═══════════
   ⚠️ אלמנטים שנשענים על opacity בסיסי (הנקודות, ושורות .lines .st שיורשות
   opacity:0 מ-magic.css) לא מכוסים ע"י כללי ה-QA הגלובליים — נכפה כאן.
   Elements that rely on a base opacity:0 (the dots; .lines .st inherit it from
   magic.css) aren't covered by global QA rules — force them visible here. */
html.qa .s12 .fifteen i { opacity: .78 !important; }
html.qa .s12 .lines .st, html.qa .s16 .lines .st,
html.qa .s13 .st, html.qa .s14 .faq-item, html.qa .s15 .letter .st,
html.qa .s15 .s15-crest, html.qa .s16 .s16-seal,
html.qa .s12 .c-title, html.qa .s14 .c-title, html.qa .s16 .c-title {
  opacity: 1 !important;
}
html.qa .s14 .faq-item:not(.open) .faq-a { grid-template-rows: 0fr; }  /* בקרה: רק הראשונה פתוחה */

/* ═══════════ תנועה מופחתת — הכניסה נשארת עדינה, בלי תזוזה ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .s12 .c-title, .s14 .c-title, .s16 .c-title,
  .s12 .lines .st, .s16 .lines .st,
  .s13 .st, .s14 .faq-item, .s15 .s15-crest, .s15 .letter .st,
  .s12 .dust-btn, .s13 .dust-btn, .s14 .dust-btn, .s15 .dust-btn, .s16 .dust-btn {
    animation-name: fadeOnly !important;
    animation-duration: 320ms !important;
  }
  .s12 .fifteen i { animation: none !important; opacity: .78; }
  .s16 .s16-seal { animation: none !important; opacity: .8; }
  @keyframes fadeOnly { from { opacity: 0 } to { opacity: 1 } }
}