/* Cabal Zypher character coverflow. Scoped to keep the existing site intact. */
.zc-section {
  --zc-accent: #6de4eb;
  --zc-border: #78bedc36;
  position: relative;
  isolation: isolate;
  max-width: 1440px;
  margin: auto;
  padding: 88px 0 68px;
  overflow: hidden;
  color: #eef6ff;
  background: linear-gradient(180deg, #07111bed, #080e18e8 60%, #080a0cee);
  border-bottom: 1px solid #91c5df17;
}
.zc-section::before {
  content: '';
  position: absolute;
  inset: 12% 0 5%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, #166da330, transparent 60%);
}
.zc-heading { text-align: center; padding: 0 6%; }
.zc-heading .section-label { font-size: 12px; margin: 0 0 18px; color: #a6b7c6; }
.zc-heading h2 {
  font-family: 'Space Grotesk', Manrope, Arial, sans-serif;
  font-size: clamp(36px, 4.2vw, 62px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.12;
  margin: 0;
}
.zc-intro { margin: 17px 0 0; color: #acbecf; font-size: 16px; line-height: 1.6; }
.zc-shell { position: relative; margin: 24px auto 0; }
.zc-stage {
  --zc-card-width: min(330px, 64vw);
  --zc-step: 255px;
  position: relative;
  height: 555px;
  width: 100%;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
  outline: none;
}
.zc-stage:active, .zc-stage.zc-dragging { cursor: grabbing; }
.zc-stage:focus-visible { outline: 2px solid var(--zc-accent); outline-offset: -8px; }
.zc-stage::after {
  content: '';
  position: absolute;
  width: 70%;
  height: 80px;
  left: 15%;
  bottom: 4px;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse, #168fc83b, transparent 67%);
  transform: scaleY(.38);
}
.zc-card {
  position: absolute;
  top: 24px;
  left: 50%;
  width: var(--zc-card-width);
  height: calc(var(--zc-card-width) * 1.46);
  padding: 0;
  margin: 0;
  border: 1px solid var(--zc-border);
  border-radius: 18px;
  overflow: hidden;
  color: #eef6ff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  background: radial-gradient(ellipse at 50% 54%, #184b743d, transparent 72%),
    linear-gradient(155deg, #192a3df5, #07131f 56%, #0b1929);
  box-shadow: 0 20px 35px #0006, inset 0 1px #d7f2ff0a;
  backface-visibility: hidden;
  transform-origin: center center;
  transform: translateX(-50%) translateX(var(--zc-x, 0px)) translateY(var(--zc-y, 0px))
    translateZ(var(--zc-z, 0px)) rotateY(var(--zc-angle, 0deg)) scale(var(--zc-scale, 1));
  opacity: var(--zc-opacity, 1);
  transition: transform 600ms cubic-bezier(.22,.78,.22,1), opacity 450ms ease,
    border-color 400ms, box-shadow 400ms;
  -webkit-tap-highlight-color: transparent;
}
.zc-card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid #bfe8ff0c;
  border-radius: 12px;
  pointer-events: none;
  z-index: 3;
}
.zc-card[aria-pressed=true] {
  border-color: #74d7f38a;
  box-shadow: 0 26px 64px #0008, 0 0 38px #298cc526, inset 0 1px #ccedff25;
}
.zc-card:focus-visible { outline: 2px solid #a6f4ed; outline-offset: 5px; }
.zc-card-top {
  position: absolute;
  z-index: 4;
  top: 22px;
  left: 23px;
  right: 23px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  letter-spacing: .14em;
  color: #9ab9d0;
}
.zc-card-number { color: #8edce7; font-size: 12px; letter-spacing: .08em; }
.zc-art {
  position: absolute;
  inset: 21px -9px 51px;
  display: block;
  pointer-events: none;
}
.zc-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  -webkit-user-drag: none;
  filter: drop-shadow(0 12px 15px #0008);
}
.zc-card-foot {
  position: absolute;
  inset: auto 0 0;
  padding: 40px 24px 24px;
  z-index: 3;
  background: linear-gradient(transparent, #07121eec 55%, #091724);
}
.zc-card-name {
  display: block;
  font-family: 'Space Grotesk', Manrope, Arial, sans-serif;
  font-size: clamp(23px, 2.2vw, 29px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.2;
}
.zc-card-line { display: block; width: 26px; height: 2px; margin-top: 13px; background: #72dbe480; }
.zc-card[aria-pressed=true] .zc-card-line { width: 60px; background: #82eee6; }
.zc-arrow {
  position: absolute;
  top: 42%;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #8ac8e860;
  border-radius: 50%;
  color: #def6ff;
  background: #0c1c2eef;
  box-shadow: 0 6px 26px #0008;
  cursor: pointer;
  transition: border-color 180ms, background 180ms;
}
.zc-arrow:hover { background: #183d54; border-color: #8ce5ee; }
.zc-arrow:focus-visible { outline: 2px solid #8ce5ee; outline-offset: 5px; }
.zc-arrow svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.zc-prev { left: 4%; }
.zc-next { right: 4%; }
.zc-bottom { position: relative; z-index: 2; padding: 0 6%; }
.zc-status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 24px;
  font-size: 12px;
  color: #9cacbe;
}
.zc-count { color: #c9e6f8; font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.zc-divider { height: 14px; width: 1px; background: #779bb544; }
.zc-selectors { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 1130px; margin: auto; }
.zc-selector {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.3;
  padding: 11px 14px;
  border-radius: 6px;
  border: 1px solid #8dacca26;
  background: #101c2a9c;
  color: #a9becf;
  cursor: pointer;
  transition: color 180ms, border-color 180ms, background 180ms;
}
.zc-selector:hover { background: #172d40; color: #e2f4ff; border-color: #73bcd965; }
.zc-selector[aria-pressed=true] { background: #193c50; color: #b0fff2; border-color: #65dbc390; }
.zc-selector:focus-visible { outline: 2px solid var(--zc-accent); outline-offset: 3px; }
.zc-noscript { text-align: center; padding: 20px; font-size: 16px; color: #aec5d6; }
/* Without scripting the supplied classes still form an ordinary scrollable gallery. */
.zc-section:not(.zc-ready) .zc-stage { display: flex; gap: 18px; padding: 24px; height: auto; overflow-x: auto; perspective: none; }
.zc-section:not(.zc-ready) .zc-card { position: relative; top: 0; left: 0; min-width: 260px; height: 390px; transform: none; }
.zc-section:not(.zc-ready) .zc-arrow,
.zc-section:not(.zc-ready) .zc-bottom { display: none; }
.motion-off .zc-card, .motion-off .zc-selector, .motion-off .zc-arrow { transition: none; }
@media (max-width: 760px) {
  .zc-section { padding: 65px 0 50px; }
  .zc-heading h2 { font-size: clamp(34px, 7vw, 48px); }
  .zc-heading .section-label { font-size: 11px; }
  .zc-intro { font-size: 15px; max-width: 290px; margin-inline: auto; }
  .zc-stage { height: calc(min(330px, 64vw) * 1.46 + 73px); }
  .zc-card { border-radius: 13px; }
  .zc-card-top { top: 17px; left: 17px; right: 17px; font-size: 9px; letter-spacing: .1em; }
  .zc-card-number { font-size: 10px; }
  .zc-art { inset: 15px -7px 43px; }
  .zc-card-foot { padding: 32px 18px 20px; }
  .zc-card-name { font-size: 24px; }
  .zc-card-line { margin-top: 10px; }
  .zc-arrow { top: 44%; width: 42px; height: 42px; }
  .zc-prev { left: 3%; }
  .zc-next { right: 3%; }
  .zc-bottom { padding: 0 5%; }
  .zc-selectors { gap: 7px; }
  .zc-selector { padding: 10px 12px; }
  .zc-status-row { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .zc-card, .zc-selector, .zc-arrow { transition: none; }
}