/* Project-page look after ProteusNeRF / Nerfies (Bulma "title is-1", "is-size-5" authors,
   "button is-rounded is-dark"), written out by hand so Bulma's .tabs/.card/.media/.section
   rules cannot collide with the gallery code in style.css. Light only, like the original. */

:root {
  --pub-ink: #363636;
  --pub-text: #4a4a4a;
  --pub-link: hsl(204, 86%, 53%);
  --bg: #ffffff;
  color-scheme: light;
}

html { scroll-padding-top: 16px; }

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--pub-text);
  background: #ffffff;
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--pub-link); }

.pub-container { max-width: 960px; margin: 0 auto; padding: 0 24px; }

/* ---- hero ------------------------------------------------------------------------------- */
.pub-hero { padding: 3rem 0 1.5rem; text-align: center; }
.publication-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3rem; font-weight: 600; line-height: 1.125; color: var(--pub-ink);
  margin: 0 0 1.5rem; text-wrap: balance;
}
.publication-authors {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.25rem; color: var(--pub-text); margin: 0 0 .25rem;
}
.publication-affil { font-size: 1.05rem; }
.author-block { display: inline-block; margin: 0 .5em; }
.publication-authors sup { font-size: .7em; }

.publication-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.25rem 0 0; }

.pub-btn {
  display: inline-flex; align-items: center; gap: .5em;
  height: 2.5em; padding: calc(.5em - 1px) 1.25em;
  border: 1px solid transparent; border-radius: 9999px;
  background: var(--pub-ink); color: #fff;
  font: inherit; font-size: 1rem; line-height: 1.5; white-space: nowrap;
  cursor: pointer; text-decoration: none;
}
.pub-btn:hover { background: #2f2f2f; color: #fff; text-decoration: none; }
.pub-btn .fab, .pub-btn .fas { font-size: 1.05em; }
.pub-btn--soon { cursor: default; }
.pub-btn--soon:hover { background: var(--pub-ink); }
.pub-btn--light { background: #fff; color: var(--pub-ink); border-color: #dbdbdb; }
.pub-btn--light:hover { background: #f5f5f5; color: var(--pub-ink); border-color: #b5b5b5; }

/* ---- sections ------------------------------------------------------------------------- */
.pub-section { padding: 1.5rem 0; }
.pub-title-3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2rem; font-weight: 600; line-height: 1.125; color: var(--pub-ink);
  text-align: center; margin: 1rem 0 1.5rem;
}
.pub-title-4, .pub-title-5 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600; line-height: 1.25; color: var(--pub-ink);
}
.pub-title-4 { font-size: 1.5rem; margin: 3rem 0 1rem; }
.pub-title-5 { font-size: 1.25rem; margin: 2.25rem 0 .75rem; }
.secnum { color: #7a7a7a; margin-right: .3em; font-weight: 600; }

.abstract { text-align: justify; }
.abstract p { margin: 0 0 1rem; }
.section__lead, .body { color: var(--pub-text); margin: 0 0 1rem; }

.teaser, .figure { margin: 0 0 1rem; }
.cap { font-size: .95rem; color: var(--pub-text); margin-top: .6rem; text-align: left; }
.showcase .media, .teaser .media { width: 100%; height: auto; border-radius: 8px; }

/* ---- featured example + "See all results" --------------------------------------------- */
.featured { margin: .5rem 0 1rem; }
.featured__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; }
.featured__what { margin: 0; font-size: .92rem; color: #7a7a7a; }
.featured__gallery--one { grid-template-columns: minmax(0, 640px); justify-content: center; }

/* ---- the in-page "page": every result of one section ------------------------------------ */
body.pub-noscroll { overflow: hidden; }
.fullpage {
  position: fixed; inset: 0; z-index: 1000;
  background: #ffffff; overflow-y: auto; overscroll-behavior: contain;
}
.fullpage[hidden] { display: none; }
.fullpage__bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem max(24px, calc((100% - 1080px) / 2));
  padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
  background: rgba(255, 255, 255, .96); border-bottom: 1px solid #ededed;
  backdrop-filter: blur(6px);
}
.fullpage__title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.35rem; font-weight: 600; color: var(--pub-ink); min-width: 0;
}
.fullpage__sub { display: block; font-size: .85rem; font-weight: 400; color: #7a7a7a; }
.fullpage__body { max-width: 1080px; margin: 0 auto; padding: 1.5rem 24px 3rem; }

.pub-footer { padding: 2.5rem 0 3rem; text-align: center; font-size: .9rem; color: #7a7a7a; }
.pub-footer p { margin: 0; }

@media (max-width: 768px) {
  .publication-title { font-size: 2rem; }
  .publication-authors { font-size: 1.05rem; }
  .pub-title-3 { font-size: 1.6rem; }
  .fullpage__title { font-size: 1.1rem; }
}

/* two-line "coming soon" buttons: the label on top, "coming soon" under it, so they stay narrow */
.pub-btn--soon { height: auto; min-height: 2.5em; padding: .3em 1.15em; }
.pub-btn__label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.pub-btn__label small { font-size: .68em; opacity: .75; letter-spacing: .02em; }
.pub-btn .ai { font-size: 1.15em; }

/* UCLR demo: still water | challenging conditions */
.demo-switch { display: flex; justify-content: center; gap: .5rem; margin: 0 0 .9rem; flex-wrap: wrap; }
.demo-switch__btn {
  font: inherit; font-size: .95rem; cursor: pointer;
  padding: .35em 1.1em; border-radius: 9999px;
  border: 1px solid #dbdbdb; background: #fff; color: var(--pub-ink);
}
.demo-switch__btn:hover { border-color: #b5b5b5; }
.demo-switch__btn[aria-pressed="true"] { background: var(--pub-ink); border-color: var(--pub-ink); color: #fff; }
.showcase video[hidden] { display: none; }

/* ---- Arial everywhere, Figure 6 colours on every result box (2026-10-01) ------------------
   Figure 6 badges: C blue 59769F, L brown 83724F, U teal 587984 (R slate 5E7790 is too close
   to C to tell apart). SWIM and every non-baseline box: C. Imitation baselines: L. Surrogates: U. */
:root {
  --font: Arial, Helvetica, sans-serif;
  --mono: Arial, Helvetica, sans-serif;
  --fig6-c: #59769F; --fig6-l: #83724F; --fig6-u: #587984;
  --accent: var(--fig6-c);
  --m-ours: var(--fig6-c); --m-total_raw: var(--fig6-c); --m-body_token: var(--fig6-c);
  --m-amp: var(--fig6-l); --m-deepmimic: var(--fig6-l); --m-add: var(--fig6-l);
  --m-pinn: var(--fig6-u); --m-uwsim: var(--fig6-u); --m-hisph: var(--fig6-u); --m-mjfluid: var(--fig6-u);
}
body, button, input, select, textarea, .pub-btn, .demo-switch__btn { font-family: Arial, Helvetica, sans-serif; }
:where(.card) { --m-color: var(--fig6-c); }   /* zero specificity: the method classes still win */

/* Figure 6's LIGHT title-bar tints (the badge hue at its 0.86-0.90 lightness), not the dark badges:
   watC D0D9E7, watL EDE9E0, watU D7E1E5. Title and abstract on a wider measure. */
:root { --fig6-c: #D0D9E7; --fig6-l: #EDE9E0; --fig6-u: #D7E1E5; --accent: #59769F; }
.pub-hero .pub-container, #abstract .pub-container { max-width: 1100px; }

/* 2026-10-01: the tints half-way again to white (user: lighter), and the lost3d.github.io measure:
   the title block spans the window, the content sits in 75% of it (never under 960 px). */
:root { --fig6-c: #E8ECF3; --fig6-l: #F6F4F0; --fig6-u: #EBF0F2; }
.pub-container { max-width: max(960px, 75vw); }
.pub-hero .pub-container, #abstract .pub-container { max-width: none; padding: 0 3rem; }
#abstract .pub-container { max-width: max(960px, 75vw); padding: 0 24px; }
@media (max-width: 768px) { .pub-hero .pub-container { padding: 0 16px; } }

/* 2026-10-01: a bit darker again, a quarter of the way from Figure 6's tint to white */
:root { --fig6-c: #DCE2ED; --fig6-l: #F2EEE8; --fig6-u: #E1E8EC; }

/* ---- full-screen video header (after hengyiwang.github.io/projects/amber) ----------------- */
.vhead { position: relative; height: 100vh; height: 100svh; min-height: 420px; background: #000; overflow: hidden; color: #fff; }
.vhead__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.vhead__info {
  position: absolute; z-index: 2; top: calc(2.2rem + env(safe-area-inset-top, 0px)); left: 3rem; right: 3rem;
  max-width: 46rem; text-shadow: 0 0 2px #000, 0 1px 6px rgba(0,0,0,.6); pointer-events: none;
}
.vhead__info h1 { margin: 0; font-size: 3rem; font-weight: 700; letter-spacing: .02em; line-height: 1.1; }
.vhead__info h2 { margin: .35rem 0 0; font-size: 1.35rem; font-weight: 400; line-height: 1.3; }
.vhead__cap { margin: .9rem 0 0; font-size: .95rem; line-height: 1.45; color: rgba(255,255,255,.9); }
.vhead__cap[hidden] { display: none; }
.vhead__controls {
  position: absolute; z-index: 3; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.vhead__btn {
  font: inherit; font-size: .8rem; font-weight: 700; color: #fff; background: #363636;
  border: 1px solid transparent; border-radius: 9999px; height: 2.25em; padding: 0 1em; cursor: pointer;
}
.vhead__btn:hover { background: #2f2f2f; }
.vhead__btn[aria-pressed="false"] { background: rgba(54,54,54,.55); color: rgba(255,255,255,.75); }
.vhead__select { appearance: none; -webkit-appearance: none; padding-right: 2.2em;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.vhead__select option { color: #000; background: #fff; }
.vhead__down {
  position: absolute; z-index: 3; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  color: rgba(255,255,255,.85); font-size: 1.4rem; animation: vhead-bounce 1.6s infinite;
}
.vhead__down:hover { color: #fff; }
@keyframes vhead-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .vhead__down { animation: none; } }
@media (max-width: 768px) {
  .vhead { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .vhead__info { position: static; max-width: none; padding: 1.2rem 16px .7rem; }
  .vhead__info h1 { font-size: 1.8rem; } .vhead__info h2 { font-size: 1rem; } .vhead__cap { font-size: .85rem; }
  .vhead__video { position: static; width: 100%; height: auto; aspect-ratio: 1600 / 754; }
  .vhead__controls { position: static; padding: .7rem 16px 1rem; }
  .vhead__down { display: none; }
}

/* header v2: HD only; the two clips and the speed top-right, the caption along the bottom */
.vhead__controls { top: calc(2.2rem + env(safe-area-inset-top, 0px)); bottom: auto; left: auto; right: 3rem; justify-content: flex-end; }
.vhead__btn { font-size: .85rem; }
.vhead__btn--speed { min-width: 4.2em; }
.vhead__caption {
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%);
  bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); width: min(980px, calc(100% - 6rem));
  text-align: center; text-shadow: 0 0 2px #000, 0 1px 6px rgba(0,0,0,.6);
}
.vhead__caption .vhead__cap { margin: 0; font-size: 1rem; }
@media (max-width: 768px) {
  .vhead__controls { position: static; order: 2; justify-content: flex-start; padding: .2rem 16px .6rem; }
  .vhead__video { order: 3; }
  .vhead__caption { position: static; order: 4; transform: none; width: auto; text-align: left; padding: .7rem 16px 1rem; }
  .vhead__caption .vhead__cap { font-size: .85rem; }
}

/* header v3: the caption leaves the video for the white page below it (dark text, one line);
   a "Scroll Down" cue bottom-right as on AMB3R's page */
.vhead { height: calc(100vh - 4.2rem); height: calc(100svh - 4.2rem); }
.vhead-caption { padding: 1.4rem 24px .4rem; text-align: center; color: var(--pub-ink); }
.vhead-caption .vhead__cap { margin: 0; font-size: 1.02rem; line-height: 1.4; color: var(--pub-ink); text-shadow: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vhead-caption .vhead__cap[hidden] { display: none; }
.vhead__scroll {
  position: absolute; z-index: 3; right: 20px; bottom: 14px; text-align: center;
  color: #fff; text-decoration: none; font-size: .9rem; line-height: 1.3; text-shadow: 0 0 2px #000;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
}
.vhead__scroll i { animation: vhead-nudge 1.6s infinite; }
.vhead__scroll:hover { color: #fff; text-decoration: none; opacity: .85; }
@keyframes vhead-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .vhead__scroll i { animation: none; } }
@media (max-width: 768px) {
  .vhead { height: auto; }
  .vhead__scroll { display: none; }
  .vhead-caption { text-align: left; padding: .9rem 16px .2rem; }
  .vhead-caption .vhead__cap { white-space: normal; font-size: .9rem; }
}

/* header v4: the caption band is black like the video and tighter top and bottom */
.vhead { height: calc(100vh - 2.5rem); height: calc(100svh - 2.5rem); }
.vhead-caption { background: #000; padding: .45rem 24px .6rem; margin-bottom: 1.2rem; }
.vhead-caption .vhead__cap { color: #fff; }
@media (max-width: 768px) {
  .vhead { height: auto; }
  .vhead-caption { padding: .5rem 16px .6rem; }
}

/* the 2.1-2.5 explanation figures centred (".figure" above had reset their auto side margins);
   the example labels are gone, so the "See more results" button is centred */
.figure.figure--narrow { margin-left: auto; margin-right: auto; }
.figure--narrow .media { display: block; width: 100%; height: auto; }
.featured__foot { justify-content: center; }

/* header v5: video + caption are ONE black block exactly one screen tall, the caption pinned to
   its foot, so no white strip can show under the caption whatever the font size or zoom */
.vhead-wrap { display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 460px; background: #000; }
.vhead-wrap .vhead { flex: 1 1 auto; height: auto; min-height: 0; }
.vhead-wrap .vhead-caption { flex: 0 0 auto; margin: 0; }
@media (max-width: 768px) {
  .vhead-wrap { height: auto; min-height: 0; }
  .vhead-wrap .vhead { flex: none; }
}

/* header v6: the two clips top-centre, the speed alone top-right */
.vhead__clips {
  position: absolute; z-index: 3; top: calc(2.2rem + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; white-space: nowrap;
}
.vhead__info { max-width: max-content; }
@media (max-width: 1100px) {   /* below this the centred pair would run into the title: drop it under the title */
  .vhead__clips { top: calc(10.4rem + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 768px) {
  .vhead__clips { position: static; transform: none; order: 2; padding: .2rem 16px .6rem; flex-wrap: wrap; white-space: normal; }
  .vhead__controls { order: 2; padding-top: 0; }
}

/* the speed button see-through, so it sits lightly over the video */
.vhead__btn--speed { background: rgba(54, 54, 54, .35); border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .9); backdrop-filter: blur(2px); }
.vhead__btn--speed:hover { background: rgba(54, 54, 54, .6); }

/* speed button: more see-through; author names link to their pages in the template's blue */
.vhead__btn--speed { background: rgba(54, 54, 54, .16); border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .85); }
.vhead__btn--speed:hover { background: rgba(54, 54, 54, .4); }
.publication-authors a { color: var(--pub-link); text-decoration: none; }
.publication-authors a:hover { text-decoration: underline; }

/* section tabs: hidden over the header video, slide in at the top once it has scrolled away */
.nav.nav--float {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  padding-top: calc(.6rem + env(safe-area-inset-top, 0px)); padding-bottom: .6rem;
  background: rgba(255, 255, 255, .94); border-bottom: 1px solid #ededed;
  transform: translateY(-110%); transition: transform .25s ease; visibility: hidden;
}
body.past-head .nav.nav--float { transform: none; visibility: visible; }
.nav--float .nav__brand { color: var(--pub-ink); }
.nav--float .nav__links a { font-family: Arial, Helvetica, sans-serif; }
body.pub-noscroll .nav.nav--float { visibility: hidden; }
html { scroll-padding-top: 64px; }
@media (prefers-reduced-motion: reduce) { .nav.nav--float { transition: none; } }