/* css/site-ui.css — shared site chrome additions:
   1) mobile hamburger for the info nav (Learn/Ebook/Privacy/Terms/Contact)
   2) scroll-driven UI: reveals, counters hook, floating pill, progress bar, parallax
   Loaded by index.html, ebook.html, privacy.html, terms.html, contact.html.
   Does not restyle existing components — only adds. */

/* ================= 1) Mobile hamburger ================= */
.info-menu-btn {
  display: none;
  width: 40px; height: 40px; flex: none;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--card-bg); color: var(--text-main);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  align-items: center; justify-content: center;
}
.info-menu-btn:hover { border-color: var(--primary); }

/* --- index.html: .top-header + .info-nav (mobile <= 760px) --- */
@media (max-width: 760px) {
  body.view-info .top-header .info-menu-btn { display: inline-flex; margin-left: auto; }
  body.view-learning .top-header .info-menu-btn { display: none !important; }
  body.view-info .top-header .info-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--card-bg); border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 30px rgba(2, 6, 23, 0.12);
    padding: 6px 16px 14px;
  }
  body.view-info .top-header .info-nav.open { display: flex; }
  body.view-info .top-header .info-nav.open a {
    padding: 12px 4px; border-top: 1px solid var(--border); font-size: 1rem;
  }
}

/* --- info pages: .info-header + .site-nav (mobile <= 768px) --- */
@media (max-width: 768px) {
  .info-header .info-menu-btn { display: inline-flex; margin-left: auto; }
  .info-header .header-globals { margin-left: 0; }
  .info-header .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    width: 100%; box-sizing: border-box;
    flex-direction: column; gap: 0; margin: 0;
    background: var(--card-bg); border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 30px rgba(2, 6, 23, 0.12);
    padding: 6px 16px 14px;
  }
  .info-header .site-nav.open { display: flex; }
  .info-header .site-nav.open a {
    padding: 12px 4px; border-top: 1px solid var(--border); font-size: 1rem;
  }
}

/* ================= 2) Scroll-driven UI ================= */

/* --- scroll progress bar (CSS scroll-driven; enhancement only) ---
   The bar is always fixed to the very top of the viewport (top: 0, no
   margin/padding) so it never sits below the header or over content.
   On pages where the window scrolls, the CSS scroll() timeline drives it.
   On index.html the window never scrolls (content scrolls inside
   main#main-content), so JS drives it instead via the .js-driven class. */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  margin: 0; padding: 0;
  z-index: 200; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%;
  background: var(--primary);
  transform: scaleX(0); transform-origin: 0 50%;
}
.scroll-progress.js-driven span { animation: none; }
@supports (animation-timeline: scroll()) {
  .scroll-progress span { animation: sui-grow linear; animation-timeline: scroll(); }
  @keyframes sui-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* --- header state after scrolling --- */
.top-header.is-scrolled, .info-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.10);
}

/* --- reveal on scroll (hidden state applied only when JS runs) --- */
html.js-scroll [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.25, 1);
}
html.js-scroll [data-reveal="left"]  { transform: translateX(-32px); }
html.js-scroll [data-reveal="right"] { transform: translateX(32px); }
html.js-scroll [data-reveal="scale"] { transform: scale(0.95); }
html.js-scroll [data-reveal].is-visible { opacity: 1; transform: none; }

/* --- floating buy pill (ebook page) --- */
.scroll-pill {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 150;
  transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
  background: #f59e0b; color: #1f2937; border: 0; border-radius: 999px;
  padding: 13px 26px; font-size: 0.95rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.28);
  white-space: nowrap; max-width: calc(100vw - 32px);
  overflow: hidden; text-overflow: ellipsis;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.35s ease;
}
.scroll-pill.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.scroll-pill:hover { filter: brightness(1.05); }

/* --- cover parallax (CSS scroll-driven; enhancement only) --- */
@supports (animation-timeline: view()) {
  .ebook-hero-cover {
    animation: sui-drift linear;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes sui-drift {
    from { transform: translateY(26px); }
    to   { transform: translateY(-26px); }
  }
}

/* --- Floating Scroll to Top / Bottom Widget (Bottom-Right Corner) --- */
.scroll-nav-widget {
  position: fixed;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 4px 18px rgba(2, 6, 23, 0.14);
  padding: 4px;
  gap: 2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
  user-select: none;
}

.scroll-nav-widget:hover {
  box-shadow: 0 6px 22px rgba(2, 6, 23, 0.20);
}

.scroll-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.scroll-nav-btn:hover:not(.is-disabled) {
  background: var(--surface-hover);
  color: var(--primary);
}

.scroll-nav-btn:active:not(.is-disabled) {
  transform: scale(0.92);
}

.scroll-nav-btn.is-disabled {
  opacity: 0.32;
}

.scroll-nav-divider {
  width: 20px;
  height: 1px;
  background: var(--border);
  margin: 1px 0;
}

@media (max-width: 640px) {
  .scroll-nav-widget {
    right: 14px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
  .scroll-nav-btn {
    width: 36px;
    height: 36px;
  }
}

[data-theme="dark"] .scroll-nav-widget {
  background: var(--card-bg);
  border-color: var(--border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .scroll-nav-btn:hover:not(.is-disabled) {
  background: var(--surface-hover);
  color: var(--primary-light);
}

/* --- reduced motion: everything settles at its final state --- */
@media (prefers-reduced-motion: reduce) {
  html.js-scroll [data-reveal] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .scroll-pill { transition: none; }
  .scroll-nav-widget { transition: none; }
  @supports (animation-timeline: scroll()) {
    .scroll-progress span { animation: none; transform: scaleX(1); }
  }
  @supports (animation-timeline: view()) {
    .ebook-hero-cover { animation: none; }
  }
}