/* ============================================================
   הקול שלי ברשת · voice.css · v52 · "הנחל" בשפה החדשה
   ציר אחד יורד מלמעלה למטה. כל רגע יושב בשורה משלו, לסירוגין מימין
   ומשמאל, והנקודה וקו החיבור שלו הם חלק מהכרטיס עצמו (CSS), כך שהם
   תמיד מיושרים לציר: בלי מדידות ב-JS, בלי תלות בטעינת תמונות או פונטים.
   מדיה לפי היחס האמיתי: רחב 16:9 גדול, אנכי 9:16 במסגרת טלפון, ריבוע/4:3 רגיל.
   ============================================================ */
.evo {
  --era: var(--gold);
  --photo: var(--paper);           /* מסגרת התמונות האישיות */
  --axis: 120px;                   /* עמודת הציר בדסקטופ */
  --hook: 10px;                    /* גובה הנקודה: אמצע שורת התאריך */
  --rail-w: 3px;
  --lift: 120px;                   /* כמה כל רגע עולה לצד הקודם (זיגזג) */
  background: var(--night);
  color: var(--text);
}

/* ── הפתיחה ── */
.evo-hero { position: relative; padding: calc(var(--nav-h) + clamp(56px, 9vw, 120px)) 0 clamp(30px, 5vw, 60px); text-align: center; background: radial-gradient(60% 50% at 50% 10%, rgba(91, 45, 142, .35), transparent 70%), var(--night); }
.evo-hero__inner { display: grid; justify-items: center; }
.evo-hero .title { font-family: var(--f-brand); font-weight: 900; font-size: var(--fs-hero); line-height: .98; }
.evo-hero__thesis { margin-top: clamp(26px, 4vw, 44px); max-width: 30ch; font-family: var(--f-brand); font-weight: 700; font-size: clamp(1.5rem, 2.9vw, 2.6rem); line-height: 1.2; color: #fff; text-wrap: balance; }
.evo-hero__dots { color: var(--gold); letter-spacing: .1em; }
.evo-hero .lede { margin-top: 22px; max-width: 56ch; font-family: var(--f-text); }
.evo-hero__go { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(28px, 4vw, 44px); font-family: var(--f-text); font-weight: 600; color: var(--gold); }
.evo-hero__go i { width: 2px; height: 44px; background: linear-gradient(180deg, var(--gold), transparent); animation: go-drip 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes go-drip { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ── הציר: קו אחד לכל אורך הסיפור. מרכזו = מרכז עמודת הציר ── */
.rv { position: relative; --rail-x: 50%; }
.rv__rail { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--rail-x); width: var(--rail-w); margin-left: calc(var(--rail-w) / -2); background: rgba(206, 214, 255, .14); pointer-events: none; }
.rv__fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--gold), var(--ember)); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
.rv__ember { position: absolute; left: 50%; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle, #fff6c8 0%, var(--gold) 45%, var(--ember) 72%, transparent 74%); box-shadow: 0 0 16px 5px rgba(245, 200, 66, .55); transform: translateY(calc(var(--p, 0) * var(--rvh, 0px))); opacity: var(--ember-on, 0); transition: opacity .3s; will-change: transform; }
.no-live .rv__fill { transform: none; }
.no-live .rv__ember { display: none; }

/* השנה הנוכחית, צפה בצד */
.rv__year { position: sticky; top: calc(var(--nav-h) + 16px); z-index: 6; height: 0; padding-left: clamp(12px, 2vw, 32px); direction: ltr; text-align: left; pointer-events: none; font-family: var(--f-brand); font-weight: 900; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1; color: var(--gold); text-shadow: 3px 3px 0 var(--ink); }
.rv__year.is-tick { animation: year-tick .5s var(--ease); }
@keyframes year-tick { 0% { transform: translateY(8px); opacity: .3; } 100% { transform: none; opacity: 1; } }
.no-live .rv__year { display: none; }

/* ── תחנה: רקע משלה, כותרת על הציר ── */
.rv-ch { position: relative; padding: clamp(26px, 3.4vw, 54px) 0 clamp(8px, 1.2vw, 18px); }   /* v52: הודק */
.rv-ch__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg, none); }
/* תמונה זעירה מטושטשת מראש (96px) שנמתחת: נראית מטושטשת בלי filter: blur על שכבה ענקית */
.rv-ch__bg i { position: absolute; inset: 0; background: var(--bg-img) center / cover no-repeat; opacity: var(--bg-op, .16); -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.rv-ch__head { position: relative; z-index: 2; width: min(100% - 32px, 620px); margin: 0 auto clamp(16px, 2vw, 28px); padding: clamp(16px, 2vw, 26px) clamp(18px, 2.6vw, 30px); text-align: center; border-radius: var(--r-lg); background: var(--night-2); border: var(--stroke) solid color-mix(in srgb, var(--era) 70%, var(--ink)); box-shadow: var(--hard-lg); }
.rv-ch__logo { display: block; width: 120px; height: auto; margin: 0 auto 10px; opacity: .9; }
.rv-ch__year { display: block; font-family: var(--f-brand); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1; color: var(--era); direction: ltr; text-shadow: 3px 4px 0 var(--ink); }
.rv-ch__title { margin-top: 6px; font-family: var(--f-brand); font-weight: 900; font-size: var(--fs-h2); line-height: 1.04; color: #fff; text-wrap: balance; }
.rv-ch__text { margin-top: 8px; font-family: var(--f-text); font-size: clamp(1rem, 1.1vw, 1.08rem); line-height: 1.7; color: #dcdcf4; text-wrap: pretty; }
.rv-ch__tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.rv-ch__tools::before { content: 'בארגז הכלים'; flex-basis: 100%; font-family: var(--f-text); font-size: .78rem; font-weight: 600; letter-spacing: .08em; color: var(--faint); }
.rv-ch__tools li { padding: .3em .8em; border-radius: var(--r-pill); font-family: var(--f-text); font-weight: 600; font-size: .84rem; color: var(--ink); background: color-mix(in srgb, var(--era) 85%, #fff); border: 2px solid var(--ink); }
.rv-ch.is-lit .rv-ch__head { border-color: var(--era); }

/* ── הרגעים: שורה לכל רגע, לסירוגין, כל אחד קצת עולה לצד הקודם ── */
/* עמודה אחת (flex) ולא grid: ב-grid שני רגעים עוקבים נכנסו לאותה שורה וסדר הנקודות נשבר */
.rv-ch__list { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 24px; width: var(--wrap); margin-inline: auto; }
.mo { position: relative; width: min(var(--w, 420px), 50% - var(--axis) / 2); margin-inline: auto calc(50% + var(--axis) / 2); }   /* RTL: ימין לציר */
.mo--l { margin-inline: calc(50% + var(--axis) / 2) auto; }   /* שמאל לציר */
.mo + .mo { margin-top: calc(var(--lift) * -1); }            /* זיגזג: כל נקודה עדיין נמוכה מהקודמת */
/* החיבור לציר: קו + נקודה, מקובעים לקצה הכרטיס שפונה לציר */
.mo::before, .mo::after { content: ''; position: absolute; top: var(--hook); pointer-events: none; }
.mo::before { inset-inline-end: calc(var(--axis) / -2); width: calc(var(--axis) / 2); height: 2px; margin-top: -1px; background: rgba(206, 214, 255, .2); transition: background .5s; }
.mo::after { z-index: 3; box-sizing: border-box; inset-inline-end: calc(var(--axis) / -2 - 6px); width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--night); border: 2.5px solid rgba(206, 214, 255, .45); transition: background .4s, border-color .4s, transform .4s var(--ease); }
.mo--l::before { inset-inline-end: auto; inset-inline-start: calc(var(--axis) / -2); }
.mo--l::after { inset-inline-end: auto; inset-inline-start: calc(var(--axis) / -2 - 6px); }
.mo--big::after { width: 16px; height: 16px; margin-top: -8px; inset-inline-end: calc(var(--axis) / -2 - 8px); }
.mo--l.mo--big::after { inset-inline-end: auto; inset-inline-start: calc(var(--axis) / -2 - 8px); }
.mo.is-lit::before { background: color-mix(in srgb, var(--era) 70%, transparent); }
.mo.is-lit::after { background: var(--era); border-color: var(--ink); }
.mo.is-now::after { transform: scale(1.35); }

/* רוחב לפי סוג ויחס */
.mo--wide { --w: 440px; }
.mo--big.mo--wide { --w: 100vw; }
.mo--square { --w: 320px; }
.mo--big.mo--square { --w: 440px; }
.mo--tall { --w: min(230px, 40vh); }
.mo--big.mo--tall { --w: min(280px, 44vh); }
.mo--photo.mo--tall { --w: 260px; }
.mo--note { --w: 460px; }
.mo--r .mo__date, .mo--r .mo__title, .mo--r .mo__text { text-align: end; }      /* הטקסט נצמד לצד של הציר */

.mo__date { display: block; height: calc(var(--hook) * 2); margin-bottom: 8px; font-family: var(--f-text); font-weight: 700; font-size: .8rem; line-height: calc(var(--hook) * 2); letter-spacing: .04em; color: var(--faint); white-space: nowrap; transition: color .4s; }
.mo.is-lit .mo__date { color: var(--era); }
.mo__media { position: relative; display: block; margin: 0; overflow: hidden; border-radius: var(--r); background: #000; border: 1.5px solid rgba(206, 214, 255, .16); box-shadow: var(--soft); transition: transform .45s var(--ease), border-color .3s; }
.mo__media img { display: block; width: 100%; height: auto; object-fit: cover; }
.mo--wide .mo__media img { aspect-ratio: 16 / 9; }
.mo--tall .mo__media img { aspect-ratio: 9 / 16; }
/* אנכי: מסגרת טלפון */
.mo--tall .mo__media:not(.mo__media--photo) { border-radius: 26px; border: 6px solid var(--ink); box-shadow: 0 0 0 1.5px rgba(206, 214, 255, .22), var(--soft); }
.mo--tall .mo__media:not(.mo__media--photo)::before { content: ''; position: absolute; z-index: 2; top: 7px; left: 33%; width: 34%; height: 5px; border-radius: 9px; background: var(--ink); opacity: .85; }
/* רגע גדול: מסגרת קומיקס (קו דיו + צל קשיח בצבע התקופה), במשורה */
.mo--big .mo__media { border: var(--stroke) solid var(--ink); box-shadow: 6px 7px 0 color-mix(in srgb, var(--era) 75%, var(--ink)); }
.mo--big.mo--tall .mo__media:not(.mo__media--photo) { border-width: 6px; box-shadow: 6px 7px 0 color-mix(in srgb, var(--era) 75%, var(--ink)); }
/* תמונות אישיות: נייר */
.mo__media--photo { padding: 8px; background: var(--photo); border: 0; border-radius: 6px; box-shadow: 5px 6px 0 var(--ink); rotate: -1.5deg; }
.mo--l .mo__media--photo { rotate: 1.5deg; }
.mo__media--photo img { border-radius: 3px; }
a.mo__media:hover, a.mo__media:focus-visible { transform: translateY(-4px); border-color: var(--era); }
.mo__play { position: absolute; z-index: 3; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--era) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a0b22'><path d='M8 5.5v13l11-6.5z'/></svg>") center/24px no-repeat; box-shadow: 3px 4px 0 var(--ink); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .35s var(--ease); }
a.mo__media:hover .mo__play, a.mo__media:focus-visible .mo__play { opacity: 1; transform: scale(1); }
@media (hover: none) { .mo__play { opacity: .92; transform: scale(.85); } }
.mo__views { position: absolute; z-index: 3; top: 10px; inset-inline-end: 10px; padding: .25em .6em; border-radius: var(--r-pill); background: var(--ink); border: 1.5px solid var(--gold); font-style: normal; font-family: var(--f-text); font-weight: 700; font-size: .74rem; color: var(--gold); direction: ltr; }
.mo--tall .mo__views { top: 18px; }
.mo__title { margin-top: 12px; font-family: var(--f-text); font-weight: 600; font-size: 1rem; line-height: 1.35; color: #fff; }
.mo--big .mo__title { font-family: var(--f-brand); font-weight: 900; font-size: var(--fs-h3); line-height: 1.12; }
.mo__text { margin-top: 6px; font-family: var(--f-text); font-size: .92rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.mo--big .mo__text { margin-top: 10px; font-size: clamp(1rem, 1.1vw, 1.06rem); line-height: 1.7; color: #dcdcf4; }
.mo--note .mo__card { padding: 22px 24px; border-radius: var(--r); border: var(--stroke) solid var(--ink); background: var(--paper); box-shadow: 6px 7px 0 var(--era); }
.mo--note .mo__title { margin-top: 0; color: var(--paper-ink); }
.mo--note .mo__text { font-family: var(--f-brand); font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; color: var(--paper-ink); }
.mo--link .mo__media { border-color: var(--gold); }
.mo.is-now .mo__media:not(.mo__media--photo) { border-color: var(--era); }

/* כניסה עדינה (רק כש-JS פעיל ואין "פחות תנועה"): opacity + translate בלבד */
.vo-anim .mo:not(.is-in) .mo__card { opacity: 0; translate: 0 26px; }
.vo-anim .mo .mo__card { transition: opacity .8s var(--ease), translate .9s var(--ease); }

/* ── סמן שנה על הציר ── */
.rv-yr { position: relative; z-index: 4; align-self: center; margin: 6px 0; }
.rv-yr b { display: inline-block; padding: .12em .55em .05em; border-radius: var(--r-sm); font-family: var(--f-brand); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; color: var(--ink); background: var(--era); border: var(--stroke) solid var(--ink); box-shadow: var(--hard); rotate: -2deg; direction: ltr; }

/* ── צבעי התחנות (כל תקופה שומרת על מצב הרוח שלה) ── */
.rv-ch--kid { --era: #ffb34a; --bg: linear-gradient(180deg, var(--night), #2a1633 25%, #3a1d2b 75%, #1a0f2a); --bg-img: url(../assets/voice/bg/kid.webp); }
.rv-ch--army { --era: #e9b35a; --photo: #ece4d2; --bg: linear-gradient(180deg, #1a0f2a, #0d0b10 20%, #120d0c 80%, #0a0a16); --bg-img: url(../assets/voice/bg/army.webp); --bg-op: .1; }
.rv-ch--viral { --era: #ff4d6d; --bg: linear-gradient(180deg, #0a0a16, #2b0a1e 30%, #3d0f2a 70%, #140a22); --bg-img: url(../assets/voice/bg/viral.webp); --bg-op: .22; }
.rv-ch--iac { --era: var(--teal-hi); --bg: linear-gradient(180deg, #140a22, #0b1e3f 20%, #0e2a52 80%, #0b1530); --bg-img: url(../assets/voice/bg/iac.webp); --bg-op: .16; }
.rv-ch--pro { --era: #e8c26a; --bg: linear-gradient(180deg, #0b1530, #17130a 25%, #0a0805 80%, #140e18); --bg-img: url(../assets/voice/bg/pro.webp); --bg-op: .2; }
.rv-ch--social { --era: #ff8a3d; --bg: linear-gradient(180deg, #140e18, #3a1a3d 25%, #4a1f2e 70%, #2b1a06); --bg-img: url(../assets/voice/bg/social.webp); --bg-op: .22; }
.rv-ch--lego { --era: #f6c531; --bg: linear-gradient(180deg, #2b1a06, #3d2a06 20%, #5a3410 70%, #16042a); --bg-img: url(../assets/voice/bg/lego.webp); --bg-op: .2; }
.rv-ch--ai { --era: #ff3fd0; --bg: linear-gradient(180deg, #16042a, #22063a 50%, #2a1410); --bg-img: url(../assets/voice/bg/ai.webp); --bg-op: .16; }
.rv-ch--voice { --era: #ffb17a; --bg: linear-gradient(180deg, #2a1410, #3a1e14 25%, #4d2a1a 70%, var(--night)); --bg-img: url(../assets/voice/bg/voice.webp); --bg-op: .22; }
.rv-ch--voice .rv-ch__title { font-size: var(--fs-h1); }

/* ── ההתכנסות ── */
.conv { position: relative; z-index: 2; height: 160vh; }
.conv__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; background: radial-gradient(50% 50% at 50% 55%, rgba(245, 200, 66, .12), transparent 70%); }
.conv__cloud { position: absolute; inset: 0; }
.conv__w { position: absolute; left: 50%; top: 50%; font-family: var(--f-brand); font-weight: 900; font-size: clamp(1.3rem, 3vw, 2.6rem); color: #fff; white-space: nowrap; transform: translate(-50%, -50%); will-change: transform, opacity; }
.conv__w:nth-child(3n) { color: var(--gold); } .conv__w:nth-child(3n+1) { color: var(--teal-hi); }
.conv__center { position: relative; z-index: 5; text-align: center; max-width: 40ch; padding: 0 20px; opacity: 0; transform: scale(.86); will-change: transform, opacity; }
.conv__kicker { display: block; font-family: var(--f-text); font-weight: 600; letter-spacing: .1em; font-size: .9rem; color: var(--muted); }
.conv__title { margin-top: 12px; font-family: var(--f-brand); font-weight: 900; font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1; color: #fff; text-shadow: 4px 5px 0 var(--ink); }
.conv__thesis { margin-top: 22px; font-family: var(--f-brand); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.7rem); line-height: 1.3; color: rgba(255, 255, 255, .6); }
.conv__thesis b { display: block; margin-top: .4em; color: var(--gold); opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease) .1s, transform .8s var(--ease) .1s; }
.conv__center.is-on .conv__thesis b { opacity: 1; transform: none; }

/* ── הסגירה ── */
.close { position: relative; z-index: 2; padding: clamp(60px, 8vw, 120px) 0 clamp(80px, 10vw, 140px); text-align: center; background: var(--night); }
.close__inner { display: grid; justify-items: center; gap: clamp(28px, 4vw, 48px); }
.close__map { max-width: 62ch; }
.close__map p { font-family: var(--f-brand); font-weight: 700; font-size: clamp(1.25rem, 2.1vw, 1.9rem); line-height: 1.4; color: #fff; }
.close__map p + p { margin-top: 26px; }
.close__client { font-family: var(--f-text) !important; font-weight: 400 !important; font-size: clamp(1.02rem, 1.25vw, 1.16rem) !important; line-height: 1.8 !important; color: #dcdcf4 !important; }
.close__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ── הנגן ── */
.vc-player { position: fixed; inset: 0; z-index: 2600; display: grid; place-items: center; padding: 4vw; background: rgba(6, 8, 26, .94); opacity: 0; pointer-events: none; transition: opacity .35s; }
.vc-player.is-open { opacity: 1; pointer-events: auto; }
.vc-player > div { width: min(1080px, 100%); }
.vc-player.is-portrait > div { width: min(420px, 100%); }
.vc-player__box { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r); overflow: hidden; border: var(--stroke) solid var(--ink); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 1); }
.vc-player.is-portrait .vc-player__box { aspect-ratio: 9 / 16; max-height: 86vh; }
.vc-player__box .ytstage { position: absolute; inset: 0; height: 100%; max-height: none; aspect-ratio: auto; }
.vc-player__cap { margin-top: 14px; text-align: center; font-family: var(--f-text); color: var(--muted); }
.vc-player__x { position: absolute; top: 18px; inset-inline-end: 18px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); background: var(--night-2); color: #fff; font-size: 1.4rem; cursor: pointer; }

/* ── טאבלט ── */
@media (max-width: 1000px) {
  .evo { --axis: 80px; --lift: 90px; }
  .mo--wide { --w: 100vw; }
  .mo--square { --w: 280px; }
}
/* ── טלפון: הציר בצד ימין, כל הרגעים בעמודה אחת משמאלו ── */
@media (max-width: 720px) {
  .evo { --axis: 0px; --lift: 0px; --rail-gap: 24px; --pad: 50px; }
  .rv { --rail-x: calc(100% - var(--rail-gap)); }
  .rv-ch__list { width: auto; margin: 0; padding-inline: var(--pad) 16px; gap: 22px; }
  .mo, .mo--l { margin-inline: 0; width: 100%; }
  .mo--tall, .mo--big.mo--tall { width: min(100%, 62vw, 270px); }
  .mo--square, .mo--photo { width: min(100%, 300px); }
  .mo--photo.mo--tall { width: min(100%, 64vw, 260px); }
  /* החיבור: מהקצה הימני של הכרטיס אל הציר */
  .mo::before, .mo--l::before { inset-inline-end: auto; inset-inline-start: calc((var(--pad) - var(--rail-gap)) * -1); width: calc(var(--pad) - var(--rail-gap)); }
  .mo::after, .mo--l::after { inset-inline-end: auto; inset-inline-start: calc((var(--pad) - var(--rail-gap)) * -1 - 6px); }
  .mo--big::after, .mo--l.mo--big::after { inset-inline-end: auto; inset-inline-start: calc((var(--pad) - var(--rail-gap)) * -1 - 8px); }
  .mo--r .mo__date, .mo--r .mo__title, .mo--r .mo__text { text-align: start; }
  .mo__media--photo, .mo--l .mo__media--photo { rotate: 0deg; }
  .mo--big .mo__media, .mo--big.mo--tall .mo__media:not(.mo__media--photo) { box-shadow: 4px 5px 0 color-mix(in srgb, var(--era) 75%, var(--ink)); }
  .rv-ch__head { width: auto; margin-inline: var(--pad) 16px; box-shadow: var(--hard); }
  .rv-yr { align-self: flex-start; }
  .rv-yr b { font-size: 1.5rem; }
  .rv__year { display: none; }   /* בטלפון סמני השנה על הציר מספיקים; הצף כיסה את פינת המדיה */
  .conv { height: 140vh; }
  .conv__w { font-size: 1.2rem; }
}
/* ── פחות תנועה ── */
@media (prefers-reduced-motion: reduce) { .evo-hero__go i, .rv__year.is-tick { animation: none !important; } .conv { height: auto; } .conv__stage { position: static; height: auto; min-height: 60vh; padding: 60px 0; } }
html.reduce-motion .evo-hero__go i { animation: none !important; }
html.reduce-motion .conv { height: auto; }
html.reduce-motion .conv__stage { position: static; height: auto; min-height: 60vh; padding: 60px 0; }

/* ============================================================
   v51 · תנועה (2026-10-19)
   1. רקע קבוע אחד לכל הדף, שכבה לכל תקופה: קולאז' זעיר מטושטש מראש מתמונות
      התקופה + תמונת מפתח + שנה ענקית + אור + אבק. מעבר בין תקופות = opacity בלבד,
      פרלקסה = transform בלבד (נכתב רק לשכבה הפעילה). בלי filter על שכבות גדולות.
      התמונות: assets/voice/scene (research/v50/voice-motion/make_scenes.py).
   2. כניסות קפיציות לכרטיסים, לכותרות התחנות ולסמני השנה.
   3. הסוף: "צילום גיבור" עם דניאל במרכז ועבודות מכל התקופות סביבו.
   ============================================================ */

/* ── 1. הרקע המשתנה ── */
.vbg { display: none; }
.has-vbg .vbg { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; transition: opacity .8s var(--ease-in-out); }
.has-vbg .vbg.is-off { opacity: 0; }
.has-vbg .evo-hero, .has-vbg .rv, .has-vbg .evo > .next-wrap { position: relative; z-index: 1; }
.has-vbg .rv-ch__bg { display: none; }
.has-vbg .evo-hero { background: radial-gradient(60% 50% at 50% 10%, rgba(91, 45, 142, .35), transparent 70%); }
.has-vbg .close { background: linear-gradient(180deg, transparent, rgba(12, 16, 48, .72) 30%, rgba(12, 16, 48, .72)); }
.vbg__l { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.3s var(--ease-in-out), visibility 0s 1.3s; }
.vbg__l.is-on { opacity: 1; visibility: visible; transition: opacity 1.3s var(--ease-in-out), visibility 0s; }
.vbg__l::before { content: ''; position: absolute; inset: 0; z-index: 2; background: radial-gradient(55% 45% at 78% 8%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%), radial-gradient(45% 40% at 12% 92%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); animation: vbg-breathe 9s ease-in-out infinite alternate; animation-play-state: paused; }
.vbg__l.is-on::before { animation-play-state: running; }
@keyframes vbg-breathe { from { opacity: .55; } to { opacity: 1; } }
.vbg__far { position: absolute; inset: -6%; background: var(--night) center / cover no-repeat; opacity: .72; scale: 1.14; transition: scale 2.8s var(--ease); will-change: transform; }
.vbg__l.is-on .vbg__far { scale: 1.04; }
.vbg__near { position: absolute; z-index: 1; top: 8%; inset-inline-start: -6%; width: min(52vmax, 820px); aspect-ratio: 1; background: center / contain no-repeat; opacity: 0; scale: .86; transition: opacity 1.6s var(--ease) .25s, scale 2.4s var(--ease) .1s; will-change: transform; }
.vbg__l:nth-child(even) .vbg__near { inset-inline-start: auto; inset-inline-end: -6%; top: 22%; }
.vbg__l.is-on .vbg__near { opacity: .34; scale: 1; }
.vbg__yr { position: absolute; z-index: 1; bottom: -3vw; inset-inline-end: -1vw; font-family: var(--f-brand); font-weight: 900; font-size: clamp(9rem, 30vw, 30rem); line-height: .8; letter-spacing: -.02em; direction: ltr; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--c) 55%, transparent); opacity: .32; translate: 0 8vh; transition: translate 1.8s var(--spring); will-change: transform; }
.vbg__l:nth-child(even) .vbg__yr { inset-inline-end: auto; inset-inline-start: -1vw; }
.vbg__l.is-on .vbg__yr { translate: 0 0; }
[data-vbg-era="kid"] { --c: #ffb34a; } [data-vbg-era="army"] { --c: #e9b35a; } [data-vbg-era="viral"] { --c: #ff4d6d; }
[data-vbg-era="iac"] { --c: #86dbe6; } [data-vbg-era="pro"] { --c: #e8c26a; } [data-vbg-era="social"] { --c: #ff8a3d; }
[data-vbg-era="lego"] { --c: #f6c531; } [data-vbg-era="ai"] { --c: #ff3fd0; } [data-vbg-era="voice"] { --c: #ffb17a; }
/* אור שעובר לאט ואבק זהב: transform בלבד, ציור פעם אחת */
.vbg__light { position: absolute; z-index: 3; left: -30%; top: -30%; width: 90vmax; height: 90vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 236, 190, .07), transparent); animation: vbg-sweep 38s ease-in-out infinite alternate; will-change: transform; }
@keyframes vbg-sweep { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(70vw, 40vh, 0); } }
.vbg__dust { position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 200%; opacity: .55;
  background-image: radial-gradient(1.6px 1.6px at 20px 30px, rgba(255, 230, 170, .9), transparent), radial-gradient(1.2px 1.2px at 140px 190px, rgba(255, 255, 255, .7), transparent), radial-gradient(2px 2px at 260px 90px, rgba(255, 210, 140, .6), transparent), radial-gradient(1.2px 1.2px at 330px 260px, rgba(255, 255, 255, .5), transparent);
  background-size: 360px 300px; animation: vbg-dust 70s linear infinite; will-change: transform; }
.vbg__dust--2 { opacity: .35; background-size: 520px 470px; animation-duration: 110s; animation-direction: reverse; }
@keyframes vbg-dust { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
.vbg__vig { position: absolute; inset: 0; z-index: 4; background: radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(6, 8, 26, .7) 100%), linear-gradient(180deg, rgba(12, 16, 48, .5), rgba(12, 16, 48, .22) 30%, rgba(12, 16, 48, .22) 70%, rgba(12, 16, 48, .55)); }

/* ── 2. כניסות קפיציות ── */
.vo-anim .mo:not(.is-in) .mo__card { opacity: 0; translate: 46px 34px; rotate: 2.5deg; scale: .93; }
.vo-anim .mo--l:not(.is-in) .mo__card { translate: -46px 34px; rotate: -2.5deg; }
.vo-anim .mo .mo__card { transition: opacity .6s var(--ease), translate 1.05s var(--spring), rotate 1.05s var(--spring), scale 1.05s var(--spring); }
.vo-anim .mo:not(.is-in) .mo__date { opacity: 0; translate: 0 10px; }
.vo-anim .mo .mo__date { transition: opacity .5s var(--ease) .15s, translate .6s var(--ease) .15s, color .4s; }
.vo-anim .rv-ch__head { transition: opacity .7s var(--ease), translate 1.15s var(--spring), scale 1.15s var(--spring), rotate 1.15s var(--spring), border-color .4s; }
.vo-anim .rv-ch__head:not(.is-in) { opacity: 0; translate: 0 70px; scale: .88; rotate: -2.5deg; }
.vo-anim .rv-ch__year { transition: translate 1.1s var(--spring) .12s, opacity .6s .12s; }
.vo-anim .rv-ch__head:not(.is-in) .rv-ch__year { opacity: 0; translate: 0 -30px; }
.vo-anim .rv-ch__tools li { transition: opacity .4s calc(.35s + var(--k, 0) * 70ms), scale .7s var(--spring) calc(.35s + var(--k, 0) * 70ms); }
.vo-anim .rv-ch__head:not(.is-in) .rv-ch__tools li { opacity: 0; scale: .4; }
.vo-anim .rv-yr b { transition: opacity .35s, scale .9s var(--spring), rotate .9s var(--spring); }
.vo-anim .rv-yr:not(.is-in) b { opacity: 0; scale: 1.9; rotate: -14deg; }
.mo.is-now::after { animation: dot-pulse 1.8s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { transform: scale(1.35); } 50% { transform: scale(1.75); } }
.mo.is-now .mo__media:not(.mo__media--photo) { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--era) 60%, transparent), 0 18px 50px -18px color-mix(in srgb, var(--era) 70%, transparent); }
.mo--big.is-now .mo__media:not(.mo__media--photo) { box-shadow: 6px 7px 0 color-mix(in srgb, var(--era) 75%, var(--ink)), 0 18px 60px -16px color-mix(in srgb, var(--era) 80%, transparent); }
@media (hover: hover) { a.mo__media:hover { transform: translateY(-6px) rotate(-.6deg) scale(1.015); } .mo--l a.mo__media:hover { transform: translateY(-6px) rotate(.6deg) scale(1.015); } }

/* ── 3. הסוף: צילום הגיבור ── */
.fin { position: relative; z-index: 2; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 130px); text-align: center;
  background: radial-gradient(70% 55% at 50% 42%, #2a1d4a 0%, #14113a 45%, #0a0b22 80%), #0a0b22; }
.fin::before { content: ''; position: absolute; inset: 0 0 auto; height: 160px; background: linear-gradient(180deg, rgba(12, 16, 48, .9), transparent); pointer-events: none; }
.fin__stage { position: relative; width: min(1240px, 100% - 32px); height: clamp(600px, 86vh, 860px); margin-inline: auto; }
.fin__fx { position: absolute; inset: -10% -20% 0; pointer-events: none; }
.fin__rays { position: absolute; left: 50%; top: 46%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(245, 200, 66, .075) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, transparent 62%); mask-image: radial-gradient(closest-side, #000 8%, transparent 62%);
  animation: fin-spin 140s linear infinite; will-change: transform; }
@keyframes fin-spin { to { transform: rotate(360deg); } }
.fin__glow { position: absolute; left: 50%; top: 50%; width: min(980px, 130vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 200, 66, .42), rgba(232, 116, 59, .18) 45%, rgba(91, 45, 142, .12) 70%, transparent); animation: fin-breathe 6s ease-in-out infinite alternate; }
@keyframes fin-breathe { from { opacity: .75; scale: .94; } to { opacity: 1; scale: 1.04; } }
.fin__dots { position: absolute; inset: 0; background: radial-gradient(circle, rgba(245, 200, 66, .35) 1.4px, transparent 1.8px) 0 0 / 14px 14px; -webkit-mask-image: radial-gradient(40% 46% at 50% 50%, transparent 30%, #000 60%, transparent 92%); mask-image: radial-gradient(40% 46% at 50% 50%, transparent 30%, #000 60%, transparent 92%); opacity: .5; }
.fin__floor { position: absolute; left: 50%; bottom: 10%; width: min(820px, 120vw); height: 120px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 200, 66, .3), transparent); }
.fin__orbit, .fin__me { position: absolute; inset: 0; }
.fin__me { z-index: 3; pointer-events: none; }
.fin__me > .fin__float { position: absolute; left: 50%; bottom: 0; height: 94%; aspect-ratio: 686 / 1057; translate: -50% 0; }
.fin__me img { display: block; width: 100%; height: 100%; object-fit: contain;
  /* התמונה חתוכה בצד ובתחתית: שני מסכים (מלמטה ומהצדדים) כדי שהזרוע והגוף ייעלמו ברכות ולא בקו ישר */
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 98%), linear-gradient(90deg, transparent 0, #000 9%, #000 93%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 72%, transparent 98%), linear-gradient(90deg, transparent 0, #000 9%, #000 93%, transparent 100%); mask-composite: intersect;
  filter: drop-shadow(-3px -2px 0 rgba(255, 214, 110, .85)) drop-shadow(0 0 26px rgba(245, 200, 66, .35)); }
/* העבודות סביבו */
.fin__t { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: var(--tw, 220px); margin: 0; translate: -50% -50%; rotate: var(--r, 0deg); }
.fin__t .fin__float { position: relative; border-radius: 12px; border: 3px solid var(--ink); background: #000; box-shadow: 5px 6px 0 var(--tc, var(--gold)), 0 20px 40px -20px rgba(0, 0, 0, .9); }
.fin__t img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; }
.fin__t--s img { aspect-ratio: 1; } .fin__t--t img { aspect-ratio: 9 / 16; }
.fin__t figcaption { position: absolute; bottom: -12px; inset-inline-start: 10px; padding: .18em .6em .1em; border-radius: 7px; border: 2px solid var(--ink); background: var(--tc, var(--gold)); color: var(--ink); font-family: var(--f-brand); font-weight: 900; font-size: .92rem; line-height: 1.2; white-space: nowrap; rotate: -3deg; box-shadow: 2px 3px 0 var(--ink); }
.fin__t:nth-child(even) figcaption { inset-inline-start: auto; inset-inline-end: 10px; rotate: 3deg; }
/* מיקום: מרכז כל אריח באחוזים מהבמה, שתי עמודות בכל צד של דניאל */
.fin__t:nth-child(1)  { --x: 12%; --y: 17%; --r: -6deg; --tw: clamp(170px, 18vw, 250px); --tc: #86dbe6; }
.fin__t:nth-child(2)  { --x: 88%; --y: 16%; --r: 5deg;  --tw: clamp(170px, 18vw, 250px); --tc: #ff3fd0; }
.fin__t:nth-child(3)  { --x: 28%; --y: 39%; --r: 4deg;  --tw: clamp(120px, 12vw, 160px); --tc: #f6c531; }
.fin__t:nth-child(4)  { --x: 72%; --y: 37%; --r: -4deg; --tw: clamp(92px, 9vw, 122px);  --tc: #ff8a3d; }
.fin__t:nth-child(5)  { --x: 14%; --y: 74%; --r: 3deg;  --tw: clamp(160px, 17vw, 236px); --tc: #e8c26a; }
.fin__t:nth-child(6)  { --x: 71%; --y: 66%; --r: 6deg;  --tw: clamp(120px, 12vw, 160px); --tc: #86dbe6; }
.fin__t:nth-child(7)  { --x: 29%; --y: 63%; --r: -5deg; --tw: clamp(96px, 9.4vw, 128px); --tc: #ff4d6d; }
.fin__t:nth-child(8)  { --x: 86%; --y: 73%; --r: -4deg; --tw: clamp(160px, 17vw, 236px); --tc: #f5c842; }
.fin__t:nth-child(9)  { --x: 33%; --y: 9%;  --r: -3deg; --tw: clamp(120px, 11vw, 160px); --tc: #ff4d6d; }
.fin__t:nth-child(10) { --x: 67%; --y: 9%;  --r: 4deg;  --tw: clamp(120px, 11vw, 160px); --tc: #ffb34a; }
.fin__t:nth-child(11) { --x: 7%;  --y: 46%; --r: 2deg;  --tw: clamp(150px, 15vw, 210px); --tc: #ffb17a; }
.fin__t:nth-child(12) { --x: 93%; --y: 46%; --r: -2deg; --tw: clamp(150px, 15vw, 210px); --tc: #fff; }
/* ריחוף עדין בהמתנה: transform על עטיפה פנימית, בנפרד מהכניסה של GSAP */
.fin .fin__float { animation: fin-float var(--fd, 7s) ease-in-out calc(var(--i, 0) * -.9s) infinite alternate; will-change: transform; }
.fin__t:nth-child(3n) .fin__float { --fd: 8.5s; } .fin__t:nth-child(3n+1) .fin__float { --fd: 6.2s; }
@keyframes fin-float { from { transform: translate3d(0, -7px, 0) rotate(-.6deg); } to { transform: translate3d(0, 8px, 0) rotate(.6deg); } }
.fin .fin__float--me { animation: fin-float-me 4.5s ease-in-out infinite alternate; }
@keyframes fin-float-me { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -10px, 0); } }
/* קישוטי קומיקס */
.fin__pow { position: absolute; z-index: 4; pointer-events: none; fill: var(--gold); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.fin__pow--a { width: clamp(54px, 6vw, 84px); left: 57%; top: 1%; rotate: 12deg; }
.fin__pow--b { width: clamp(30px, 3vw, 42px); left: 37%; top: 24%; fill: #fff; }
.fin__pow--c { width: clamp(22px, 2.2vw, 30px); left: 58%; top: 52%; fill: var(--teal-hi); }
.fin__pow--b path, .fin__pow--c path { transform-origin: 50% 50%; animation: fin-twinkle 2.6s ease-in-out infinite alternate; }
.fin__pow--c path { animation-delay: -1.3s; }
@keyframes fin-twinkle { from { transform: scale(.7) rotate(0deg); } to { transform: scale(1.1) rotate(45deg); } }
/* הטקסט */
.fin__copy { position: relative; z-index: 5; margin-top: clamp(-70px, -4vw, -30px); display: grid; justify-items: center; }
.fin__kicker { display: inline-block; padding: .3em .9em; border-radius: var(--r-pill); border: 2px solid var(--ink); background: var(--gold); color: var(--ink); font-family: var(--f-text); font-weight: 700; font-size: .92rem; box-shadow: var(--hard); rotate: -2deg; }
.fin__title { margin-top: 18px; max-width: 16ch; font-family: var(--f-brand); font-weight: 900; font-size: clamp(2.5rem, 6.4vw, 5.6rem); line-height: 1; color: #fff; text-wrap: balance; text-shadow: 4px 5px 0 var(--ink), 0 0 40px rgba(245, 200, 66, .25); }
.fin__title em { font-style: normal; color: var(--gold); }
.fin__sub { margin-top: 18px; max-width: 52ch; font-family: var(--f-text); font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.7; color: #dcdcf4; text-wrap: balance; }
.fin__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }
.fin__more { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-family: var(--f-text); font-size: .95rem; color: var(--muted); }
.fin__more a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .fin__more a:hover { color: var(--gold); }

@media (max-width: 1000px) {
  .fin__t:nth-child(9), .fin__t:nth-child(10) { display: none; }
  .fin__t:nth-child(11) { --x: 9%; } .fin__t:nth-child(12) { --x: 91%; }
}
@media (max-width: 720px) {
  .vo-anim .mo:not(.is-in) .mo__card, .vo-anim .mo--l:not(.is-in) .mo__card { translate: -26px 26px; rotate: -1.5deg; }
  .vbg__near { width: 92vw; top: 14%; inset-inline-start: -20%; }
  .vbg__l:nth-child(even) .vbg__near { inset-inline-end: -20%; top: 30%; }
  .vbg__l.is-on .vbg__near { opacity: .3; }
  .vbg__yr { font-size: 44vw; -webkit-text-stroke-width: 1.5px; }
  .fin__stage { width: 100%; height: clamp(540px, 150vw, 640px); }
  .fin__me > .fin__float { height: 70%; }
  .fin__t--desk { display: none; }
  /* בטלפון התווית ממורכזת מתחת לאריח, כדי שלא תצא מהמסך באריחים שבקצוות */
  .fin__t figcaption, .fin__t:nth-child(even) figcaption { inset-inline: auto; left: 50%; translate: -50% 0; font-size: .72rem; bottom: -10px; border-width: 1.5px; }
  .fin__t .fin__float { border-width: 2px; border-radius: 9px; box-shadow: 3px 4px 0 var(--tc, var(--gold)); }
  .fin__t img { border-radius: 7px; }
  .fin__t:nth-child(1) { --x: 20%; --y: 9%;  --tw: 30vw; }
  .fin__t:nth-child(2) { --x: 80%; --y: 8%;  --tw: 30vw; }
  .fin__t:nth-child(3) { --x: 13%; --y: 31%; --tw: 21vw; }
  .fin__t:nth-child(4) { --x: 88%; --y: 31%; --tw: 15vw; }
  .fin__t:nth-child(5) { --x: 16%; --y: 53%; --tw: 26vw; }
  .fin__t:nth-child(6) { --x: 49%; --y: 9%;  --tw: 19vw; }
  .fin__t:nth-child(7) { --x: 88%; --y: 57%; --tw: 15vw; }
  .fin__t:nth-child(8) { --x: 82%; --y: 77%; --tw: 25vw; }
  .fin__pow--a { left: 70%; top: 22%; } .fin__pow--b { left: 30%; top: 22%; } .fin__pow--c { left: 18%; top: 72%; }
  .fin__copy { margin-top: -28px; }
  .fin__title { font-size: clamp(2.2rem, 11vw, 3.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .vbg__dust, .vbg__light, .vbg__l::before, .fin__rays, .fin__glow, .fin .fin__float, .fin__pow path, .mo.is-now::after { animation: none !important; }
  .vbg__far, .vbg__near, .vbg__yr { transition: opacity 1s !important; }
}
html.reduce-motion .vbg__dust, html.reduce-motion .vbg__light, html.reduce-motion .fin__rays, html.reduce-motion .fin .fin__float, html.reduce-motion .fin__pow path, html.reduce-motion .mo.is-now::after { animation: none !important; }

/* ============================================================
   v53 · אבני דרך ורגעים גדולים (2026-10-20)
   רגע רגיל נכנס בשקט (עלייה קצרה). אבן דרך (.mo--ms) היא "חלון" צבעוני משלה,
   ולכל אחת כניסה אחרת לפי data-fx: slam, burst, notes, crowd, count, pages,
   wed, film, lights, petals, rise, warm. ה-JS רק מוסיף .fx-go פעם אחת ובונה
   חלקיקים ברגע הכניסה. הכול transform/opacity. "פחות תנועה" = מצב סופי, בלי חלקיקים.
   ============================================================ */

/* ── רגע רגיל: רגוע, כדי שהגדולים יבלטו ── */
.vo-anim .mo:not(.is-in) .mo__card, .vo-anim .mo--l:not(.is-in) .mo__card { translate: 0 28px; rotate: 0deg; scale: .985; }
.vo-anim .mo .mo__card { transition: opacity .7s var(--ease), translate .9s var(--ease), scale .9s var(--ease); }

/* ── מקום: אבן דרך יושבת בשורה משלה, ושני רגעים באותו צד לא נערמים ── */
.mo--ms { --w: 440px; }
.mo--hero { --w: 540px; }
.mo + .mo--ms, .mo--ms + .mo, .mo--r + .mo--r, .mo--l + .mo--l { margin-top: 0; }
.mo--ms .mo__card { position: relative; }

/* ── החלון ── */
.ms { --ms-a: #2a1f5c; --ms-b: #120c30; --ms-acc: var(--era); --ms-ink: #fff; --ms-glow: color-mix(in srgb, var(--ms-acc) 55%, transparent);
  position: relative; isolation: isolate; overflow: hidden; padding: clamp(18px, 2.2vw, 26px); border-radius: var(--r-lg);
  border: var(--stroke) solid var(--ink); color: var(--ms-ink);
  background: radial-gradient(120% 80% at 85% 0%, color-mix(in srgb, var(--ms-acc) 26%, transparent), transparent 60%), linear-gradient(165deg, var(--ms-a), var(--ms-b));
  box-shadow: 6px 7px 0 var(--ink), 0 30px 70px -34px var(--ms-glow); }
.mo--l .ms { box-shadow: -6px 7px 0 var(--ink), 0 30px 70px -34px var(--ms-glow); }
.ms > :not(.ms__fx) { position: relative; z-index: 1; }
.mo--ms .mo__title { margin-top: 12px; font-family: var(--f-brand); font-weight: 900; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.08; color: var(--ms-ink); text-wrap: balance; }
.mo--ms .mo__text { margin-top: 8px; font-size: clamp(.98rem, 1.05vw, 1.04rem); line-height: 1.65; color: color-mix(in srgb, var(--ms-ink) 84%, transparent); }
.mo--r.mo--ms .mo__title, .mo--r.mo--ms .mo__text { text-align: start; }
.ms__tag { display: inline-flex; align-items: center; gap: 7px; padding: .28em .8em .28em .65em; border-radius: var(--r-pill); font-family: var(--f-text); font-weight: 700; font-size: .78rem; letter-spacing: .04em; color: var(--ink); background: var(--ms-acc); border: 2px solid var(--ink); }
.ms__tag i { display: grid; place-items: center; width: 18px; height: 18px; }
.ms__tag svg { width: 16px; height: 16px; fill: currentColor; }
.ms > .ms__plat { position: absolute; top: 16px; inset-inline-end: 16px; width: 30px; height: 30px; color: var(--ms-acc); }
.ms__plat svg { width: 100%; height: 100%; }
.ms__q { margin: 14px 0 0; padding: 4px 14px 4px 0; border-inline-start: 4px solid var(--ms-acc); font-family: var(--f-brand); font-weight: 700; font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.4; color: var(--ms-ink); text-wrap: pretty; }
.ms__link { display: inline-block; margin-top: 12px; padding: .35em .9em; border-radius: var(--r-pill); font-family: var(--f-text); font-weight: 600; font-size: .86rem; color: var(--ms-ink); border: 1.5px solid color-mix(in srgb, var(--ms-acc) 70%, transparent); text-decoration: none; unicode-bidi: plaintext; }
.ms__link:hover, .ms__link:focus-visible { background: var(--ms-acc); color: var(--ink); }
.ms__logo { display: block; width: 132px; height: auto; margin: 14px 0 0; }
.ms__media { display: block; position: relative; margin: 16px 0 0; border-radius: 14px; overflow: hidden; border: 2px solid var(--ink); background: #000; }
.ms__media img { display: block; width: 100%; height: auto; }
.ms__media--photo { padding: 7px; background: var(--paper); border-radius: 8px; box-shadow: 4px 5px 0 var(--ink); rotate: -1.2deg; }
.mo--l .ms__media--photo { rotate: 1.2deg; }
.ms__media--photo img { border-radius: 4px; }
.ms__media--poster { width: min(100%, 300px); margin-inline: auto; rotate: 1.5deg; box-shadow: 5px 6px 0 var(--ink); }
.ms__media--yt img { aspect-ratio: 16 / 9; object-fit: cover; }
a.ms__media { transition: transform .45s var(--spring); }
a.ms__media:hover, a.ms__media:focus-visible { transform: translateY(-4px) scale(1.01); }
.ms__badge { display: block; width: 74%; height: auto; margin: -11% auto 0; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)); }
.ms__duo { display: grid; grid-template-columns: 1fr 34%; align-items: center; gap: 12px; margin-top: 4px; }
.ms__duo .ms__media { margin-top: 12px; }
.ms__duo .ms__media--side { rotate: 4deg; }
.ms__big { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 0; direction: ltr; justify-content: flex-end; font-family: var(--f-brand); }
.ms__big b { display: inline-block; font-weight: 900; font-size: clamp(2.6rem, 7vw, 4.2rem); line-height: .95; color: var(--ms-acc); font-variant-numeric: tabular-nums; text-shadow: 3px 4px 0 var(--ink); }
.ms__big span { font-weight: 700; font-size: 1.1rem; color: var(--ms-ink); direction: rtl; }
.ms__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; display: none; }
.vo-anim .ms__fx { display: block; }

/* ── הצבעים של כל חלון ── */
.mo--ms-pc .ms     { --ms-a: #3d2614; --ms-b: #1a100a; --ms-acc: #ffb34a; }
.mo--ms-wiki .ms   { --ms-a: #f6ecd2; --ms-b: #e6d4a8; --ms-acc: #c9962b; --ms-ink: var(--paper-ink); }
.mo--ms-enlist .ms, .mo--ms-pin .ms, .mo--ms-release .ms { --ms-a: #3b3f24; --ms-b: #191a10; --ms-acc: #e9b35a; }
.mo--ms-back .ms   { --ms-a: #4a4a1e; --ms-b: #15160c; --ms-acc: #ffcf5a; }
.mo--ms-dtc .ms    { --ms-a: #4a2a8a; --ms-b: #170b3a; --ms-acc: #ffd166; }
.mo--ms-crowd .ms  { --ms-a: #1d2a7a; --ms-b: #080c2e; --ms-acc: #ffd166; }
.mo--ms-views .ms  { --ms-a: #6a1030; --ms-b: #22061a; --ms-acc: #ff4d6d; }
.mo--ms-iac .ms    { --ms-a: #f5f5f6; --ms-b: #d6d7da; --ms-acc: #d9a654; --ms-ink: #1d1a14; }
.mo--ms-ig .ms     { --ms-a: #5b1f6e; --ms-b: #1e0b2e; --ms-acc: #ff8ac4; }
.mo--ms-biz .ms    { --ms-a: #3a2e10; --ms-b: #141006; --ms-acc: #e8c26a; }
.mo--ms-c10 .ms    { --ms-a: #15185e; --ms-b: #060a26; --ms-acc: #ffc861; }
.mo--ms-screen .ms { --ms-a: #4a2a7a; --ms-b: #160b33; --ms-acc: #ffd166; }
.mo--ms-mulan .ms  { --ms-a: #8e1d1d; --ms-b: #2a0707; --ms-acc: #ffd27a; }
.mo--ms-tt .ms     { --ms-a: #13131a; --ms-b: #050508; --ms-acc: #25f4ee; }
.mo--ms-paj .ms    { --ms-a: #0f3b4a; --ms-b: #071d26; --ms-acc: #ffb17a; }
.mo--ms-cinema .ms { --ms-a: #0b2f7a; --ms-b: #04112e; --ms-acc: #3fe0ff; }
.mo--ms-wed .ms    { --ms-a: #3a2410; --ms-b: #0f0904; --ms-acc: #ffcf7a; --ms-glow: rgba(255, 196, 110, .7);
  background: radial-gradient(90% 60% at 50% 0%, rgba(255, 207, 122, .32), transparent 70%), radial-gradient(60% 40% at 15% 100%, rgba(255, 170, 120, .22), transparent 70%), linear-gradient(170deg, var(--ms-a), var(--ms-b)); }

/* ── חלונות מיוחדים ── */
.mo--ms-wiki .ms { background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(28, 23, 64, .07) 27px 28px), linear-gradient(165deg, var(--ms-a), var(--ms-b)); }
.mo--ms-wiki .ms__link { border-color: rgba(28, 23, 64, .3); }
.ms__media--wed { border-color: #ffd89a; box-shadow: 0 0 0 4px rgba(255, 207, 122, .25), 0 20px 60px -20px rgba(255, 190, 100, .8); background: radial-gradient(70% 60% at 50% 40%, #6a4318, #1a0f05); aspect-ratio: 1600 / 1109; }
.ms__media--wed.is-missing img { visibility: hidden; }
.ms__bokeh { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: radial-gradient(9px 9px at 12% 18%, rgba(255, 220, 150, .9), transparent), radial-gradient(14px 14px at 30% 8%, rgba(255, 200, 120, .7), transparent), radial-gradient(7px 7px at 52% 14%, rgba(255, 235, 190, .9), transparent), radial-gradient(12px 12px at 74% 6%, rgba(255, 210, 140, .7), transparent), radial-gradient(10px 10px at 90% 22%, rgba(255, 225, 160, .8), transparent), radial-gradient(16px 16px at 84% 70%, rgba(255, 190, 110, .45), transparent), radial-gradient(12px 12px at 8% 76%, rgba(255, 200, 130, .5), transparent); }
.mo--ms-wed .mo__title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: #fff3d6; text-shadow: 0 0 24px rgba(255, 196, 110, .55); }
.ms__stamp { position: absolute; z-index: 3; top: 10%; inset-inline-start: 6%; padding: .05em .35em .1em; font-family: var(--f-brand); font-weight: 900; font-size: clamp(2.4rem, 7vw, 3.6rem); line-height: 1; color: #ff5a3c; border: 5px solid #ff5a3c; border-radius: 10px; rotate: -12deg; background: rgba(20, 10, 4, .22); }
.ms__crowd { display: grid; grid-template-columns: repeat(25, 1fr); gap: 4px; margin: 16px 0 0; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); direction: ltr; }
.ms__crowd i { display: block; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--ms-acc) 70%, #fff); opacity: .8; }
.ms__crowd i.o { background: #fff; opacity: 1; }    /* חמישה-עשר הראשונים */

/* ── חלקיקים (נבנים ב-JS ב-fx-go) ── */
.ms__fx i { position: absolute; display: block; will-change: transform, opacity; }
.fx-note { left: var(--x); bottom: -30px; font: 900 var(--s, 22px)/1 var(--f-text); font-style: normal; color: var(--c, var(--ms-acc)); opacity: 0; }
.fx-spark { left: var(--x); top: var(--y); width: 9px; height: 9px; background: var(--c, #fff); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; }
.fx-shard { left: 50%; top: 30%; width: var(--s, 10px); height: calc(var(--s, 10px) * 2.2); background: var(--c); border-radius: 2px; opacity: 0; }
.fx-ray { left: 50%; top: 28%; width: 240%; aspect-ratio: 1; margin-left: -120%; margin-top: -120%; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(217, 166, 84, .55) 0 8deg, transparent 8deg 22deg, rgba(170, 172, 180, .5) 22deg 28deg, transparent 28deg 45deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 70%); mask-image: radial-gradient(closest-side, #000 10%, transparent 70%); }
.fx-conf { left: var(--x); top: -20px; width: var(--w, 8px); height: var(--h, 12px); background: var(--c); border-radius: 2px; opacity: 0; }
.fx-petal { left: var(--x); top: -24px; width: 14px; height: 10px; border-radius: 80% 0 80% 0; background: var(--c, #ffc2d1); opacity: 0; }
.fx-heart { left: 50%; top: 40%; width: var(--s, 140px); aspect-ratio: 1; margin: calc(var(--s, 140px) / -2) 0 0 calc(var(--s, 140px) / -2); opacity: 0;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffcf7a' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.2 0 3.6 1.2 5.3 3 1.7-1.8 3.1-3 5.3-3 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"); }
.fx-heart.sm { --s: 22px; }
.fx-page { left: 50%; top: 38%; width: 92px; height: 120px; margin: -60px 0 0 -46px; border-radius: 4px; border: 2px solid rgba(28, 23, 64, .5); opacity: 0;
  background: repeating-linear-gradient(180deg, transparent 0 12px, rgba(28, 23, 64, .22) 12px 13px) 10px 18px / 70% 80% no-repeat, #fffaf0; box-shadow: 3px 4px 0 rgba(28, 23, 64, .35); }
.fx-beam { bottom: -10%; left: var(--x); width: 34%; height: 140%; transform-origin: 50% 100%; opacity: 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--ms-acc) 55%, transparent), transparent 85%); clip-path: polygon(42% 100%, 58% 100%, 100% 0, 0 0); }
.fx-glow { inset: -20%; background: radial-gradient(closest-side, rgba(255, 207, 122, .55), transparent 70%); opacity: 0; }
.fx-strip { inset: -4% -2%; z-index: 4; background-color: #0b0b0e;
  background-image: repeating-linear-gradient(90deg, transparent 0 14px, #e8f6ff 14px 24px, transparent 24px 38px), repeating-linear-gradient(90deg, transparent 0 14px, #e8f6ff 14px 24px, transparent 24px 38px), repeating-linear-gradient(90deg, #18233a 0 30%, #0b0b0e 30% 33.4%);
  background-size: 38px 10px, 38px 10px, 100% 100%; background-position: 0 8px, 0 calc(100% - 8px), 0 0; background-repeat: repeat-x, repeat-x, no-repeat; }
.fx-flick { inset: 0; background: radial-gradient(80% 70% at 50% 40%, rgba(63, 224, 255, .3), transparent 70%); opacity: 0; }
.fx-warm { inset: -10%; background: radial-gradient(closest-side at 30% 30%, rgba(255, 179, 74, .45), transparent 70%); opacity: 0; }
.fx-dust { left: var(--x); top: var(--y); width: 7px; height: 7px; border-radius: 50%; background: #d9c38a; opacity: 0; }
.mo--ms-cinema .ms__fx { z-index: 4; }
.mo--ms-wed .ms__fx, .mo--ms-crowd .ms__fx, .mo--ms-back .ms__fx { z-index: 2; }
/* סדר בתוך החלון: קישורים וציטוטים אחרי הטקסט */
.ms { display: flex; flex-direction: column; }
.ms > .ms__tag, .ms > .ms__link { align-self: flex-start; }
.ms > .ms__q { order: 5; }
.ms > .ms__link { order: 6; }

/* ── הכניסות ── */
.vo-anim .mo--ms[data-fx] .mo__card { transition: none; translate: none; rotate: none; scale: none; }
.vo-anim .mo--ms[data-fx]:not(.fx-go) .mo__card { opacity: 0; }
.vo-anim .mo--ms[data-fx]:not(.fx-go) .mo__date { opacity: 0; }
.vo-anim .mo--ms.fx-go .mo__card { animation: ms-rise 1s var(--spring) both; }
@keyframes ms-rise { from { opacity: 0; transform: translateY(46px) scale(.94); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
/* warm: רפאל, שקט וחם */
.vo-anim .mo--ms[data-fx="warm"].fx-go .mo__card { animation: ms-fade 1.2s var(--ease) both; }
@keyframes ms-fade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.fx-go .fx-warm { animation: fx-warm 2.4s var(--ease) .2s both; }
@keyframes fx-warm { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; } 100% { opacity: .4; transform: scale(1); } }
/* slam: חזרתי */
.vo-anim .mo--ms[data-fx="slam"].fx-go .mo__card { animation: ms-slam .62s cubic-bezier(.2, .9, .3, 1.25) both, ms-shake .5s ease-out .55s both; }
@keyframes ms-slam { 0% { opacity: 0; transform: translateY(-40px) scale(1.55) rotate(-7deg); } 60% { opacity: 1; transform: scale(.95) rotate(1.2deg); } 100% { opacity: 1; transform: none; } }
@keyframes ms-shake { 0%, 100% { translate: 0 0; } 15% { translate: -9px 2px; } 30% { translate: 8px -2px; } 45% { translate: -6px 1px; } 60% { translate: 4px 0; } 78% { translate: -2px 0; } }
.vo-anim .mo--ms[data-fx="slam"]:not(.fx-go) .ms__stamp { opacity: 0; }
.vo-anim .mo--ms[data-fx="slam"].fx-go .ms__stamp { animation: ms-stamp .55s cubic-bezier(.2, .9, .3, 1.4) .85s both; }
@keyframes ms-stamp { 0% { opacity: 0; transform: scale(3.2) rotate(-28deg); } 70% { opacity: 1; transform: scale(.92) rotate(0); } 100% { opacity: 1; transform: none; } }
.fx-go .fx-dust { animation: fx-fly .9s var(--ease) var(--d, .55s) both; }
/* burst: IAC */
.vo-anim .mo--ms[data-fx="burst"].fx-go .mo__card { animation: ms-pop .95s var(--spring) both; }
@keyframes ms-pop { from { opacity: 0; transform: scale(.72) rotate(-2deg); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
.vo-anim .mo--ms[data-fx="burst"]:not(.fx-go) .ms__logo { opacity: 0; }
.vo-anim .mo--ms[data-fx="burst"].fx-go .ms__logo { animation: ms-logo 1.1s var(--spring) .25s both; }
@keyframes ms-logo { from { opacity: 0; transform: scale(0) rotate(-40deg); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
.fx-go .fx-ray { animation: fx-ray 2.2s var(--ease) .25s both; }
@keyframes fx-ray { 0% { opacity: 0; transform: scale(.1) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1) rotate(70deg); } }
.fx-go .fx-shard { animation: fx-shard 1.3s var(--ease) var(--d, .3s) both; }
@keyframes fx-shard { 0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); } }
.vo-anim .mo--ms-grad:not(.fx-go) .ms__media--side { opacity: 0; }
.vo-anim .mo--ms-grad.fx-go .ms__media--side { animation: ms-flip 1s var(--spring) .6s both; }
@keyframes ms-flip { from { opacity: 0; transform: perspective(700px) rotateY(-80deg) translateX(-30px); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
/* notes: המעגל הראשון */
.fx-go .fx-note { animation: fx-note var(--t, 2.8s) var(--ease) var(--d, 0s) both; }
@keyframes fx-note { 0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.6); } 18% { opacity: .95; } 50% { transform: translate(var(--sx, 14px), -160px) rotate(var(--r, 12deg)) scale(1); } 100% { opacity: 0; transform: translate(calc(var(--sx, 14px) * -1), -360px) rotate(calc(var(--r, 12deg) * -1)) scale(1.1); } }
.fx-go .fx-spark { animation: fx-spark 1.6s var(--ease) var(--d, 0s) both; }
@keyframes fx-spark { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 40% { opacity: 1; transform: scale(1.4) rotate(90deg); } }
/* crowd: 350 */
.vo-anim .mo--ms[data-fx="crowd"]:not(.fx-go) .ms__crowd i { opacity: 0; }
.fx-go .ms__crowd i { animation: fx-crowd .9s var(--spring) var(--d, 0s) both; }
.fx-go .ms__crowd i.o { animation-name: fx-crowd-o; }
@keyframes fx-crowd { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.7) translateY(-3px); } 100% { opacity: .8; transform: none; } }
@keyframes fx-crowd-o { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.9); } 100% { opacity: 1; transform: none; } }
.fx-go .ms__crowd.is-wave i { animation: fx-wave 1.1s var(--ease) var(--w, 0s) both; }
@keyframes fx-wave { 0%, 100% { opacity: .85; transform: none; } 40% { opacity: 1; transform: translateY(-5px) scale(1.35); } }
/* count */
.vo-anim .mo--ms[data-fx="count"].fx-go .ms__big b { animation: ms-num .9s var(--spring) both; }
@keyframes ms-num { from { transform: scale(.4); } to { transform: none; } }
/* pages: ויקי */
.vo-anim .mo--ms[data-fx="pages"].fx-go .mo__card { animation: ms-page 1.1s var(--spring) .3s both; }
@keyframes ms-page { from { opacity: 0; transform: perspective(900px) rotateY(70deg) translateX(40px); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
.fx-go .fx-page { animation: fx-page 1.5s var(--ease) var(--d, 0s) both; }
@keyframes fx-page { 0% { opacity: 0; transform: translate(var(--fx0), var(--fy0)) rotate(var(--r0)) scale(1.2); } 25% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: .18; transform: translate(var(--fx1), var(--fy1)) rotate(var(--r1)) scale(.9); } }
/* wed: זוהר, לב, קונפטי */
.vo-anim .mo--ms[data-fx="wed"].fx-go .mo__card { animation: ms-wed 1.4s var(--ease) both; }
@keyframes ms-wed { from { opacity: 0; transform: scale(.92) translateY(30px); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
.fx-go .fx-glow { animation: fx-glow 3s var(--ease) both; }
@keyframes fx-glow { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; transform: scale(1.05); } 100% { opacity: .45; transform: scale(1); } }
.fx-go .fx-heart { animation: fx-heart 1.6s cubic-bezier(.2, .9, .3, 1.3) var(--d, .45s) both; }
@keyframes fx-heart { 0% { opacity: 0; transform: scale(.1); } 35% { opacity: 1; transform: scale(1.15); } 60% { opacity: .9; transform: scale(.95); } 100% { opacity: 0; transform: scale(1.9); } }
.fx-go .fx-heart.sm { animation: fx-fly 1.5s var(--ease) var(--d, .7s) both; }
.fx-go .fx-conf { animation: fx-conf var(--t, 2.6s) cubic-bezier(.3, .2, .5, 1) var(--d, .6s) both; }
@keyframes fx-conf { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx, 20px), 620px) rotate(var(--r, 540deg)); } }
.fx-go .ms__bokeh { animation: fx-bokeh 7s ease-in-out infinite alternate; }
@keyframes fx-bokeh { from { transform: translate3d(0, 0, 0); opacity: .4; } to { transform: translate3d(-10px, 6px, 0); opacity: .75; } }
@keyframes fx-fly { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -80px)) scale(1); } }
/* film: הקולנוע הישראלי */
.vo-anim .mo--ms[data-fx="film"].fx-go .mo__card { animation: ms-fade .5s var(--ease) both; }
.fx-go .fx-strip { animation: fx-strip 1.25s cubic-bezier(.7, 0, .2, 1) .2s both; }
@keyframes fx-strip { 0% { transform: translateX(0); } 100% { transform: translateX(-112%); } }
.fx-go .fx-flick { animation: fx-flick 1.6s steps(8, end) 1.15s both; }
@keyframes fx-flick { 0% { opacity: 0; } 20% { opacity: .9; } 35% { opacity: .2; } 55% { opacity: .8; } 70% { opacity: .3; } 100% { opacity: .35; } }
/* lights: מעגל 10, אלאדין */
.fx-go .fx-beam { animation: fx-beam 2.6s var(--ease) var(--d, .1s) both; }
@keyframes fx-beam { 0% { opacity: 0; transform: rotate(var(--a0, -35deg)); } 30% { opacity: .9; } 100% { opacity: .35; transform: rotate(var(--a1, 18deg)); } }
.vo-anim .mo--ms[data-fx="lights"].fx-go .ms__media--poster, .vo-anim .mo--ms[data-fx="lights"].fx-go .ms__badge { animation: ms-logo 1s var(--spring) .4s both; }
/* petals: מולאן */
.fx-go .fx-petal { animation: fx-petal var(--t, 3.4s) linear var(--d, 0s) both; }
@keyframes fx-petal { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: .95; } 50% { transform: translate(var(--sx, 30px), 260px) rotate(200deg); } 90% { opacity: .9; } 100% { opacity: 0; transform: translate(calc(var(--sx, 30px) * -.5), 560px) rotate(420deg); } }
.vo-anim .mo--ms[data-fx="petals"].fx-go .ms__badge { animation: ms-logo 1s var(--spring) .45s both; }
/* rise: תמונה שנוחתת */
.vo-anim .mo--ms[data-fx="rise"].fx-go .ms__media--photo { animation: ms-photo 1.1s var(--spring) .2s both; }
@keyframes ms-photo { from { opacity: 0; transform: translateY(30px) rotate(-8deg) scale(.9); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }

/* ── טלפון ── */
@media (max-width: 720px) {
  .mo--ms, .mo--hero { width: 100%; }
  .mo--ms .mo__title { font-size: 1.5rem; }
  .ms, .mo--l .ms { box-shadow: 4px 5px 0 var(--ink), 0 24px 50px -30px var(--ms-glow); }
  .ms__media--photo, .mo--l .ms__media--photo { rotate: 0deg; }
  .ms__crowd { gap: 3px; padding: 8px; }
  .ms__big b { font-size: clamp(2.2rem, 12vw, 3.2rem); }
  .ms__big--count b { font-size: clamp(1.7rem, 9.4vw, 2.3rem); }
}

/* ── הסוף: המשפט של דניאל ── */
.close__map .close__msg { margin-top: 26px; }
.close__msg b { display: block; margin-top: 6px; color: var(--gold); font-weight: 900; font-size: 1.12em; }

/* ── פחות תנועה ── */
@media (prefers-reduced-motion: reduce) {
  .ms__fx { display: none !important; }
  .mo--ms .mo__card, .mo--ms .mo__date, .mo--ms .ms__stamp, .mo--ms .ms__logo, .mo--ms .ms__media, .mo--ms .ms__badge, .ms__crowd i, .ms__big b, .ms__bokeh { animation: none !important; opacity: 1 !important; }
  .ms__crowd i { opacity: .8 !important; }
}
html.reduce-motion .ms__fx { display: none !important; }
html.reduce-motion .mo--ms .mo__card, html.reduce-motion .mo--ms .mo__date, html.reduce-motion .mo--ms .ms__stamp, html.reduce-motion .mo--ms .ms__logo, html.reduce-motion .mo--ms .ms__media, html.reduce-motion .mo--ms .ms__badge, html.reduce-motion .ms__crowd i, html.reduce-motion .ms__bokeh { animation: none !important; opacity: 1 !important; }

/* ============================================================
   v53 · הפתיחה "הקול שלי ברשת" (.vh) והמעבר "מה פה בדיוק שלי?" (.rv-turn)
   ה-HTML נוסף ב-v52 בלי CSS, ולכן הפתיחה נפרשה לגובה של אלפי פיקסלים.
   פריסה: טקסט מימין, במה משמאל (טלפון עם פרופיל, רילס, דניאל, בועות).
   ============================================================ */
.vh { text-align: start; padding-bottom: clamp(30px, 4vw, 56px); }
.vh__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.vh__copy { display: grid; justify-items: start; }
.vh__k { color: var(--gold); }
.vh__title { margin-top: 10px; }
.vh__title em { font-style: normal; color: var(--gold); }
.vh__plats { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.vh__plat { display: inline-flex; align-items: center; gap: 8px; padding: .5em 1em; border-radius: var(--r-pill); font-family: var(--f-text); font-weight: 600; font-size: .92rem; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(206, 214, 255, .22); transition: transform .4s var(--spring), border-color .3s, background .3s; }
.vh__plat svg { width: 18px; height: 18px; flex: none; }
.vh__plat:hover, .vh__plat:focus-visible { transform: translateY(-3px); border-color: var(--gold); background: rgba(245, 200, 66, .12); }
.vh__plat--ig svg { color: #ff8ac4; } .vh__plat--tt svg { color: #25f4ee; } .vh__plat--yt svg { color: #ff4d4d; }
.vh__thesis { max-width: 24ch; text-align: start; }
.vh__lede { max-width: 48ch; color: var(--muted); }
.vh .evo-hero__go { align-items: flex-start; }

.vh__stage { position: relative; height: clamp(440px, 46vw, 620px); }
.vh__phone { position: absolute; z-index: 1; top: 2%; inset-inline-start: 18%; width: clamp(210px, 19vw, 280px); aspect-ratio: 9 / 19; padding: 9px; border-radius: 40px; background: #07081a; border: 2px solid rgba(206, 214, 255, .25); box-shadow: 10px 12px 0 var(--ink), 0 40px 90px -30px rgba(91, 45, 142, .8); rotate: 5deg; }
.vh__screen { height: 100%; overflow: hidden; border-radius: 31px; background: #0f1024; padding: 12px 10px; font-family: var(--f-text); color: #fff; }
.vh__bar { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; direction: ltr; }
.vh__bar i { width: 16px; height: 2px; background: #fff; box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff; }
.vh__prof { display: flex; align-items: center; gap: 10px; margin-top: 12px; direction: ltr; }
.vh__av { flex: none; width: 54px; height: 54px; padding: 2px; border-radius: 50%; background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.vh__av img { width: 100%; height: 100%; border-radius: 50%; border: 2px solid #0f1024; object-fit: cover; display: block; }
.vh__prof dl { display: flex; flex: 1; justify-content: space-around; margin: 0; }
.vh__prof dl div { text-align: center; }
.vh__prof dt { font-weight: 700; font-size: .78rem; }
.vh__prof dd { margin: 0; font-size: .58rem; color: var(--muted); }
.vh__bio { margin-top: 8px; font-size: .62rem; line-height: 1.45; color: #dcdcf4; }
.vh__bio b { display: block; font-size: .7rem; color: #fff; }
.vh__hl { display: flex; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.vh__hl li { display: grid; justify-items: center; gap: 3px; font-size: .5rem; color: var(--muted); }
.vh__hl img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .25); }
.vh__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 10px -10px 0; padding: 0; list-style: none; }
.vh__grid img { display: block; width: 100%; aspect-ratio: 9 / 14; object-fit: cover; }
.vh__reel { position: absolute; z-index: 3; bottom: 4%; inset-inline-start: 0; width: clamp(150px, 13vw, 200px); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; border: var(--stroke) solid var(--ink); box-shadow: 7px 8px 0 var(--gold); rotate: -7deg; transition: transform .45s var(--spring); }
.vh__reel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vh__reel:hover, .vh__reel:focus-visible { transform: translateY(-6px) scale(1.03); }
.vh__play { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230a0b22' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50% / 22px no-repeat; }
.vh__reel-tag { position: absolute; top: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; gap: 4px; padding: .2em .6em; border-radius: var(--r-pill); font: 700 .72rem var(--f-text); color: #fff; background: rgba(10, 11, 34, .7); }
.vh__reel-tag svg { width: 13px; height: 13px; }
.vh__me { position: absolute; z-index: 2; bottom: 0; inset-inline-end: -2%; width: clamp(200px, 21vw, 320px); pointer-events: none; }
.vh__me img { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .45)); }
.vh__bub { position: absolute; z-index: 4; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: var(--stroke) solid var(--ink); box-shadow: 4px 5px 0 var(--ink); color: #fff; animation: vh-bob 4.5s ease-in-out infinite alternate; }
.vh__bub svg { width: 26px; height: 26px; }
.vh__bub--ig { top: 4%; inset-inline-end: 10%; background: linear-gradient(135deg, #feda75, #d62976 50%, #4f5bd5); }
.vh__bub--tt { top: 40%; inset-inline-end: 0; background: #111; color: #25f4ee; animation-delay: -1.5s; }
.vh__bub--yt { top: 64%; inset-inline-start: 40%; background: #ff2b2b; animation-delay: -3s; }
.vh__heart { position: absolute; z-index: 4; top: 18%; inset-inline-start: 6%; width: 46px; color: #ff4d6d; animation: vh-bob 3.6s ease-in-out infinite alternate; }
.vh__heart svg { width: 100%; fill: currentColor; filter: drop-shadow(3px 4px 0 var(--ink)); }
@keyframes vh-bob { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-12px) rotate(5deg); } }
.vh__nums { margin-top: clamp(30px, 4vw, 56px); text-align: center; }
.vh__nums-k { font-family: var(--f-text); font-weight: 600; font-size: .82rem; letter-spacing: .08em; color: var(--faint, #8f8cc0); }
.vh__nums ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.vh__nums li { display: grid; gap: 4px; padding: 14px 8px; border-radius: var(--r); background: rgba(255, 255, 255, .04); border: 1.5px solid rgba(206, 214, 255, .14); }
.vh__nums b { font-family: var(--f-brand); font-weight: 900; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1; color: var(--gold); direction: ltr; }
.vh__nums span { font-family: var(--f-text); font-size: .82rem; color: var(--muted); }
.vh__asof { margin-top: 10px; font-family: var(--f-text); font-size: .76rem; color: var(--faint, #8f8cc0); }
@media (max-width: 900px) {
  .vh__inner { grid-template-columns: 1fr; }
  .vh__copy { justify-items: center; text-align: center; }
  .vh__thesis, .vh__lede { text-align: center; margin-inline: auto; }
  .vh__plats { justify-content: center; }
  .vh .evo-hero__go { align-items: center; }
  .vh__stage { width: min(100%, 420px); height: 470px; margin-inline: auto; }
  .vh__phone { width: 220px; inset-inline-start: 30%; }
  .vh__reel { width: 140px; }
  .vh__me { width: 190px; inset-inline-end: -4%; }
  .vh__nums ul { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .vh__stage { height: 430px; }
  .vh__phone { width: 196px; inset-inline-start: 26%; }
  .vh__reel { width: 120px; }
  .vh__me { width: 160px; }
  .vh__bub { width: 42px; height: 42px; } .vh__bub svg { width: 21px; height: 21px; }
  .vh__nums ul { gap: 8px; }
  .vh__nums li:nth-child(n+4) { grid-column: span 1; }
}

/* ── המעבר לפרק האחרון: השאלה, חץ, והתשובה ── */
.rv-turn { position: relative; z-index: 2; display: grid; justify-items: center; gap: 12px; margin: 0 auto 26px; text-align: center; }
.rv-turn__q { padding: 0 16px; font-family: var(--f-brand); font-weight: 900; font-size: clamp(1.8rem, 4.4vw, 3.4rem); line-height: 1.1; color: #fff; text-shadow: 4px 5px 0 var(--ink); }
.rv-turn__arrow { display: block; width: 3px; height: 70px; background: linear-gradient(180deg, var(--era), transparent); }
.rv-ch__turn { display: inline-block; margin-bottom: 8px; padding: .25em .9em; border-radius: var(--r-pill); font-family: var(--f-text); font-weight: 700; font-size: .8rem; letter-spacing: .06em; color: var(--ink); background: var(--era); border: 2px solid var(--ink); }
.rv-ch__head--answer { border-width: 3px; }
.vo-anim .rv-turn__q { transition: opacity .8s var(--ease), scale 1.1s var(--spring); }
@media (prefers-reduced-motion: reduce) { .vh__bub, .vh__heart { animation: none; } }
html.reduce-motion .vh__bub, html.reduce-motion .vh__heart { animation: none; }
.vh__me { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.ms__big--count b { font-size: clamp(2rem, 3.4vw, 3rem); }
.mo--hero .ms__big--count b { font-size: clamp(2.2rem, 4.2vw, 3.9rem); }
@media (max-width: 720px) { .ms__big--count b, .mo--hero .ms__big--count b { font-size: clamp(1.7rem, 9.4vw, 2.3rem); } }
.mo--ms-back .ms__media--photo { width: min(100%, 380px); }
.mo--ms-back .mo__title { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.mo--ms-back .ms__stamp { top: auto; bottom: 9%; inset-inline-start: auto; inset-inline-end: 7%; }
.mo--ms-pin .ms__media--photo, .mo--ms-enlist .ms__media--photo, .mo--ms-release .ms__media--photo, .mo--ms-paj .ms__media--photo { width: min(100%, 340px); }

/* 20.10.2026: הסרטון של המעגל הראשון בתוך החלון הסגול */
.ms__media--first { position: relative; z-index: 1; margin-top: 18px; rotate: -1deg; box-shadow: 5px 6px 0 var(--ink), 0 0 0 3px var(--ms-acc); }
.mo--l .ms__media--first { rotate: 1deg; }
.ms__media--first .mo__views { position: absolute; top: 10px; inset-inline-end: 10px; }
.ms__cap { position: relative; z-index: 1; margin: 12px 0 0; font: 700 .86rem/1.4 var(--f-text); color: color-mix(in srgb, var(--ms-ink) 75%, transparent); }