@font-face {
  font-family: "system-serif";
  src: local("Georgia");
}

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

html, body {
  height: 100%;
  background: #000;
  color: #f4f4f2;
  font-family: -apple-system, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  overflow: hidden;
}

#splat-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #0a0a0a;
}

.splat-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Saturation-reduction layer: each splat layer's native colors are
     dialed down to 10% saturation independently, keeping it as an
     atmospheric backdrop rather than a competing full-color visual.
     Adjust the 0.10 value here if the desired intensity changes later. */
  filter: saturate(0.10);
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none; /* only the active layer re-enables pointer events */
}

.splat-layer.active {
  opacity: 1;
  pointer-events: auto;
}

.splat-layer canvas {
  display: block;
}

.bg-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.15) 30%,
    rgba(0,0,0,0.1) 60%,
    rgba(0,0,0,0.65) 100%
  );
  pointer-events: none;
}

#splat-loading {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.7s ease;
}

#splat-loading.done {
  opacity: 0;
}

.splat-loading-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(244,244,242,0.15);
  border-top-color: rgba(244,244,242,0.65);
  animation: splat-spin 1s linear infinite;
}

@keyframes splat-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .splat-loading-spinner { animation: none; opacity: 0.5; }
}

/* ---- 3D menu markers ------------------------------------------------
   Labels are now real 3D camera-facing sprites (see makeTextSprite() in
   splat-bg.js), not HTML overlays — no CSS needed for them here.
   Hover-brighten color swap is handled in JS on the marker's own
   material (updateHover() in splat-bg.js), not via CSS. */

/* ---- Hamburger "show all menu items" button -------------------------- */

#menu-overview-btn {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 4;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(244, 244, 242, 0.18);
  border-radius: 8px;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#menu-overview-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: #ffffff;
  border-radius: 1px;
}

#menu-overview-btn:hover {
  background: rgba(0, 0, 0, 0.45);
}

#menu-overview-btn:active {
  transform: scale(0.94);
}

#menu-overview-btn:focus-visible {
  outline: 2px solid rgba(244, 244, 242, 0.6);
  outline-offset: 2px;
}

/* ---- Toggleable text-link menu list -----------------------------------
   Plain HTML links (built dynamically per current page — see
   buildHtmlMenuList() in splat-bg.js), toggled open/closed by the
   hamburger button. Positioned just below the hamburger, fades in/out
   rather than a hard show/hide (opacity+translateY transition), and
   ignores pointer events while closed so it never blocks clicks on the
   3D scene underneath. */
#menu-list {
  position: absolute;
  top: 78px;
  left: 24px;
  z-index: 4;
  min-width: 160px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(244, 244, 242, 0.14);
  border-radius: 10px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

#menu-list.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#menu-list ul {
  list-style: none;
}

#menu-list li + li {
  margin-top: 10px;
}

#menu-list a {
  display: inline-block;
  color: #f4f4f2;
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  opacity: 0.85;
  transition: color 0.2s ease, opacity 0.2s ease;
}

#menu-list a:hover,
#menu-list a:focus-visible {
  color: #ff2a2a;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #menu-list { transition: opacity 0.35s ease; transform: none; }
}

.hero {
  position: relative;
  z-index: 2;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5vh 6vw;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.hero.hidden {
  opacity: 0;
}

.hero-inner {
  animation: fadeIn 1.6s ease both;
}

h1 {
  font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}

.tagline {
  margin-top: 0.9rem;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  letter-spacing: 0.03em;
  color: #d9d6cf;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-inner { animation: none; }
}

/* ---- Floating "about" panel -------------------------------------------
   Glass-card panel that floats over the 3D splat view, shown only while
   the about page is active (JS toggles the .open class). Positioned on
   the right so it doesn't collide with the hamburger/menu list on the
   left, and doesn't block orbit-drag over most of the canvas. */
#about-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: min(900px, 90vw);
  max-height: 86vh;
  overflow-y: auto;
  padding: 44px 56px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(244, 244, 242, 0.14);
  border-radius: 14px;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(14px);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease, filter 0.4s ease;
}

#about-panel.open {
  opacity: 0.8;
  transform: translate(-50%, -50%) translateY(0);
  pointer-events: auto;
}

#about-panel h2 {
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  margin-bottom: 1.3rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}

#about-panel p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #d9d6cf;
}

#about-panel p.about-statement {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: #f4f4f2;
  font-size: 1.15rem;
  line-height: 1.6;
}

#about-panel p + p {
  margin-top: 1.2rem;
}

#about-panel::-webkit-scrollbar {
  width: 6px;
}
#about-panel::-webkit-scrollbar-thumb {
  background: rgba(244, 244, 242, 0.25);
  border-radius: 3px;
}

@media (max-width: 640px) {
  #about-panel {
    top: 50%;
    left: 50%;
    width: 90vw;
    max-height: 80vh;
    padding: 28px 24px;
    transform: translate(-50%, -50%) translateY(14px);
  }
  #about-panel.open {
    transform: translate(-50%, -50%) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #about-panel { transition: opacity 0.4s ease; transform: translate(-50%, -50%) !important; }
}

/* Dimmed state: clicking outside the panel (see setupPanelDimming() in
   splat-bg.js) fades it into the background and disables its pointer
   events, so orbit-drag/scroll over the panel's screen area reaches the
   3D scene underneath instead of being captured by the panel. Clicking
   back inside the panel's visible area (tracked by screen coordinates,
   not DOM hit-testing, so this works even while pointer-events is off)
   restores it to full focus. */
#about-panel.open.dimmed {
  opacity: 0.16;
  pointer-events: none;
  filter: blur(0.5px) saturate(0.7);
}

/* ---- Works / Exhibitions list panels -----------------------------------
   Same floating glass-card shell as #about-panel (shared position/size/
   fade rules below via .list-panel), but with a scrollable list of
   entries instead of prose paragraphs. */
.list-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: min(900px, 90vw);
  max-height: 86vh;
  overflow-y: auto;
  padding: 44px 56px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(244, 244, 242, 0.14);
  border-radius: 14px;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(14px);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease, filter 0.4s ease;
}

.list-panel.open {
  opacity: 0.8;
  transform: translate(-50%, -50%) translateY(0);
  pointer-events: auto;
}

.list-panel h2 {
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  margin-bottom: 1.3rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}

.list-panel::-webkit-scrollbar {
  width: 6px;
}
.list-panel::-webkit-scrollbar-thumb {
  background: rgba(244, 244, 242, 0.25);
  border-radius: 3px;
}

.work-list {
  list-style: none;
}

.work-list li + li {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(244, 244, 242, 0.12);
}

.work-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.work-list-head h3 {
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  color: #f4f4f2;
}

.work-list-head h3 a.work-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.work-list-head h3 a.work-link:hover,
.work-list-head h3 a.work-link:focus-visible {
  color: #ff2a2a;
}

.work-tag {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ff2a2a;
  opacity: 0.9;
}

.work-list p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #d9d6cf;
}

.work-credit {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: rgba(244, 244, 242, 0.55);
}

@media (max-width: 640px) {
  .list-panel {
    width: 90vw;
    max-height: 80vh;
    padding: 28px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .list-panel { transition: opacity 0.4s ease; transform: translate(-50%, -50%) !important; }
}

.list-panel.open.dimmed {
  opacity: 0.16;
  pointer-events: none;
  filter: blur(0.5px) saturate(0.7);
}