/* Hex image cluster — varied sizes, connected, interactive */

.hex-cluster-section {
  width: 100%;
}

.hex-cluster {
  --hex-height: 440px;
  --hex-fade: 900ms;
  position: relative;
  width: 100%;
  height: var(--hex-height);
  overflow: hidden;
  border-radius: 0.35rem;
}

.hex-cluster.hex-bg-dark {
  background: #1c1d22;
}

.hex-cluster.hex-bg-light {
  background: #f4f2ed;
}

.hex-cluster.hex-bg-transparent {
  background: transparent;
}

.hex-cluster-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

/* --- Hex cell --- */

.hex-cluster-cell {
  position: absolute;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  opacity: 0;
  transition:
    opacity 0.5s ease,
    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: scale(1);
  /* Do NOT set will-change or filter on clipped cells — iOS Safari can GPU-crash. */
  cursor: pointer;
}

.hex-cluster.is-ready .hex-cluster-cell {
  opacity: 1;
}

.hex-cluster.is-ready .hex-cluster-cell:nth-child(1)  { transition-delay: 0ms, 0ms; }
.hex-cluster.is-ready .hex-cluster-cell:nth-child(2)  { transition-delay: 60ms, 0ms; }
.hex-cluster.is-ready .hex-cluster-cell:nth-child(3)  { transition-delay: 120ms, 0ms; }
.hex-cluster.is-ready .hex-cluster-cell:nth-child(4)  { transition-delay: 180ms, 0ms; }
.hex-cluster.is-ready .hex-cluster-cell:nth-child(5)  { transition-delay: 240ms, 0ms; }
.hex-cluster.is-ready .hex-cluster-cell:nth-child(6)  { transition-delay: 300ms, 0ms; }
.hex-cluster.is-ready .hex-cluster-cell:nth-child(7)  { transition-delay: 360ms, 0ms; }
.hex-cluster.is-ready .hex-cluster-cell:nth-child(8)  { transition-delay: 420ms, 0ms; }
.hex-cluster.is-ready .hex-cluster-cell:nth-child(9)  { transition-delay: 480ms, 0ms; }
.hex-cluster.is-ready .hex-cluster-cell:nth-child(10) { transition-delay: 540ms, 0ms; }
.hex-cluster.is-ready .hex-cluster-cell:nth-child(11) { transition-delay: 600ms, 0ms; }
.hex-cluster.is-ready .hex-cluster-cell:nth-child(12) { transition-delay: 660ms, 0ms; }

/* Hover: lift only (no filter on clipped cells). */
@media (hover: hover) and (pointer: fine) {
  .hex-cluster-cell:hover {
    transform: scale(1.05);
    z-index: 10 !important;
  }
}

/* Shadows intentionally omitted on the clipped cell.
   filter:drop-shadow + clip-path crashes iOS Safari; box-shadow is clipped away. */

/* --- Image layers --- */

.hex-cluster-layer {
  position: absolute;
  inset: 0;
  background-color: #2a2c33;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--hex-fade) ease;
}

.hex-cluster-layer.is-active {
  opacity: 1;
}

.hex-cluster.is-mono .hex-cluster-layer {
  filter: grayscale(1) contrast(1.05);
}

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  .hex-cluster-cell,
  .hex-cluster-layer {
    transition: none !important;
  }

  .hex-cluster.is-ready .hex-cluster-cell {
    transition-delay: 0ms !important;
  }

  .hex-cluster-cell:hover {
    transform: none;
  }
}

/* --- Touch / narrow: lighter compositing --- */

@media (max-width: 720px), (pointer: coarse) {
  .hex-cluster {
    height: min(var(--hex-height), 360px);
  }

  .hex-cluster.is-mono .hex-cluster-layer {
    filter: none;
  }
}

/* iPhone/iPad: avoid clip-path compositing (known Safari GPU crash with image layers). */
.hex-cluster.is-ios-lite .hex-cluster-cell {
  -webkit-clip-path: none;
  clip-path: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115'%3E%3Cpolygon points='50,0 100,28.75 100,86.25 50,115 0,86.25 0,28.75' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115'%3E%3Cpolygon points='50,0 100,28.75 100,86.25 50,115 0,86.25 0,28.75' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.hex-cluster.is-ios-lite .hex-cluster-layer {
  filter: none !important;
  transition: none;
}

.hex-cluster.is-ios-lite.is-ready .hex-cluster-cell {
  transition: opacity 0.35s ease;
  transition-delay: 0ms !important;
}

@media (max-width: 480px) {
  .hex-cluster {
    height: min(var(--hex-height), 280px);
  }
}