/* ─────────────────────────────────────────────────────────────────────────────
   anim.css — שפת העיצוב המשותפת לכל אנימציות ההדגמה באתר.
   כל אנימציה היא "במה" בגודל קבוע 924×540 שמוקטנת לגודל ה-iframe.
   הצבעים מיושרים לטוקנים של האתר; --accent משתנה לפי התרחיש.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --navy:#0A1F3D; --navy-deep:#07172E;
  --blue:#2E5BFF; --blue-soft:#6E8DFF; --blue-bg:#E8F0FE;
  --ink:#0C1726; --sub:#586577; --mut:#98A1B0; --faint:#C8CDD6;
  --card:#fff; --bg:#EEF0F3; --border:#E3E6EB;
  --green:#0E7A56; --green-br:#059669; --green-bg:#ECFDF5;
  --amber:#9A6B12; --amber-br:#F0C36B; --amber-bg:#FCEFD3;
  --red:#DC3C3C; --red-bg:#FDECEC;
  --purple:#7C3AED; --purple-bg:#F3EDFF;
  --accent: var(--blue);
  --accent-bg: var(--blue-bg);
  --ease: cubic-bezier(.22,.61,.36,1);
  --pop: cubic-bezier(.34,1.56,.64,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; }
body {
  background: var(--navy);
  font-family:'IBM Plex Sans Hebrew', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  -webkit-font-smoothing:antialiased;
}
.mono { font-family:'IBM Plex Mono', ui-monospace, monospace; font-feature-settings:'tnum'; }

/* ── הבמה ─────────────────────────────────────────────────────────────────── */
.stage {
  position:relative; width:924px; height:540px; transform-origin:center;
  background: var(--navy); overflow:hidden;
}
.stage::before {                       /* זוהר אווירה מאחורי הפאנלים */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 82% 8%,  color-mix(in srgb, var(--accent) 28%, transparent), transparent 46%),
    radial-gradient(circle at 12% 96%, rgba(46,91,255,.16), transparent 42%);
}

/* ── סרגל עליון ───────────────────────────────────────────────────────────── */
.top {
  position:absolute; top:0; inset-inline:0; height:52px;
  display:flex; align-items:center; gap:11px; padding:0 26px; color:#9DB4FF; z-index:5;
}
.top .logo {
  width:25px; height:25px; border-radius:7px; flex:none;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff));
  display:grid; place-items:center;
}
.top .logo svg { width:15px; height:15px; }
.top .name { font-weight:700; color:#fff; font-size:14.5px; letter-spacing:-.01em; }
.top .crumb { font-size:12px; opacity:.8; }
.top .phase { margin-inline-start:auto; font-size:11.5px; letter-spacing:.04em; opacity:.9; }
.top .phase b { color:#fff; font-weight:600; }

/* ── פאנל בסיס ────────────────────────────────────────────────────────────── */
.panel {
  position:absolute; border-radius:15px; background:var(--card);
  box-shadow:0 18px 46px rgba(4,12,26,.42); overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.panel.show { opacity:1; transform:none; }
.panel-head {
  display:flex; align-items:center; gap:9px;
  padding:13px 18px; border-bottom:1px solid #EEF0F3;
}
.panel-head .t { font-weight:700; font-size:14px; letter-spacing:-.01em; }
.panel-head .meta { margin-inline-start:auto; font-size:12px; color:var(--sub); }

/* ── תגיות ומחוונים ───────────────────────────────────────────────────────── */
.pill {
  font-size:11px; font-weight:600; padding:4px 10px; border-radius:99px;
  background:var(--amber-bg); color:var(--amber); transition:.35s var(--ease);
  white-space:nowrap;
}
.pill.done { background:var(--green-bg); color:var(--green-br); }
.chip {
  font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:8px;
  border:1px solid var(--border); color:var(--mut); background:#F7F8FA;
  transition:.4s var(--ease); white-space:nowrap;
}
.chip.on { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.spk {
  flex:none; font-weight:700; font-size:11px; padding:2px 9px; border-radius:99px;
  height:fit-content; white-space:nowrap; transition:.35s var(--ease);
}

/* ── גל קול ───────────────────────────────────────────────────────────────── */
.wave { display:flex; align-items:center; gap:3px; height:52px; }
.wave i {
  flex:1; min-width:2px; border-radius:2px; background:var(--accent);
  transform-origin:center; animation:wv 1.05s ease-in-out infinite;
}
@keyframes wv { 0%,100% { transform:scaleY(.32); } 50% { transform:scaleY(1); } }
.wave.idle i { animation:none; transform:scaleY(.32); background:var(--faint); }

.rec-dot {
  width:9px; height:9px; border-radius:50%; background:var(--red); flex:none;
  animation:blink 1.15s ease-in-out infinite;
}
@keyframes blink { 50% { opacity:.22; } }

/* ── שורות תמליל ──────────────────────────────────────────────────────────── */
.ln {
  display:flex; gap:8px; font-size:13px; line-height:1.6; color:#3A4759;
  opacity:0; transform:translateY(7px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.ln.show { opacity:1; transform:none; }

/* ── הופעה כללית ──────────────────────────────────────────────────────────── */
.rise { opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.rise.show { opacity:1; transform:none; }
.pop { opacity:0; transform:scale(.88); transition:opacity .4s, transform .45s var(--pop); }
.pop.show { opacity:1; transform:none; }

/* ── שכבת עיבוד ───────────────────────────────────────────────────────────── */
.proc {
  position:absolute; inset:0; display:grid; place-items:center; z-index:4;
  background:rgba(255,255,255,.93); opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease); text-align:center;
}
.proc.show { opacity:1; }
.spin {
  width:32px; height:32px; border:3.5px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; animation:sp .8s linear infinite; margin:0 auto 11px;
}
@keyframes sp { to { transform:rotate(360deg); } }
.proc .msg { font-size:12.5px; color:var(--sub); font-weight:500; }

/* ── סמן עכבר מדומה ───────────────────────────────────────────────────────── */
.cursor {
  position:absolute; left:0; top:0; width:19px; height:19px; z-index:20; pointer-events:none;
  opacity:0; transition:opacity .3s;
  filter:drop-shadow(0 2px 4px rgba(4,12,26,.35));
}
.cursor.show { opacity:1; }
.cursor svg { width:100%; height:100%; display:block; }
.click-ring {
  position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; z-index:19;
  border:2.5px solid var(--accent); border-radius:50%; opacity:0; pointer-events:none;
}
.click-ring.go { animation:ring .5s var(--ease); }
@keyframes ring {
  from { opacity:.85; transform:scale(.3); }
  to   { opacity:0;   transform:scale(1.25); }
}

/* ── כותרת תחתית ──────────────────────────────────────────────────────────── */
.cap {
  position:absolute; bottom:14px; inset-inline:0; text-align:center; z-index:5;
  font-size:11.5px; color:#8FA5D6; letter-spacing:.02em;
  opacity:0; transition:opacity .6s var(--ease);
}
.cap.show { opacity:1; }

/* ── פס נגן ───────────────────────────────────────────────────────────────── */
.player {
  position:absolute; bottom:0; inset-inline:0; height:4px; z-index:30;
  background:rgba(255,255,255,.09);
}
.player .bar {
  height:100%; width:0; background:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
}
.playbtn {
  position:absolute; bottom:14px; inset-inline-end:16px; z-index:31;
  width:30px; height:30px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.1); color:#fff; display:grid; place-items:center;
  opacity:0; transition:opacity .25s, background .2s;
  backdrop-filter:blur(6px);
}
.stage:hover .playbtn { opacity:1; }
.playbtn:hover { background:rgba(255,255,255,.2); }
.playbtn svg { width:12px; height:12px; fill:#fff; }

/* ── ?seek= : תמונת-סטילס של שלב מסוים, בלי מעברים ─────────────────────────── */
html.seeking *, html.seeking *::before, html.seeking *::after {
  transition-duration:.001s !important; animation-duration:.001s !important;
}

/* ── נגישות: כיבוד העדפת תנועה מופחתת ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wave i, .rec-dot, .spin { animation:none !important; }
  .panel, .ln, .rise, .pop, .cap, .cursor { transition-duration:.001s !important; }
}