/* Visual polish for Semantic Motion Anchors project page (refinement pass). */
:root {
  --btn-fg: #14181f;
  --btn-bg: #ffffff;
  --btn-line: #d8e1ea;
  --btn-primary: #14181f;
  --btn-primary-fg: #ffffff;
  --shadow-soft: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
}

html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }

body, .teaser, .publication-title, .authors, .btn-row {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Venue chip */
.venue-pill {
  display: inline-block;
  margin: .35rem 0 1.1rem;
  padding: .28rem .9rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent);
  background: color-mix(in srgb, var(--primary-color) 8%, white);
}

/* Icon resource buttons (SteeringGeometry-inspired) */
.publication-links.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  margin: 1.35rem auto .25rem;
  max-width: 46rem;
}

a.btn.publication-link,
.publication-links a.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--btn-line);
  background: var(--btn-bg);
  color: #14181f !important;
  font: 600 .9rem/1.2 Inter, system-ui, sans-serif;
  text-decoration: none !important;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.publication-links a.btn:hover,
.publication-links a.btn:focus-visible {
  transform: translateY(-1px);
  border-color: #9eb6d3;
  background: #f5f8fc;
  color: #14181f !important;
}

.publication-links a.btn.primary {
  background: var(--btn-primary);
  border-color: var(--btn-primary);
  color: var(--btn-primary-fg) !important;
}

.publication-links a.btn.primary:hover,
.publication-links a.btn.primary:focus-visible {
  background: #243041;
  border-color: #243041;
  color: #fff !important;
}

.publication-links a.btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex: 0 0 auto;
}

/* Soft hero wash */
section.hero:first-of-type {
  background:
    radial-gradient(900px 280px at 50% -60px, color-mix(in srgb, var(--primary-color) 14%, transparent), transparent);
}

.publication-title {
  letter-spacing: -.02em;
}

.authors .author-block a {
  font-weight: 550;
}

/* Qualitative carousel: less cramped cards + polished pending slot */
#examples-paper {
  max-width: 52rem;
}

.method-track .method-card {
  grid-template-columns: minmax(10rem, .72fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 2.6vw, 1.7rem);
  padding: clamp(1rem, 2.4vw, 1.35rem) clamp(1.1rem, 2.8vw, 1.7rem);
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
}

.method-album.is-ready .method-card {
  padding-inline: clamp(1.5rem, 3.2vw, 2.2rem);
}

.method-caption h4 {
  font-size: 1.02rem;
  margin-bottom: .4rem;
}

.method-caption p {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--soft);
}

.method-track .method-card:last-child {
  background: linear-gradient(180deg, #f5f9ff 0%, #eef5ff 100%);
  border-color: #c2d6f5;
}

.clip-slot {
  display: grid;
  place-items: center;
  gap: .35rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: .85rem;
  border: 1px dashed #a9bdd4;
  border-radius: .85rem;
  color: #5b6f86;
  background:
    linear-gradient(180deg, #f7fafc 0%, #eef3f8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  text-align: center;
}

.clip-slot-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: #ffffffcc;
  border: 1px solid #c7d5e5;
  color: #3d5f86;
}

.clip-slot-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

.clip-slot-label {
  font-size: .86rem;
  font-weight: 650;
  color: #334960;
  letter-spacing: .01em;
}


.method-album [data-position="front"] {
  box-shadow: 0 10px 28px rgba(35, 53, 80, .16);
}

.method-album [data-step] span {
  width: 46px;
  height: 46px;
  border-color: #c5d3e2;
  box-shadow: 0 4px 14px rgba(33, 50, 72, .14);
}

.method-album [data-step]:is(:hover, :focus-visible) span {
  background: #eff5ff;
  border-color: #8cb2e0;
}

.paper-case + .paper-case {
  margin-top: 2rem;
  padding-top: 1.7rem;
}

/* BibTeX polish */
#citation .bibtex-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

#bibtex-code {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f6f8fb;
  box-shadow: var(--shadow-soft);
}

#bibtex-code > code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: .88rem !important;
  line-height: 1.55 !important;
}

.copy-bibtex-btn {
  border-radius: 999px;
}

/* Institution logos */
.institution-logos {
  gap: 2.5rem;
  margin-top: 1.6rem;
}

.institution-logos img {
  height: 36px;
  opacity: .92;
  filter: grayscale(.15);
}

@media (max-width: 580px) {
  .publication-links.btn-row { gap: .5rem; }
  .publication-links a.btn { padding: .5rem .85rem; font-size: .84rem; }
  .method-track .method-card {
    grid-template-columns: 1fr;
    gap: .8rem;
    padding: 1rem 1.1rem;
  }
  .clip-slot { max-height: none; min-height: 8.5rem; }
}


/* Qualitative carousels: side peeks are shape-only (no clipped text under arrows). */
#examples-paper .method-album.is-ready {
  --edge: 18%;
  --neighbor-shift: 20%;
}
#examples-paper .method-album .example-slide:is([data-position="left"], [data-position="right"]) {
  opacity: .38 !important;
  filter: none !important;
  pointer-events: none !important;
  box-shadow: none !important;
  background: #d5dde6 !important;
  border: 1px solid #c2ccd6 !important;
  color: transparent !important;
}
#examples-paper .method-album .example-slide:is([data-position="left"], [data-position="right"]) > * {
  visibility: hidden !important;
  opacity: 0 !important;
}
#examples-paper .method-album .example-slide:is([data-position="left"], [data-position="right"]).method-card,
#examples-paper .method-album .example-slide:is([data-position="left"], [data-position="right"]) .method-card {
  background: #d5dde6 !important;
  border-color: #c2ccd6 !important;
  box-shadow: none !important;
}
#examples-paper .method-album [data-step] {
  width: calc(var(--edge) + 4px);
}
@media (max-width: 580px) {
  #examples-paper .method-album.is-ready {
    --edge: 14%;
    --neighbor-shift: 16%;
  }
}