/* Collection — sub-page. Builds on styles.css (tokens, nav) and our-story.css (type scale, labels, button, footer). */

/* ---------- head: label, title, category filters ---------- */
.cx-hero { overflow: hidden; }
.cx-head { display: flex; flex-direction: column; align-items: center; padding-top: 56px; text-align: center; }
.cx-title {
  margin-top: 18px;
  font: 500 var(--t-h2)/1.06 var(--serif);
  font-variation-settings: 'opsz' 24;
  letter-spacing: -.02em;
  color: var(--ink);
}
/* Head and caption wait for the window to open, then rise in one after another. */
.cx-head > *, .cx-caption { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1); }
.cx-ready .cx-head > *, .cx-ready .cx-caption { opacity: 1; transform: none; }
.cx-ready .cx-head > :nth-child(2) { transition-delay: .08s; }
.cx-ready .cx-head > :nth-child(3) { transition-delay: .16s; }
.cx-ready .cx-caption { transition-delay: .24s; }
.cx-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.cx-filters button {
  height: 40px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  background: #FFFFFF;
  font: 700 var(--t-label)/1 var(--sans);
  letter-spacing: .18em;
  color: var(--ink);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.cx-filters button:hover { border-color: var(--ink); }
.cx-filters button.is-active { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
/* A button swallows or releases the cards: it gives a small elastic pulse. */
.cx-filters button.is-gulp { animation: cxGulp .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cxGulp { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* ---------- the ring ----------
   A cylinder seen from the outside: the front card is nearest and largest, the sides turn away and recede
   (the reverse of a gallery seen from inside). collection.js positions every card each frame. */
.cx-stage {
  position: relative;
  height: 480px;
  margin-top: 0;
  perspective: 1600px;
  perspective-origin: 50% 42%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.cx-stage.is-dragging { cursor: grabbing; }
.cx-ring { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.cx-ring .cx-card { pointer-events: auto; }

/* Arrival: the stage starts as a small black block with the wordmark; collection.js opens it to full size. */
/* Drawn at the size of the pop's first frame (three quarters of 330 × 96), so nothing jumps when it starts. */
.cx-stage { clip-path: inset(calc(50% - 36px) calc(50% - 123.75px) round 18px); background: #1A1917; }
.cx-mark {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font: 400 20px/1 var(--serif);
  letter-spacing: .32em;
  color: #FFFFFF;
  opacity: 0;
  pointer-events: none;
}


.cx-card {
  --w: 250px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  aspect-ratio: 3 / 4;
  margin: calc(var(--w) * -2 / 3) 0 0 calc(var(--w) / -2);
  overflow: hidden;
  background: var(--img-bg);
  box-shadow: 0 18px 40px rgba(26, 25, 23, .14);
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.cx-card img { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-user-drag: none; pointer-events: none; }
.cx-card__model { object-fit: cover; transition: transform .8s cubic-bezier(.16, 1, .3, 1), filter .6s ease; }
/* Real sample: fades up from behind the model shot and settles into focus. */
.cx-card__real {
  object-fit: contain;
  background: #EDECE8;
  opacity: 0;
  transform: scale(1.08);
  filter: blur(6px);
  transition: opacity .5s ease, transform .9s cubic-bezier(.16, 1, .3, 1), filter .6s ease;
}
.cx-card__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 7px;
  background: rgba(255, 255, 255, .92);
  font: 700 10px/1 var(--sans);
  letter-spacing: .16em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease .15s, transform .4s ease .15s;
}
.cx-card.is-hover .cx-card__model { transform: scale(1.06); filter: blur(4px); }
.cx-card.is-hover .cx-card__real { opacity: 1; transform: none; filter: none; }
.cx-card.is-hover .cx-card__tag { opacity: 1; transform: none; }

/* ---------- caption under the ring ---------- */
.cx-caption { display: flex; justify-content: center; align-items: baseline; gap: 16px; min-height: 40px; padding-top: 4px; text-align: center; }
.cx-caption__cat { font: 700 var(--t-label)/1 var(--sans); letter-spacing: .2em; color: var(--clay); }
.cx-caption__name { font: 600 22px/1.2 var(--serif); font-variation-settings: 'opsz' 11; color: var(--ink); }

/* ---------- category note ---------- */
.cx-info { padding: 96px 0 120px; }
.cx-info__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 72px; align-items: end; padding-top: 48px; border-top: 1px solid var(--line); }
.cx-info .os-h2 { margin-top: 0; white-space: nowrap; }
.cx-info__line { margin-top: 18px; max-width: 560px; font-size: var(--t-body); line-height: 1.6; color: var(--body); text-wrap: pretty; }
.cx-info__facts { display: flex; gap: 48px; margin: 0; }
.cx-info__facts dt { font: 700 var(--t-label)/1 var(--sans); letter-spacing: .18em; color: var(--faint); }
.cx-info__facts dd { margin-top: 12px; font: 500 var(--t-num)/1 var(--serif); font-variation-settings: 'opsz' 24; color: var(--ink); white-space: nowrap; }
.cx-info__facts dd small { margin-left: 4px; font: 500 14px/1 var(--sans); color: var(--muted); }
.cx-info .os-btn { margin-top: 0; }

@media (max-width: 1080px) {
  .cx-info__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
}
@media (max-width: 720px) {
  .cx-stage { height: 440px; }
  .cx-card { --w: 170px; }
  .cx-info__facts { flex-direction: column; gap: 24px; }   /* side by side they are wider than a phone */
}
@media (prefers-reduced-motion: reduce) {
  .cx-stage { clip-path: none; background: none; }
  .cx-head > *, .cx-caption { transition: none; }
  .cx-card__model, .cx-card__real, .cx-card__tag { transition: opacity .2s ease; }
}