/* =========================================================
   VGGT/Nerfies-derived base
   ========================================================= */
html {
  /* Smooth scroll for anchor links like #BibTeX. */
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans', sans-serif;
  font-size: 16px;
}

.footer .icon-link {
  font-size: 25px;
  color: #000;
}

.link-block a {
  margin-top: 5px;
  margin-bottom: 5px;
}

/* The Nerfies/VGGT convention is small-caps for the paper name in running
   text. We also bold it so it visibly stands out from body prose — the
   small-caps treatment alone is too subtle.

   The repeated class (`.dnerf.dnerf`) and the deeper-context selectors
   bump specificity above Bulma's `.content p`/`.content` cascade,
   which otherwise pins the weight back to 400 in the abstract block. */
.dnerf,
.dnerf.dnerf,
.content .dnerf,
.content p .dnerf {
  font-variant: small-caps;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

.publication-title {
  font-family: 'Google Sans', sans-serif;
  /* Override Bulma's default bottom margin on .title.is-1 so the
     subtitle sits directly beneath the paper name rather than feeling
     like a separate banner. */
  margin-bottom: 0.5rem !important;
  line-height: 1.05;
}

.publication-subtitle {
  font-family: 'Google Sans', sans-serif;
  color: #4a4a4a;
  font-weight: 400;
  /* Slightly tighter than Bulma's .title.is-3 default and pulled up
     toward the paper name so the title block reads as one unit. */
  font-size: 1.75rem;
  line-height: 1.25;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.publication-authors {
  font-family: 'Google Sans', sans-serif;
}

/* The subtitle ends snug against the author names. Adding a top margin
   to the first .publication-authors row (immediately after the title
   block) gives the authors visual separation. The :nth-of-type avoids
   doubling the gap before the affiliation row. */
.publication-subtitle + .publication-authors {
  margin-top: 1.75rem;
}

.publication-authors a {
  color: hsl(204, 86%, 53%) !important;
}

.publication-authors a:hover {
  text-decoration: underline;
}

/* Affiliation link styled as plain body text — the blue we use for
   authors is too loud here. Keeping it clickable with a hover
   underline preserves discoverability without competing with the
   author names. The selector is intentionally more specific than
   `.publication-authors a` so it wins despite the !important
   color above. */
.publication-authors a.affiliation-link {
  color: inherit !important;
  text-decoration: none;
}
.publication-authors a.affiliation-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
}

.author-block {
  display: inline-block;
}

.publication-links {
  margin-top: 1.5rem;
}

/* Disabled "Coming soon" button. */
.button.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: auto;
}
.button.is-disabled:hover {
  background-color: #363636;  /* keep is-dark base, no hover change */
}

/* Section spacing — make the rhythm a bit tighter than Bulma default. */
.section {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* =========================================================
   Figures (inference / training pipelines)
   ========================================================= */
.figure {
  margin: 0;
}
.figure-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.figure-caption {
  margin-top: 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #4a4a4a;
  text-align: justify;
}
.figure-caption strong {
  color: #1a1a1a;
}

/* =========================================================
   Interactive demo
   ========================================================= */
.demo-mount {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.demo-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 940 / 560;
  background: #f5f5f5;
  border-radius: 8px;
  color: #7a7a7a;
  font-size: 14px;
}

.demo-stage {
  position: relative;
  width: 100%;
  background: #0a0d10;
  border-radius: 8px;
  overflow: hidden;
  cursor: crosshair;
  user-select: none;
  touch-action: none;
}
/* Double-buffered demo images: stacked, one always visible. We use
   absolute positioning on imgB so it overlays imgA pixel-for-pixel.
   opacity flips between them (transition: none to keep swaps instant). */
.demo-stage img.demo-img {
  display: block;
  width: 100%;
  height: auto;
  transition: none;
}
.demo-stage img.demo-img-b {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cursor-ring {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 160ms ease;
  mix-blend-mode: difference;
}
.demo-stage:hover .cursor-ring,
.demo-stage.touch-active .cursor-ring { opacity: 1; }

/* Controls row: scene thumbnails on the left, light buttons on the right. */
.demo-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.demo-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.demo-group-label {
  font-family: 'Google Sans', sans-serif;
  font-size: 12px;
  color: #6a6a6a;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 6px;
}
.demo-btn {
  appearance: none;
  border: 1px solid #d8d8d8;
  background: #ffffff;
  color: #1a1a1a;
  font: 500 14px 'Google Sans', sans-serif;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.demo-btn:hover {
  border-color: hsl(204, 86%, 53%);
  color: hsl(204, 86%, 53%);
}
.demo-btn.active {
  background: hsl(213, 51%, 32%);
  border-color: hsl(213, 51%, 32%);
  color: white;
}
.demo-btn.scene-btn {
  padding: 0;
  width: 64px;
  height: 38px;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
}
.demo-btn.scene-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.demo-btn.scene-btn.active {
  outline: 2px solid hsl(213, 51%, 32%);
  outline-offset: 2px;
}

.demo-caption {
  font-size: 14px;
  color: #7a7a7a;
  margin-top: 1rem;
}

/* =========================================================
   Qualitative comparison (image-slider blocks)
   ========================================================= */
.comparison-mount {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.comparison-scene-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.cmp-block { margin: 0; }
.cmp-label {
  font-family: 'Google Sans', sans-serif;
  font-size: 13px;
  color: #6a6a6a;
  margin: 0 0 0.5rem 0.25rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cmp-stage {
  position: relative;
  width: 100%;
  background: #0a0d10;
  border-radius: 8px;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  cursor: ew-resize;
}
.cmp-stage img {
  display: block;
  width: 100%;
  height: auto;
}
.cmp-stage img.cmp-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 50% 0 0);
}
.cmp-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.95);
  pointer-events: none;
  transform: translateX(-50%);
  z-index: 2;
}
.cmp-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
}
.cmp-tag {
  position: absolute;
  top: 10px;
  padding: 5px 10px;
  border-radius: 4px;
  background: rgba(20, 23, 27, 0.65);
  color: white;
  font-family: 'Google Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cmp-tag.cmp-tag-left { left: 10px; }
.cmp-tag.cmp-tag-right { right: 10px; }

/* =========================================================
   BibTeX
   ========================================================= */
#BibTeX pre {
  background: #f5f5f5;
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
}
#BibTeX code {
  background: transparent;
  padding: 0;
  font-family: inherit;
}

/* =========================================================
   Mobile tightening
   ========================================================= */
@media (max-width: 600px) {
  .demo-stage { cursor: default; }
  .cmp-stage { cursor: default; }
  .cmp-handle::before { width: 36px; height: 36px; }
  .cmp-tag { font-size: 11px; padding: 4px 8px; }
}