/* Capacity meter section */

@keyframes hexFloatA {
  0%   { transform: translate(0, 0) rotate(-8deg); }
  50%  { transform: translate(14px, -12px) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(-8deg); }
}
@keyframes hexFloatB {
  0%   { transform: translate(0, 0) rotate(20deg); }
  50%  { transform: translate(-10px, 14px) rotate(26deg); }
  100% { transform: translate(0, 0) rotate(20deg); }
}
@keyframes hexSpinSlow    { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes hexSpinReverse { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }

/* Page-wide hex decorations */
.page-hex {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.page-hex.h-capacity       { left: -90px; top: 900px;  width: 260px; opacity: 0.08; animation: hexFloatA 26s ease-in-out infinite; }
.page-hex.h-capacity-small { right: 34px; top: 1120px; width: 58px;  opacity: 0.45; animation: hexSpinSlow 40s linear infinite; }
.page-hex.h-work           { right: -80px; top: 1380px; width: 220px; opacity: 0.07; animation: hexFloatB 30s ease-in-out infinite; }
.page-hex.h-how            { left: 4%;   top: 1680px; width: 44px;  opacity: 0.55; animation: hexSpinReverse 32s linear infinite; }
.page-hex.h-faq            { left: -70px; top: 1940px; width: 200px; opacity: 0.10; animation: hexFloatA 34s ease-in-out infinite; }
.page-hex.h-final          { right: 36px; top: 2140px; width: 70px;  opacity: 0.40; animation: hexSpinSlow 28s linear infinite; }

/* Capacity section wrapper */
.capacity-section {
  padding: 0;
  position: relative;
  z-index: 1;
}

.block-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 16px;
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: var(--section-pt);
}

.block-head h2,
.block-head h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-top: 6px;
}

.block-head .hint {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.block-head .hint b {
  color: var(--fg);
  font-family: var(--font-head);
  font-weight: 700;
}

/* Eyebrow label */
.eyebrow {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--aqua);
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Capacity grid */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.cap-cell {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  transition: border-color 0.3s;
}

.cap-cell h4 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
  color: var(--fg);
}

.cap-cell .cap-pct {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 12px;
}

.cap-cell .bar {
  height: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}

.cap-cell .bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  width: 0;
  transition: width 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* State colours */
.cap-cell[data-state="full"]  .bar span { background: var(--bittersweet); }
.cap-cell[data-state="tight"] .bar span { background: var(--jasmine); }
.cap-cell[data-state="open"]  .bar span { background: var(--aqua); opacity: 0.5; }

.cap-cell .cap-slots {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  color: var(--fg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cap-cell .cap-chip {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cap-cell[data-state="full"]  .cap-chip { background: rgba(254, 95, 85, 0.16);  color: var(--bittersweet); }
.cap-cell[data-state="tight"] .cap-chip { background: rgba(244, 208, 111, 0.16); color: var(--jasmine); }
.cap-cell[data-state="open"]  .cap-chip { background: rgba(255, 255, 255, 0.05); color: var(--muted); }

.cap-note {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  margin-bottom: 40px;
}

/* Animate bars when in view */
.cap-cell.in .bar span {
  width: var(--fill, 0%) !important;
}

/* Skeleton loading */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.skel {
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}

.skel-h4    { height: 18px; width: 55%; margin-bottom: 4px; }
.skel-pct   { height: 10px; width: 30%; margin-bottom: 14px; }
.skel-bar   { height: 5px;  width: 100%; border-radius: 3px; margin-bottom: 10px; }
.skel-label { height: 10px; width: 55%; }
.skel-chip  { height: 16px; width: 28%; border-radius: 999px; }

@media (max-width: 900px) {
  .cap-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .capacity-section {
    padding: 0;
  }
  .cap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .block-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 64px;
    margin-top: 32px; /* space above border so it doesn't sit flush against previous section */
  }
  /* Page-hex positions are desktop-only pixel offsets — hide on mobile */
  .page-hex { display: none; }
}