/* Hattama world, style 3 (dark tech): the 007 diorama language. Navy #0d1526, blue-to-teal system light,
   warm room light, amber #ffa94d for deadlines only. Inter for everything people read, Plex Mono only for
   dates. Both fonts cover Kazakh (ә ғ қ ң ө ұ ү һ і, checked with fontTools). Classes are prefixed hk-. */
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./assets/fonts/IBMPlexMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
:root {
  --bg0: #0d1526;
  --ink: #eaf1fb;
  --body: #cbd6ea;
  --muted: #8d9cbc;
  --g1: #3d7bf0;
  --g2: #3fb8f4;
  --g4: #2fe8ce;
  --amber: #ffa94d;
  --grad: linear-gradient(90deg, #5b9af5 0%, #45aaf0 45%, #3fc4ee 78%, #2be3cb 100%);
  --grad-loop: linear-gradient(90deg, #3d7bf0 0%, #3e92f2 40%, #3fb8f4 74%, #2fe8ce 100%);
  --glass: linear-gradient(180deg, rgba(22, 36, 64, 0.9) 0%, rgba(11, 19, 36, 0.93) 100%);
  --hair: rgba(110, 170, 245, 0.28);
}
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg0); }
#three-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hk-layer { position: absolute; inset: 0; overflow: hidden; font-family: "Inter", sans-serif; color: var(--ink); }

/* light lines over the 3D (streaks, tethers) */
.hk-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hk-lines path { fill: none; stroke-linecap: round; }
.hk-lines .halo { stroke: rgba(63, 184, 244, 0.6); stroke-width: 10; filter: blur(7px); }
.hk-lines .core { stroke: #e2f7ff; stroke-width: 2.6; }
.hk-lines .tether { stroke: #6fc8f4; stroke-width: 2; stroke-dasharray: 2 7; }

/* things pinned to 3D points: world.js (w.pin) writes the anchor transform; animate the child */
.hk-anchor { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.hk-tag {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%);
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  padding: 9px 18px 9px 14px; border-radius: 14px;
  background: rgba(9, 16, 31, 0.88); border: 1.5px solid rgba(110, 170, 245, 0.32);
  font-family: "Inter", sans-serif; font-size: 24px; font-weight: 550; color: var(--ink);
}
.hk-tag i { width: 12px; height: 12px; border-radius: 50%; background: var(--g4); box-shadow: 0 0 12px rgba(47, 232, 206, 0.9); }

/* speech bubble: rises from a speaker's head anchor; tail at bottom-left */
.hk-bubble {
  position: absolute; left: -64px; bottom: 22px; width: 540px;
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 24px 20px 20px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(22, 36, 64, 0.94), rgba(11, 19, 36, 0.94));
  border: 1.5px solid rgba(110, 170, 245, 0.34);
  box-shadow: 0 24px 60px rgba(2, 6, 16, 0.55);
  transform-origin: 64px 100%;
  font-family: "Inter", sans-serif; font-size: 31px; font-weight: 520; line-height: 1.24; letter-spacing: -0.012em; color: var(--ink);
}
.hk-bubble::after {
  content: ""; position: absolute; left: 50px; bottom: -13px; width: 24px; height: 24px;
  background: rgba(11, 19, 36, 0.94); border-right: 1.5px solid rgba(110, 170, 245, 0.34); border-bottom: 1.5px solid rgba(110, 170, 245, 0.34);
  transform: rotate(45deg); border-bottom-right-radius: 5px;
}
.hk-wv { display: flex; gap: 4px; align-items: center; height: 38px; flex: none; }
.hk-wv b { display: block; width: 5px; height: 30px; border-radius: 3px; background: var(--g4); box-shadow: 0 0 10px rgba(47, 232, 206, 0.6); }
.hk-wv b:nth-child(2n) { height: 22px; }
.hk-wv b:nth-child(3) { height: 34px; }
.hk-w { display: inline-block; }
.hk-dl { border-radius: 6px; padding: 0 3px; margin: 0 -3px; } /* deadline phrase; turn amber with GSAP */
.hk-dl.on { color: #ffb36b; background: rgba(255, 159, 67, 0.16); }

/* glass panel (the protocol card, slide cards): the 007 panel with the gradient hairline on top */
.hk-panel {
  position: absolute; border-radius: 26px; overflow: hidden;
  background: var(--glass); border: 1.5px solid var(--hair);
  box-shadow: 0 40px 90px rgba(2, 6, 16, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: "Inter", sans-serif; color: var(--ink);
}
.hk-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-loop); }
.hk-ph { display: flex; align-items: baseline; gap: 14px; padding: 28px 32px 0; }
.hk-ph b { font-weight: 650; font-size: 38px; letter-spacing: -0.02em; }
.hk-ph .hk-src { margin-left: auto; font-size: 26px; font-weight: 500; color: var(--muted); }
.hk-rows { display: flex; flex-direction: column; gap: 12px; padding: 22px 26px 26px; }
.hk-row { padding: 16px 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06); }
.hk-r1 { display: flex; justify-content: space-between; align-items: center; height: 50px; }
.hk-who { display: block; font-size: 40px; font-weight: 650; letter-spacing: -0.02em; }
.hk-what { display: block; margin-top: 2px; font-size: 30px; font-weight: 460; color: var(--body); }
.hk-date { position: relative; width: 300px; height: 50px; overflow: hidden; }
.hk-date span { position: absolute; right: 0; top: 0; line-height: 50px; white-space: nowrap; }
.hk-date .hk-said { font-size: 31px; font-weight: 520; color: rgba(255, 179, 107, 0.85); }
.hk-date .hk-iso { font-family: "IBM Plex Mono", monospace; font-size: 40px; font-weight: 500; color: var(--amber); }
.hk-quote { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 22px; font-weight: 450; color: #8695b6; white-space: nowrap; }
.hk-quote em { font-style: normal; color: #e0a46a; }
.hk-mono { font-family: "IBM Plex Mono", monospace; font-weight: 500; }

/* captions: one line at a time, centred at y 942, one keyword in the system gradient + underline */
.hk-caps-bg { position: absolute; left: 0; right: 0; bottom: 0; height: 260px; background: linear-gradient(180deg, rgba(9, 14, 28, 0) 0%, rgba(9, 14, 28, 0.72) 70%, rgba(9, 14, 28, 0.82) 100%); }
.hk-caps { position: absolute; left: 0; right: 0; top: 942px; height: 90px; }
.hk-cap {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: "Inter", sans-serif; font-size: 50px; font-weight: 560; letter-spacing: -0.018em; color: var(--ink);
  text-shadow: 0 2px 24px rgba(5, 10, 22, 0.8);
}
.hk-hl { position: relative; display: inline-block; white-space: nowrap; font-weight: 700; }
.hk-hl-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hk-ul { position: absolute; left: -6px; bottom: -12px; width: calc(100% + 12px); height: 20px; overflow: visible; }
.hk-ul path { fill: none; stroke: url(#hk-ul-grad); stroke-width: 5; stroke-dasharray: 1 1; stroke-dashoffset: 1; }