/* Fluid-Gen-Zero project page
   One tonal system: a single blue hue at three values distinguishes
   simulation, baselines and ours, so nothing competes for attention. */

:root {
  --font-sans:    'Inter', 'Noto Sans', -apple-system, sans-serif;
  --font-display: 'PT Serif', Georgia, serif;
  --font-prompt:  'Libre Baskerville', Georgia, serif;

  --bg:        #f5f9fd;
  --bg-card:   #ffffff;
  --bg-alt:    #e8f1fa;
  --border:    #cfdfee;

  --ink:       #1f2d3d;   /* simulation  - darkest */
  --accent:    #8ba7c2;   /* baselines   - lightest */
  --accent-dk: #3a6c98;   /* ours        - mid, saturated */
  --body:      #4a5563;
  --muted:     #7c8a99;

  --maxw: 1680px;
}

html { background: var(--bg); }
body { background: var(--bg); font-family: var(--font-sans); color: var(--body);
       -webkit-font-smoothing: antialiased; }

/* ---------- shell ---------------------------------------------------- */
.navbar { background: transparent; border-bottom: 1px solid var(--border); }
.navbar-item { font-weight: 600; color: var(--ink) !important; font-size: .92rem;
               letter-spacing: .02em; }
.navbar-item:hover { color: var(--accent-dk) !important; background: transparent !important; }

.publication-title { font-family: var(--font-display); font-weight: 700;
  font-size: 2.7rem; line-height: 1.22; color: var(--ink);
  max-width: 1040px; margin: 0 auto 1.4rem; letter-spacing: -.01em; }
.publication-authors { font-family: var(--font-sans); font-size: 1.02rem; color: var(--body); }
.publication-authors a { color: var(--accent-dk) !important; text-decoration: none; }
.publication-authors a:hover { text-decoration: underline; text-underline-offset: 3px; }
.correspondence { margin-top: .3rem; color: var(--muted); font-size: .88rem; }
.publication-links { margin-top: 1.6rem; }
.publication-links .button.is-dark { background: var(--ink); border: none;
  font-family: var(--font-sans); font-weight: 600; padding: 0 1.4rem; }
.publication-links .button.is-dark:hover { background: var(--accent-dk); }

/* ---------- teaser ---------------------------------------------------- */
.teaser .hero-body { padding-top: 0; padding-bottom: 2.6rem; }
.teaser-card { background: linear-gradient(135deg, var(--ink), var(--accent-dk));
  color: #fff; border-radius: 16px; padding: 2.3rem 2.5rem;
  box-shadow: 0 14px 34px rgba(31, 45, 61, .16); }
.teaser-copy { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.45;
  text-align: center; }
.teaser-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem;
  margin-top: 1.3rem; }
.teaser-pills span { border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
  padding: .28rem .9rem; font-size: .84rem; letter-spacing: .02em; }

/* ---------- headings -------------------------------------------------- */
.title.is-3 { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem;
  color: var(--ink); position: relative; padding-bottom: .9rem; margin-bottom: 1.2rem; }
.title.is-3::after { content: ''; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%); width: 78px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dk)); }
.section-heading { margin-bottom: 2.2rem; }
.section-heading p { max-width: 760px; margin: .1rem auto 0; color: var(--muted);
  font-size: .96rem; line-height: 1.6; }

/* ---------- abstract / figures ---------------------------------------- */
#abstract .content p { font-size: 1.03rem; line-height: 1.75; color: var(--body); }
.method-strip { display: flex; align-items: center; justify-content: space-around;
  gap: 1rem; background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.15rem; text-align: center; color: var(--ink); }
.method-strip i { color: var(--accent-dk); }
.method-strip span { color: var(--muted); font-size: .87rem; }
.paper-figure { margin: 2.2rem 0 .5rem; text-align: center; }
.paper-figure img { display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--border); background: #fff; }
.paper-figure figcaption { margin: .8rem auto 0; max-width: 94%; color: var(--muted);
  font-size: .89rem; line-height: 1.55; text-align: left; }

/* ---------- results matrix -------------------------------------------- */
.results-section { background: var(--bg); padding-top: 3rem; }
.results-section .container { max-width: var(--maxw); padding: 0 1.5rem; }

.headers-scope { display: flow-root; }
.column-headers { display: grid; grid-template-columns: repeat(6, 1fr); gap: .45rem;
  position: sticky; top: 0; z-index: 30; padding: .6rem 0 .55rem;
  background: var(--bg); box-shadow: 0 8px 10px -8px rgba(31,45,61,.2);
  text-align: center; }
.column-header { padding: .5rem .3rem; border-radius: 7px; color: #fff;
  font-family: var(--font-sans); font-weight: 600; font-size: .82rem;
  letter-spacing: .01em; background: var(--accent); }
.column-header.is-sim  { background: var(--ink); }
.column-header.is-ours { background: var(--accent-dk); }

.row-container { margin: 1.5rem auto .25rem; }
.row-prompt { font-family: var(--font-prompt); font-style: italic; text-align: center;
  font-size: .97rem; line-height: 1.65; color: var(--body);
  max-width: 940px; margin: 0 auto .6rem; padding: 0 1rem; }
.row-prompt::before { content: '\201C'; margin-right: .12em; }
.row-prompt::after  { content: '\201D'; margin-left: .12em; }

.results-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .45rem; }
.grid-item { position: relative; border: 1px solid var(--border); border-radius: 7px;
  overflow: hidden; background: var(--bg-alt);
  transition: transform .22s ease, box-shadow .22s ease; }
.grid-item:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(31,45,61,.14); }
/* the clips are 1.50 to 1.79 wide; a 16:10 box with the letterbox tinted to the
   card colour keeps every tile identical without cropping any content */
.grid-item video { display: block; width: 100%; aspect-ratio: 16 / 10;
  object-fit: contain; background: var(--bg-alt); }
.grid-item.is-sim  { border-color: var(--ink); }
.grid-item.is-ours { border: 2px solid var(--accent-dk); }
.grid-item.is-na { aspect-ratio: 16 / 10; background:
  repeating-linear-gradient(45deg, #eef4fa, #eef4fa 8px, #e6eef7 8px, #e6eef7 16px); }
.grid-item.is-na::after { content: 'not run'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 600; font-size: .78rem; color: var(--muted); }

/* ---------- bibtex / footer ------------------------------------------- */
#bibtex pre { background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 10px; color: var(--ink); font-size: .86rem; }
#bibtex .title { font-family: var(--font-display); color: var(--ink); }
.footer { background: var(--bg-alt); border-top: 1px solid var(--border);
  color: var(--muted); font-size: .88rem; }
.footer a { color: var(--accent-dk); }

@media screen and (max-width: 1500px) {
  .column-header { font-size: .73rem; padding: .42rem .2rem; }
  .row-prompt { font-size: .9rem; }
}
@media screen and (max-width: 1100px) {
  .publication-title { font-size: 2rem; }
  .column-headers, .results-grid { grid-template-columns: repeat(3, 1fr); }
  .column-headers { position: static; box-shadow: none; }
  .method-strip { flex-direction: column; }
  .method-strip i { transform: rotate(90deg); }
}
@media screen and (max-width: 700px) {
  .column-headers, .results-grid { grid-template-columns: repeat(2, 1fr); }
  .teaser-copy { font-size: 1.15rem; }
}

/* ---- showcase scenes -------------------------------------------------- */
.showcase-section { background: var(--bg-alt); }
.showcase-section .container { max-width: 780px; }
.showcase-tabs { display: flex; justify-content: center; gap: .6rem; margin-bottom: 1.3rem; }
.showcase-tab { font-family: var(--font-sans); font-weight: 600; font-size: .9rem;
  padding: .5rem 1.3rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: #fff; color: var(--ink);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.showcase-tab:hover { border-color: var(--accent-dk); }
.showcase-tab.is-active { background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(58,108,152,.24); }

.showcase-scene { display: none; }
.showcase-scene.is-active { display: block; }
.showcase-stage { position: relative; max-width: 560px; margin: 0 auto;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--border);
  background: var(--bg-alt); cursor: pointer;
  box-shadow: 0 10px 26px rgba(31,45,61,.12); }
.showcase-stage video { display: block; width: 100%; aspect-ratio: 16 / 10;
  object-fit: contain; background: var(--bg-alt); }
/* one clip per force, stacked in the same box */
.showcase-stage video:not(.is-active) { display: none; }

/* the force that drives the scene, sitting where it acts */
.force-arrow { position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; font-size: .82rem; color: #fff;
  padding: .42rem .9rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.38); background: rgba(31,45,61,.74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0,0,0,.26);
  animation: force-pulse 2.4s ease-in-out infinite;
  transition: background .22s ease, transform .22s ease, opacity .3s ease; }
.force-arrow i { display: inline-block; font-size: .95rem; }
.force-arrow:hover { background: var(--accent-dk);
  transform: translate(-50%, -50%) scale(1.06); animation: none; }
.showcase-stage.is-playing .force-arrow { opacity: 0; pointer-events: none; }
@keyframes force-pulse {
  0%, 100% { box-shadow: 0 6px 16px rgba(0,0,0,.26), 0 0 0 0 rgba(90,138,184,.55); }
  50%      { box-shadow: 0 6px 16px rgba(0,0,0,.26), 0 0 0 9px rgba(90,138,184,0); }
}

/* ---- title block ------------------------------------------------------ */
/* Bulma caps is-max-desktop at 960px, which wrapped the title and split the
   author list; the header gets its own width. */
.hero#top .container { max-width: 1260px; }
.hero#top .publication-title { max-width: 1200px; font-size: 2.85rem; }
.hero#top .publication-authors { font-size: 1.06rem; line-height: 1.85; }
.hero#top .author-block { margin: 0 .18rem; white-space: nowrap; }
@media screen and (max-width: 1300px) {
  .hero#top .publication-title { font-size: 2.4rem; }
}
@media screen and (max-width: 900px) {
  .hero#top .publication-title { font-size: 1.95rem; }
  .hero#top .publication-authors { font-size: .96rem; }
}

/* ---- backbone tabs ---------------------------------------------------- */
.bb-tabs { margin-bottom: 1.6rem; }
.bb-panel { display: none; }
.bb-panel.is-active { display: block; }