/* "ערב אחד" - Mile Productions: warm gala evening, white on a soft shade, champagne accent. */
:root {
  --bg: #0d0a08; --ink: #f4f2ee; --muted: #c9c6bf; --line: rgba(255, 255, 255, .16);
  --accent: #c9a25e; --hi: #e6c88f; --on-accent: #0b0d0e;
  --sans: "Assistant", "Arial Hebrew", "Segoe UI", system-ui, sans-serif;
}
body { background: var(--bg); color: var(--ink); }
h1, p { margin: 0; }
.notes { display: none; }

/* the words sit on a soft shade on their side of the frame */
.scene::before { content: ""; position: absolute; inset: -240px; opacity: 0; transition: opacity .4s; pointer-events: none; }
.scene.on::before { opacity: 1; transition: opacity 1s ease; }
.scene.start::before { background: linear-gradient(to left, rgb(8 9 10 / .82) 22%, rgb(8 9 10 / .5) 42%, transparent 64%); }
.scene.end::before { background: linear-gradient(to right, rgb(8 9 10 / .82) 22%, rgb(8 9 10 / .5) 42%, transparent 64%); }
.scene.low::before { background: linear-gradient(to top, rgb(8 9 10 / .88) 26%, rgb(8 9 10 / .45) 46%, transparent 66%); }
.copy { position: absolute; top: 50%; transform: translateY(-50%); width: 760px; }
.scene.start .copy { right: 130px; }
.scene.end .copy { left: 130px; }
.scene.low .copy { right: 130px; top: auto; bottom: 110px; transform: none; width: 1100px; }
.kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; font: 600 17px/1 var(--sans); letter-spacing: .26em; color: var(--hi); }
.kicker::before { content: ""; width: 44px; height: 1px; background: currentColor; opacity: .7; }
.t1 { font: 300 100px/1.04 var(--sans); letter-spacing: -.025em; text-shadow: 0 4px 30px rgb(0 0 0 / .45); }
.t1 em { font-style: normal; font-weight: 700; color: var(--hi); }
.lead { margin-top: 30px; font: 300 29px/1.5 var(--sans); color: var(--muted); max-width: 640px; }
.slide.on [data-in] { transition: opacity .8s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 100ms + 60ms), transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 100ms + 60ms); }

/* always on: this is a sample, not the organisation's own material */
.sample { position: absolute; left: 40px; bottom: 34px; font: 600 15px/1 var(--sans); letter-spacing: .12em; color: rgb(255 255 255 / .55); }

#loader .name { margin: 0; font: 300 44px/1 var(--sans); color: var(--ink); }
#loader .sub { margin: 0; font: 600 14px/1 var(--sans); letter-spacing: .2em; color: var(--muted); }

.t1.en { direction: ltr; text-align: right; letter-spacing: -.02em; font-size: 84px; }
.site { margin-top: 26px; font: 600 24px/1 var(--sans); letter-spacing: .08em; color: var(--hi); direction: ltr; text-align: right; }