/* ============================================================================
   holo2-b.css — צוות B בעור "הולוגרמה רגישה" (plan/23): s11h (המכתב לעצמך) ·
   s13h (כרטיס הכניסה). שכבה על holo.css — טוקנים ומתכונים משם בלבד
   (lw-title, cream-card, lw-btn, lw-press, --ease-spring, riseIn ממagic.css).
   אפס זכוכית מתחת לטקסט (חוק 1); שמנת רק לחפצים — מכתב וכרטיס (חוק 2);
   תנועה: opacity+transform בלבד, כניסות ≤460ms, מדרגות בכפולות 80ms (חוק 6).
   Team B skins on top of holo.css tokens: s11 letter + s13 entry ticket.
   Motion is opacity+transform only; entrances ≤460ms; 80ms-grid staggers.
   ============================================================================ */

/* ═══ כלל נסיה (חוק 4): שורות מאוזנות, בלי מילה יתומה — הסלקטורים שלנו ═══ */
.s11h .lw-title, .s11h .s11h-line,
.s13h .lw-title, .s13h .s13h-fv, .s13h .s13h-fsub,
.s13h .s13h-whattitle, .s13h .s13h-wtext {
  text-wrap: balance;
}

/* ═══════════ s11 — המכתב לעצמך: דף שמנת שקט ═══════════ */
.s11h .stack { justify-content: center; gap: calc(var(--air) * 2.2); }
.s11h .lw-title { opacity: 0; animation: riseIn 440ms 80ms var(--ease-enter) forwards; }

/* דף המכתב — חפץ פיזי: שמנת, שוליים נדיבים, דיו כהה, יישור התחלה (RTL) */
.s11h-letter {
  width: min(100%, calc(var(--u) * 92));
  margin-inline: auto;
  padding: calc(var(--air) * 2.6) calc(var(--air) * 2.9) calc(var(--air) * 2.1);
  text-align: start;
  opacity: 0;
  animation: hb2Card 460ms 260ms var(--ease-spring) forwards;
}
@keyframes hb2Card {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.s11h-lines { display: grid; gap: calc(var(--air) * 1.05); }
.s11h-line {
  margin: 0;
  font-size: calc(var(--fs-body) * .97);
  line-height: var(--lh-body);
  color: var(--lw-ink);
  opacity: 0;
  animation: s11hLine 420ms var(--ease-enter) forwards;
  /* מדרגה 320ms = 4×‎--stagger — הקצב השקט של מכתב, על רשת ה-80ms */
  animation-delay: calc(640ms + var(--i) * var(--stagger) * 4);
}
@keyframes s11hLine {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* שורת החתימה: המסלול שהנוצה כותבת עליו את קו הזהב */
.s11h-sign {
  position: relative;
  height: calc(var(--u) * 7); min-height: 20px;
  margin-top: calc(var(--air) * 1.4);
}
.s11h-goldline {
  position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(270deg, var(--lw-gold-line), rgba(217, 188, 126, .3));
  transform: scaleX(0);
  transform-origin: 100% 50%;             /* RTL: הקו נמתח מימין לשמאל */
}
.s11h-quill {
  position: absolute; bottom: 2px; inset-inline-start: 0;
  width: 20px; height: 20px; display: block;
  color: var(--lw-gold-text);
  opacity: 0;
  transform: rotate(8deg);
}
/* הכתיבה: הקו נמתח והנוצה נוסעת איתו — transform בלבד. 860ms = רגע-שיא
   חד-פעמי, לא כניסת-רכיב (התקדים החי: s10hFlip 900ms ב-holo.css).
   The write: line stretches while the quill rides it — a one-shot hero
   moment (precedent: s10hFlip 900ms), not a component entrance. */
.s11h-sign.write .s11h-goldline {
  transition: transform 860ms var(--ease-hero);
  transform: scaleX(1);
}
.s11h-sign.write .s11h-quill {
  opacity: 1;
  transition: transform 860ms var(--ease-hero), opacity 220ms ease;
  transform: translateX(calc(var(--run, 0px) * -1)) rotate(-9deg);
}
/* הכפתור נכנס אחרי שהנוצה סיימה: 640+6×320+220+860 ≈ 3640ms */
.s11h .lw-btn { opacity: 0; animation: riseIn 440ms 3620ms var(--ease-enter) forwards; }

/* ═══════════ s13 — כרטיס הכניסה: נחתם שורה-שורה ═══════════ */
.s13h .stack { justify-content: center; gap: calc(var(--air) * 2); }
.s13h .lw-title { opacity: 0; animation: riseIn 440ms 80ms var(--ease-enter) forwards; }

/* הכרטיס — חפץ פיזי; ריפוד תחתון שומר פינה פנויה לחותמת */
.s13h-ticket {
  position: relative;
  width: min(100%, calc(var(--u) * 96));
  margin-inline: auto;
  padding: calc(var(--air) * 2.2) calc(var(--air) * 3.2) calc(var(--air) * 1.8 + 26px);
  opacity: 0;
  animation: hb2Card 460ms 220ms var(--ease-spring) forwards;
}
/* שוליים מחוררים (המפרט): נקודות radial-gradient לאורך שני הקצוות —
   ציור עדין של ניקוב כרטיס, לא חורים אמיתיים. Perforation dots, drawn. */
.s13h-ticket::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(161, 98, 7, .22) 1.8px, transparent 2.4px),
    radial-gradient(circle at 50% 50%, rgba(161, 98, 7, .22) 1.8px, transparent 2.4px);
  background-size: 7px 13px, 7px 13px;
  background-repeat: repeat-y, repeat-y;
  background-position: right 7px top 10px, left 7px top 10px;
}

/* שם האירוע — כותרת הכרטיס, עם קו-ניקוב מפריד */
.s13h-name {
  font-size: calc(var(--fs-body) * 1.16);
  letter-spacing: .04em;
  text-align: center;
  color: var(--lw-ink-strong);
  padding-bottom: calc(var(--air) * 1.2);
  margin-bottom: calc(var(--air) * 1.4);
  border-bottom: 1px dashed rgba(217, 188, 126, .8);
}

/* ═══ ההטבעה: כל פרט "נחתם" — נחיתה מסקייל + הבזק-חותמת קטן ═══ */
.s13h-name, .s13h-frow, .s13h-whattitle, .s13h-wrow {
  opacity: 0;
  animation: s13hStamp 380ms var(--ease-enter) forwards;
  animation-delay: calc(560ms + var(--i) * var(--stagger) * 4);
}
@keyframes s13hStamp {
  from { opacity: 0; transform: scale(1.32); }
  62%  { opacity: 1; transform: scale(.985); }
  to   { opacity: 1; transform: none; }
}
.s13h-frow, .s13h-wrow { position: relative; }
.s13h-frow::after, .s13h-wrow::after {
  content: ''; position: absolute; inset: -5px -7px; border-radius: 10px;
  pointer-events: none;
  background: radial-gradient(60% 90% at 50% 50%, rgba(255, 243, 220, .85), transparent 72%);
  opacity: 0;
  animation: s13hFlash 440ms ease-out;
  animation-delay: calc(560ms + var(--i) * var(--stagger) * 4);
}
@keyframes s13hFlash { 0% { opacity: 0; } 30% { opacity: .8; } 100% { opacity: 0; } }

/* שלב א — העובדות: מפתח זהב מימין, ערך דיו; תת-שורות מתחת לערך */
.s13h-facts, .s13h-what {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: calc(var(--air) * 1.35);
}
.s13h-frow {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: calc(var(--air) * 1.7);
  align-items: baseline;
}
.s13h-fk {
  font-size: calc(var(--fs-micro) * 1.06);
  letter-spacing: .03em;
  color: var(--lw-gold-text);
}
.s13h-fv {
  font-size: calc(var(--fs-body) * .95);
  line-height: 1.4;
  color: var(--lw-ink-strong);
}
.s13h-fsub {
  grid-column: 2;
  display: block;
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--lw-ink);
  opacity: .85;
}

/* שלב ב — מה מחכה בערב: יהלום זהב קטן לכל שורה (פריט ראשון מימין — RTL) */
.s13h-whattitle {
  margin: 0 0 calc(var(--air) * 1.5);
  font-size: calc(var(--fs-body) * 1.04);
  color: var(--lw-ink-strong);
  text-align: center;
}
.s13h-wrow {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: calc(var(--air) * 1.5);
  align-items: start;
}
.s13h-wdot {
  width: 7px; height: 7px; margin-top: .5em;
  transform: rotate(45deg);
  border-radius: 1.5px;
  background: linear-gradient(135deg, var(--lw-gold-line), var(--lw-gold-text));
}
.s13h-wtext {
  font-size: calc(var(--fs-body) * .92);
  line-height: 1.45;
  color: var(--lw-ink);
}

/* ═══ החותמת: עיגול זהב עם קרני-דיו — CSS בלבד, בלי מילים (הקופי קדוש) ═══ */
.s13h-seal {
  position: absolute;
  bottom: calc(var(--air) * 1.1);
  inset-inline-end: calc(var(--air) * 1.8);
  width: clamp(38px, calc(var(--u) * 13), 54px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(161, 98, 7, .5);
  opacity: 0;
  transform: scale(1.7) rotate(-18deg);
  pointer-events: none;
}
.s13h-seal::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  border: 1px solid rgba(161, 98, 7, .38);
  background: repeating-conic-gradient(from 8deg, rgba(161, 98, 7, .3) 0 5deg, transparent 5deg 24deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40% 72%, transparent 74%);
  mask: radial-gradient(circle, transparent 38%, #000 40% 72%, transparent 74%);
}
.s13h-seal::after {
  content: ''; position: absolute; inset: 34%;
  transform: rotate(45deg);
  border-radius: 2px;
  background: rgba(161, 98, 7, .4);
}
.s13h-seal.on { animation: s13hSeal 460ms var(--ease-spring) forwards; }
@keyframes s13hSeal {
  from { opacity: 0; transform: scale(1.7) rotate(-18deg); }
  70%  { opacity: .95; transform: scale(.94) rotate(-8deg); }
  to   { opacity: .9;  transform: rotate(-10deg); }
}

/* כפתורי s13 — העיכוב (--bd) מוזרק מה-JS לפי מספר ההטבעות בשלב */
.s13h-ctaSlot { display: grid; justify-items: center; }
.s13h-btn { opacity: 0; animation: riseIn 440ms var(--bd, 2600ms) var(--ease-enter) forwards; }

/* ═══ נגישות (חוק 6): reduced-motion — הכול נוכח, בלי תנועה ═══ */
@media (prefers-reduced-motion: reduce) {
  .s11h .lw-title, .s11h-letter, .s11h-line, .s11h .lw-btn,
  .s13h .lw-title, .s13h-ticket, .s13h-name, .s13h-frow,
  .s13h-whattitle, .s13h-wrow, .s13h-btn {
    animation: none; opacity: 1;
  }
  .s13h-frow::after, .s13h-wrow::after { animation: none; }
  .s11h-goldline, .s11h-sign.write .s11h-goldline { transition: none; transform: scaleX(1); }
  .s11h-quill, .s11h-sign.write .s11h-quill {
    opacity: 1; transition: none;
    transform: translateX(calc(var(--run, 0px) * -1)) rotate(-9deg);
  }
  .s13h-seal { opacity: .9; transform: rotate(-10deg); }
  .s13h-seal.on { animation: none; }
}