/* "הבמה" - DAB Cinematic presentation. One stage, one locked camera: the pedestal sits left, the words live on the right. */
:root {
  --bg: #060509; --ink: #f6f3fb; --muted: #aaa3ba; --dim: #6d6780; --line: rgba(255, 255, 255, .14);
  --accent: #7612ec; --hi: #ac7bff; --on-accent: #fff;
  --sans: "Assistant", "Arial Hebrew", "Segoe UI", system-ui, sans-serif;
}
body { background: var(--bg); color: var(--ink); }
h1, h2, p { margin: 0; }

/* the words: always on the right, over the dark half of the stage */
.scene::before { content: ""; position: absolute; inset: -240px; opacity: 0; transition: opacity .4s; pointer-events: none;
  background: linear-gradient(to left, rgb(6 5 9 / .55) 20%, transparent 55%); }
.scene.on::before { opacity: 1; transition: opacity 1s ease; }
.copy { position: absolute; right: 140px; top: 50%; transform: translateY(-50%); width: 760px; }
.kicker { display: flex; align-items: center; gap: 16px; margin: 0 0 30px; font: 600 18px/1 var(--sans); letter-spacing: .32em; color: var(--hi); }
.kicker::before { content: ""; width: 48px; height: 1px; background: currentColor; opacity: .7; }
.t1 { font: 300 118px/1.02 var(--sans); letter-spacing: -.03em; }
.t1 em { font-style: normal; font-weight: 700; color: var(--hi); }
.lead { margin-top: 34px; font: 300 31px/1.5 var(--sans); color: var(--muted); max-width: 640px; }

/* entrance: quicker than the default player timing */
.slide.on [data-in] { transition: opacity .7s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 90ms + 40ms), transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 90ms + 40ms); }

/* loader */
#loader .brand { width: 64px; }
#loader .name { margin: 0; font: 600 16px/1 var(--sans); letter-spacing: .34em; color: var(--hi); }
.notes { display: none; }

/* 10 · the four steps */
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; align-items: baseline; counter-increment: s; }
.steps li::before { content: "0" counter(s); grid-row: span 2; font: 200 40px/1 var(--sans); color: var(--hi); }
.steps b { font: 600 32px/1.2 var(--sans); }
.steps span { font: 300 24px/1.4 var(--sans); color: var(--muted); }

/* 11 · contact and the twist */
.contact { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; }
.contact > span { font: 600 24px/1 var(--sans); padding: 16px 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(6,5,9,.5); }
.contact > span:first-child { background: var(--accent); border-color: var(--accent); }
.contact [dir=ltr] { unicode-bidi: isolate; }
.twist { margin-top: 56px; font: 300 28px/1.4 var(--sans); color: var(--muted); }
.twist b { color: var(--ink); font-weight: 600; }

/* film slide over the laptop close-up: the words sit high on the right, clear of the screen and the hand */
.copy.top { top: 110px; transform: none; width: 520px; right: 110px; }
.copy.top .t1 { font-size: 96px; }

/* film slides over bright, busy frames: a deeper wash behind the words */
.scene.deep::before { background: linear-gradient(to left, rgb(6 5 9 / .88) 24%, rgb(6 5 9 / .6) 44%, transparent 66%); }
.scene.deep .t1 { text-shadow: 0 6px 40px rgb(6 5 9 / .7); }