/* =============================================================
   Homepage "Meet the creators" — expanding panels (creators.js)
   Closed: blurred background, a fan of art pieces, the name on its side.
   Open: the panel widens, the background sharpens, and the big name,
   tagline, short bio and art pieces rise in.
   ============================================================= */
.cx { --cx-ease: cubic-bezier(.22, 1, .36, 1); }
/* The row of panels: the whole .cx, or each page once creators.js pages it. */
.cx:not(.is-paged),
.cx-page {
  display: flex;
  gap: 10px;
  height: clamp(460px, 64vh, 600px);
}

/* ---- pages (only when there are more creators than fit) ----
   Padding with matching negative margin keeps the open panel's glow and
   focus ring inside the clipped area. */
.cx.is-paged {
  overflow: hidden;
  padding: 8px 8px 60px;
  margin: -8px -8px -60px;
  touch-action: pan-y;           /* vertical scroll stays native; sideways is a swipe */
  -webkit-tap-highlight-color: transparent;
}
.cx-track {
  display: flex;
  gap: 24px;                     /* GAP in creators.js */
  align-items: flex-start;
  transition: transform .9s var(--cx-ease), height .7s var(--cx-ease);
  will-change: transform;
}
.cx-page { flex: 0 0 100%; min-width: 0; opacity: .35; transition: opacity .9s ease; }
.cx-page.is-current { opacity: 1; }
.cx-track.is-dragging, .cx-track.is-instant { transition: none; }
.cx-track.is-dragging { cursor: grabbing; }
.cx-track.is-dragging .cx-page { opacity: 1; }
.cx img { -webkit-user-drag: none; user-select: none; }

.cx-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.cx-nav[hidden] { display: none; }
.cx-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line2); background: var(--panel); color: var(--tx);
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease, box-shadow .4s ease, transform .2s ease;
}
.cx-arrow svg { width: 18px; height: 18px; }
.cx-arrow:hover { border-color: var(--acc); color: var(--acc); box-shadow: 0 0 24px -6px rgba(255, 107, 53, .6); }
.cx-arrow:active { transform: scale(.92); }
.cx-arrow:focus-visible, .cx-dot:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.cx-dots { display: flex; align-items: center; gap: 8px; }
.cx-dot {
  position: relative; width: 26px; height: 6px; padding: 0; border: 0; border-radius: 6px;
  background: var(--line2); cursor: pointer;
  transition: width .5s var(--cx-ease), background-color .3s ease;
}
.cx-dot::before { content: ""; position: absolute; inset: -14px -3px; } /* bigger tap target */
.cx-dot i {
  position: absolute; inset: 0; border-radius: inherit; background: var(--acc);
  transform: scaleX(0); transform-origin: left center;
}
.cx-dot.is-active { width: 48px; background: rgba(255, 107, 53, .3); }
.cx-dot.is-active i { transform: scaleX(1); }
/* While the timer runs, the active dot fills up until the next slide. */
.cx-nav.is-playing .cx-dot.is-active i { animation: cx-fill var(--cx-wait, 7s) linear both; }
@keyframes cx-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cx-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cx-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--tx);
  transition: flex-grow .8s var(--cx-ease), border-color .5s ease, box-shadow .6s ease;
}
.cx-panel:hover { color: var(--tx); }
.cx-panel.is-open {
  flex-grow: 4.2;
  border-color: rgba(255, 107, 53, .5);
  box-shadow: 0 30px 70px -40px rgba(255, 107, 53, .55);
}
.cx-panel:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* Background: heavy blur while closed, near-sharp when open. */
.cx-bg { position: absolute; inset: 0; z-index: -2; }
.cx-bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(14px) saturate(1.15) brightness(.5);
  transform: scale(1.2);
  transition: filter .9s var(--cx-ease), transform 1.2s var(--cx-ease);
}
.cx-panel.is-open .cx-bg img { filter: blur(3px) saturate(1.1) brightness(.62); transform: scale(1.06); }
.cx-panel.is-open .cx-bg.is-sharp img { filter: blur(0) brightness(.7); transform: scale(1.02); }

.cx-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 70% at 0% 100%, rgba(255, 107, 53, .28), transparent 60%),
    linear-gradient(to top, rgba(10, 10, 10, .96) 0%, rgba(10, 10, 10, .6) 42%, rgba(10, 10, 10, .15) 100%);
  opacity: .75;
  transition: opacity .8s ease;
}
.cx-panel.is-open .cx-shade { opacity: 1; }

.cx-idx {
  position: absolute; top: 16px; left: 18px;
  font-family: var(--head); font-size: .95rem; letter-spacing: .08em;
  color: var(--tx2);
  transition: color .5s ease;
}
.cx-panel.is-open .cx-idx { color: var(--acc); }

/* ---- closed state ---- */
.cx-rest {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 56px 10px 22px;
  transition: opacity .35s ease, transform .5s var(--cx-ease);
}
.cx-panel.is-open .cx-rest { opacity: 0; transform: scale(.94); pointer-events: none; }

.cx-stack { position: relative; width: min(96px, 78%); aspect-ratio: 4 / 5; margin-top: 12px; }
.cx-stack img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line2);
  background: var(--panel2);
  box-shadow: 0 14px 28px -12px #000;
  transition: transform .6s var(--cx-ease);
}
.cx-stack img:nth-child(1) { transform: translate(-14%, 10%) rotate(-9deg); }
.cx-stack img:nth-child(2) { transform: translate(14%, 12%) rotate(8deg); }
.cx-stack img:nth-child(3) { transform: translateY(-4%); z-index: 1; }
.cx-panel:hover .cx-stack img:nth-child(1) { transform: translate(-22%, 8%) rotate(-14deg); }
.cx-panel:hover .cx-stack img:nth-child(2) { transform: translate(22%, 10%) rotate(13deg); }

/* Anton capitals are about .5em wide; the side label gets ~320px of height,
   so long names shrink rather than clip. Line-height leaves room for the
   glyphs, which a tight box used to shave. */
.cx-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--head); letter-spacing: .04em;
  font-size: min(clamp(1.4rem, 2vw, 1.9rem), calc(320px / (var(--len) * .56)));
  text-transform: uppercase; line-height: 1.25; white-space: nowrap;
  padding: 0 2px;
}

/* ---- open state ---- */
.cx-open {
  position: absolute; left: 0; bottom: 0;
  width: 470px; max-width: 100%;
  padding: 0 34px 32px;
  display: flex; flex-direction: column; align-items: flex-start;
  opacity: 0; transform: translateY(18px);
  transition: opacity .3s ease, transform .5s var(--cx-ease);
  pointer-events: none;
}
.cx-panel.is-open .cx-open {
  opacity: 1; transform: none;
  transition: opacity .5s ease .28s, transform .8s var(--cx-ease) .22s;
}
.cx-tag { font-family: var(--mark); color: var(--acc); font-size: 1.35rem; line-height: 1.1; }
.cx-name {
  font-family: var(--head); text-transform: uppercase;
  /* Sized by the longest word so it fits the ~400px text column on one
     line; names of several words wrap between words, never inside one. */
  font-size: min(clamp(2.8rem, 4.6vw, 4.6rem), calc(400px / (var(--word) * .56)));
  line-height: .95; letter-spacing: .01em;
  margin-top: 6px; max-width: 100%;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .6);
}
.cx-bio {
  margin-top: 12px; font-size: 1rem; line-height: 1.55; color: var(--tx2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cx-pieces { display: flex; gap: 10px; margin-top: 18px; }
.cx-pieces img {
  width: 76px; aspect-ratio: 4 / 5; height: auto; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line2); background: var(--panel2);
  box-shadow: 0 12px 24px -12px #000;
  opacity: 0; transform: translateY(14px) scale(.92);
  transition: opacity .3s ease, transform .4s var(--cx-ease), border-color .3s ease;
}
.cx-panel.is-open .cx-pieces img {
  opacity: 1; transform: none;
  transition: opacity .5s ease calc(.38s + var(--n) * .07s), transform .7s var(--cx-ease) calc(.38s + var(--n) * .07s), border-color .3s ease;
}
.cx-panel.is-open .cx-pieces img:hover { border-color: var(--acc); transform: translateY(-4px); }
.cx-go {
  margin-top: 18px;
  font-family: var(--body); font-weight: 800; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx2); transition: color .3s ease;
}
.cx-go i { font-style: normal; color: var(--tx3); margin: 0 4px; }
.cx-panel.is-open:hover .cx-go { color: var(--acc); }

/* ---- phones and narrow screens: stacked, tap to open ---- */
@media (max-width: 899px) {
  .cx:not(.is-paged), .cx-page { flex-direction: column; height: auto; gap: 8px; }
  .cx-arrow { width: 42px; height: 42px; }
  .cx-nav { margin-top: 20px; }
  .cx-panel { flex: none; height: 104px; transition: height .7s var(--cx-ease), border-color .5s ease, box-shadow .6s ease; }
  .cx-panel.is-open { height: 480px; }
  .cx-idx { top: 50%; transform: translateY(-50%); left: 18px; }
  .cx-panel.is-open .cx-idx { top: 16px; transform: none; }
  .cx-rest { flex-direction: row-reverse; justify-content: space-between; padding: 0 22px 0 58px; }
  .cx-label { writing-mode: horizontal-tb; transform: none; font-size: min(1.6rem, calc((100vw - 220px) / (var(--len) * .56))); }
  .cx-stack { width: 58px; margin: 0 14px 0 0; }
  .cx-open { width: 100%; padding: 0 22px 24px; }
  .cx-name { font-size: min(clamp(2.4rem, 11vw, 3.4rem), calc((100vw - 90px) / (var(--word) * .56))); }
  .cx-pieces img { width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-panel, .cx-panel *, .cx-panel.is-open * { transition-duration: .01s !important; transition-delay: 0s !important; }
}
.perf-lite .cx-bg img { filter: brightness(.5) !important; transition: none; }

/* Phones and tablets: the partner rows without the blur. Every row's art was
   blurred 14px, and opening one animated that blur down to 3px on a full-width
   image — the slowest kind of frame a phone can draw, and Safari's slowest of
   all, which is the lag on tap. Rows now just dim and brighten, and open in
   about half the time. */
@media (hover: none) and (pointer: coarse) {
  .cx-bg img, .cx-panel.is-open .cx-bg img, .cx-panel.is-open .cx-bg.is-sharp img { filter: brightness(.45); transform: none; transition: filter .3s ease; }
  .cx-panel.is-open .cx-bg img, .cx-panel.is-open .cx-bg.is-sharp img { filter: brightness(.66); }
  .cx-panel { transition: height .4s var(--cx-ease), flex-grow .5s var(--cx-ease), border-color .3s ease, box-shadow .3s ease; }
  .cx-track { transition: transform .6s var(--cx-ease), height .4s var(--cx-ease); }
}