/* =====================================================================
   TANGIBLE THINKING OS — v3
   Strict black & white · dark-mode toggle · EOI-inspired depth
   Type: Helvetica Neue / Inter display · IBM Plex Mono metadata
===================================================================== */

:root{
  --paper:#F7F6F2; --ink:#0A0A0C;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;
  --font-disp:"Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
}

/* theme tokens — chapter slides invert RELATIVE to the theme */
body{
  --bg:#F7F6F2; --fg:#101014; --soft:#4A4A50; --faint:#9A9A9E;
  --line:rgba(16,16,20,.15); --lift:rgba(16,16,20,.04);
}
body.dark{
  --bg:#060607; --fg:#F2F2EF; --soft:#B9B9BD; --faint:#5E5E64;
  --line:rgba(242,242,239,.17); --lift:rgba(242,242,239,.05);
}
body.invert:not(.dark){
  --bg:#0A0A0C; --fg:#F2F2EF; --soft:#C9C9CE; --faint:#6E6E74;
  --line:rgba(242,242,239,.17); --lift:rgba(242,242,239,.05);
}
body.dark.invert{
  --bg:#F7F6F2; --fg:#101014; --soft:#4A4A50; --faint:#9A9A9E;
  --line:rgba(16,16,20,.15); --lift:rgba(16,16,20,.04);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-disp);
  overflow:hidden;
  transition:background .6s cubic-bezier(.4,0,.2,1), color .6s cubic-bezier(.4,0,.2,1);
  -webkit-font-smoothing:antialiased;
}

#scene{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  z-index:1;
}

/* ---------------- HUD (header + footer share the chrome) ---------------- */
.mono{ font-family:var(--font-mono); }

.hud{
  position:fixed; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 24px;
  z-index:30;
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.14em;
  pointer-events:none;
}
.hud > *{ pointer-events:auto; }
.hud-top{ top:0; }
.hud-bottom{ bottom:0; padding:20px 24px 22px; }
.hud-left, .hud-right{ display:flex; align-items:center; gap:14px; }

.wordmark{ font-weight:600; color:var(--fg); }
.wm-thin{ font-weight:400; color:var(--soft); }
.wm-os{
  font-weight:600; color:var(--bg); background:var(--fg);
  padding:1px 4px; margin-left:5px; border-radius:2px;
}
.hud-sep{ color:var(--faint); }

.rec{ display:flex; align-items:center; gap:7px; color:var(--soft); }
.rec-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--fg);
  animation:blink 1.6s steps(1) infinite;
}
@keyframes blink{ 0%,70%{opacity:1} 71%,100%{opacity:.15} }
@media (prefers-reduced-motion: reduce){ .rec-dot{ animation:none; } }

.timecode{ color:var(--faint); font-variant-numeric:tabular-nums; }

.theme-btn{
  width:34px; height:34px;
  display:grid; place-items:center;
  background:none; border:none; cursor:pointer;
  color:var(--soft); border-radius:50%;
}
.theme-btn svg{ width:16px; height:16px; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.theme-btn:hover{ color:var(--fg); background:var(--lift); }
body.dark .theme-btn svg{ transform:rotate(180deg); }

.menu-btn{
  width:34px; height:34px;
  display:grid; place-items:center; gap:0;
  background:none; border:none; cursor:pointer;
  border-radius:50%;
}
.menu-btn span{
  display:block; width:15px; height:1px;
  background:var(--soft);
  margin:2px 0;
  transition:background .3s;
}
.menu-btn:hover{ background:var(--lift); }
.menu-btn:hover span{ background:var(--fg); }

/* ---------------- STAGE / TEXT ---------------- */
#stage{
  position:fixed; inset:0;
  display:flex; align-items:flex-end;
  padding:0 0 118px 64px;
  z-index:20;
  pointer-events:none;
}
/* scrim: guarantees the text never fights the field */
#stage::before{
  content:"";
  position:absolute; left:0; bottom:0;
  width:min(980px, 82%);
  height:58%;
  background:linear-gradient(to top, var(--bg) 10%, transparent 80%);
  pointer-events:none;
  transition:background .6s cubic-bezier(.4,0,.2,1);
}
.slide{ max-width:880px; position:relative; z-index:1; }

.kicker{
  font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--soft);
  margin-bottom:18px;
  transition:opacity .35s, transform .35s;
}
.kicker.out{ opacity:0; transform:translateY(8px); }

.title{
  font-size:clamp(40px, 5.6vw, 78px);
  line-height:.98; letter-spacing:-.035em;
  font-weight:500;
  color:var(--fg);
  max-width:14ch;
  min-height:1em;
}
.slide.is-chapter .title{
  font-size:clamp(80px, 13vw, 190px);
  letter-spacing:-.045em;
  max-width:none;
}
/* emphasis is weight, not colour — strict monochrome */
.title .w{ display:inline-block; will-change:transform; }
.title .w.em{ font-weight:800; font-style:normal; }
.title .w.moving{ transition:transform .55s cubic-bezier(.32,0,.15,1); }
.title .w.enter{ opacity:0; transform:translateY(26px); }
.title .w.enter.in{
  opacity:1; transform:translateY(0);
  transition:opacity .5s cubic-bezier(.2,0,.2,1), transform .5s cubic-bezier(.2,0,.2,1);
}

.ghost{
  position:fixed; z-index:25;
  letter-spacing:-.035em;
  color:var(--fg);
  pointer-events:none;
  opacity:.9;
  font-family:var(--font-disp);
}
.ghost.em{ font-weight:800; }
.ghost.out{
  opacity:0; transform:translateY(-22px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.4,0,.6,1);
}

.body{
  margin-top:22px;
  font-size:14.5px; line-height:1.62;
  color:var(--soft);
  max-width:52ch;
  transition:opacity .4s .05s, transform .4s .05s;
}
.body.out{ opacity:0; transform:translateY(10px); }

.points{
  margin-top:16px;
  display:flex; flex-wrap:wrap; gap:6px 18px;
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint);
  transition:opacity .4s .1s;
}
.points.out{ opacity:0; }
.points span::before{ content:"— "; color:var(--fg); }

/* ---------------- FOOTER CONTENT ---------------- */
.counter{ color:var(--soft); font-variant-numeric:tabular-nums; }
.counter-sep{ color:var(--faint); margin:0 3px; }
#idx-total{ color:var(--faint); }
.phase-tag{ color:var(--faint); margin-left:14px; }

.hint{
  position:absolute; left:50%; transform:translateX(-50%);
  color:var(--faint);
  display:flex; align-items:center; gap:8px;
  white-space:nowrap;
}
.hint::before{
  content:""; width:5px; height:5px; border-radius:50%;
  border:1px solid var(--fg);
}

.controls{ display:flex; gap:8px; }
.nav-btn{
  width:44px; height:44px;
  border:1px solid var(--line);
  background:none; color:var(--fg);
  border-radius:50%;
  cursor:pointer;
  display:grid; place-items:center;
  font-size:15px;
  transition:background .25s, border-color .25s, opacity .25s;
}
.nav-btn:hover:not(:disabled){ background:var(--lift); border-color:var(--fg); }
.nav-btn:disabled{ opacity:.25; cursor:default; }
.nav-btn svg{ width:18px; height:18px; display:block; }

.progress{
  position:fixed; bottom:0; left:0; right:0;
  height:2px; background:var(--line);
  z-index:31;
}
#progress-bar{
  height:100%; width:0%;
  background:var(--fg);
  transition:width .5s cubic-bezier(.4,0,.2,1);
}

/* ---------------- DRAWER ---------------- */
.drawer-scrim{
  position:fixed; inset:0; z-index:40;
  background:rgba(0,0,0,.42);
  opacity:0; pointer-events:none;
  transition:opacity .35s;
}
.drawer-scrim.open{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:41;
  width:min(420px, 92vw);
  background:#0A0A0C; color:#F2F2EF;
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.32,0,.15,1);
  display:flex; flex-direction:column;
  border-left:1px solid rgba(242,242,239,.1);
}
.drawer.open{ transform:translateX(0); }

.drawer-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 26px 14px;
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.2em;
  color:#8A8A90;
}
.drawer-close{
  background:none; border:none; color:#C9C9CE;
  font-size:18px; cursor:pointer;
  width:32px; height:32px; border-radius:50%;
}
.drawer-close:hover{ background:rgba(242,242,239,.08); }

.drawer-list{
  overflow-y:auto; padding:6px 12px 30px;
  flex:1;
}
.d-phase{
  font-family:var(--font-mono);
  font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:#6E6E74;
  padding:20px 14px 8px;
}
.d-item{
  display:flex; gap:14px; align-items:baseline;
  width:100%; text-align:left;
  background:none; border:none; cursor:pointer;
  padding:9px 14px;
  border-radius:6px;
  color:#C9C9CE;
  font-family:var(--font-disp);
  font-size:13.5px; letter-spacing:-.01em;
}
.d-item:hover{ background:rgba(242,242,239,.06); color:#fff; }
.d-item.active{ color:#fff; background:rgba(242,242,239,.1); }
.d-item.active .d-num{ color:#fff; }
.d-num{
  font-family:var(--font-mono);
  font-size:9.5px; color:#6E6E74;
  min-width:20px;
}
.drawer-foot{
  padding:16px 26px 20px;
  font-size:8.5px; letter-spacing:.2em;
  color:#5E5E64;
  border-top:1px solid rgba(242,242,239,.08);
}

/* focus */
button:focus-visible{
  outline:1.5px solid var(--fg);
  outline-offset:2px;
}
.drawer button:focus-visible{ outline-color:#F2F2EF; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:960px){
  #stage{ padding-left:32px; padding-bottom:112px; }
  .title{ max-width:100%; }
}

@media (max-width:720px){
  /* the canvas maps the composition into a graphic zone at the top;
     text owns the bottom — neither impedes the other */
  #stage{
    align-items:flex-end;
    padding:0 20px 104px;
  }
  #stage::before{
    width:100%;
    height:52%;
    background:linear-gradient(to top, var(--bg) 22%, transparent 88%);
  }
  .slide{ max-width:100%; }
  .kicker{ margin-bottom:12px; font-size:9.5px; }
  .title{ font-size:clamp(30px, 8.6vw, 44px); }
  .slide.is-chapter .title{ font-size:clamp(56px, 17vw, 92px); }
  .body{
    font-size:13px; line-height:1.58; margin-top:14px;
    display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .points{ display:none; }

  .hud{ padding:14px 16px; }
  .hud-sep, .rec{ display:none; }

  /* hint moves to the top of the graphic zone */
  .hint{
    position:fixed; top:58px; left:20px; right:20px;
    transform:none; justify-content:flex-start;
    white-space:normal;
    z-index:30;
  }

  .hud-bottom{ padding:16px 16px 18px; }
  .phase-tag{ display:none; }
}

@media (max-width:390px){
  .title{ font-size:clamp(27px, 8.8vw, 34px); }
}