/* Reset-ish */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f9f9f9;
  color: #000000;
  overflow: hidden; /* no scrollbars – navigation is via drag */
}

/* Small header with concept */
.site-header {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  background: rgba(255, 255, 255, 0.7);
  padding: 0.75rem 1rem;
  border-radius: 9px;
  font-size: 0.8rem;
  backdrop-filter: blur(12px);
  opacity:.75;
  justify-content: center;
}

/* Viewport: fills the screen and centers its contents */
#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Canvas: no vw/vh, just shrink-wraps its content (the grid) */
#canvas {
  position: relative;
  padding: 2000px;   
    position: relative;
  /* your existing width/height/transform from drag */

  background-color: #fdfdfd;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.25) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 1px, transparent 1px);
  background-size: 60px 60px;
      /* 200px extra all around */
    position: relative;
  display: inline-block;
  transform-origin: center center; /* zoom around the center */

}

/* Triangular grid layout */
.tri-grid {
  --tri-size: 900px;
  --tri-height: var(--tri-size); /* make blobs live in square cells */

  display: grid;
  grid-template-columns: repeat(8, var(--tri-size));
  grid-auto-rows: var(--tri-height);
      align-items: center;
  justify-content: center;
}


.tri {
  position: relative;
  width: var(--tri-size);
  height: var(--tri-height);
  overflow: hidden;
  transition: opacity 0.5s ease;
}

/* Hover: gently bring forward */
.tri:hover img {
  opacity: 1;
  transform: scale(1.03);
  
  z-index: 5;           
  
}
.tri:hover {
  outline: 20px solid #000;
  
  transition: outline 0.5s ease;
}

/* Up blob shape */
/*.tri-up {
        
  clip-path: path("M56.398113,652.571744 C106.883272,779.120557 201.940638,797.782139 273.087872,804.780253 C344.235146,811.778326 391.472232,807.112931 393.420247,790.014261 C395.368263,772.915552 352.027208,743.383609 316.724769,713.251028 C281.422330,683.118448 254.158509,652.385109 271.915937,621.036623 C289.673365,589.688096 352.452023,557.724342 398.834781,583.483132 C445.217560,609.241961 475.204358,692.723296 547.348804,744.377943 C619.493290,796.032591 733.795384,815.860553 800.568827,799.531608 C867.342230,783.202783 886.587022,730.717132 893.293491,614.665489 C900.000000,498.613847 894.168265,318.996234 858.303044,201.195063 C822.437902,83.393897 756.539233,27.409177 607.497564,13.704594 C458.456054,0.000000 226.271544,28.575527 113.135765,160.081292 C0.000000,291.587009 5.912951,526.022972 56.398113,652.571744 z");

}


/* Down blob shape */
/*.tri-down {
  clip-path: path("M259.516,95.822 C156.744,131.558 94.638,170.991 55.452,300.379 C16.266,429.767 0.000,649.110 137.521,766.669 C275.042,884.227 566.350,900.000 714.715,890.388 C863.080,880.777 868.502,845.780 866.777,696.183 C865.052,546.586 856.179,282.388 818.718,146.592 C781.258,10.796 715.208,3.402 610.465,15.725 C505.723,28.048 362.287,60.087 259.516,95.822 z");
}




/* Soft overlay film for both shapes */
.tri-up::after,
.tri-down::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  clip-path: inherit;              /* follow blob shape */
  mix-blend-mode: normal;          /* or multiply/overlay for blending */
}

.tri img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  scale: 2.0; /* make images larger than their containers */
  filter: grayscale(0.3);
  opacity: 0.6; /* slightly see-through */
  transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;

  

}


/* container already has position: relative; so labels can sit on top */
.tri {
  position: relative;
  width: var(--tri-size);
  height: var(--tri-height);
  overflow: hidden;
    position: relative;
  width: var(--tri-size);
  height: var(--tri-height);
  overflow: hidden;
  scale:1.1;

  /* rotation for this tile (will be set via JS) */
  --blob-rot: 0deg;

  transform-origin: center;
  transform: rotate(var(--blob-rot));

}



/* appear on hover */
.tri:hover::before {
  opacity: 1;
  transform: translate(-50%, -4px); /* tiny lift when it appears */

}

#hover-label {
  position: fixed;         /* always relative to the viewport */
  left: 16px;
  bottom: 16px;

  padding: 6px 12px;
  font-size: 23px;
  letter-spacing: 0.03em;
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  border-radius: 0px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;              /* hidden by default */
  transition: opacity 0.2s ease;
  z-index: 1000;
}


/* --- DETAIL OVERLAY --- */

#detail-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;        /* final position: center of screen */
  justify-content: center;
  background: rgba(255, 230, 0, 0.25); /* dim backdrop */
  pointer-events: none;       /* disabled until open */
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 1000;
}

/* "open" state toggled via JS */
#detail-overlay.open {
  pointer-events: auto;
  opacity: .92;
}

.detail-panel {
  width: 80vw;
  max-width: 2100px;
  height: 70vh;
  background: #ffffff;
  color: #000000;
  border-radius: 1px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);

  display: flex;
  overflow: hidden;

  /* start off-screen at bottom, then slide to center */
  transform: translateY(100vh);
  transition: transform 0.35s ease-out;
}

/* when overlay is open, slide panel up into center */
#detail-overlay.open .detail-panel {
  transform: translateY(0);
}

/* close button */
.detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* left: big image */
.detail-image {
  flex: 2;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* right: text blurb */
.detail-text {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.9rem;
}

.detail-text h2 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.detail-text p {
  margin: 0;
  line-height: 1.5;
}
/* --- FILTER BAR --- */

.filter-bar {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
    justify-content: center;  /* center buttons horizontally */
}

.filter-btn {
  border: none;
  padding: 4px 10px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: pointer;
   justify-content: center;  /* center buttons horizontally */
}

.filter-btn.is-active {
  background: #ffffff;
  color: #000000;
}

/* --- TILE HIGHLIGHT / DIM --- */

.tri {
  /* keep what you already had + add smooth transitions */
  transition:
    opacity 0.2s ease,
    filter 0.2s ease,
    transform 0.2s ease;
}

/* when filtered, non-matching tiles get this */
.tri.is-dim {
  opacity: 0.18;
  filter: grayscale(1);
  transform: rotate(var(--blob-rot)) scale(0.96);
  /* when a tile is dimmed by the filter */
}


/* matching tiles can get a little emphasis if you like */
.tri.is-highlight {
  opacity: 1;
  filter: none;
  transform: rotate(var(--blob-rot)) scale(1.02);
}




.site-header {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  background: rgba(208, 208, 208, 0.7);
  padding: 0.75rem 1rem;
  border-radius: 9px;
  font-size: 0.8rem;
  backdrop-filter: blur(12px);
}

/* filter bar now independent */
.filter-bar {
  position: fixed;
  top: 1rem;            /* vertical position */
  left: 50%;
  transform: translateX(-50%);

  z-index: 10;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);

  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}