/* === TOOLS: chapter curtain, progress, overview, lightbox, notes, edit mode, hint === */

/* --- chapter curtain (curtain.js) --- */
#curtain{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;justify-content:center;padding:0 130px;overflow:hidden;
  background:var(--ink);color:var(--bg);visibility:hidden;clip-path:inset(0 0 0 100%)}
#curtain.in{visibility:visible;clip-path:inset(0);transition:clip-path .6s cubic-bezier(.76,0,.24,1)}
#curtain.out{clip-path:inset(0 100% 0 0);transition:clip-path .6s cubic-bezier(.76,0,.24,1)}
#curtain .c-kicker{font:500 22px var(--font-mono);letter-spacing:.3em;text-transform:uppercase;color:#7fc7c2;opacity:0;transition:opacity .45s var(--ease) .05s}
#curtain .c-title{font:italic 400 170px/1.05 var(--font-serif);margin:34px 0 46px}
#curtain .ln>span{transform:translateY(112%);transition:transform .45s var(--ease) .1s}
#curtain .c-rule{width:520px;height:2px;background:var(--bg);opacity:.45;transform-origin:0 50%;scale:0 1;transition:scale .45s var(--ease) .2s}
#curtain .c-num{position:absolute;right:80px;bottom:-.24em;font:italic 400 760px/1 var(--font-serif);color:transparent;-webkit-text-stroke:2px rgba(244,241,234,.13);translate:140px 0;transition:translate 1.2s var(--ease)}
#curtain.hold .c-kicker{opacity:1}
#curtain.hold .ln>span{transform:none}
#curtain.hold .c-rule{scale:1 1}
#curtain.hold .c-num{translate:0 0}

/* --- progress line with a notch at each chapter (progress.js) --- */
#progress{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:6;background:rgba(18,64,63,.08);transition:opacity .6s}
#progress .fill{position:absolute;inset:0;background:var(--teal);transform-origin:0 50%;scale:var(--p,0) 1;transition:scale 1.1s var(--ease)}
#progress b{position:absolute;top:0;width:3px;height:4px;background:var(--bg)}
#progress.hide,.overview #progress{opacity:0}

/* --- overview grid (overview.js) --- */
.deck-stage.overview{background:#e7e1d4}
.overview .slide{visibility:visible;opacity:1;pointer-events:auto;cursor:pointer;transform-origin:0 0;background:var(--bg);
  box-shadow:0 30px 80px rgba(13,31,31,.22);outline:0 solid var(--teal);transition:transform .8s var(--ease),opacity .4s,outline-width .25s,visibility 0s}
.overview .slide *{pointer-events:none}
.overview .slide.focus{outline-width:14px}
.overview.closing .slide:not(.focus){opacity:0}
.overview.closing .slide.focus{outline-width:0}

/* --- lightbox (lightbox.js) --- */
#lightbox{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;cursor:zoom-out;
  visibility:hidden;background:rgba(13,31,31,0);transition:background .6s var(--ease),visibility 0s .6s}
#lightbox.open{visibility:visible;transition:background .6s var(--ease),visibility 0s}
#lightbox.show{background:rgba(13,31,31,.92)}
#lightbox img{max-width:1640px;max-height:900px;box-shadow:0 40px 120px rgba(0,0,0,.5)}
#lightbox p{font:18px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#cfe3e1;opacity:0;transition:opacity .4s}
#lightbox.show p{opacity:1;transition-delay:.45s}

/* --- presenter notes panel (N) --- */
#notesPanel{position:fixed;right:0;top:0;bottom:0;width:420px;background:#0d1f1f;color:#dfe9e8;font:18px/1.55 var(--font-serif);padding:28px;overflow:auto;z-index:2000;transform:translateX(100%);transition:transform .3s}
#notesPanel.show{transform:none}
#notesPanel h4{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#4fd1c5;margin-bottom:14px}

/* --- edit mode (E) --- */
.edit-hotzone{position:fixed;top:0;left:0;width:80px;height:80px;z-index:10000;cursor:pointer}
.edit-toggle{position:fixed;top:14px;left:14px;z-index:10001;opacity:0;pointer-events:none;transition:opacity .3s;font:14px var(--font-mono);background:#12403f;color:#fff;border:0;padding:8px 12px;cursor:pointer}
.edit-toggle.show,.edit-toggle.active{opacity:1;pointer-events:auto}
.edit-toggle.active{background:#0e7c7b}
body.editing [contenteditable]{outline:1px dashed var(--teal);outline-offset:2px}

/* --- key hint on start (hint.js) --- */
#hint{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:1500;padding:10px 20px;border-radius:40px;white-space:nowrap;pointer-events:none;
  font:13px var(--font-mono);letter-spacing:.12em;color:#cfe3e1;background:rgba(13,31,31,.86);opacity:0;transition:opacity .8s}
#hint.show{opacity:1}