/* ============================================================
   app.css  —  Tex-Shadow project page styles
   ============================================================ */

/* --- Side nav (barcode) ------------------------------------ */
#side-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  width: 232px;
  padding: 20px 18px;
  background: rgba(26, 44, 50, 0.78);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  border: 1px solid rgba(150, 170, 166, 0.18);
  border-radius: 14px;
  box-shadow: var(--shadow-float);
}

.side-nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 26px;            /* click-area height */
  width: 58px;             /* click-area width (easy to click even for short bars) */
  position: relative;
  cursor: pointer;
  text-decoration: none;
}

/* visible bar — pseudo-element */
.side-nav-item::before {
  content: '';
  display: block;
  height: 8px;
  border-radius: 2px;
  background: #aeb9b5;
  transition: background 0.2s ease, height 0.2s ease, width 0.2s ease;
}

/* barcode pattern — vary only ::before width */
.side-nav-item:nth-child(1)::before { width: 26px; }
.side-nav-item:nth-child(2)::before { width: 46px; }
.side-nav-item:nth-child(3)::before { width: 29px; }
.side-nav-item:nth-child(4)::before { width: 53px; }
.side-nav-item:nth-child(5)::before { width: 34px; }
.side-nav-item:nth-child(6)::before { width: 41px; }
.side-nav-item:nth-child(7)::before { width: 29px; }
.side-nav-item:nth-child(8)::before { width: 24px; }
.side-nav-item:nth-child(9)::before { width: 43px; }

.side-nav-item:hover::before,
.side-nav-item.is-active::before {
  background: #5bc4d6;
  height: 11px;
  width: 58px;
}

/* always-visible label (clickable) */
.side-nav-item::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  color: #b8c4c0;
  font-size: 0.86rem;
  font-weight: 600;
  font-family: 'Ubuntu', sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-align: right;
  transition: color 0.2s ease;
}

.side-nav-item:hover::after,
.side-nav-item.is-active::after {
  color: #5bc4d6;
}

@media (max-width: 1100px) { #side-nav { display: none; } }

/* --- Base -------------------------------------------------- */
body {
  background-color: #fafaf8;
  font-family: "Noto Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* form elements don't inherit font-family by default → make them follow body */
button, input, select, textarea, .button {
  font-family: inherit;
}

/* --- Scroll reveal (gated on .js so content shows without JS) --- */
.js .ts-section .has-text-centered {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .ts-section .has-text-centered.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .ts-section .has-text-centered {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

a             { color: #1D90A3; text-decoration: none; }
a:focus,
a:hover       { color: #5bc4d6; text-decoration: none; }

/* --- Structural helpers ------------------------------------ */
.image-container {
  position: relative;
  width: 100%;
  display: inline-block;
}
.image-container img {
  display: block;   /* remove inline baseline gap (the stray rectangle under images) */
  width: 100%;
}

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

.spacer {
  height: 0;
  margin: 1rem auto;
}

/* --- Navbar dropdown --------------------------------------- */
.navbar-dropdown {
  background-color: #252525;
}

.navbar-item {
  color: #ffffff;
}

/* --- Mega dropdown (floating card, 70vw) ------------------- */
.mega-dropdown {
  position: fixed !important;
  top: 3.25rem !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 0 0 !important;
  transform: none !important;
  z-index: 9999;
  pointer-events: none;  /* transparent wrapper ignores events */
}

.mega-inner {
  width: 56vw;
  margin: 0 auto;
  border-radius: var(--radius);
  border: 1px solid #c8c0b0;
  box-shadow: var(--shadow-float);
  background: #EDE8DF;
  overflow: hidden;
  pointer-events: auto;
}

.mega-grid {
  display: flex;
  width: 100%;
}

.mega-col {
  flex: 1;
  min-width: 0;
  border-right: 1px solid #c8c0b0;
}
.mega-col:last-child { border-right: none; }

/* --- Mega dropdown open/close via JS class ----------------- */
@keyframes mega-row-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mega-container-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}

/* disable Bulma hover — control via JS class only */
.navbar-item.has-dropdown:hover .mega-dropdown { display: none; }
.navbar-item.has-dropdown.is-open  .mega-dropdown,
.navbar-item.has-dropdown.is-closing .mega-dropdown { display: block !important; }

/* fade in container too — prevent beige flash */
.navbar-item.has-dropdown.is-open .mega-inner {
  animation: mega-row-in 0.18s ease both;
}

/* open: per-row stagger */
.navbar-item.has-dropdown.is-open .mega-topic,
.navbar-item.has-dropdown.is-open .mega-paper {
  animation: mega-row-in 0.32s ease both;
}
.navbar-item.has-dropdown.is-open .mega-topic               { animation-delay: 0s; }
.navbar-item.has-dropdown.is-open .mega-col .mega-paper:nth-child(2) { animation-delay: 0.07s; }
.navbar-item.has-dropdown.is-open .mega-col .mega-paper:nth-child(3) { animation-delay: 0.14s; }
.navbar-item.has-dropdown.is-open .mega-col .mega-paper:nth-child(4) { animation-delay: 0.21s; }

/* close: whole container slides up */
.navbar-item.has-dropdown.is-closing .mega-inner {
  animation: mega-container-out 0.26s ease forwards;
}

.mega-topic {
  background: #2A4249;
  color: #E6E2D5;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  padding: 10px 4px;
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.mega-paper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 54px;
  padding: 0 14px;
  background: #EDE8DF;
  border-bottom: 1px solid #d8d2c8;
  text-decoration: none;
  cursor: default;
  overflow: hidden;
}
a.mega-paper { cursor: pointer; position: relative; }
a.mega-paper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #2A4249;
  transition: width var(--ease);
}
a.mega-paper:hover::after { width: 100%; }
a.mega-paper:hover { background: var(--ts-sand) !important; }

.mega-current { background: #d8d0c4 !important; }

.mega-venue {
  display: block;
  font-size: 0.74rem;
  color: #55686e;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 3px;
}

.mega-author {
  font-weight: 400;
  color: #7a9898;
  font-style: italic;
}

.mega-author-first {
  color: #1D90A3;
  font-weight: 600;
  font-style: normal;
}

.mega-venue-top {
  color: #c47a19;
  font-weight: 700;
}

.mega-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: #2A4249;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   Tex-Shadow Gallery Theme
   ============================================================ */
:root {
  --ts-ink:      #2A4249;   /* --brand-color */
  --ts-ink2:     #1a2c32;   /* deeper — bibtex, model-viewer bg */
  --ts-amber:    #E6E2D5;   /* --primary-color light */
  --ts-amber2:   #978d7f;   /* darker — hover */
  --ts-cream:    #F1EFE3;   /* --secondary-color */
  --ts-paper:    #E6E2D5;   /* between secondary & primary */
  --ts-charcoal: #2A4249;   /* --fc */
  --ts-muted:    #96aaa6;   /* muted teal-grey */
  --ts-sand:     #D2C5B2;   /* SIGGRAPH primary — warm beige text on dark */

  /* consistency tokens */
  --radius:        8px;
  --shadow-card:   0 2px 12px rgba(0, 0, 0, 0.10);
  --shadow-hover:  0 10px 28px rgba(0, 0, 0, 0.16);
  --shadow-float:  0 12px 40px rgba(0, 0, 0, 0.24), 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-img:    0 8px 28px rgba(0, 0, 0, 0.14);
  --ease:          0.2s ease;
}

/* --- Section backgrounds ------------------------------------ */
.theme-ink   {
  background-color: var(--ts-ink) !important;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -8%, rgba(91, 196, 214, 0.35), transparent 72%),
    radial-gradient(ellipse 62% 50% at 50% 108%, rgba(29, 144, 163, 0.23), transparent 72%);
}
.theme-cream { background-color: var(--ts-cream) !important; }
.theme-paper { background-color: var(--ts-paper) !important; }

/* --- Neon flicker (T, e, x) -------------------------------- */
@keyframes neon-T {
  /* off: before pulse + the gap inside the "ta-dak" + end of pulse */
  0%,17.9%,20.1%,21.9%,100% { color: inherit; text-shadow: none; }
  18%,20%,22%{ color: #ff2d78;
    text-shadow: 0 0 10px #ff2d78, 0 0 22px #ff2d78, 0 0 42px #ff2d7888; }
}
@keyframes neon-e {
  0%,
  12.9%,14.1%,15.9%,17.1%,
  31.9%,33.1%,
  58.9%,60.1%,61.9%,63.1%,64.9%,
  100% { color: inherit; text-shadow: none; }
  13%,14%,16%,17%,
  32%,33%,
  59%,60%,62%,63%,65% { color: #1D90A3;
    text-shadow: 0 0 10px #1D90A3, 0 0 22px #1D90A3, 0 0 42px #1D90A388; }
}
@keyframes neon-x {
  /* more flickery — three short blinks */
  0%,54.9%,56.1%,57.9%,59.1%,61.9%,100% { color: inherit; text-shadow: none; }
  55%,56%,58%,59%,62%                    { color: #ffd700;
    text-shadow: 0 0 10px #ffd700, 0 0 22px #ffd700, 0 0 42px #ffd70088; }
}

/* prime-ish durations → never sync → feels random */
.neon-T { display: inline-block; animation: neon-T 4.7s steps(1, end) infinite; }
.neon-e { display: inline-block; animation: neon-e 7.3s steps(1, end) infinite 1.1s; }
.neon-x { display: inline-block; animation: neon-x 6.1s steps(1, end) infinite 2.8s; }

/* --- Shadow title animation -------------------------------- */
@keyframes shadow-cast {
  0% {
    text-shadow: none;
    animation-timing-function: cubic-bezier(0.0, 0.0, 0.05, 1); /* ~0.1s snap */
  }
  4% {
    text-shadow:
      2px  -18px  4px  rgba(210, 197, 178, 0.52),
      4px  -32px  12px rgba(210, 197, 178, 0.33),
      7px  -52px  26px rgba(210, 197, 178, 0.18),
      12px -76px  46px rgba(210, 197, 178, 0.09),
      19px -106px 72px rgba(210, 197, 178, 0.04);
    animation-timing-function: linear; /* hold */
  }
  93% {
    text-shadow:
      2px  -18px  4px  rgba(210, 197, 178, 0.52),
      4px  -32px  12px rgba(210, 197, 178, 0.33),
      7px  -52px  26px rgba(210, 197, 178, 0.18),
      12px -76px  46px rgba(210, 197, 178, 0.09),
      19px -106px 72px rgba(210, 197, 178, 0.04);
    animation-timing-function: cubic-bezier(0.95, 0.0, 1.0, 1.0); /* ~0.1s snap */
  }
  100% {
    text-shadow: none;
  }
}

.shadow-animate {
  display: inline-block;
  animation: shadow-cast 2.2s linear infinite;
  position: relative;
  z-index: 0;            /* establish stacking context so the glow sits behind the text, not behind the section bg */
}

/* flashlight cone below "Shadow" — turns on in sync with the cast shadow */
.shadow-animate::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.55em;
  transform: translateX(-50%);
  width: 175%;
  height: 1.6em;
  background: linear-gradient(to top,
              rgba(255, 236, 195, 0.6),
              rgba(255, 236, 195, 0.14) 48%,
              transparent 82%);
  /* triangular beam: narrow point at the bottom (light source), widening upward */
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  animation: flashlight 2.2s linear infinite;
}

@keyframes flashlight {
  0%   { opacity: 0; animation-timing-function: cubic-bezier(0.0, 0.0, 0.05, 1); }
  4%   { opacity: 1; animation-timing-function: linear; }
  93%  { opacity: 1; animation-timing-function: cubic-bezier(0.95, 0.0, 1.0, 1.0); }
  100% { opacity: 0; }
}

/* --- Title font & colors ----------------------------------- */
.title, .publication-title {
  font-family: 'Ubuntu', sans-serif !important;
}

.publication-title {
  font-size: 3.4em !important;
  line-height: 1.18;
}

/* authors/affiliation used the unavailable 'Google Sans' (index.css) → follow body */
.publication-authors {
  font-family: inherit !important;
}

/* widen hero container so the long title fits on two lines */
.hero-body .container {
  max-width: 1340px !important;
}

.theme-ink .title {
  color: #ffffff !important;
}

.theme-cream .title,
.theme-paper .title {
  color: var(--ts-charcoal) !important;
}

/* --- Light-section typography ------------------------------- */
.theme-cream .subtitle,
.theme-cream p,
.theme-cream li,
.theme-cream ol,
.theme-paper .subtitle,
.theme-paper p,
.theme-paper li,
.theme-paper ol {
  color: var(--ts-charcoal) !important;
}

/* --- Hero action buttons ----------------------------------- */
.ts-btn {
  background-color: transparent !important;
  border-color: var(--ts-amber) !important;
  color: var(--ts-amber) !important;
  font-family: 'Ubuntu', 'Noto Sans', sans-serif !important;
  font-weight: 700 !important;
  min-height: 2.7rem;
  padding-left: 1.35rem !important;
  padding-right: 1.35rem !important;
  border-width: 1.5px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: background-color var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease) !important;
}
.ts-btn:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

/* hero button row — even spacing like MeshFlow */
.publication-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.publication-links .link-block { margin: 0; }
.publication-links .link-block a { margin: 0; }
.ts-btn:hover,
.ts-btn:focus {
  background-color: var(--ts-amber) !important;
  color: var(--ts-ink) !important;
}
.ts-btn .icon { color: inherit !important; }

/* "Soon" buttons — visible but not clickable */
.ts-btn.is-soon {
  pointer-events: none;
  opacity: 0.5;
}

/* --- Hero news (add <li> items on top of .news-list) ------- */
.hero-news {
  margin-top: 1.4rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.news-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 0.7rem;
  background: #1D90A3;
  color: #ffffff;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  padding: 2px 10px;
  border-radius: 999px;
}
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-list li {
  display: flex;
  gap: 0.75rem;
  padding: 6px 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ts-sand);
}
.news-list li + li {
  border-top: 1px solid rgba(150, 170, 166, 0.15);
}
.news-date {
  flex-shrink: 0;
  min-width: 6.5rem;
  color: #5bc4d6;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
}
.news-text a {
  color: #5bc4d6;
  text-decoration: underline;
}

/* --- Hero metric badges ------------------------------------ */
.hero-metrics {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.6rem;
  margin-top: 1.6rem;
}
.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.metric:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1.3rem;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(150, 170, 166, 0.35);
}
.metric-val {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
}
.metric-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #96aaa6;
  margin-top: 4px;
}

/* --- Abstract feature cards -------------------------------- */
.feature-cards {
  margin-top: 2rem !important;
}
.feature-card {
  height: 100%;
  background: #faf8f3;
  border: 1px solid #e0d9cb;
  border-radius: var(--radius);
  padding: 1.6rem 1.3rem;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform var(--ease), box-shadow var(--ease);
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.feature-icon {
  font-size: 1.7rem;
  color: #1D90A3;
  margin-bottom: 0.7rem;
}
.feature-card h3 {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #2A4249;
  margin-bottom: 0.5rem;
}
.feature-card p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: #55686e !important;
}

/* --- Section heading accent underline ----------------------- */
.accent-line {
  position: relative;
  display: inline-block;
}
.accent-line::after {
  content: '';
  display: block;
  height: 3px;
  background: var(--ts-amber);
  margin: 8px auto 0;
  border-radius: 2px;
}
.theme-cream .accent-line::after,
.theme-paper .accent-line::after {
  background: #1D90A3;
}

/* --- model-viewer ------------------------------------------ */
model-viewer {
  width: 100%;
  height: 340px;
  background-color: var(--ts-ink2);
  border-radius: var(--radius);
  border: 1px solid #2a4a52;
}

.viewer-card {
  padding: 0 8px;
}

.viewer-placeholder {
  width: 100%;
  height: 340px;
  background-color: var(--ts-ink2);
  border-radius: var(--radius);
  border: 1px dashed #55686e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #55686e;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.viewer-placeholder::after {
  content: 'Coming Soon';
}

.viewer-subheading {
  color: var(--ts-amber) !important;
  margin-bottom: 1rem;
  text-align: center;
}

.viewer-label {
  font-size: 1rem;
  color: var(--ts-amber);
  font-weight: bold;
  margin-top: 0.6rem;
  letter-spacing: 0.02em;
}

.viewer-sublabel {
  font-size: 0.9rem;
  color: var(--ts-muted);
  margin-top: 0.2rem;
}

/* --- BibTeX block ------------------------------------------ */
.bibtex-block {
  position: relative;
}
.bibtex-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-left: 0.6rem;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid #1D90A3;
  background: transparent;
  color: #1D90A3;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease);
}
.bibtex-copy:hover {
  background: #1D90A3;
  color: #ffffff;
}
.bibtex-block pre {
  background-color: var(--ts-ink2) !important;
  color: #e0e0f0 !important;
  border-left: 4px solid var(--ts-amber) !important;
  border-radius: var(--radius);
  padding: 1.2em !important;
}

/* --- Links on light sections ------------------------------- */
.theme-cream a,
.theme-paper a {
  color: #1D90A3;
}
.theme-cream a:hover,
.theme-paper a:hover {
  color: #146f7e;
  text-decoration: underline;
}

/* --- Author links on dark hero ----------------------------- */
.theme-ink .publication-authors {
  color: var(--ts-sand);
}
.theme-ink .publication-authors a {
  color: var(--ts-sand);
}
.theme-ink .publication-authors a:hover {
  color: var(--ts-amber);
  text-decoration: underline;
}

/* ============================================================
   TS Layout Utilities
   ============================================================ */

/* 1. Uniform section padding */
.ts-section {
  padding: 5rem 1.5rem;
}

/* 2. Title block */
.ts-title-block {
  margin-bottom: 2.2rem;
  text-align: center;
}
.ts-title-block .title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* 3. Body text — captions, prose, lists: one unified style */
.ts-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ts-charcoal);
  max-width: 860px;
  margin: 1rem auto;
  text-align: left !important;
}
.theme-ink .ts-body {
  color: var(--ts-sand);
}
.ts-body p,
.ts-body li {
  color: inherit !important;
}

/* 4. Image width classes */
.ts-img-wide   { width: 90%; }
.ts-img-medium { width: 65%; }
.ts-img-narrow { width: 55%; }
.ts-img-wide,
.ts-img-medium,
.ts-img-narrow {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-img);
}