/* ===================================================================
   dedication-variants.css — 7.10.2026
   -------------------------------------------------------------------
   שתי דרכים להציג שהפעילות היא לזכרו של רועי, להשוואה:

     ?ded=a    הפופ-אפ. אותה שפה של ההקדשה המקורית — עננים, הדמות
               שעולה מהם, השם בכתום — אבל בתוך כרטיס מוכל, עם זכוכית
               על העמוד שמאחור ועם X לסגירה.
     ?ded=d    לשונית דביקה בצד שמאל שנפתחת לחלון צד.
     ?ded=ad   שתיהן יחד.
     ?ded=old  ההקדשה המקורית במסך מלא, להשוואה.
     ?ded=off  בלי כלום.

   ברירת המחדל: a.

   הווריאנט שהיה קודם שורה קבועה בהירו (‎.ded-hero-line‎) הוסר לבקשת
   חן: הוא נראה ככפתור והתחרה ב"מלאו להם צלחת עכשיו" שישב מתחתיו.
   =================================================================== */

/* ===================================================================
   א׳ — הפופ-אפ המוכל
   =================================================================== */
.ded-glass {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: color-mix(in srgb, var(--color-canvas, #fdfbf8) 52%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  backdrop-filter: blur(16px) saturate(1.08);
  opacity: 0;
  transition: opacity .6s ease;
}
.ded-glass.is-in { opacity: 1; }
.ded-glass.is-out { opacity: 0; pointer-events: none; }

.ded-boxed {
  --bx-sky: 250px;      /* גובה שמי העננים בתוך הכרטיס */
  --bx-fig: 224px;      /* גובה הדמות */
  position: relative;
  width: min(580px, 100%);
  box-sizing: border-box;
  padding-block-end: 34px;
  border-radius: 34px;
  overflow: hidden;
  text-align: center;
  background: var(--color-canvas, #fdfbf8);
  box-shadow: 0 30px 70px -22px color-mix(in srgb, var(--color-ink, #431f10) 42%, transparent);
  transform: translateY(16px) scale(.985);
  opacity: 0;
  transition: transform .7s cubic-bezier(.22,.9,.3,1), opacity .7s ease;
}
.ded-glass.is-in .ded-boxed { transform: none; opacity: 1; }

/* השמיים: בראש הכרטיס, נמסים אל הקרם בדיוק כמו במקור */
.ded-boxed__sky {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--bx-sky);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0,0,0,.5) 74%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0,0,0,.5) 74%, transparent 100%);
}
.ded-boxed__clouds,
.ded-boxed__clouds-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ded-boxed__clouds-video { opacity: 0; transition: opacity 1.2s ease; }
.ded-boxed__clouds-video.is-playing { opacity: 1; }

/* X לסגירה — יושב על השמיים, בפינה */
.ded-boxed__x {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  z-index: 3;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-ink, #431f10);
  background: color-mix(in srgb, var(--color-canvas, #fdfbf8) 72%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color .2s ease;
}
.ded-boxed__x:hover { background: color-mix(in srgb, var(--color-canvas, #fdfbf8) 92%, transparent); }
.ded-boxed__x svg { width: 19px; height: 19px; }

.ded-boxed__body { position: relative; z-index: 2; padding: 0 26px; }

/* הדמות, עם ההילה והקרניים — אותו טיפול כמו במקור */
.ded-boxed__figure {
  position: relative;
  height: var(--bx-fig);
  width: calc(var(--bx-fig) * .94);
  margin: 18px auto 0;
  display: grid;
  place-items: end center;
}
.ded-boxed__light {
  position: absolute; left: 50%; top: 27%;
  width: 132%; aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,228,178,.82) 0%, rgba(255,214,150,.42) 34%, rgba(255,205,135,.14) 58%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 48%, transparent 76%);
          mask-image: radial-gradient(circle at 50% 50%, #000 48%, transparent 76%);
  animation: dedBoxedBreathe 5.5s ease-in-out infinite;
}
.ded-boxed__rays {
  position: absolute; left: 50%; top: 50%;
  width: 128%; aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(from 0deg,
    rgba(255,221,168,.34) 0deg, transparent 13deg, rgba(255,221,168,.34) 26deg, transparent 39deg,
    rgba(255,221,168,.34) 52deg, transparent 65deg, rgba(255,221,168,.34) 78deg, transparent 91deg,
    rgba(255,221,168,.34) 104deg, transparent 117deg, rgba(255,221,168,.34) 130deg, transparent 143deg,
    rgba(255,221,168,.34) 156deg, transparent 169deg, rgba(255,221,168,.34) 182deg, transparent 195deg,
    rgba(255,221,168,.34) 208deg, transparent 221deg, rgba(255,221,168,.34) 234deg, transparent 247deg,
    rgba(255,221,168,.34) 260deg, transparent 273deg, rgba(255,221,168,.34) 286deg, transparent 299deg,
    rgba(255,221,168,.34) 312deg, transparent 325deg, rgba(255,221,168,.34) 338deg, transparent 351deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 62%);
          mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 62%);
  animation: dedBoxedRays 64s linear infinite;
}
.ded-boxed__photo {
  position: relative; z-index: 1;
  height: var(--bx-fig); width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 97%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 97%);
}

.ded-boxed__pre {
  margin: 14px 0 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: #6B4A38;
}
.ded-boxed__name {
  margin: 4px 0 0;
  font-size: clamp(38px, 7.6vw, 52px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.018em;
  background-image: linear-gradient(94deg, #F58A3E 0%, #F16A2C 46%, #E0551C 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* ‎max-width‎ רחב בכוונה: השבירה לשתי שורות נעשית ב-‎<br>‎ מפורש בטקסט,
   ואם הרוחב היה צר יותר כל שורה הייתה נשברת שוב ויוצאות ארבע. */
.ded-boxed__line {
  margin: 15px auto 0;
  max-width: 100%;
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-ink, #431f10);
}
.ded-boxed__line b { color: var(--color-accent, #f16a2c); font-weight: 800; }

/* ===================================================================
   המד: קו לרוחב כל תחתית הכרטיס שמתרוקן, ובסופו הכרטיס נסגר לבד.
   שבע שניות — כ-20 מילים בעברית, כולל רגע להסתכל על התמונה.
   עוצר בריחוף ובפוקוס, כדי שהוא לא ייעלם באמצע קריאה.
   =================================================================== */
.ded-boxed__meter {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 4px;
  background: color-mix(in srgb, var(--color-ink, #431f10) 9%, transparent);
  overflow: hidden;
}
.ded-boxed__meter i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 100% 50%;   /* מתרוקן מימין לשמאל, ככיוון הקריאה */
  background: linear-gradient(90deg, #F58A3E, #E0551C);
}
html[dir="ltr"] .ded-boxed__meter i { transform-origin: 0 50%; }
.ded-glass.is-in .ded-boxed__meter i { animation: dedBoxedDrain var(--bx-read, 7s) linear forwards; }
.ded-boxed:hover .ded-boxed__meter i,
.ded-boxed:focus-within .ded-boxed__meter i { animation-play-state: paused; }
@keyframes dedBoxedDrain { to { transform: scaleX(0); } }

@media (max-width: 480px) {
  .ded-boxed { --bx-sky: 208px; --bx-fig: 184px; border-radius: 28px; padding-block-end: 30px; }
  .ded-boxed__body { padding: 0 20px; }
  .ded-boxed__pre { font-size: 16px; }
  .ded-boxed__name { font-size: clamp(32px, 9.2vw, 42px); }
  .ded-boxed__line { font-size: 16.5px; max-width: 28ch; }
}
@media (max-height: 680px) {
  .ded-boxed { --bx-sky: 180px; --bx-fig: 158px; }
}

@keyframes dedBoxedBreathe { 0%,100% { opacity: .84; } 50% { opacity: 1; } }
@keyframes dedBoxedRays { to { rotate: 360deg; } }

/* ===================================================================
   ד׳ — לשונית דביקה בצד ימין, ומגירה שנפתחת ממנה
   -------------------------------------------------------------------
   7.10.2026: הייתה מלבן רחב שבלט פנימה אל תוך העמוד. עכשיו מלבן
   לאורך, צמוד לקצה הימני, עם פינות מעוגלות בצד הפנימי בלבד — תופס
   רצועה צרה ולא עולה על תוכן. הטקסט מסובב עם ‎writing-mode‎.

   ‎font-family: inherit‎ אינו קישוט: ‎<button>‎ אינו יורש גופן מהדף,
   ולכן הלשונית הוצגה ב-Arial בעוד כל האתר ב-Afek. נמדד ואומת.
   =================================================================== */
/* ---- דסקטופ: לשונית צמודה לקצה הימני ------------------------------
   הטקסט אינו מסובב. ניסיתי גם ‎writing-mode‎ וגם ‎transform: rotate‎,
   ובשניהם הקריאה בעברית יצאה לא טבעית — או שסדר המילים התהפך, או
   שהגולש צריך להטות את הראש. המילים פשוט מוערמות, שתיים בשורה, וכל
   אחת קריאה כרגיל.

   הפינות פיזיות ולא לוגיות: ‎border-start-start-radius‎ בעמוד RTL
   מתפרש כפינה הימנית, כלומר בדיוק ההפך מהמבוקש. כאן שמאל מעוגל,
   ימין ישר, כמו בקומפוזיציה ששלחה חן. */
.ded-tab {
  position: fixed;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* ‎width: max-content‎ ולא מספר קבוע: מילה בשורה, ולכן הרוחב נקבע
     לפי המילה הארוכה ביותר. ‎min-width‎ כדי שהדיוקן יישב בנוח. */
  width: max-content;
  min-width: 62px;
  padding: 12px 9px 13px;
  border: 0;
  border-radius: 20px 0 0 20px;   /* שמאל מעוגל, ימין ישר */
  cursor: pointer;
  /* 7.10.2026: הרקע היה קרם שטוח. עכשיו שלוש שכבות שעושות אותו סימנייה
     ולא תיבה: גרדיאנט חם ועדין מלמעלה למטה, קו כתום דק על הקצה הישר
     שנצמד לחלון (‎inset box-shadow‎, כדי שלא יוסיף רוחב), וזוהר רך
     שנדלק בריחוף. זהו גם מה שהמטאפורה מבקשת — סרט שתחוב בצד הדף. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-accent, #f16a2c) 7%, var(--color-canvas, #fdfbf8)) 0%,
      color-mix(in srgb, var(--color-canvas, #fdfbf8) 97%, transparent) 46%,
      color-mix(in srgb, var(--color-accent, #f16a2c) 5%, var(--color-canvas, #fdfbf8)) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
  box-shadow:
    inset -3px 0 0 0 var(--color-accent, #f16a2c),
    -10px 0 32px -12px color-mix(in srgb, var(--color-ink, #431f10) 38%, transparent);
  color: var(--color-ink, #431f10);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  transition: transform .25s ease;
}
.ded-tab:hover {
  transform: translateX(-3px);
  box-shadow:
    inset -3px 0 0 0 var(--color-accent, #f16a2c),
    -14px 0 38px -12px color-mix(in srgb, var(--color-accent, #f16a2c) 46%, transparent);
}
/* אותה טבעת פועמת כמו ברצועה, כדי ששתיהן ידברו באותה שפה */
.ded-tab__ring { position: relative; flex: 0 0 auto; display: grid; place-items: center; }
.ded-tab__ring::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent, #f16a2c);
  animation: dedRingPulse 2.6s ease-out infinite;
}
.ded-tab__face {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent, #f16a2c) 36%, transparent);
}
/* מילה בשורה */
.ded-tab__text span { display: block; }
.ded-tab__text small { display: block; font-weight: 500; font-size: 10.5px; opacity: .62; }
.ded-tab__text small span { line-height: 1.3; }
.ded-tab__text .is-bold { font-weight: 800; line-height: 1.3; }
.ded-tab__text > .is-bold:first-of-type { margin-block-start: 3px; }

/* ---- נייד: רצועה רצה מעל התפריט ----------------------------------
   בצד ימין אין מקום בנייד, ולכן שורה אחת בראש העמוד: הדיוקן בעיגול
   והטקסט רץ לצידו. גובה מינימלי, ולא מכסה שום דבר. */
.ded-strip {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 12px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-ink, #431f10);
  background: color-mix(in srgb, var(--color-accent, #f16a2c) 9%, var(--color-canvas, #fdfbf8));
  border-block-end: 1px solid color-mix(in srgb, var(--color-ink, #431f10) 8%, transparent);
  text-align: start;
}
/* הדיוקן ברצועה, עם טבעת כתומה שפועמת. ‎box-shadow‎ ולא ‎border‎ כדי
   שהטבעת לא תשנה את גודל התמונה בזמן הפעימה, ולא תזיז את השורה. */
.ded-strip__ring { position: relative; flex: 0 0 auto; display: grid; place-items: center; }
.ded-strip__ring::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent, #f16a2c);
  animation: dedRingPulse 2.6s ease-out infinite;
}
.ded-strip__face {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent, #f16a2c) 34%, transparent);
}
@keyframes dedRingPulse {
  0%   { transform: scale(.86); opacity: .95; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
/* חלון הריצה. התוכן מוכפל בקוד, כך שהלולאה נסגרת בלי קפיצה. */
.ded-strip__track {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to left, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.ded-strip__run {
  display: inline-flex;
  gap: 42px;
  white-space: nowrap;
  animation: dedStripRun 17s linear infinite;
}
.ded-strip:hover .ded-strip__run { animation-play-state: paused; }
.ded-strip__run b { font-weight: 800; color: var(--color-accent, #f16a2c); }
/* ‎-50%‎ ולא ‎-100%‎: התוכן מופיע פעמיים, ולכן חצי מהרוחב הוא בדיוק מחזור. */
@keyframes dedStripRun { to { transform: translateX(50%); } }
html[dir="ltr"] .ded-strip__run { animation-name: dedStripRunLtr; }
@keyframes dedStripRunLtr { to { transform: translateX(-50%); } }

/* מתחת ל-1025 אין מקום בצד: הרצועה מחליפה את הלשונית, ולהפך. */
@media (max-width: 1024px) { .ded-tab { display: none; } }
@media (min-width: 1025px) { .ded-strip { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .ded-strip__run { animation: none; }
  .ded-strip__ring::after, .ded-tab__ring::after { animation: none; opacity: .5; transform: none; }
}
html.a11y-still .ded-strip__run { animation: none; }
html.a11y-still .ded-strip__ring::after,
html.a11y-still .ded-tab__ring::after { animation: none; opacity: .5; transform: none; }

/* המגירה */
/* המגירה. המיקום פיזי בכוונה ולא לוגי, כדי שהיא תישאר באותו צד גם
   בעמודי האנגלית. 7.10.2026: עברה לימין יחד עם הלשונית, והגובה ירד
   למחצית המסך — אין בה מספיק תוכן כדי להצדיק עמודה מלאה. */
.ded-drawer {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: color-mix(in srgb, var(--color-ink, #431f10) 22%, transparent);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.ded-drawer.is-in { opacity: 1; pointer-events: auto; }

.ded-drawer__panel {
  position: absolute;
  right: 0;
  top: 50%;
  width: min(360px, 88vw);
  /* נצמד לגובה התוכן ולא למספר קבוע, אחרת נשארת שארית ריקה בתחתית.
     התקרה היא כדי שלא יגלוש במסכים נמוכים. */
  height: auto;
  max-height: min(600px, 82vh);
  overflow: hidden auto;
  box-sizing: border-box;
  padding: 0 0 24px;
  text-align: center;
  background: var(--color-canvas, #fdfbf8);
  /* פיזי ולא לוגי, מאותה סיבה כמו בלשונית: ‎start‎ בעמוד RTL הוא ימין,
     והעיגול יצא על הקצה הצמוד לחלון במקום על הצד הפנימי. */
  border-radius: 26px 0 0 26px;
  box-shadow: -24px 0 60px -24px color-mix(in srgb, var(--color-ink, #431f10) 48%, transparent);
  transform: translate(100%, -50%);
  transition: transform .46s cubic-bezier(.22,.9,.3,1);
}
.ded-drawer.is-in .ded-drawer__panel { transform: translate(0, -50%); }

.ded-drawer__sky { position: relative; height: 210px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%); }
.ded-drawer__clouds,
.ded-drawer__clouds-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ded-drawer__clouds-video { opacity: 0; transition: opacity 1.2s ease; }
.ded-drawer__clouds-video.is-playing { opacity: 1; }
.ded-drawer__figure { position: relative; margin-top: -168px; height: 190px; display: grid; place-items: end center; }
.ded-drawer__photo { height: 190px; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 97%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 97%); }
.ded-drawer__body { padding: 12px 22px 0; }
.ded-drawer__pre { margin: 0; font-size: 14px; font-weight: 700; color: #6B4A38; }
.ded-drawer__name {
  margin: 2px 0 0;
  font-size: 30px; font-weight: 900; line-height: 1.14;
  background-image: linear-gradient(94deg, #F58A3E 0%, #F16A2C 46%, #E0551C 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ded-drawer__line { margin: 11px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--color-ink, #431f10); }
.ded-drawer__line b { color: var(--color-accent, #f16a2c); font-weight: 800; }
.ded-drawer__cta {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px 13px 18px;
  border-radius: 999px;
  font-size: 15px; font-weight: 800; text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #F58A3E, #E0551C);
  box-shadow: 0 10px 24px -8px rgba(241,106,44,.55);
}
.ded-drawer__cta svg { width: 17px; height: 17px; flex: none; }
/* המגירה יושבת בקצה השמאלי של המסך, ולכן ה-X על הצד הפנימי שלה
   (ימין) ולא על הלוגי — אחרת הוא נדחק אל קצה החלון ונחתך. */
/* הפאנל צמוד לקצה הימני, ולכן ה-X על צידו הפנימי (שמאל). */
.ded-drawer__x {
  position: absolute; inset-block-start: 10px; left: 10px;
  z-index: 3;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  color: var(--color-ink, #431f10);
  background: color-mix(in srgb, var(--color-canvas, #fdfbf8) 72%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ded-drawer__x svg { width: 19px; height: 19px; }

/* תנועה מופחתת */
@media (prefers-reduced-motion: reduce) {
  .ded-glass, .ded-boxed, .ded-drawer, .ded-drawer__panel, .ded-tab { transition: none; }
  .ded-boxed__light, .ded-boxed__rays { animation: none; }
}
html.a11y-still .ded-glass,
html.a11y-still .ded-boxed,
html.a11y-still .ded-drawer,
html.a11y-still .ded-drawer__panel { transition: none; }
html.a11y-still .ded-boxed__light,
html.a11y-still .ded-boxed__rays { animation: none; }