/* ---------- ריל פתיחה: סצנות קצרות, מעברי קשת, הכל מצבעי הפלטה ---------- */
.ריל{position:relative;height:calc(100svh - var(--גובה-כותרת,66px));min-height:520px;max-height:980px;overflow:hidden;background:var(--שחור);color:var(--שמנת);isolation:isolate}
.ריל__במה{position:absolute;inset:0}
.ריל__וידאו{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.סצנה{position:absolute;inset:0;visibility:hidden;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:clamp(20px,4vw,56px) var(--שוליים) 120px}
.סצנה.קודמת{visibility:visible;z-index:2}
.סצנה.פעילה{visibility:visible;z-index:3;animation:קשת-עולה .52s cubic-bezier(.7,0,.2,1) both}
.סצנה.פעילה.קודמת{z-index:2;animation:none}
@keyframes קשת-עולה{
  0%{clip-path:inset(100% 0 0 0 round 50% 50% 0 0)}
  72%{clip-path:inset(0 0 0 0 round 50% 50% 0 0)}
  100%{clip-path:inset(0 0 0 0 round 0 0 0 0)}
}
.רקע-שמנת{background:var(--שמנת);color:var(--שחור)}
.רקע-שמנת-כהה{background:var(--שמנת-כהה);color:var(--שחור)}
.רקע-כתום{background:var(--כתום);color:var(--על-כתום)}
.רקע-שחור{background:var(--שחור);color:var(--שמנת)}
.רקע-גוון{background:color-mix(in srgb,var(--כתום) 32%,var(--שמנת));color:var(--שחור)}

/* טיפוגרפיה גדולה */
.ריל-ענק{font-family:var(--פונט-תצוגה);font-weight:700;font-size:clamp(40px,7.4vw,124px);line-height:1.02;margin:0;text-align:center;letter-spacing:-.01em}
.ריל-הדגשה{color:var(--כתום)}
.רקע-כתום .ריל-הדגשה{color:var(--שמנת)}
.ריל-סמן{display:inline-block;width:.08em;height:.85em;background:currentColor;margin-inline-start:.06em;vertical-align:-.08em;animation:הבהוב .7s steps(1) infinite}
@keyframes הבהוב{50%{opacity:0}}
.ריל-תגית{position:absolute;top:clamp(20px,4vw,44px);inset-inline-end:var(--שוליים);font-size:clamp(14px,1.4vw,20px);font-weight:700;border:2px solid currentColor;border-radius:999px 999px 8px 8px;padding:6px 16px 4px;z-index:2}

/* מפל: מילה אחת שוב ושוב, ועותק אחד שונה */
.מפל{justify-content:flex-start;align-items:flex-start;padding-top:clamp(10px,2vw,24px)}
.מפל__שורות{display:flex;flex-direction:column;width:100%}
.מפל__שורה{font-family:var(--פונט-תצוגה);font-weight:700;font-size:clamp(44px,8.6vw,146px);line-height:.92;margin-inline-start:calc(var(--i) * 7.5vw);white-space:nowrap}
.מפל__שורה.שונה{color:var(--שמנת);-webkit-text-stroke:0}
.מפל__שורה.מתאר{color:transparent;-webkit-text-stroke:2px var(--על-כתום)}
.סצנה.פעילה .מפל__שורה{animation:מפל-כניסה .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 75ms + .18s)}
@keyframes מפל-כניסה{from{opacity:0;transform:translateX(-18%)}to{opacity:1;transform:none}}

/* חלונות־קשת עם אתר אפור שנגלל מהר */
.ריל-חלון{position:relative;border-radius:999px 999px 24px 24px;overflow:hidden;background:var(--אפור-בהיר);box-shadow:0 0 0 2px color-mix(in srgb,currentColor 30%,transparent)}
.ריל-חלון__תוכן{will-change:transform}
.ריל-חלון__תוכן .שלד__תגית{display:none}
.סצנת-קשת{align-items:flex-end;padding-bottom:0}
.ריל-חלון--רחב{width:min(94vw,1240px);height:calc(100% - 20px);border-radius:999px 999px 0 0}
.ריל-קו-מתאר{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-family:var(--פונט-תצוגה);font-weight:700;font-size:clamp(84px,19vw,330px);line-height:1;color:transparent;-webkit-text-stroke:3px var(--שמנת);pointer-events:none;z-index:2;padding-bottom:90px}
.סצנה.פעילה .ריל-קו-מתאר{animation:קרב .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes קרב{from{transform:scale(1.25);opacity:0}to{transform:none;opacity:1}}
.פיצול{display:flex;gap:clamp(16px,4vw,64px);height:100%;align-items:stretch;justify-content:center;width:100%}
.פיצול .ריל-חלון{width:min(30vw,400px);height:100%}
.סצנה.פעילה .פיצול .ריל-חלון:last-child{animation:עלייה .45s .1s cubic-bezier(.2,.8,.2,1) both}
@keyframes עלייה{from{transform:translateY(30%)}to{transform:none}}

/* מילה עם עותקי מתאר שבורחים ממנה */
.ריל-מילה{position:relative;margin:0;font-family:var(--פונט-תצוגה);font-weight:700;font-size:clamp(76px,16vw,270px);line-height:1}
.ריל-מילה span{display:block}
.ריל-מילה__מלא{position:relative;color:var(--כתום);z-index:2}
.ריל-מילה__מתאר{position:absolute;inset:0;color:transparent;-webkit-text-stroke:2px var(--שמנת)}
.סצנה.פעילה .ריל-מילה__מתאר{animation:בריחה .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes בריחה{from{transform:none;opacity:0}to{transform:translate(calc(var(--i) * -2.2vw),calc(var(--i) * -2.2vw));opacity:1}}

/* חלק ממיתוג בתוך קשת גדולה */
.ריל-חלון--מיתוג{width:min(64vw,760px);height:100%;background:color-mix(in srgb,var(--שמנת) 88%,var(--שחור));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3vw,36px);border-radius:999px 999px 24px 24px}
.מיתוג-ריל__עיגול{width:clamp(110px,16vw,220px);aspect-ratio:1;border-radius:50%;background:var(--אפור-כהה);display:grid;place-items:center}
.מיתוג-ריל__עיגול::after{content:"";width:42%;height:52%;border-radius:999px 999px 6px 6px;background:var(--אפור-בהיר)}
.מיתוג-ריל__צבעים{display:flex;gap:12px}
.מיתוג-ריל__צבעים i{width:clamp(26px,3.4vw,46px);aspect-ratio:1;border-radius:50%;background:var(--אפור-עבודה)}
.מיתוג-ריל__צבעים i:nth-child(2){background:#A49D93}.מיתוג-ריל__צבעים i:nth-child(3){background:#8F877D}.מיתוג-ריל__צבעים i:nth-child(4){background:var(--אפור-בהיר);box-shadow:inset 0 0 0 2px var(--אפור-כהה)}
.מיתוג-ריל__קו{width:46%;height:clamp(12px,1.6vw,20px);border-radius:10px;background:var(--אפור-כהה)}
.סצנה.פעילה .מיתוג-ריל__עיגול{animation:סיבוב .6s .15s cubic-bezier(.2,1.4,.4,1) both}
@keyframes סיבוב{from{transform:scale(0) rotate(-120deg)}to{transform:none}}
.סצנה.פעילה .מיתוג-ריל__צבעים i{animation:פופ .35s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(.45s + var(--i) * 70ms)}
@keyframes פופ{from{transform:scale(0)}to{transform:none}}

/* קיר של קשתות קטנות */
.קיר-ריל{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(8px,1.4vw,18px);width:min(100%,1240px);height:100%}
.קיר-ריל__אריח{border-radius:999px 999px 10px 10px;background:var(--אפור-עבודה);position:relative;overflow:hidden}
.קיר-ריל__אריח:nth-child(3n){background:var(--אפור-בהיר)}
.קיר-ריל__אריח:nth-child(4n+1){background:var(--כתום)}
.קיר-ריל__אריח::after{content:"";position:absolute;inset:38% 18% auto;height:6px;border-radius:3px;background:color-mix(in srgb,var(--שחור) 25%,transparent);box-shadow:0 12px 0 color-mix(in srgb,var(--שחור) 18%,transparent),0 24px 0 color-mix(in srgb,var(--שחור) 12%,transparent)}
.סצנה.פעילה .קיר-ריל__אריח{animation:פופ .32s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--i) * 28ms + .15s)}

/* סיום: הלוגו מצייר את עצמו */
.ריל-לוגו{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vw,24px);text-align:center}
.ריל-לוגו svg{width:clamp(220px,34vw,520px);height:auto;overflow:visible}
.ריל-לוגו path{stroke-dasharray:120;stroke-dashoffset:120}
.סצנה.פעילה .ריל-לוגו path{animation:ציור .7s cubic-bezier(.6,0,.2,1) forwards;animation-delay:calc(.2s + var(--i) * .16s)}
@keyframes ציור{to{stroke-dashoffset:0}}
.ריל-לוגו p{margin:0;font-family:var(--פונט-תצוגה);font-weight:400;font-size:clamp(20px,2.6vw,40px)}

/* מחיקה */
.מחיקה{position:relative;display:inline-block;opacity:.45}
.מחיקה::after{content:"";position:absolute;inset-inline:-2%;top:52%;height:.12em;background:var(--כתום);transform-origin:right;transform:scaleX(0)}
.סצנה.פעילה .מחיקה::after{animation:קו-מחיקה .3s .2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes קו-מחיקה{to{transform:scaleX(1)}}

/* פריים סטטי — רק למי שביקש פחות תנועה */
.סצנה--סטטית{display:none}
.ריל--סטטי .סצנה{visibility:hidden}
.ריל--סטטי .סצנה--סטטית{display:flex;visibility:visible;z-index:3;gap:clamp(24px,5vw,80px)}
.ריל--סטטי .ריל__עצירה,.ריל--סטטי .ריל__התקדמות{display:none}
.סצנה--סטטית .ריל-ענק{text-align:start;font-size:clamp(36px,6vw,100px)}
.סצנה--סטטית .ריל-חלון{width:min(30vw,380px);height:100%;flex:none}

/* עצירה */
.ריל.מושהה .סצנה,.ריל.מושהה .סצנה *,.ריל.מושהה .סצנה *::after{animation-play-state:paused!important}

/* שכבות קבועות */
.ריל__זמני{position:absolute;top:14px;inset-inline-start:var(--שוליים);z-index:6;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--שמנת) 88%,transparent);color:var(--שחור);padding:4px 12px;border-radius:999px}
.ריל__פס{position:absolute;inset-inline:var(--שוליים);bottom:clamp(14px,2vw,24px);z-index:6;display:flex;align-items:center;gap:12px 24px;background:var(--שמנת);color:var(--שחור);border-radius:999px 999px 18px 18px;padding:12px 14px 12px 22px;padding-inline-start:28px;box-shadow:0 0 0 2px var(--שחור);overflow:hidden}
.ריל__זהות{margin:0;font-size:16px;font-weight:500;white-space:nowrap}
.ריל__זהות b{font-family:var(--פונט-תצוגה);font-weight:700;font-size:20px;color:var(--כתום-עמוק)}
.ריל__גלילה{margin-inline:auto;text-decoration:none;font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.ריל__גלילה:hover{color:var(--כתום-עמוק)}
.ריל__גלילה i{font-style:normal;display:inline-block;animation:קפיצה 1.4s ease-in-out infinite}
@keyframes קפיצה{50%{transform:translateY(4px)}}
.ריל__פעולות{display:flex;gap:8px;align-items:center}
.ריל__עצירה{width:44px;height:44px;border-radius:50%;border:2px solid var(--שחור);background:transparent;display:grid;place-items:center;flex:none}
.ריל__עצירה:hover{background:var(--שחור);color:var(--שמנת)}
.ריל__עצירה svg{width:16px;height:16px;fill:currentColor}
.ריל__עצירה .סמל-הפעלה{display:none}
.ריל__עצירה[aria-pressed="true"] .סמל-הפעלה{display:block}
.ריל__עצירה[aria-pressed="true"] .סמל-עצירה{display:none}
.ריל__וואטסאפ{display:flex;align-items:center;gap:8px;background:var(--כתום);color:var(--על-כתום);text-decoration:none;font-weight:700;font-size:15px;padding:11px 18px;border-radius:999px 999px 10px 10px;border:2px solid var(--שחור);white-space:nowrap}
.ריל__וואטסאפ:hover{background:var(--שחור);color:var(--שמנת)}
.ריל__וואטסאפ svg{width:18px;height:18px}
.ריל__התקדמות{position:absolute;inset-inline:0;bottom:0;height:3px;background:color-mix(in srgb,var(--שחור) 10%,transparent)}
.ריל__התקדמות i{position:absolute;inset-block:0;inset-inline-start:0;width:var(--ריל-התקדמות,0%);background:var(--כתום)}

@media (max-width:900px){
  .פיצול .ריל-חלון{width:42vw}
  .ריל-חלון--מיתוג{width:78vw}
  .קיר-ריל{grid-template-columns:repeat(5,minmax(0,1fr))}
  .קיר-ריל__אריח:nth-child(n+21){display:none}
}
@media (max-width:640px){
  .ריל{height:min(80svh,calc(100svh - var(--גובה-כותרת,100px)));min-height:540px}
  .סצנה{padding:20px 16px 150px}
  .ריל-ענק{font-size:clamp(34px,11.5vw,52px);line-height:1.08}
  .מפל__שורה{font-size:16vw;margin-inline-start:calc(var(--i) * 6vw)}
  .ריל-קו-מתאר{font-size:24vw;-webkit-text-stroke:2px var(--שמנת);padding-bottom:140px}
  .ריל-חלון--רחב{width:100%}
  .פיצול{gap:12px}
  .פיצול .ריל-חלון{width:calc(50% - 6px)}
  .ריל-מילה{font-size:24vw}
  .ריל-חלון--מיתוג{width:88%}
  .קיר-ריל{grid-template-columns:repeat(4,minmax(0,1fr))}
  .קיר-ריל__אריח:nth-child(n+17){display:none}
  .ריל-לוגו svg{width:66vw}
  .ריל-תגית{top:52px}
  .ריל__פס{flex-wrap:wrap;border-radius:28px 28px 16px 16px;padding:12px 14px;inset-inline:12px;row-gap:10px}
  .ריל__זהות{font-size:14px;flex:1}
  .ריל__זהות b{font-size:17px}
  .ריל__פעולות{order:2}
  .ריל__גלילה{order:3;margin:0;flex:1 0 100%;justify-content:center;font-size:14px;border-top:1px solid color-mix(in srgb,var(--שחור) 12%,transparent);padding-top:8px}
  .ריל__וואטסאפ{padding:9px 14px;font-size:14px}
  .ריל__עצירה{width:40px;height:40px}
  .סצנה--סטטית{flex-direction:column;justify-content:flex-start}
  .סצנה--סטטית .ריל-חלון{width:60vw;height:auto;flex:1}
}
/* מחליף הצבעים הזמני יושב בפינה התחתונה — מרימים מעליו את הפס */
body:has(.מחליף-צבעים) .ריל__פס{bottom:68px}
body:has(.מחליף-צבעים) .סצנה{padding-bottom:170px}
@media (max-width:640px){
  .ריל__פס{padding:10px 12px;row-gap:8px;column-gap:10px}
  .ריל__פעולות{display:contents}
  .ריל__זהות{order:1;flex:1 1 calc(100% - 60px)}
  .ריל__עצירה{order:2;width:38px;height:38px}
  .ריל__וואטסאפ{order:3}
  .ריל__גלילה{order:4;flex:1 1 auto;border-top:0;padding-top:0;justify-content:flex-end}
}