/* Memorial composition: Figma 1208:1661 (desktop), 1208:1662/1663 (mobile).
   Navigation, donation cards, fonts and tokens come from the site's shared files. */
.memorial-page { background:var(--cream, #fcf9f4); }
.roei-main { --roei-page-width:min(100vw, 1920px); display:flow-root; padding-bottom:30px; }
/* 17.9.2026: העננים ממשיכים אל מחוץ לקצה השמאלי של המסך — החיתוך האופקי כאן
   מונע גלילה הצידה בלי לחתוך שום דבר בגובה */
.memorial-page .roei-main { overflow-x:clip; }
.roei-hero.ah-band {
  width:min(76.2811vw, 1464.598px);
  min-height:0;
  height:min(13.9885vw, 268.58px);
  aspect-ratio:auto;
  position:relative;
  inset:auto;
  transform:none;
  margin:30px auto 0;
  padding:0;
  border-radius:min(2.6042vw, 50px);
  /* 24.9.2026: הכותרת "מנציחים את רועי" תמיד מעל הכול: וידאו העננים
     שמתחת עולה עד לתוך הרצועה, והרצועה נערמת מעליו. */
  z-index:2;
}
.roei-hero-picture { position:absolute; inset:0; z-index:-2; }
.roei-hero .ah-band-bg { object-fit:fill; }
.memorial-page .roei-hero::before,
.memorial-page .roei-hero::after { display:none; }
.roei-hero .ah-band-in { position:relative; inset:auto; width:100%; padding:0 12px; }
.roei-hero .ah-crumb,
.roei-hero .ah-title { position:static; inset:auto; width:auto; height:auto; transform:none; }
.roei-hero .ah-crumb { margin:0 0 min(1.0417vw,20px); font-size:min(1.0417vw,20px); line-height:1.5; white-space:nowrap; }
.roei-hero .ah-title { margin:0; font-size:min(4.6875vw,90px); line-height:1.08; }
.roei-hero .ah-title .is-accent { padding:0; }
.roei-hero .ah-title .is-accent,
.roei-story-title {
  background:var(--grad-accent);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.roei-story {
  width:min(68.073vw,1307px);
  margin:min(3.4023vw,65.325px) auto 0;
  display:grid;
  /* 16.9.2026: הטקסט קיבל גובה שורה נושם יותר, ולכן עמודת התמונה
     התרחבה כך שהפורטרט חוזר לגובה של הביוגרפיה ומתחיל איתה באותו קו. */
  grid-template-columns:minmax(0,759fr) minmax(0,529fr);
  gap:min(.46875vw,9px);
  align-items:start;
}
.roei-story-copy { min-width:0; }
.roei-story-title {
  margin:0 0 min(.3125vw,6px);
  width:fit-content;
  max-width:100%;
  font-size:min(3.3333vw,64px);
  line-height:1.08;
  font-weight:800;
}
.roei-biography { color:#222; font-size:min(.9375vw,18px); line-height:1.55; font-weight:400; }
.roei-biography p { margin:0; }
.roei-memory { font-weight:700; }
/* 5.10.2026: הסיפור מתגלה תוך כדי גלילה. RoeiStoryReveal ב-site-refinements.js
   מזיז את ‎--rv-a‎ / ‎--rv-b‎ לפי מיקום הגלילה. מעל הקו הטקסט מלא, מתחתיו דהוי,
   וביניהם מעבר רך. המסכה חלה על הבלוק כולו ולכן אינה נוגעת בפריסת הטקסט —
   הגרסה הקודמת פיצלה למילים ושברה את המרכוז. בלי הסקריפט אין מחלקה ואין מסכה. */
.roei-biography.is-reveal {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--rv-a, 0%), rgba(0,0,0,.2) var(--rv-b, 14%), rgba(0,0,0,.2) 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 var(--rv-a, 0%), rgba(0,0,0,.2) var(--rv-b, 14%), rgba(0,0,0,.2) 100%);
}
.roei-figure { position:relative; margin:0; min-width:0; }
.roei-portrait { position:relative; z-index:1; width:100%; aspect-ratio:436.911 / 435.947; overflow:hidden; }
.roei-portrait img { position:absolute; width:140.53%; height:211.72%; max-width:none; left:-20.38%; top:-1.24%; object-fit:fill; }
/* 17.9.2026: וידאו עננים מאחורי רועי. מתפרס משמאל לרועי, מעל ראשו ועד מתחת
   לחלק מהטקסט. השוליים לא עיגול: המסכה בנויה מכמה צורות רכות בגדלים ובמקומות
   שונים שמתחברות יחד, כך שהקצה לא סימטרי ונראה כמו גבול טבעי של ענן. */
.roei-sky {
  /* בדסקטופ העננים מתחילים מעבר לקצה השמאלי של המסך (הם ממשיכים "החוצה",
     בלי קו חיתוך), ומימין נכנסים אל הטקסט. site-refinements.js מודד ומעדכן
     left ו-width; הערכים כאן מתאימים ל-1440px, למקרה שאין JavaScript. */
  position:absolute; z-index:0; left:-71%; top:-27%;
  /* וידאו לא נמתח בין left ל-right כמו div — לכן רוחב וגובה מפורשים */
  width:241%; height:129%; max-width:none;
  object-fit:cover; pointer-events:none; opacity:1;
  /* 24.9.2026: לבקשת הלקוח העננים בולטים יותר: המסכה כמעט אטומה בליבה
     והצורות גדולות יותר, והווידאו החיוור מקבל מעט רוויה וניגודיות כדי
     שהכחול והלבן ייראו. */
  filter:saturate(1.35) contrast(1.1);
  --roei-sky-mask:
    radial-gradient(ellipse 26% 70% at 0% 52%, rgba(0,0,0,.78) 0%, rgba(0,0,0,.66) 45%, transparent 78%),
    radial-gradient(ellipse 24% 36% at 14% 26%, rgba(0,0,0,.96) 0%, rgba(0,0,0,.82) 30%, transparent 72%),
    radial-gradient(ellipse 24% 38% at 16% 74%, rgba(0,0,0,.96) 0%, rgba(0,0,0,.82) 30%, transparent 72%),
    radial-gradient(ellipse 22% 42% at 30% 50%, #000 0%, #000 34%, transparent 74%),
    radial-gradient(ellipse 28% 52% at 48% 58%, #000 0%, #000 36%, transparent 74%),
    radial-gradient(ellipse 24% 30% at 50% 20%, #000 0%, rgba(0,0,0,.95) 30%, transparent 72%),
    radial-gradient(ellipse 24% 28% at 73% 46%, #000 0%, rgba(0,0,0,.95) 32%, transparent 72%),
    radial-gradient(ellipse 17% 18% at 87% 71%, #000 0%, rgba(0,0,0,.86) 26%, transparent 72%),
    radial-gradient(ellipse 12% 15% at 71% 20%, #000 0%, rgba(0,0,0,.86) 24%, transparent 72%);
  /* ===================================================================
     8.10.2026 · ריכוך הקצה התחתון
     -------------------------------------------------------------------
     תשעת הכתמים שלמעלה מרככים את הצורה, אבל הם עוד אטומים במקום
     שבו **תיבת הווידאו עצמה** נגמרת — ולכן נוצר קו אופקי ישר
     בתחתית, בעיקר בפינה השמאלית. נמדד ב-1440: התיבה היא
     ‎[-60, 120, 964, 576]‎, כלומר התחתית שלה ב-y=696, והעננים
     נחתכים שם בסרגל.

     הפתרון הוא שכבת מסכה נוספת שמדהה כלפי מטה, **בחיתוך** עם
     הכתמים ולא בחיבור. ‎mask-composite‎ בברירת מחדל הוא ‎add‎,
     שהיה מגדיל את האטימות; ‎intersect‎ מכפיל, כלומר כל מה שהכתמים
     הציירו נמחק בהדרגה לקראת הקצה.

     ⚠️ שכבת הדהייה היא **ראשונה** ברשימה. ב-CSS השכבה הראשונה היא
     העליונה, ו-‎mask-composite‎ שלה מתאר איך היא מתמזגת עם כל מה
     שמתחתיה — כלומר ‎intersect‎ כאן הוא דהייה ∩ איחוד הכתמים.
     סדר הפוך היה מחתך את הכתם הראשון בלבד.

     ⚠️ והרשימה **מפורטת לכל שכבה**. ערך בודד ב-‎mask-composite‎
     חוזר על עצמו לכל השכבות, כלומר ‎intersect‎ אחד נתן
     כתם1 ∩ כתם2 ∩ … ∩ כתם9 — וחיתוך של תשעה כתמים שונים הוא
     כמעט ריק. זה מה שקרה בניסיון הראשון, והעננים נעלמו מהעמוד.
     עשרה ערכים: ‎intersect‎ לדהייה ו-‎add‎ לכל כתם.
     במדיה-קוורי של הנייד יש שבעה כתמים; ערכים עודפים מתעלמים,
     והראשון נשאר ‎intersect‎ — ולכן הרשימה נכונה גם שם.

     ⚠️ **אין כאן** ‎-webkit-mask-composite‎, וזה נמדד: הוספתי אותו
     כגיבוי ל-Safari הישן עם ‎source-in‎, וב-Chrome הוא גובר על
     התקני ומוחק את כל שכבות הכתמים — העננים נעלמו לגמרי מהעמוד.
     התחביר הישן אינו שקול, ולא נוסיף אותו. ב-Safari שלפני 15.4
     ‎mask-composite‎ פשוט לא נתמך, השכבה הראשונה מתווספת במקום
     לחתוך, והמצב חוזר למה שהיה — לא נשבר.

     הקצה השמאלי נשאר חתוך בכוונה: הוא יוצא מהמסך, וההערה למעלה
     מסבירה שזה מה שנותן את התחושה שהעננים ממשיכים החוצה.
     =================================================================== */
  --roei-sky-fade:
    linear-gradient(to bottom,
      #000 0%, #000 74%,
      rgba(0,0,0,.8) 86%,
      rgba(0,0,0,.4) 95%,
      transparent 100%);
  -webkit-mask-image:var(--roei-sky-fade),var(--roei-sky-mask);
          mask-image:var(--roei-sky-fade),var(--roei-sky-mask);
  mask-composite:intersect,add,add,add,add,add,add,add,add,add;
}
/* הטקסט מעל העננים */
.roei-story-copy { position:relative; z-index:1; }
/* 17.9.2026: אור שזורח מאחורי רועי — הילה חמימה ורכה סביב הראש והכתפיים
   שנושמת לאט, וקרניים עדינות מאוד שמסתובבות בקצב של כמעט שתי דקות לסיבוב.
   יושב מעל וידאו העננים ומתחת לדיוקן. */
.roei-light {
  position:absolute; z-index:0; pointer-events:none;
  /* 17.9.2026: עוצמתי יותר לבקשת חן — הילה גדולה ובהירה יותר וקרניים בולטות יותר */
  left:-25%; top:-26%; width:150%; height:134%;
  background:radial-gradient(ellipse 38% 40% at 50% 47%, rgba(255,253,244,1) 0%, rgba(255,250,232,.86) 22%, rgba(255,246,222,.46) 46%, rgba(255,244,218,.14) 62%, rgba(255,244,218,0) 74%);
  animation:roeiLightBreathe 7s ease-in-out infinite;
}
.roei-light__rays {
  position:absolute; left:50%; top:47%; width:160%; aspect-ratio:1;
  translate:-50% -50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,251,236,0) 0deg 6deg, rgba(255,251,236,.8) 9deg 11.5deg, rgba(255,251,236,0) 14.5deg 20deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.7) 24%, transparent 50%);
          mask-image:radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.7) 24%, transparent 50%);
  filter:blur(2.5px);
  animation:roeiRaysTurn 110s linear infinite;
}
@keyframes roeiLightBreathe { 0%, 100% { opacity:.85; } 50% { opacity:1; } }
@keyframes roeiRaysTurn { to { rotate:360deg; } }
@media (prefers-reduced-motion:reduce) { .roei-light, .roei-light__rays { animation:none; } }
html.a11y-still .roei-light, html.a11y-still .roei-light__rays { animation-play-state:paused; }
.roei-mobile-donate.cta-btn { display:none; }

/* Let the portrait meet the donation panel in the desktop composition. */
@media (min-width:1025px) {
  .roei-story-copy { position:relative; top:calc(-1 * clamp(16px,1.25vw,24px)); }
  .roei-figure { align-self:end; }
  /* 17.9.2026: 35px נוספים של אוויר בין הרצועה החומה העליונה לכל אזור רועי,
     והדיוקן גדל ב-12% — הגדילה הולכת שמאלה (החוצה) ולמעלה, כך שהמרחק מהטקסט
     לא משתנה והתמונה עדיין נוגעת בפאנל התרומה שמתחת. האור שמאחוריו זז איתו. */
  .roei-story { margin-top:calc(min(3.4023vw,65.325px) + 35px); }
  .roei-portrait { width:112%; margin-left:-12%; }
  .roei-light { left:-37%; }
  .memorial-page .act-donation[data-donation-section] { padding-top:0; }
}

@media (max-width:1024px) {
  .roei-main { padding-bottom:42px; }
  .roei-hero.ah-band {
    width:calc(100% - 32px);
    max-width:600px;
    height:auto;
    min-height:141.65px;
    aspect-ratio:358 / 141.65;
    margin-top:-16px;
    border-radius:32px;
  }
  .roei-hero .ah-band-bg { object-fit:cover; }
  .memorial-page .roei-hero::after { display:block; background:rgba(67,31,16,.7); }
  .roei-hero .ah-band-in { padding-top:15px; }
  .roei-hero .ah-crumb { font-size:14px; line-height:20px; margin:0 0 5px; }
  .roei-hero .ah-title { font-size:40px; line-height:52px; white-space:nowrap; }
  .roei-story { display:flex; flex-direction:column; align-items:center; width:100%; margin:16px auto 0; gap:0; }
  .roei-figure { order:-1; display:flex; flex-direction:column; align-items:center; width:249.54px; }
  /* בנייד הטקסט מתחת לתמונה: העננים גולשים לצדדים (בתוך רוחב המסך) ולמטה אל הטקסט */
  .roei-sky {
    /* 5.10.2026: the sky reads stronger on a phone — a little wider, and more
       colour in the video itself so the blue and the white carry on a small
       screen the way they do on a desktop. */
    /* 5.10.2026: העננים היו גלויים רק משמאל לרועי. הצורות במסכה שבצד ימין היו
       קטנות יותר ויושבות נמוך, מאחורי הכתף שלו, ולכן שם לא נראה כלום. המסכה
       עכשיו סימטרית — זוגות ב-20/80, ב-32/68 וב-12/88 — והעננים גדולים ועמוקים
       יותר משני הצדדים. */
    left:-26%; top:-18%; width:152%; height:164%;
    filter:saturate(2.05) contrast(1.32) brightness(1.02);
    --roei-sky-mask:
      radial-gradient(ellipse 44% 50% at 20% 34%, #000 0%, #000 54%, transparent 90%),
      radial-gradient(ellipse 44% 50% at 80% 34%, #000 0%, #000 54%, transparent 90%),
      radial-gradient(ellipse 40% 42% at 32% 60%, #000 0%, #000 46%, transparent 86%),
      radial-gradient(ellipse 40% 42% at 68% 60%, #000 0%, #000 46%, transparent 86%),
      radial-gradient(ellipse 38% 32% at 50% 14%, #000 0%, rgba(0,0,0,.97) 40%, transparent 86%),
      radial-gradient(ellipse 30% 28% at 8% 64%, #000 0%, rgba(0,0,0,.94) 34%, transparent 84%),
      radial-gradient(ellipse 30% 28% at 92% 64%, #000 0%, rgba(0,0,0,.94) 34%, transparent 84%);
  }
  /* ההילה נשארת בהירה סביב הראש, אבל צרה יותר — בגודל הקודם היא הלבינה את
     כל השטח סביבו והעננים לא נראו דרכה. */
  .roei-light {
    left:-18%; top:-20%; width:136%; height:124%;
    background:radial-gradient(ellipse 31% 33% at 50% 44%, rgba(255,253,244,.96) 0%, rgba(255,250,232,.78) 20%, rgba(255,246,222,.38) 40%, rgba(255,244,218,.11) 56%, rgba(255,244,218,0) 68%);
  }
  .roei-light__rays { width:140%; }
  .roei-portrait { width:249.54px; height:248.989px; }
  .memorial-page .roei-figure .roei-mobile-donate.cta-btn {
    --ctah:44px; --ctaf:15.5px; --arrow-d:32px; --arrow-svg:18px;
    display:inline-flex;
    position:relative;
    z-index:1;
    max-width:calc(100vw - 32px);
    margin-top:-10px;
    white-space:nowrap;
  }
  .roei-mobile-donate:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
  /* 5.10.2026: עמודת טקסט רחבה יותר, עם שוליים זהים ומפורשים משני הצדדים.
     הרוחב הקבוע של 273.781px השאיר סרט צר באמצע מסך, ובטלפון גדול השוליים
     גדלו רק מצד אחד בעין. margin-inline:auto מבטיח שהם שווים תמיד. */
  .roei-story-copy { width:min(340px, calc(100% - 44px)); max-width:none; margin:16px auto 0; text-align:center; }
  /* 24.9.2026: הכותרת הייתה מוסתרת כאן (לקוראי מסך בלבד); לבקשת חן היא
     מוצגת גם בטלפון ובטאבלט, ממורכזת מעל הביוגרפיה, באותו גרדיאנט. */
  .roei-story-title { position:static; width:fit-content; height:auto; margin:0 auto 10px; font-size:clamp(26px, 7.2vw, 34px); line-height:1.1; white-space:nowrap; }
  .roei-biography { font-size:18px; }
  .roei-memory { font-weight:400; }
}

/* 5.10.2026 · טלפון בלבד — השמיים יוצאים מהמסך
   -------------------------------------------------------------------
   העננים הסתיימו בתוך המסך, ולכן נראה להם קו גבול ושוליים משני הצדדים.
   כאן הם רחבים מהמסך עצמו (188% מרוחב הדמות, מוסטים ‎-44%‎), כך שהקצה
   האופקי נופל מחוץ לתצוגה ואין מה לראות. השכבה הנוספת במסכה היא פס
   אטום לכל הרוחב: הוא מבטיח כיסוי מלא עד הקצוות, והצורות העגולות
   שמעליו ומתחתיו שומרות על הגבול העליון והתחתון רך וטבעי.
   ‎html{overflow-x:clip}‎ הוא שחותך את החריגה, ולכן אין גלילה אופקית. */
@media (max-width: 767px) {
  .roei-sky {
    left:-44%; width:188%;
    /* 5.10.2026: כל שכבה במסכה מגיעה לשקיפות מלאה עוד לפני הקצה העליון, ולכן
       אין שם קו סיום — השמיים פשוט נמוגים אל הרקע. כל עיגול מחושב כך:
       מרכז פחות 0.9 מהרדיוס האנכי יוצא אפס או יותר. הפס האטום מתחיל לדהות
       מלמעלה לאורך רבע מהגובה. */
    --roei-sky-mask:
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 12%, rgba(0,0,0,.94) 30%, rgba(0,0,0,.94) 56%, transparent 92%),
      radial-gradient(ellipse 44% 44% at 20% 40%, #000 0%, #000 50%, transparent 90%),
      radial-gradient(ellipse 44% 44% at 80% 40%, #000 0%, #000 50%, transparent 90%),
      radial-gradient(ellipse 40% 42% at 32% 60%, #000 0%, #000 46%, transparent 86%),
      radial-gradient(ellipse 40% 42% at 68% 60%, #000 0%, #000 46%, transparent 86%),
      radial-gradient(ellipse 38% 24% at 50% 22%, #000 0%, rgba(0,0,0,.95) 36%, transparent 90%),
      radial-gradient(ellipse 30% 28% at 8% 64%, #000 0%, rgba(0,0,0,.94) 34%, transparent 84%),
      radial-gradient(ellipse 30% 28% at 92% 64%, #000 0%, rgba(0,0,0,.94) 34%, transparent 84%);
  }
}

/* 22.9.2026 · טאבלט (768–1024).
   הבלוק שמעל מגדיר מידות של טלפון — תמונה 249.54px ועמודת טקסט 273.781px —
   והן חלו עד 1024. עמודת טקסט של 274 פיקסלים במסך של 1024 נראית אבודה באמצע
   שטח ריק. כאן אותה פריסה בדיוק, באותו סדר ובאותו מרכוז, במידות של טאבלט.
   העננים והאור נמדדים באחוזים מהדמות ולכן הם גדלים איתה מעצמם. */
@media (min-width:768px) and (max-width:1024px) {
  .roei-hero.ah-band { max-width:720px; }
  .roei-hero .ah-title { font-size:48px; line-height:62px; }
  .roei-hero .ah-crumb { font-size:15px; line-height:22px; }
  .roei-figure { width:340px; }
  .roei-portrait { width:340px; height:339.25px; }
  .roei-story-copy { width:min(560px, calc(100% - 96px)); max-width:none; margin-top:22px; }
  .roei-biography { font-size:19px; }
}

@media (max-width:389px) {
  .roei-hero.ah-band { width:91.7949vw; min-height:0; margin-top:-4.1026vw; border-radius:8.2051vw; }
  .roei-hero .ah-band-in { padding-top:3.8462vw; }
  .roei-hero .ah-crumb { font-size:3.5897vw; line-height:5.1282vw; margin-bottom:1.2821vw; }
  .roei-hero .ah-title { font-size:10.2564vw; line-height:13.3333vw; }
  .roei-story { margin-top:4.1026vw; }
  .roei-figure { width:63.9846vw; }
  .roei-portrait { width:63.9846vw; height:63.8434vw; }
  .memorial-page .roei-figure .roei-mobile-donate.cta-btn { margin-top:-2.5641vw; }
  .roei-story-copy { width:calc(100% - 44px); max-width:none; margin:4.1026vw auto 0; }
  .roei-biography { font-size:4.6154vw; }
}