/* S4 «Куда растёт» (план) and S5 «Финал», play copies of ../../slides/s4-next and ../../slides/s5-final styles.
   Scoped by #slide-s4 / #slide-s5 and s4- / s5- ids. Pinned wrappers (.hk-anchor) are moved by the engine;
   GSAP animates their children. */
#slide-s4, #slide-s5 { pointer-events: none; }

/* ---------------------------------------------------------------- S4 */
/* «план» lock-up, top-left: the dashed border is the same dash as the planned groove */
#s4-plan { position: absolute; left: 96px; top: 84px; display: flex; align-items: center; gap: 22px; }
#s4-plan-pill {
  position: relative; padding: 10px 26px 13px; border-radius: 16px;
  font-size: 54px; font-weight: 700; letter-spacing: -0.015em; line-height: 1; color: #9fe9f6; opacity: 0;
}
#s4-plan-pill svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#s4-plan-pill rect { fill: rgba(47, 232, 206, 0.06); stroke: #59c9ee; stroke-width: 2.4; stroke-dasharray: 9 8; }
#s4-plan-sub { font-size: 32px; font-weight: 520; color: var(--body); letter-spacing: -0.01em; opacity: 0; text-shadow: 0 2px 18px rgba(5, 10, 22, 0.8); }

/* the travelling message token (out: amber deadline; back: teal answer) */
#slide-s4 .s4-tok { position: absolute; left: 0; top: 0; margin: -21px 0 0 -29px; width: 58px; height: 42px; border-radius: 10px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; opacity: 0; }
#slide-s4 .s4-tok svg { width: 34px; height: 24px; overflow: visible; }
#slide-s4 .s4-tok svg path, #slide-s4 .s4-tok svg rect { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
#s4-env-tok { background: rgba(26, 18, 10, 0.92); border: 1.5px solid rgba(255, 169, 77, 0.8); box-shadow: 0 0 22px rgba(255, 159, 67, 0.55), 0 0 4px rgba(255, 190, 120, 0.9); }
#s4-env-tok svg * { stroke: #ffc27f; }
#s4-ans-tok { background: rgba(8, 24, 30, 0.92); border: 1.5px solid rgba(47, 232, 206, 0.85); box-shadow: 0 0 22px rgba(47, 232, 206, 0.55), 0 0 4px rgba(160, 250, 240, 0.9); }
#s4-ans-tok svg * { stroke: #9ff5ea; }

/* the note to the chair: small, teal (it carries the new date); sits above its point */
#s4-chair { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; display: flex; align-items: center; gap: 12px; white-space: nowrap;
  padding: 8px 16px 8px 13px; border-radius: 12px; background: rgba(8, 22, 30, 0.92); border: 1.5px solid rgba(47, 232, 206, 0.75);
  box-shadow: 0 0 20px rgba(47, 232, 206, 0.4); font-size: 25px; font-weight: 560; color: var(--ink); opacity: 0;
  translate: -50% -100%; }
#s4-chair svg { width: 28px; height: 20px; flex: none; overflow: visible; }
#s4-chair svg * { fill: none; stroke: #9ff5ea; stroke-width: 2.4; stroke-linejoin: round; }
#s4-chair .s4-cd { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 25px; color: #5ff0dc; }

/* the opened message: hangs from its 3D point (the wrapper), lower-left tether corner on the point */
#s4-card { left: -90px; top: -365px; width: 628px; padding: 0 0 30px; opacity: 0; transform-origin: 50% 100%; }
#s4-card-h { display: flex; align-items: center; gap: 14px; padding: 26px 34px 0; font-size: 27px; font-weight: 540; color: var(--body); }
#s4-card-h .s4-ic { width: 30px; height: 22px; flex: none; }
#s4-card-h .s4-ic * { fill: none; stroke: #ffb36b; stroke-width: 2.2; stroke-linejoin: round; }
#s4-card-h .s4-time { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 26px; color: var(--muted); }
#s4-card-t { display: block; padding: 14px 34px 0; font-size: 64px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
#s4-card-t em { font-style: normal; color: var(--amber); }
#s4-card-q { display: flex; align-items: baseline; gap: 14px; padding: 14px 34px 0; font-size: 30px; font-weight: 470; color: #9aa8c6; white-space: nowrap; }
#s4-card-q em { font-style: normal; color: #e9b27a; }
#s4-card-q .s4-ref { font-family: "IBM Plex Mono", monospace; font-size: 26px; color: #6fc8f4; padding: 2px 10px; border-radius: 8px; background: rgba(63, 184, 244, 0.1); border: 1px solid rgba(63, 184, 244, 0.3); }
#s4-card-d { position: relative; display: flex; align-items: center; gap: 18px; margin: 22px 34px 0; padding-top: 22px; border-top: 1px solid rgba(140, 180, 240, 0.16); height: 56px; }
#slide-s4 .s4-date { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 46px; line-height: 56px; }
#s4-d-old { position: relative; color: var(--amber); text-shadow: 0 0 18px rgba(255, 159, 67, 0.45); }
#s4-d-old i { position: absolute; left: -4px; right: -4px; top: 50%; height: 3px; margin-top: -1px; background: #8d9cbc; transform-origin: 0 50%; transform: scaleX(0); }
#s4-d-arr { font-size: 40px; color: var(--muted); }
#s4-d-new { color: #5ff0dc; text-shadow: 0 0 20px rgba(47, 232, 206, 0.5); }

/* the answer, from her head */
#s4-bub { width: auto; left: -56px; white-space: nowrap; padding: 16px 28px 18px 24px; font-size: 36px; font-weight: 600; transform-origin: 56px 100%; opacity: 0; }
#s4-bub b { width: 12px; height: 12px; margin-top: 15px; border-radius: 50%; background: var(--g4); box-shadow: 0 0 12px rgba(47, 232, 206, 0.9); flex: none; }
#s4-teth { opacity: 0; }

/* ---------------------------------------------------------------- S5: the closing column, right of the room */
#s5-col { position: absolute; left: 1080px; top: 0; width: 760px; height: 1080px; }
#s5-lock { position: absolute; left: 0; top: 262px; display: flex; align-items: stretch; gap: 30px; }
#s5-bar { width: 6px; border-radius: 3px; background: linear-gradient(180deg, #3d7bf0 0%, #3fb8f4 55%, #2fe8ce 100%); box-shadow: 0 0 18px rgba(63, 184, 244, 0.55); transform-origin: 50% 0; transform: scaleY(0); }
#s5-names { display: flex; flex-direction: column; }
#s5-prod { font-size: 132px; font-weight: 720; letter-spacing: -0.045em; line-height: 1; padding-bottom: 8px; opacity: 0; }
#s5-team { margin-top: 12px; font-size: 62px; font-weight: 720; letter-spacing: -0.03em; line-height: 1; color: var(--ink); opacity: 0; }
#s5-line { position: absolute; left: 36px; top: 556px; font-size: 42px; font-weight: 520; line-height: 1.32; letter-spacing: -0.015em; color: var(--body); text-shadow: 0 2px 22px rgba(5, 10, 22, 0.7); }
#s5-line span { display: block; white-space: nowrap; opacity: 0; }
#s5-line b { font-weight: 650; color: var(--ink); }
#s5-thanks { position: absolute; left: 36px; top: 756px; font-size: 88px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; opacity: 0; }
#s5-thanks .hk-ul { bottom: -16px; height: 24px; }
#s5-thanks .hk-ul path { stroke-width: 6; }