/* ==========================================================================
   WorldFlow3D project page styles (kept as-is where applicable)
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: 'Helvetica', 'Noto Sans', sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f8f9fa;
}

/* Method Overview Styling */
.method-figure {
    margin: 10px 0;
}

.method-image {
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.method-description {
    margin-top: 20px;
}

/* Results Section Styling */
.results-figure {
    margin: 20px 0;
}

.results-image {
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

.section {
    background: white;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
}

.section h2 {
    color: #2c3e50;
    margin-bottom: 20px;
    padding-top: 20px;
    font-size: 1.8rem;
}

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

/* Greyed-out hero button for links that are not public yet */
.button.is-soon {
    opacity: 0.45;
    cursor: not-allowed;
}

.button.is-dark.is-soon:hover {
    background-color: #363636;
}

/* Hero */
.hero {
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

.hero .hero-body {
    position: relative;
    z-index: 1;
    padding-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(0.5px);
}

.hero .container {
    position: relative;
    z-index: 2;
}

.publication-title {
    font-family: 'Helvetica', sans-serif;
}

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

.publication-authors a {
   color: hsl(204, 86%, 38%) !important; /* 5.1:1 on white (WCAG AA) */
}

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

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

/* Lab logo: top-left corner of the header, and at the left of the sticky nav once scrolled.
   Sizes derive from the neighbouring text: the logo's lettering is 0.504 of the image height,
   and Helvetica's cap height is ~0.717 of the font size. */
.lab-logo {
    display: block;
    line-height: 0;
    opacity: 0.75;
    transition: opacity 0.2s;
}

.lab-logo:hover {
    opacity: 1;
}

.lab-logo img {
    width: auto;
}

.hero-logo {
    position: absolute;
    top: 14px;
    left: 24px;
    z-index: 3;
}

/* Whole logo no taller than the title's capitals (title: 3rem -> cap height 2.15rem) */
.hero-logo img {
    height: 2.15rem;
}

.nav-logo {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

/* Lettering matches the nav links' capitals (0.82rem * 0.717 / 0.504 = 1.17rem) */
.nav-logo img {
    height: 1.17rem;
}

/* BibTeX styling */
pre {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  margin: 0px 0;
  text-align: left;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.4;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
  text-align: left;
  white-space: pre;
  display: block;
}

/* Video label pill */
.scene-carousel-label {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

/* Sticky Navigation */
.sticky-nav {
    position: fixed;
    top: -60px;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: top 0.3s ease;
}

.sticky-nav.visible {
    top: 0;
}

.sticky-nav-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    flex-wrap: wrap;
}

.sticky-nav-link {
    color: #555;
    font-family: 'Helvetica', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 20px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sticky-nav-link:hover {
    color: #2c3e50;
    background: rgba(0, 0, 0, 0.05);
}

.sticky-nav-link.active {
    color: #2c3e50;
    background: rgba(44, 62, 80, 0.1);
    font-weight: 600;
}

/* Scene tabs (WorldFlow3D mesh viewer tabs) */
.mesh-scene-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.mesh-scene-tab {
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Helvetica', sans-serif;
    color: #555;
    background: #e8e8e8;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.mesh-scene-tab:first-child {
    border-radius: 6px 0 0 0;
}

.mesh-scene-tab:last-child {
    border-radius: 0 6px 0 0;
}

.mesh-scene-tab.active {
    color: #fff;
    background: #363636;
}

.mesh-scene-tab:hover:not(.active) {
    background: #d0d0d0;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================================================
   EpicWorldModel additions, in the same visual language
   ========================================================================== */

/* Teaser: same framing as the WorldFlow3D viewer */
.teaser-figure {
    margin-bottom: 20px;
}

.teaser-image {
    width: 100%;
    height: auto;
    display: block;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Figures exported with a transparent background: no frame, they sit directly on the section.
   Remove this class (and use the opaque teaser.webp / concept.webp) to get the framed look back. */
.figure-transparent {
    background: none;
    box-shadow: none;
}

/* Interactive figures: white box with the viewer shadow */
.figure-box {
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 16px;
    margin-bottom: 20px;
    text-align: left;
}

.fig-panel {
    display: none;
}

.fig-panel.active {
    display: block;
    animation: fadeIn 0.25s ease-in-out;
}

/* Scene Video Grid / Carousel (WorldFlow3D) */
.scene-carousel-wrapper {
    margin: 20px 0;
    overflow: hidden;
}

/* Large screens: one row of four videos, no scrolling */
.scene-carousel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.scene-carousel-item {
    border-radius: 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.scene-carousel-item video {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    display: block;
    background: #a9a9a9;
}

/* Scene Carousel Dots - hidden on large screens */
.scene-carousel-dots {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.scene-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dbdbdb;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.scene-dot.active {
    background: #363636;
    transform: scale(1.2);
}

.scene-dot:hover:not(.active) {
    background: #aaa;
}

/* Switch to carousel mode on smaller screens */
@media screen and (max-width: 1024px) {
    .scene-carousel-dots {
        display: flex;
    }
    .scene-carousel {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        cursor: grab;
        padding: 0;
        scroll-padding: 0 20%;
    }
    .scene-carousel::-webkit-scrollbar {
        display: none;
    }
    .scene-carousel.grabbing {
        cursor: grabbing;
        scroll-snap-type: none;
    }
    .scene-carousel-item {
        flex: 0 0 60%;
        scroll-snap-align: center;
    }
}

/* Mobile: 1 video + 10% peek on each side */
@media screen and (max-width: 768px) {
    .scene-carousel-item {
        flex: 0 0 80%;
    }
    .scene-carousel {
        scroll-padding: 0 10%;
    }
}

/* Math */
.content .katex-display {
    margin: 0.8em 0;
}

/* Display math scrolls on its own; it must be positioned because KaTeX's hidden MathML is
   absolutely positioned and would otherwise escape it and widen the page on mobile. */
.katex-display {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Proofs */
.proof {
    margin: 0 0 1em 0;
}

.proof summary {
    cursor: pointer;
    color: hsl(204, 86%, 53%);
    font-size: 0.95rem;
    width: fit-content;
}

.proof summary:hover {
    text-decoration: underline;
}

.proof[open] {
    border-left: 3px solid #e9ecef;
    padding-left: 16px;
}

.proof[open] summary {
    margin-bottom: 0.5em;
}

/* Variance widget */
.variance-box svg {
    width: 100%;
    height: auto;
    display: block;
}

.variance-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

.variance-controls label {
    min-width: 80px;
}

.variance-controls input[type=range] {
    flex: 1;
    min-width: 140px;
    accent-color: #363636;
}

/* Benchmark */
.bench-box .columns {
    margin-bottom: 0;
}

.env-image {
    width: 100%;
    height: auto;
    display: block;
}

.env-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    font-size: 0.8rem;
    color: #777;
    margin: 4px 0 12px 0;
}

.horizon-toggle[hidden] {
    display: none;
}

.legend-ours,
.legend-base {
    font-weight: 600;
}

.legend-ours { color: #c24e00; }
.legend-base { color: #1f5fa8; }

/* Charts */
.bench-chart svg,
.line-chart svg {
    width: 100%;
    height: auto;
    display: block;
}

.sweep-toggle {
    margin-bottom: 4px !important;
}

.chart-axis text,
.chart-label {
    font-family: 'Helvetica', sans-serif;
    font-size: 12px;
    fill: #555;
}

.chart-value {
    font-family: 'Helvetica', sans-serif;
    font-size: 12px;
    fill: #333;
    font-weight: 600;
}

.chart-grid line {
    stroke: #ececec;
    stroke-width: 1;
}

.chart-baseline {
    stroke: #bbb;
    stroke-width: 1;
}

.bar-hit,
.hover-col {
    fill: transparent;
}

.bar-row:hover .bar {
    opacity: 0.8;
}

.line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.line-dot {
    stroke: #fff;
    stroke-width: 2;
}

.ref-line {
    stroke-width: 1.5;
}

.hover-guide {
    stroke: #bbb;
    stroke-width: 1;
    pointer-events: none;
}

.chart-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 200;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-family: 'Helvetica', sans-serif;
    font-size: 0.78rem;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 6px;
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.12s;
    white-space: nowrap;
}

.chart-tooltip.visible {
    opacity: 1;
}

.chart-tooltip .tt-key {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

/* ==========================================================================
   Responsive (WorldFlow3D breakpoints)
   ========================================================================== */

/* Hidden where the centered nav links would run into it */
@media screen and (max-width: 1119px) {
  .nav-logo {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .publication-title {
    font-size: 1.5rem !important;
  }

  .hero-logo {
    top: 12px;
    left: 14px;
  }

  /* title 1.5rem -> cap height 1.08rem */
  .hero-logo img {
    height: 1.08rem;
  }

  .is-size-5 {
    font-size: 0.9rem !important;
  }

  .title.is-3 {
    font-size: 1.5rem !important;
  }

  .button.is-normal {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.8rem !important;
  }

  /* Phone menu: one swipeable row instead of wrapping onto two rows */
  .sticky-nav-inner {
    gap: 2px;
    padding: 8px 10px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }

  .sticky-nav-inner::-webkit-scrollbar {
    display: none;
  }

  /* Centered while the links fit, scrollable from the first link once they don't */
  .sticky-nav-link:first-child {
    margin-left: auto;
  }

  .sticky-nav-link:last-child {
    margin-right: auto;
  }

  .sticky-nav-link {
    font-size: 0.8rem;
    padding: 6px 10px;
  }

  /* Justified text leaves wide gaps between words on narrow columns */
  .has-text-justified {
    text-align: left !important;
  }

  .mesh-scene-tab {
    padding: 6px 12px;
    font-size: 0.75rem;
    border-radius: 6px 6px 0 0 !important;
  }

  .figure-box {
    padding: 10px;
  }
}

@media screen and (max-width: 480px) {
  .publication-title {
    font-size: 1.2rem !important;
  }

  /* title 1.2rem -> cap height 0.86rem */
  .hero-logo img {
    height: 0.86rem;
  }

  .is-size-5 {
    font-size: 0.8rem !important;
  }

  .title.is-3 {
    font-size: 1.2rem !important;
  }

  .button.is-normal {
    font-size: 0.65rem !important;
    padding: 0.3rem 0.6rem !important;
  }
}

@media screen and (min-width: 1200px) {
  .publication-title {
    font-size: 3rem !important;
  }

  .title.is-3 {
    font-size: 2rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
    .fig-panel.active { animation: none; }
}

/* Explainer title sits below its video */
.analysis-title { margin-top: 1.75rem; }

/* Explainer video follows the hero buttons closely */
#analysis-figure.results-figure { margin-top: 0; }