/* ============================================================
   Our Science — scroll-to-read layout (dark theme)
   Scoped to projects.html; loaded after the Webflow styles.
   Turns the old tab component into stacked full-viewport panels
   that reveal on scroll, with a sticky scroll-spy nav.
   ============================================================ */

html { scroll-behavior: smooth; scroll-snap-type: y mandatory; }

.science-scroll { position: relative; }

/* keep the nav (logo + hamburger) pinned to the top while scrolling.
   scoped to this page — science-scroll.css only loads on projects.html.
   Give it an opaque strip that fades out below so the logo/hamburger never
   clash with panel text scrolling underneath (no hard edge line: the strip is
   the same midnight-blue as the panels, then fades to transparent). */
.global-header {
  position: fixed;
  padding-bottom: 1.75rem;
  background: linear-gradient(
    to bottom,
    var(--midnight-blue, #01182e) 0%,
    var(--midnight-blue, #01182e) 58%,
    rgba(1, 24, 46, 0) 100%
  );
  pointer-events: none;   /* let clicks through the transparent fade zone */
}
.global-header .navbar { pointer-events: auto; }   /* logo + hamburger stay clickable */

/* let the footer be a snap resting point so mandatory snapping
   never traps the reader on the last panel */
.science-scroll + .global-footer { scroll-snap-align: start; }

/* ---- reading-progress bar ---- */
.sci-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--dodger-blue, #438cfd); z-index: 60;
  transition: width .08s linear;
}

/* ---- sticky scroll-spy nav (desktop) ---- */
.sci-nav {
  position: fixed; top: 50%; left: 2.2rem; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: 1rem;
  pointer-events: none;   /* a visual guide only — not clickable */
}
.sci-nav a {
  display: flex; align-items: center; gap: .7rem;
  font-family: "DM Mono", monospace; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.45); text-decoration: none;
  transition: color .25s ease;
}
.sci-nav a .rule {
  width: 1.5rem; height: 1px; background: rgba(255,255,255,.3);
  transition: width .25s ease, background .25s ease; display: inline-block;
}
.sci-nav a:hover { color: rgba(255,255,255,.8); }
.sci-nav a.active { color: #fff; }
.sci-nav a.active .rule { width: 2.6rem; background: var(--dodger-blue, #438cfd); }
@media (max-width: 991px) { .sci-nav { display: none; } }
.sci-nav { transition: opacity .2s ease; }
/* while the hamburger menu is open, hide + disable the scroll-spy nav
   (and the progress bar) so they don't sit on top of the menu overlay */
body.sci-menu-open .sci-nav,
body.sci-menu-open .sci-progress {
  opacity: 0;
  pointer-events: none;
}

/* mark "Our Science" as the current item in the menu. Webflow's JS is flaky
   about keeping .w--current, so pin it by href (this file only loads here). */
.global-header .nav-link[href="projects.html"] { color: var(--hot-coral); }

/* ---- panels ---- */
.sci-panel {
  min-height: 100vh; display: flex;
  align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  background: var(--midnight-blue, #01182e);
  padding: 7rem clamp(1.5rem, 6vw, 6rem);
  scroll-snap-align: start;
}

/* divider between sections, echoing the publications year-divider rule */
.sci-panel:not(:last-of-type)::after {
  content: ""; position: absolute; bottom: 0;
  left: clamp(1.5rem, 6vw, 6rem); right: clamp(1.5rem, 6vw, 6rem);
  border-top: 4px solid var(--white, #fff);
}

.sci-inner {
  position: relative; z-index: 2; max-width: 44rem;
  margin: 0 auto; text-align: left;
}
.sci-kicker {
  font-family: "DM Mono", monospace; font-size: 1.35rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dodger-blue, #438cfd); margin: 0 0 1.4rem;
}
.sci-title {
  color: #fff; font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.02;
  letter-spacing: -.03em; margin: 0 0 1.5rem;
}
.sci-body {
  color: rgba(255,255,255,.92); font-size: 1.15rem; line-height: 1.62;
  max-width: 40rem; text-align: left;
}
.sci-body p { margin: 0 0 1.1rem; }
.sci-sub {
  color: #fff; font-weight: 700; font-size: 1.35rem;
  margin: 1.8rem 0 .5rem;
}
.sci-body ul, .sci-body ol { margin: .3rem 0 1.2rem; padding-left: 1.25rem; }
.sci-body li { margin: .45rem 0; }

/* ---- scroll cue on the first panel ---- */
.sci-cue {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  z-index: 3; font-family: "DM Mono", monospace; font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.sci-cue::after {
  content: ""; width: 1px; height: 2.2rem;
  background: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,0));
  animation: sci-cue-pulse 1.8s ease-in-out infinite;
}
@keyframes sci-cue-pulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* ---- reveal ---- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,.8,.3,1),
              transform .8s cubic-bezier(.16,.8,.3,1);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .sci-progress, .sci-cue::after { display: none; }
}

@media (max-width: 767px) {
  html { scroll-snap-type: none; }
  .sci-body { font-size: 1.05rem; }
}