/* LSTAL AI · הפתיחה. הצבעים והמבנה. האותיות (אלמוני ואלמוני צר של אאא) נטענות מ-fonts.css */
:root {
  --night: #0d0b09;
  --paper: #f1ebe1;
  --ash: #a8a094;
  --frame: #d9d2c6;
  --flavor-choco: #4a2a19;
  --flavor-salty: #b5402c;
  --flavor-fresh: #4f7d33;
  --flavor-candy: #d97aa0;
  --flavor-candy-ink: #3a1626;
  --fear: #e0503a;   /* הצבע היחיד בשחור-לבן: הפחד של 1812, ואותו פחד בדיוק ב-2026 */
  --font-title: "Almoni Tzar AAA", sans-serif;   /* רק לשנים שבציר */
  --font-text: "Almoni AAA", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --tl-w: clamp(160px, 22vw, 320px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background: var(--night);
  color: var(--paper);
  font-family: var(--font-text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font-family: var(--font-text); }

.stage { position: fixed; inset: 0; overflow: hidden; background: var(--night); }

/* ---------- הרקע: התמונה זזה כל הזמן ---------- */
/* רעד של סרט שעובר במקרן */
.reel { position: absolute; inset: 0; animation: weave .24s steps(3) infinite; }
@keyframes weave {
  0% { transform: translate(0, 0); }
  33% { transform: translate(1px, -1.4px); }
  66% { transform: translate(-.8px, .6px); }
  100% { transform: translate(.4px, 1px); }
}

/* התמונות כבר בשחור-לבן בתוך הקבצים, ולכן אין כאן מסננים שהדפדפן צריך לחשב */
.shot {
  position: absolute; inset: -8%;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity .55s var(--ease);
  will-change: opacity, transform;
}
.shot.on { opacity: 1; }
.shot.out { opacity: 0; transition: opacity .28s var(--ease); }

/* תנועת מצלמה ברורה, אחרת בכל מסך */
.shot.m-in    { animation: m-in 11s cubic-bezier(.4, 0, .3, 1) forwards; }
.shot.m-out   { animation: m-out 11s cubic-bezier(.4, 0, .3, 1) forwards; }
.shot.m-right { animation: m-right 11s cubic-bezier(.4, 0, .3, 1) forwards; }
.shot.m-left  { animation: m-left 11s cubic-bezier(.4, 0, .3, 1) forwards; }
/* 1770: תנועה מהירה וברורה יותר, מצד לצד, עם התקרבות */
.shot.m-left-fast { animation: m-left-fast 11s cubic-bezier(.3, 0, .3, 1) forwards; }
@keyframes m-left-fast { from { transform: scale(1.35) translate(12%, -2%); } to { transform: scale(1.12) translate(-10%, 2%); } }
/* 1812: אותה מהירות, לכיוון השני */
.shot.m-right-fast { animation: m-right-fast 11s cubic-bezier(.3, 0, .3, 1) forwards; }
@keyframes m-right-fast { from { transform: scale(1.35) translate(-12%, 2%); } to { transform: scale(1.12) translate(10%, -2%); } }
.shot.m-close { animation: m-close 11s cubic-bezier(.4, 0, .3, 1) forwards; }
@keyframes m-in    { from { transform: scale(1.3) translate(2%, 1.5%); } to { transform: scale(1.04) translate(0, 0); } }
@keyframes m-out   { from { transform: scale(1.02); } to { transform: scale(1.26) translate(-2%, -1%); } }
@keyframes m-right { from { transform: scale(1.2) translate(-5%, 1.5%); } to { transform: scale(1.12) translate(5%, -1.5%); } }
@keyframes m-left  { from { transform: scale(1.2) translate(5%, -1%); } to { transform: scale(1.12) translate(-5%, 1.5%); } }
@keyframes m-close { from { transform: scale(1.06); } to { transform: scale(1.38) translateY(4%); } }

/* הצבע נכנס: גרסה צבועה של אותה תמונה נפרשת מימין לשמאל, כמו מסך שמתחלף */
.shot__color {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.6s cubic-bezier(.6, 0, .2, 1);
}
.shot__color.on { clip-path: inset(0 0 0 0); }

/* האור של המקרן נושם: התמונה מתבהרת ומתכהה מעט כל הזמן */
.shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to left, rgba(13, 11, 9, .55), transparent 35%, transparent 45%, rgba(13, 11, 9, .7)),
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .8) 100%),
    rgba(0, 0, 0, .3);
  animation: breathe 2.6s ease-in-out infinite alternate;
}
@keyframes breathe { from { opacity: 1; } to { opacity: .8; } }

/* גרגר: אריח רעש אחד (img/grain.png) שקופץ ממקום למקום */
.grain {
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: url("img/grain.png");
  opacity: .45;
  pointer-events: none;
  animation: grain .6s steps(1) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-7%, 4%); }
  40%  { transform: translate(5%, -8%); }
  60%  { transform: translate(-3%, 7%); }
  80%  { transform: translate(8%, 2%); }
}
.flicker { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: flicker .16s steps(2) infinite; }
@keyframes flicker { 0% { opacity: .012; } 50% { opacity: .05; } 100% { opacity: .02; } }
/* הבזק קצר בכל חיתוך בין מסכים, כמו הדבקה בסרט */
.splice { position: absolute; inset: 0; background: var(--paper); opacity: 0; pointer-events: none; }
.splice.go { animation: splice .32s ease-out; }
@keyframes splice { 0% { opacity: .38; } 100% { opacity: 0; } }
.scratch { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: rgba(255, 255, 255, .4); pointer-events: none; opacity: 0; }

/* שם האתר לא מוצג על המסך (החלטה של ללי), ונשאר רק לקוראי מסך ולמנועי חיפוש */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- ציר השנים, מימין ---------- */
.timeline {
  position: absolute; z-index: 4;
  top: 0; bottom: 0; right: 0; width: var(--tl-w);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 3vh, 34px);
  padding-inline: clamp(22px, 3vw, 50px);
  list-style: none;
  border-inline-end: 1px solid rgba(241, 235, 225, .2);
  background: linear-gradient(to left, rgba(13, 11, 9, .85), rgba(13, 11, 9, .35));
  transition: opacity .6s var(--ease);
}
.stage:not(.playing) .timeline { opacity: 0; }
.tl__item {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-title); font-weight: 800;
  font-size: clamp(26px, 2.5vw, 36px); line-height: 1;
  color: var(--ash); opacity: .35;
  transition: font-size .45s var(--ease), opacity .45s var(--ease), color .45s var(--ease);
}
.tl__item::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; }
.tl__item.is-past { opacity: .7; }
.tl__item.is-past::before, .tl__item.is-now::before { background: currentColor; }
.tl__item.is-now { opacity: 1; color: var(--paper); font-size: clamp(64px, 6.8vw, 110px); }

/* ---------- המשפט, משמאל ---------- */
.caption {
  position: absolute; z-index: 4;
  top: 0; bottom: 0; left: 0; width: 60%;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  text-align: start;
  padding: 0 clamp(24px, 6vw, 110px) 40px;
  transition: opacity .25s var(--ease);
}
.caption.out { opacity: 0; }

/* כל המשפטים באותה אות (אלמוני של אאא), ולכן הרווח בין מילים זהה בכולם.
   הרווח בין השורות תמיד גדול מהגובה המלא של האות, כדי שהאותיות לא יעלו זו על זו,
   והמרווח בין משפט למשפט אחיד בכל המסכים */
/* רווח אחיד בין כל השורות: אותו מרחק בין שורה לשורה, גם בתוך משפט שנשבר לשתי שורות וגם בין משפט למשפט,
   וגם בשורה המודגשת. המרחק (1.5 מגודל האות הרגילה) גדול מהגובה המלא של האות המודגשת */
.lines { display: flex; flex-direction: column; align-items: flex-start; gap: 0; --row: calc(clamp(22px, 2.5vw, 38px) * 1.5); }
.line {
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 38px);
  line-height: var(--row);
  max-width: min(36ch, 92vw);
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .9);
}
.line.strong, .line.accent, .line.headline { max-width: none; text-wrap: wrap; }
.line.strong { font-weight: 700; font-size: clamp(28px, 3.1vw, 48px); line-height: var(--row); }
/* הטקסט של "עכשיו נשאר רק לבחור באיזה טעם :)" גדול יותר כדי להתאים לכפתורים הגדולים */
.line--bigger { font-size: clamp(28px, 3vw, 44px) !important; font-weight: 500; margin-top: .25em; }
/* השורה האדומה: עבה ומודגשת, באותו גודל וב-ש-הרווח כמו השורה המודגשת, כדי שהרווח בין כל השורות יישאר אחיד */
.line.accent { font-weight: 900; font-size: clamp(28px, 3.1vw, 48px); line-height: var(--row); color: var(--fear); letter-spacing: -.005em; }
/* השורה האדומה של 2026 ("ושוב אותו הפחד בדיוק"): גדולה משמעותית, בשורה משלה. הרווח סביבה גדל, כי זה המכה של המסך */
.line.accent--big { font-size: clamp(48px, 6vw, 96px); line-height: calc(var(--row) * 1.8); margin-top: .2em; word-spacing: .18em; letter-spacing: 0; }
.line.headline { font-weight: 900; font-size: clamp(60px, 7vw, 116px); line-height: 1.36; }
/* כל מילה נוחתת בנפרד: נכנסת ויורדת קצת למקום, בלי לגדול, כדי שלא תיגע במילים שלידה */
.w {
  display: inline-block;
  opacity: 0; transform: translateY(-.14em);
  transition: opacity .22s var(--ease), transform .28s var(--ease);
}
.w.in { opacity: 1; transform: none; }
/* הקלדה אות-אות (בכותרת של "המהפכה הדיגיטלית / כבר כאן") */
.ch {
  display: inline-block;
  opacity: 0; transform: translateY(-.08em);
  transition: opacity .12s var(--ease), transform .18s var(--ease);
}
.ch.in { opacity: 1; transform: none; }
/* רווח נוסף לפני שורה (ללי: רווח בין "נרצה או לא נרצה" לשורה שאחריה) */
.line--gap { margin-top: calc(var(--row) * .9); }
/* דגש מילה-מילה בשורה הגדולה: כל מילה "קופצת" בתורה. אחרי שהתכווצה חזרה היא בולטת מעט ועם זוהר עדין */
.highlight-each .w { transition: opacity .22s var(--ease), transform .3s cubic-bezier(.2, 1.6, .3, 1), text-shadow .35s var(--ease), color .35s var(--ease); transform-origin: center 60%; }
.highlight-each .w.hi { transform: scale(1.12); text-shadow: 0 2px 14px rgba(224, 80, 58, .5); }
.highlight-each .w.hi.done { transform: none; text-shadow: 0 2px 10px rgba(224, 80, 58, .3); }
/* לבדיקה בלבד (?still): בלי מעברים, כדי לצלם את המצב הסופי של המסך */
.still .w, .still .shot, .still .shot__color, .still .caption, .still .flavors { transition: none !important; }

/* ---------- המהפכה הדיגיטלית: הסרט הישן נעלם ---------- */
/* הגרגר, ההבהוב, השריטות והרעד דועכים, התמונה מתבהרת, והכותרת מקבלת יותר מקום */
.grain, .flicker { transition: opacity 1.8s var(--ease); }
.stage.modern .grain, .stage.modern .flicker { opacity: 0; animation: none; }
.stage.modern .scratch { visibility: hidden; }
.stage.modern .reel { animation: none; }
.stage.modern .shade { opacity: .7; animation: none; transition: opacity 1.8s var(--ease); }
.stage.modern .timeline { opacity: .45; }
.stage.modern .caption { width: 74%; }
/* "המהפכה הדיגיטלית": הטקסט במרכז המסך, כל שורה מרכז בעצמה. השורות עולות ברצף, מילה-מילה, כמו בשאר המסכים */
.stage.centered .caption { width: 100%; align-items: center; text-align: center; padding: 0 clamp(24px, 6vw, 110px) 40px; }
.stage.centered .lines { align-items: center; }
.stage.centered .line { text-align: center; }
.stage.centered .flavors { align-items: center; }
.stage.centered .flavors__row { justify-content: center; }
.stage.centered .plain { align-self: center; }

/* ---------- בחירת הטעם ---------- */
.flavors { margin-top: clamp(28px, 4.5vh, 50px); display: flex; flex-direction: column; align-items: flex-start; opacity: 0; transition: opacity .6s var(--ease); }
.flavors.in { opacity: 1; }
.flavors__row { display: flex; flex-wrap: wrap; gap: 18px; }
/* כפתור הטעם, בסיס משותף לשלושת ההצעות. אימוג'י רק מוצג כשההצעה היא "אריחים" */
.flavor {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  min-height: 64px;
  padding: 10px 32px;
  border-radius: 999px;
  border: 0;
  color: var(--paper);
  cursor: pointer;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .22), 0 12px 28px rgba(0, 0, 0, .4);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  animation: flavor-rise .6s cubic-bezier(.2, 1.6, .3, 1) both;
}
.flavors.in .flavor { animation-delay: calc(var(--n, 0) * 120ms + 100ms); }
.flavors__row .flavor:nth-child(1) { --n: 0; }
.flavors__row .flavor:nth-child(2) { --n: 1; }
.flavors__row .flavor:nth-child(3) { --n: 2; }
.flavors__row .flavor:nth-child(4) { --n: 3; }
@keyframes flavor-rise { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
.flavor:hover, .flavor:focus-visible { transform: translateY(-6px); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .22), 0 18px 40px rgba(0, 0, 0, .5); }
.flavor:active { transform: translateY(-2px); }
.flavor:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.flavor__emoji { font-size: 1.4em; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.flavor[data-f="choco"] { background: var(--flavor-choco); }
.flavor[data-f="salty"] { background: var(--flavor-salty); }
.flavor[data-f="fresh"] { background: var(--flavor-fresh); }
.flavor[data-f="candy"] { background: var(--flavor-candy); color: var(--flavor-candy-ink); }

/* הצעה 1 (ברירת מחדל): גלולות גדולות עם אימוג'י-אוכל */
.stage[data-flavors="1"] .flavor__emoji { display: inline; }

/* הצעה 2: אריחים מרובעים מעוגלים גדולים, אימוג'י גדול מעל, הטקסט מתחת */
.stage[data-flavors="2"] .flavors__row { gap: 22px; }
.stage[data-flavors="2"] .flavor {
  flex-direction: column; gap: 6px;
  min-height: 150px; min-width: 150px;
  padding: 20px 24px;
  border-radius: 24px;
  font-size: clamp(22px, 2.2vw, 28px);
}
.stage[data-flavors="2"] .flavor__emoji { display: block; font-size: 2.6em; }

/* הצעה 3: כפתורים "מעגלים גדולים" (צ'יפסים), כל אחד תחום בעיגול דק של פלטת הצבע שלו */
.stage[data-flavors="3"] .flavors__row { gap: 24px; }
.stage[data-flavors="3"] .flavor__emoji { display: inline; font-size: 1.6em; }
.stage[data-flavors="3"] .flavor {
  background: transparent !important;
  color: var(--paper);
  border: 3px solid currentColor;
  box-shadow: 0 0 0 6px rgba(13, 11, 9, .4), 0 12px 28px rgba(0, 0, 0, .4);
  padding: 14px 36px;
  min-height: 72px;
  font-size: clamp(24px, 2.6vw, 32px);
}
.stage[data-flavors="3"] .flavor[data-f="choco"] { color: #c08a5f; }
.stage[data-flavors="3"] .flavor[data-f="salty"] { color: #ff8872; }
.stage[data-flavors="3"] .flavor[data-f="fresh"] { color: #9fd16a; }
.stage[data-flavors="3"] .flavor[data-f="candy"] { color: #ffb4d0; }
.stage[data-flavors="3"] .flavor:hover { background: currentColor !important; }
.stage[data-flavors="3"] .flavor:hover .flavor__label { color: var(--night); }
.stage[data-flavors="3"] .flavor:hover .flavor__emoji { filter: none; }

.plain {
  margin-top: 24px;
  min-height: 44px;
  background: none; border: 0;
  font-size: clamp(19px, 2vw, 24px);
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 8px;
  cursor: pointer;
}
.plain:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.note { margin-top: 10px; font-size: 18px; color: var(--ash); min-height: 1.4em; }

/* ---------- מוזיקה ודילוג ---------- */
.controls {
  position: absolute; z-index: 6;
  bottom: 18px; inset-inline: 18px;
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none;
}
.controls button { pointer-events: auto; }
.sound, .skip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 6px;
  background: none; border: 0;
  color: var(--ash);
  font-size: 16px;
  cursor: pointer;
  transition: color .3s var(--ease);
}
.sound:hover, .skip:hover, .sound:focus-visible, .skip:focus-visible { color: var(--paper); }
.sound:focus-visible, .skip:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.sound svg { width: 22px; height: 22px; fill: currentColor; }
.sound .wave { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; opacity: .35; }
.sound[aria-pressed="true"] { color: var(--paper); }
.sound[aria-pressed="true"] .wave { opacity: 1; }

/* ---------- טלפון (ייבדק בסוף, כשהכול מאושר) ---------- */
@media (max-width: 700px) {
  .timeline { top: 14px; bottom: auto; left: 0; width: auto; flex-direction: row; justify-content: center; border: 0; background: none; }
  .tl__item.is-now { font-size: 44px; }
  .caption { width: 100%; padding: 90px 16px 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .reel, .flicker, .grain, .shade { animation: none; }
  .shot.m-in, .shot.m-out, .shot.m-right, .shot.m-left, .shot.m-left-fast, .shot.m-right-fast, .shot.m-close { animation: none; }
}