/* P1-P4 «Opening and proof» (p1.js; owner O). Scoped to #slide-p1 and p1- ids. The film's components (film/film.css,
   i1.css, i2.css) ported: ink #1d2240 on paper #fbfbfe, note #fdecb2, slate #59607f, coral #ff6b5a; Onest for words,
   IBM Plex Mono for dates and system facts; the data gradient only on one keyword per caption. Every animated value
   is written by p1.js per frame (no CSS transitions). */
#slide-p1 { color: #1d2240; }
#slide-p1 .play-anchor { position: absolute; left: 0; top: 0; width: 0; height: 0; }

/* ---------- captions: the header grid (left 96, top 72), paper plate growing with its words */
#slide-p1 .p1-cap { position: absolute; left: 96px; top: 72px; display: flex; flex-wrap: nowrap; gap: 0 .28em; align-items: baseline;
  padding: 16px 26px 20px; color: #1d2240; font: 600 46px/1.15 'Onest', sans-serif; letter-spacing: -.012em; white-space: nowrap;
  isolation: isolate; visibility: hidden; }
#slide-p1 .p1-cap::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--pw, 0px); z-index: -1; border-radius: 14px;
  background: rgba(251, 251, 254, .95); box-shadow: 0 18px 44px rgba(16, 20, 44, .28), 0 2px 6px rgba(16, 20, 44, .12); }
#slide-p1 .p1-cap b { font-weight: 760; letter-spacing: -.025em; }
#slide-p1 .p1-w { display: inline-block; opacity: 0; }
#slide-p1 .p1-kw { position: relative; display: inline-block; }
#slide-p1 .p1-kw::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #6c5cff, #3e86ff 55%, #1fc3f2); transform-origin: 0 50%; transform: scaleX(var(--ul, 0)); }

/* ---------- speech bubbles over the speakers (verbatim RU / KZ), the tail tip on the anchor above the head */
#slide-p1 .p1-bub { position: absolute; bottom: 16px; width: max-content; max-width: 540px; padding: 14px 22px 16px;
  border-radius: 20px; background: #fbfbfe; color: #1d2240; font: 500 28px/1.3 'Onest', sans-serif; letter-spacing: -.005em; opacity: 0;
  box-shadow: 0 14px 36px rgba(16, 20, 44, .26), 0 1px 3px rgba(16, 20, 44, .14); }
#slide-p1 .p1-bub::after { content: ""; position: absolute; bottom: -11px; width: 24px; height: 24px; background: #fbfbfe;
  border-radius: 0 0 6px 0; transform: rotate(45deg); opacity: var(--tail, 1); }
#slide-p1 .p1-bub.tail-r { right: -46px; transform-origin: calc(100% - 46px) calc(100% + 16px); }
#slide-p1 .p1-bub.tail-r::after { right: 34px; }
#slide-p1 .p1-bub.tail-l { left: -46px; transform-origin: 46px calc(100% + 16px); }
#slide-p1 .p1-bub.tail-l::after { left: 34px; }
/* the language of the line */
#slide-p1 .p1-lang { display: inline-block; vertical-align: 3px; margin-right: 12px; padding: 4px 8px 3px; border-radius: 7px;
  background: #1d2240; color: #f4f3ef; font: 500 17px/1 'IBM Plex Mono', monospace; font-style: normal; letter-spacing: .06em; }
#slide-p1 .p1-lang.kz { background: #1fa6d6; }
/* the deadline phrase inside a bubble: the sticky-note paper behind it once it is said */
#slide-p1 .p1-dlp { position: relative; white-space: nowrap; border-radius: 6px; padding: 0 5px; margin: 0 -5px;
  background: rgba(253, 236, 178, var(--dl, 0)); }

/* ---------- sticky-note labels (English), standing on their 3D note */
#slide-p1 .p1-note { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; white-space: nowrap; padding: 7px 13px 8px;
  border-radius: 4px 4px 4px 10px; background: #fdecb2; color: #1d2240; font: 600 24px/1.15 'Onest', sans-serif; opacity: 0;
  box-shadow: 0 6px 14px rgba(16, 20, 44, .22), 0 1px 2px rgba(16, 20, 44, .18); }

/* ---------- dark chips: system facts (the empty date slot, the day) */
#slide-p1 .p1-slot, #slide-p1 .p1-chip { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; white-space: nowrap;
  border-radius: 10px; background: rgba(22, 27, 52, .94); color: #f4f3ef; font: 500 24px/1.1 'IBM Plex Mono', monospace;
  box-shadow: 0 12px 30px rgba(8, 10, 24, .35); opacity: 0; }
#slide-p1 .p1-slot { padding: 0 4px; height: 44px; overflow: hidden; }
#slide-p1 .p1-slot.miss { box-shadow: 0 0 0 2.5px rgba(255, 107, 90, .9), 0 12px 30px rgba(8, 10, 24, .35); }
#slide-p1 .p1-slot-win { position: relative; width: 112px; height: 44px; overflow: hidden; }
#p1-slot-strip { position: absolute; left: 0; right: 0; top: 0; }
#p1-slot-strip span { display: block; height: 44px; line-height: 44px; text-align: center; color: #f4f3ef; }
#p1-slot-strip span.blank { color: #9aa1bf; letter-spacing: .06em; }
#slide-p1 #p1-day { left: 96px; top: 176px; padding: 10px 16px 11px; font-size: 30px; }
#slide-p1 #p1-day::before { content: ""; width: 10px; height: 10px; margin-right: 12px; border-radius: 50%; background: #9aa1bf; }
#slide-p1 #p1-day.done { color: #fdecb2; }

/* ---------- the protocol card: a world rectangle (p1.js maps #p1-sheet with matrix3d) */
#p1-sheet { position: absolute; left: 0; top: 0; width: 780px; height: 492px; transform-origin: 0 0; backface-visibility: hidden; display: none; }
#p1-card { position: absolute; inset: 0; border-radius: 22px; background: #fbfbfe; overflow: hidden;
  box-shadow: 0 30px 70px rgba(8, 10, 28, .42), 0 4px 12px rgba(8, 10, 28, .22), inset 0 0 0 1px rgba(29, 34, 64, .06); }
#p1-card-in { position: absolute; left: 0; top: 0; width: 780px; color: #1d2240; }
#slide-p1 .p1-ph { display: flex; align-items: baseline; justify-content: space-between; padding: 30px 34px 22px; border-bottom: 1.5px solid #e4e6ef; }
#slide-p1 .p1-ph b { font: 700 40px/1 'Onest', sans-serif; letter-spacing: -.025em; }
#slide-p1 .p1-ph span { font: 500 22px/1 'IBM Plex Mono', monospace; color: #59607f; letter-spacing: -.01em; }
#slide-p1 .p1-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 230px; column-gap: 14px; height: 112px; box-sizing: border-box;
  padding: 24px 34px 0; border-bottom: 1px solid #eceef5; }
#slide-p1 .p1-skel { position: absolute; left: 34px; right: 34px; top: 30px; opacity: 0; }
#slide-p1 .p1-skel i { display: block; height: 16px; margin: 0 0 18px; border-radius: 8px; background: linear-gradient(90deg, #e9ebf3, #f2f3f8); }
#slide-p1 .p1-who { font: 650 32px/40px 'Onest', sans-serif; letter-spacing: -.018em; white-space: nowrap; clip-path: inset(0 100% 0 0); }
#slide-p1 .p1-what { margin-top: 4px; font: 450 24px/32px 'Onest', sans-serif; color: #59607f; white-space: nowrap; clip-path: inset(0 100% 0 0); }
#slide-p1 .p1-dl { position: relative; height: 72px; }
/* the spoken deadline: a sticky note (as in the meeting), then a small label over the date the product wrote */
#slide-p1 .p1-said { position: absolute; right: 0; top: 30px; padding: 7px 12px 8px; border-radius: 4px 4px 4px 10px; white-space: nowrap;
  background: rgba(253, 236, 178, calc(1 - .55 * var(--fade, 0))); color: #1d2240; font: 600 21px/1 'Onest', sans-serif;
  box-shadow: 0 calc(6px * (1 - var(--fade, 0))) calc(14px * (1 - var(--fade, 0))) rgba(16, 20, 44, .22); transform-origin: 100% 0; opacity: 0; }
#slide-p1 .p1-date { position: absolute; right: 2px; top: 34px; font: 500 33px/40px 'IBM Plex Mono', monospace; letter-spacing: -.02em; color: #1d2240; opacity: 0; white-space: nowrap; }
#slide-p1 .p1-more { padding: 20px 34px 0; font: 500 22px/1 'Onest', sans-serif; color: #8a90aa; opacity: 0; }

/* ---------- the three measured facts (P4): dark glass tiles stacked at the right (x 1456-1848, y from 260), clear of the
   rack's top and its «hattama» badge, of the protocol card and of the pill; a big figure over a small line */
#p1-facts { position: absolute; left: 1456px; top: 260px; width: 392px; display: flex; flex-direction: column; gap: 16px; }
#slide-p1 .p1-fact { padding: 14px 24px 18px; border-radius: 14px; opacity: 0;
  background: rgba(16, 20, 42, .9); border: 1px solid rgba(160, 175, 230, .28); color: #f4f3ef;
  box-shadow: 0 16px 40px rgba(3, 5, 18, .45); }
#slide-p1 .p1-fig { display: block; font: 700 64px/1.1 'Onest', sans-serif; letter-spacing: -.025em; white-space: nowrap; }
#slide-p1 .p1-sm { display: block; margin-top: 4px; font: 500 24px/1.25 'Onest', sans-serif; letter-spacing: -.005em; color: #d7dae8; }
#slide-p1 .p1-fact .p1-kw::after { bottom: -2px; height: 4px; }