/* S2 «Результаты», play copy of ../../slides/s2-results/index.html's styles. Scoped by #slide-s2 / s2- ids and
   s2- classes. The sheets are placed by s2.js dom() (a projective map onto the floor); the rest is screen-fixed. */
#slide-s2 { pointer-events: none; }

/* ---- the two protocol sheets: design px = floor px at topDown (1 m = 73 px) */
#slide-s2 .s2-card { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#slide-s2 .s2-sheet { position: absolute; inset: 0; }
#s2-sheetB { opacity: 0; }
/* ours: Hattama's glass card under the paper, teal cells where its rows are */
#slide-s2 .s2-glass { position: absolute; left: -10px; right: -10px; top: -10px; bottom: -40px; }
#s2-glassA { opacity: 0; }
#slide-s2 .s2-gbg { position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 38, 70, 0.96), rgba(9, 18, 36, 0.97));
  border: 1.5px solid rgba(110, 170, 245, 0.45); box-shadow: 0 30px 70px rgba(2, 6, 16, 0.6); }
#slide-s2 .s2-gbg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 12px 12px 0 0; background: var(--grad-loop); }
#slide-s2 .s2-gtab { position: absolute; right: 14px; bottom: 9px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: #6fe3f0; }
#slide-s2 .s2-gcell { position: absolute; border-radius: 5px; background: rgba(47, 232, 206, 0.22); border: 1px solid rgba(63, 200, 240, 0.5); }
/* the card's own row (Гульмира Сериковна · Пятница) takes its light as S1's card folds into it */
#slide-s2 .s2-gcA5 { background: rgba(47, 232, 206, calc(0.22 + 0.6 * var(--rf, 0)));
  box-shadow: 0 0 calc(26px * var(--rf, 0)) rgba(47, 232, 206, calc(0.9 * var(--rf, 0))); }
/* the reference: an organizers' printout */
#slide-s2 .s2-paper { position: absolute; inset: 0; }
#s2-paperA { opacity: 0; }
#slide-s2 .s2-pbg { position: absolute; left: -12px; right: -12px; top: -54px; bottom: -12px; border-radius: 6px;
  background: linear-gradient(170deg, #f1f3f6 0%, #e6e9ee 60%, #dde1e8 100%);
  box-shadow: 0 34px 80px rgba(2, 6, 16, 0.55), 0 2px 0 rgba(255, 255, 255, 0.6) inset; }
#slide-s2 .s2-pbg::after { content: ""; position: absolute; inset: 0; border-radius: 6px; opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.57  0 0 0 0 0.62  0 0 0 0.35 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
#slide-s2 .s2-head { position: absolute; left: 0; right: 0; top: -44px; height: 34px; display: flex; align-items: baseline; gap: 10px;
  font-size: 19px; font-weight: 700; letter-spacing: -0.015em; color: #1a2232; }
#slide-s2 .s2-head em { font-style: normal; font-weight: 500; color: #555e70; }
#slide-s2 .s2-row { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(30, 40, 60, 0.13); }
#slide-s2 .s2-task { position: absolute; height: 4px; border-radius: 2px; background: rgba(40, 50, 70, 0.2); }
#slide-s2 .s2-c { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; }
#slide-s2 .s2-lit { position: absolute; left: 0; right: 0; border-radius: 6px; opacity: 0;
  background: linear-gradient(90deg, #d9fbff, #f4feff 50%, #c9f6ff);
  box-shadow: 0 0 10px 2px rgba(100, 220, 255, 0.9), 0 0 34px 8px rgba(63, 184, 244, 0.55); }
#slide-s2 .s2-t { position: relative; padding-left: 8px; font-weight: 560; letter-spacing: -0.01em; line-height: 1.12; color: #1c2536; }
#s2-cardA .s2-t { font-size: 15px; }
#s2-cardB .s2-t { font-size: 13px; }
#s2-cardB .s2-head { font-size: 17px; }

/* the protocol out of the rack: S1's passed card (class-styled by s1.css), placed by dom() */
#s2-pc { position: absolute; inset: 0; }
#slide-s2 .s2-proto { visibility: hidden; opacity: 0; will-change: transform; }

/* ---- the result, top band: reads as one phrase over the two fields (centred over each field at topDown) */
#slide-s2 .s2-num { position: absolute; top: 72px; display: flex; align-items: baseline; gap: 18px; white-space: nowrap; transform: translateX(-50%); opacity: 0; }
#slide-s2 .s2-num b { font-size: 132px; font-weight: 720; letter-spacing: -0.05em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.03em;
  filter: drop-shadow(0 4px 22px rgba(5, 10, 22, 0.7)); }
#slide-s2 .s2-num i { font-style: normal; font-size: 52px; font-weight: 560; color: var(--ink); letter-spacing: -0.02em; text-shadow: 0 2px 18px rgba(5, 10, 22, 0.9); }
#slide-s2 .s2-num .s2-cnt { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
#s2-nA { left: 792px; }
#s2-nA .s2-cnt { width: 1.1em; }
#s2-nB { left: 1206px; }
#s2-and { position: absolute; top: 132px; left: 1029px; font-size: 52px; font-weight: 560; color: var(--ink); transform: translateX(-50%); opacity: 0;
  text-shadow: 0 2px 18px rgba(5, 10, 22, 0.9); }
#s2-lbl { position: absolute; left: 1452px; top: 88px; width: 440px; font-size: 31px; font-weight: 480; line-height: 1.2; letter-spacing: -0.015em; color: var(--body);
  text-shadow: 0 2px 18px rgba(5, 10, 22, 0.9); }
#s2-lbl span { display: block; opacity: 0; }
#s2-lbl span:first-child { color: var(--ink); font-weight: 650; font-size: 34px; margin-bottom: 4px; }

/* ---- secondary facts, right margin */
#slide-s2 .s2-fact { position: absolute; left: 1452px; width: 450px; opacity: 0; text-shadow: 0 2px 18px rgba(5, 10, 22, 0.9); }
#s2-f1 { top: 372px; }
#s2-f3 { top: 618px; }
#slide-s2 .s2-fh { display: block; font-size: 34px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
#slide-s2 .s2-fs { display: block; white-space: nowrap; margin-top: 10px; font-size: 25px; font-weight: 460; color: var(--body); line-height: 1.25; }
#slide-s2 .s2-fs b { font-weight: 650; color: var(--ink); }
#slide-s2 .s2-bars { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; }
#slide-s2 .s2-bar { display: block; height: 6px; border-radius: 3px; }
#slide-s2 .s2-bar.rec { width: 273px; background: rgba(141, 156, 188, 0.55); }
#slide-s2 .s2-bar.run { width: 33px; background: var(--grad); box-shadow: 0 0 10px rgba(63, 184, 244, 0.8); }

#s2-foot { position: absolute; left: 0; right: 0; top: 990px; text-align: center; font-size: 27px; font-weight: 500; color: var(--body); letter-spacing: -0.005em; opacity: 0;
  text-shadow: 0 2px 18px rgba(5, 10, 22, 0.9); }
#s2-foot b { font-weight: 640; color: var(--ink); }