/* ── Membership page (/membership) ─────────────────────────────────────────────
 * Four tier cards, each with a mascot on a starry stage (drawn and wired by
 * /public/js/membership.js), a comparison table and a short FAQ. Nav, footer,
 * buttons and glass come from hero.css.
 */

/* Each tier's colour, as "r,g,b" so it can be used at any opacity. */
.kz-tier[data-tier="explorer"]   { --tint: 255,176,84; }
.kz-tier[data-tier="collector"]  { --tint: 244,120,168; }
.kz-tier[data-tier="patron"]     { --tint: 63,200,190; }
.kz-tier[data-tier="benefactor"] { --tint: 236,196,110; }

/* ── Hero ── */
.kz-mem-hero .kz-soon { display: inline-flex; align-items: center; gap: 9px; }
.kz-soon-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--candle); box-shadow: 0 0 0 0 rgba(216, 163, 94, 0.6); animation: kz-soon-pulse 2s ease-out infinite; }
@keyframes kz-soon-pulse { 0% { box-shadow: 0 0 0 0 rgba(216, 163, 94, 0.55); } 100% { box-shadow: 0 0 0 10px rgba(216, 163, 94, 0); } }
.kz-mem-hero { padding-top: clamp(116px, 16vh, 170px); padding-bottom: clamp(40px, 6vh, 64px); }   /* clears the fixed nav */
.kz-mem-hero .kz-lead { margin-bottom: 22px; }
.kz-mem-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 640px;
  padding: 10px 18px;
  border-radius: 99px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--rose-ash);
  text-align: left;
}
.kz-mem-note svg { flex: none; color: var(--candle); }
.kz-mem-note a { color: var(--candle); text-underline-offset: 3px; }

/* ── Tier cards ── */
.kz-tiers-wrap { padding-top: 0; padding-bottom: clamp(56px, 8vh, 96px); }
.kz-tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: start;                               /* an opened card grows alone */
  text-align: left;
}
.kz-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(18, 13, 24, 0.94), rgba(11, 8, 12, 0.97));
  border: 1px solid rgba(var(--tint), 0.2);
  overflow: hidden;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.kz-tier:hover,
.kz-tier.is-active {
  transform: translateY(-6px);
  border-color: rgba(var(--tint), 0.55);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), 0 0 70px rgba(var(--tint), 0.14);
}

/* The top of the card is the stage: name, stars, floor and mascot. */
.kz-tier-top {
  position: relative;
  padding: 22px 22px 0;
  background: radial-gradient(80% 60% at 50% 62%, rgba(var(--tint), 0.16), transparent 70%);
}
.kz-tier-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.kz-tier-top > :not(canvas) { position: relative; }
.kz-tier-kicker {
  font: 600 0.66rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(var(--tint));
}
.kz-tier-name {
  margin-top: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 2.6vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--silk);
}
.kz-tier-mascot {
  width: min(210px, 100%);
  aspect-ratio: 1;
  margin: 2px auto -6px;
}
.kz-tier-mascot svg { display: block; width: 100%; height: 100%; overflow: visible; }

.kz-tier-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 22px 20px;
  border-top: 1px solid rgba(var(--tint), 0.14);
}
.kz-tier-line { min-height: 4.5em; font-size: 0.95rem; line-height: 1.5; color: var(--silk); }

.kz-tier-price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(244, 233, 228, 0.08);
}
.kz-tier-price.is-free { grid-template-columns: 1fr; }
.kz-tier-price span {
  display: block;
  font-size: 0.72rem;
  color: var(--rose-ash);
  opacity: 0.85;
}
.kz-tier-price strong {
  display: block;
  margin-top: 4px;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--silk);
}
.kz-tier-price small { font-size: 0.72rem; font-weight: 400; color: var(--rose-ash); }
.kz-tier-price em {
  display: inline-block;
  margin-top: 4px;
  font-style: normal;
  font-size: 0.68rem;
  color: rgb(var(--tint));
}

.kz-tier-perks { list-style: none; margin-bottom: 8px; }
.kz-tier-perks li {
  position: relative;
  padding: 5px 0 5px 24px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--rose-ash);
}
.kz-tier-perks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 11px;
  height: 6px;
  border-left: 1.8px solid rgb(var(--tint));
  border-bottom: 1.8px solid rgb(var(--tint));
  transform: rotate(-45deg);
}
.kz-tier-perks li.is-lead { color: var(--silk); font-weight: 600; }
.kz-tier-perks li.is-extra { display: none; }
.kz-tier.is-open .kz-tier-perks li.is-extra { display: block; animation: kz-perk-in 0.35s ease both; }
@keyframes kz-perk-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.kz-tier-more {
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  color: rgb(var(--tint));
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kz-tier-cta { margin-top: auto; width: 100%; }
/* Stands in for "Show all" on a card without more benefits, so closed cards line up. */
.kz-tier-more.is-spacer { visibility: hidden; pointer-events: none; }

.kz-tier-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  font: 600 0.62rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--tint), 0.9);
}
.kz-tier-level { display: inline-flex; gap: 4px; }
.kz-tier-level i { width: 10px; height: 2px; border-radius: 2px; background: rgba(244, 233, 228, 0.16); }
.kz-tier-level i.on { background: rgb(var(--tint)); }

/* The top tier gets a slow gold light travelling round its edge. */
@property --kz-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.kz-tier[data-tier="benefactor"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: conic-gradient(from var(--kz-spin), transparent 0 70%, rgba(255, 224, 150, 0.9) 82%, transparent 94%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: kz-spin 7s linear infinite;
  pointer-events: none;
}
@keyframes kz-spin { to { --kz-spin: 360deg; } }

/* ── Mascots: shared motion ── */
.kz-mascot .m-eyes { transform-box: fill-box; transform-origin: center; animation: m-blink 4.8s infinite; }
@keyframes m-blink { 0%, 92%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.1); } }
.kz-mascot .m-halo { transform-box: fill-box; transform-origin: center; animation: m-halo 3s ease-in-out infinite; }
@keyframes m-halo { 0%, 100% { opacity: 0.7; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.04); } }
.kz-tier:hover .m-halo, .kz-tier.is-active .m-halo { animation-duration: 1.4s; }
@keyframes m-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes m-hop { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-16px); } 55% { transform: translateY(0); } 70% { transform: translateY(-6px); } }

/* Diya: bobs, its flame flickers and throws sparks; celebrating, the flame
   flares up and the lamp hops. */
.m-diya .m-body { animation: m-bob 3s ease-in-out infinite; }
.m-diya .m-flare { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1.3); }
.m-diya .m-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: dy-flicker 1.1s ease-in-out infinite; }
@keyframes dy-flicker {
  0%, 100% { transform: scale(1, 1) skewX(0); }
  25% { transform: scale(0.95, 1.06) skewX(-3deg); }
  50% { transform: scale(1.03, 0.97) skewX(2deg); }
  75% { transform: scale(0.97, 1.04) skewX(-1deg); }
}
.m-diya .m-sparks circle { transform-box: fill-box; transform-origin: center; animation: dy-spark 2.4s ease-out infinite; opacity: 0; }
.m-diya .m-sparks circle:nth-child(2) { animation-delay: 0.6s; }
.m-diya .m-sparks circle:nth-child(3) { animation-delay: 1.2s; }
.m-diya .m-sparks circle:nth-child(4) { animation-delay: 1.8s; }
@keyframes dy-spark { 0% { transform: translateY(22px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
.kz-tier:hover .m-diya .m-flare, .kz-tier.is-active .m-diya .m-flare { transform: scale(1.28); }
.kz-tier:hover .m-diya .m-body, .kz-tier.is-active .m-diya .m-body { animation: m-hop 1.1s ease-in-out infinite; }

/* Lotus: floats and breathes open and shut; framed artworks drift down into
   it. Celebrating, it blooms wide. */
@property --open { syntax: '<number>'; inherits: true; initial-value: 1; }
.m-lotus { animation: lt-breathe 4.2s ease-in-out infinite; }
@keyframes lt-breathe { 0%, 100% { --open: 0.88; } 50% { --open: 1.02; } }
.m-lotus .m-body { animation: m-bob 3.6s ease-in-out infinite; }
.m-lotus .pt { transform-box: view-box; transform-origin: 100px 160px; transform: rotate(calc(var(--r) * var(--open))); transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1.2); }
.m-lotus .pf { transform-box: view-box; transform-origin: 100px 168px; transform: rotate(calc(var(--r) * var(--open))); transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1.2); }
.m-lotus .rp { transform-box: fill-box; transform-origin: center; animation: lt-ripple 3.4s ease-out infinite; opacity: 0; }
.m-lotus .rp2 { animation-delay: 1.7s; }
@keyframes lt-ripple { 0% { transform: scale(0.55); opacity: 0.7; } 100% { transform: scale(1.3); opacity: 0; } }
.m-lotus .fr { animation: lt-drop 4.2s ease-in infinite; opacity: 0; }
@keyframes lt-drop {
  0% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.8); opacity: 0; }
  18% { opacity: 1; }
  78% { transform: translate(0, 4px) rotate(0) scale(0.95); opacity: 1; }
  100% { transform: translate(0, 18px) rotate(0) scale(0.3); opacity: 0; }
}
.kz-tier:hover .m-lotus, .kz-tier.is-active .m-lotus { animation: none; --open: 1.2; }
.kz-tier:hover .m-lotus .fr, .kz-tier.is-active .m-lotus .fr { animation-duration: 2.6s; }

/* Peacock: sways, bobs its crest, and every few seconds fans its tail, the
   eyes of the feathers catching the light. Celebrating, the tail stays open. */
@property --k { syntax: '<number>'; inherits: true; initial-value: 0.3; }
.m-peacock { animation: pk-fan 7s ease-in-out infinite; }
@keyframes pk-fan { 0%, 16% { --k: 0.3; } 30%, 70% { --k: 1; } 86%, 100% { --k: 0.3; } }
.m-peacock .m-body { transform-box: view-box; transform-origin: 100px 178px; animation: pk-sway 3.4s ease-in-out infinite; }
@keyframes pk-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.m-peacock .fe { transform-box: view-box; transform-origin: 100px 140px; transform: rotate(calc(var(--a) * var(--k))); transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1.15); }
.m-peacock .gl { animation: pk-glint 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.22s); }
@keyframes pk-glint { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
.m-peacock .m-crest { transform-box: view-box; transform-origin: 100px 90px; animation: pk-crest 1.8s ease-in-out infinite; }
@keyframes pk-crest { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.kz-tier:hover .m-peacock, .kz-tier.is-active .m-peacock { animation: none; --k: 1.08; }
.kz-tier:hover .m-peacock .gl, .kz-tier.is-active .m-peacock .gl { animation-duration: 1s; }

/* Kalpavriksha: rays turn slowly behind it, the canopy sways, jewels swing
   and gold dust falls. Celebrating, the jewels glow. */
.m-tree .m-rays { transform-box: view-box; transform-origin: 100px 78px; animation: kt-rays 48s linear infinite; transition: opacity 0.5s; }
@keyframes kt-rays { to { transform: rotate(360deg); } }
.m-tree .m-canopy { transform-box: view-box; transform-origin: 100px 176px; animation: kt-sway 5s ease-in-out infinite; }
@keyframes kt-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.m-tree .jw { transform-box: view-box; animation: kt-swing 2.4s ease-in-out infinite alternate; }
@keyframes kt-swing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.m-tree .jw circle:first-of-type { transition: filter 0.4s; }
.m-tree .m-motes circle { transform-box: fill-box; animation: kt-mote 5s linear infinite; opacity: 0; }
.m-tree .m-motes circle:nth-child(2) { animation-delay: 1s; }
.m-tree .m-motes circle:nth-child(3) { animation-delay: 2s; }
.m-tree .m-motes circle:nth-child(4) { animation-delay: 3s; }
.m-tree .m-motes circle:nth-child(5) { animation-delay: 4s; }
@keyframes kt-mote { 0% { transform: translateY(-10px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }
.kz-tier:hover .m-tree .m-rays, .kz-tier.is-active .m-tree .m-rays { opacity: 0.7; }
.kz-tier:hover .m-tree .jw circle:first-of-type, .kz-tier.is-active .m-tree .jw circle:first-of-type { filter: drop-shadow(0 0 5px currentColor) brightness(1.25); }
.kz-tier:hover .m-tree .m-body, .kz-tier.is-active .m-tree .m-body { animation: m-hop 1.4s ease-in-out infinite; }

/* A small note for the paid buttons while memberships aren't on sale. */
.kz-tier-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 60;
  max-width: calc(100% - 32px);
  padding: 13px 22px;
  border-radius: 99px;
  background: rgba(24, 16, 22, 0.94);
  border: 1px solid rgba(216, 163, 94, 0.35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  color: var(--silk);
  font-size: 0.9rem;
  text-align: center;
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.kz-tier-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Comparison table ── */
.kz-compare-wrap { padding-top: clamp(24px, 4vh, 48px); }
.kz-compare-scroll {
  max-width: 1120px;
  margin: 0 auto;
  overflow-x: auto;
  border-radius: 20px;
  border: 1px solid rgba(216, 163, 94, 0.14);
  background: rgba(16, 11, 16, 0.7);
}
.kz-compare {
  width: 100%;
  min-width: 720px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.88rem;
  text-align: left;
}
.kz-compare th,
.kz-compare td { padding: 13px 16px; border-bottom: 1px solid rgba(244, 233, 228, 0.06); vertical-align: top; }
.kz-compare tbody tr:last-child th,
.kz-compare tbody tr:last-child td { border-bottom: 0; }
.kz-compare thead th {
  position: sticky;
  top: 0;
  background: #140d14;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--silk);
}
.kz-compare thead th span { display: block; margin-top: 3px; font-size: 0.76rem; font-weight: 400; color: var(--rose-ash); }
.kz-compare thead th[data-tier="explorer"]   { box-shadow: inset 0 2px 0 rgb(255,176,84); }
.kz-compare thead th[data-tier="collector"]  { box-shadow: inset 0 2px 0 rgb(244,120,168); }
.kz-compare thead th[data-tier="patron"]     { box-shadow: inset 0 2px 0 rgb(63,200,190); }
.kz-compare thead th[data-tier="benefactor"] { box-shadow: inset 0 2px 0 rgb(236,196,110); }
.kz-compare tbody th { font-weight: 500; color: var(--silk); white-space: nowrap; }
.kz-compare td { color: var(--rose-ash); }
.kz-compare .yes { color: var(--candle); font-weight: 600; }
.kz-compare .no { color: rgba(184, 154, 164, 0.4); }
.kz-compare th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #120c12;
}
.kz-compare thead th:first-child { z-index: 2; }
.kz-compare col.kz-col-feature { width: 24%; }

/* ── FAQ ── */
.kz-faq { max-width: 760px; margin: 0 auto; text-align: left; }
.kz-faq details {
  border-bottom: 1px solid rgba(216, 163, 94, 0.14);
}
.kz-faq summary {
  position: relative;
  padding: 20px 36px 20px 0;
  list-style: none;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--silk);
}
.kz-faq summary::-webkit-details-marker { display: none; }
.kz-faq summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 16px;
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--candle);
  transition: transform 0.3s;
}
.kz-faq details[open] summary::after { transform: rotate(45deg); }
.kz-faq details p { padding: 0 0 20px; font-size: 0.95rem; line-height: 1.7; color: var(--rose-ash); }
.kz-faq a { color: var(--candle); text-underline-offset: 3px; }

/* ── Tablets: two by two ── */
@media (max-width: 1180px) {
  .kz-tier-line { min-height: 3em; }
  .kz-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}

/* ── Phones: a swipe carousel, one card centred, neighbours peeking ── */
@media (max-width: 760px) {
  .kz-tiers {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 12px 9vw 16px;
    margin: 0 -16px 18px;
    -webkit-overflow-scrolling: touch;
  }
  .kz-tiers::-webkit-scrollbar { display: none; }
  .kz-tier { flex: 0 0 82vw; scroll-snap-align: center; }
  .kz-tier:hover { transform: none; }
  .kz-tier.is-active { transform: translateY(-4px); }
  .kz-mem-note { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .kz-mascot *, .kz-mascot, .kz-tier::after { animation: none !important; }
  .kz-tier { transition: none; }
}