/* ── Altruism Relic – scoped under #page-altruism ── */

#page-altruism {
  background: #000 url('../img/altruism_background_2.jpg') center / cover no-repeat;
  gap: 32px;
}

/* ── Layout ─────────────────────────────────────────── */

#page-altruism .c-canvas-half {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

#page-altruism .c-canvas-half .relic {
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 786 / 960;
  height: calc(100vh - 64px);
  max-width: 100%;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

/* ── Canvas ─────────────────────────────────────────── */

#page-altruism .c-canvas-half .canvas {
  position: relative;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 1 / 1;
  flex: 1 1 0;
  min-height: 0;
  max-width: 100%;
}

#page-altruism .c-canvas-half .canvas__image {
  position: absolute;
  opacity: 0;
  height: auto;
  pointer-events: none;
}

#page-altruism .c-canvas-half .canvas__image.is-active {
  /* opacity driven by JS visualizer */
}

/* Canvas image positions */
#page-altruism .c-canvas-half #canvas-img-1  { top: 35.1%; left: 38.2%; width: 16.5%; }
#page-altruism .c-canvas-half #canvas-img-2  { top: 11.1%; left: 35.4%; width: 24.9%; }
#page-altruism .c-canvas-half #canvas-img-3  { top: 70.3%; left: 38.9%; width: 17.4%; }
#page-altruism .c-canvas-half #canvas-img-4  { top: 11.5%; left: 79.6%; width: 16.6%; }
#page-altruism .c-canvas-half #canvas-img-5  { top: 74.0%; left: 75.5%; width: 24.8%; }
#page-altruism .c-canvas-half #canvas-img-6  { top: 35.1%; left: 69.2%; width: 18.1%; }
#page-altruism .c-canvas-half #canvas-img-7  { top: 53.3%; left: 15.7%; width: 15.0%; }
#page-altruism .c-canvas-half #canvas-img-8  { top: 23.7%; left: 14.4%; width: 17.6%; }
#page-altruism .c-canvas-half #canvas-img-9  { top: 61.4%; left: 62.2%; width: 17.6%; }
#page-altruism .c-canvas-half #canvas-img-10 { top: 15.2%; left: 6.7%; width: 16.9%; }
#page-altruism .c-canvas-half #canvas-img-11 { top: 40.4%; left: 52.8%; width: 17.6%; }
#page-altruism .c-canvas-half #canvas-img-12 { top: 62.5%; left: 2.7%; width: 18.1%; }
#page-altruism .c-canvas-half #canvas-img-13 { top: 15.8%; left: 67.2%; width: 17.5%; }
#page-altruism .c-canvas-half #canvas-img-14 { top: 56.0%; left: 84.2%; width: 10.6%; }
#page-altruism .c-canvas-half #canvas-img-15 { top: 38.1%; left: 4.4%; width: 24.7%; }
#page-altruism .c-canvas-half #canvas-img-16 { top: 72.6%; left: 24.0%; width: 16.9%; }

/* ── Controls ───────────────────────────────────────── */

#page-altruism .c-canvas-half .controls-divider {
  width: calc(100% - 32px);
  height: 1px;
  background: #000;
  flex-shrink: 0;
  align-self: center;
}

#page-altruism .c-canvas-half .controls {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px;
  padding: 24px;
  background: #fff;
  width: 100%;
}

#page-altruism .c-canvas-half .controls__btn {
  min-width: 0;
  aspect-ratio: 73.94 / 60.79;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0.2;
  transition: opacity 0.3s ease;
  overflow: hidden;
  border-radius: 2px;
}

#page-altruism .c-canvas-half .controls__btn:hover {
  opacity: 0.5;
}

#page-altruism .c-canvas-half .controls__btn.is-active {
  opacity: 1;
}

#page-altruism .c-canvas-half .controls__btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Mobile: 4×4 grid ───────────────────────────────── */

@media (max-width: 600px) {
  #page-altruism .c-canvas-half .relic {
    margin-top: 40px;
  }

  #page-altruism .c-canvas-half .canvas {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-height: auto;
  }

  #page-altruism .c-canvas-half .controls {
    grid-template-columns: repeat(4, 1fr);
  }
}