/**
 * CARDS page — the card binder, split out of the homepage into its own
 * page (previously an anchored section under the hero). Reuses
 * styles.css tokens/components (.hero-header, .nav, .wishlist-btn,
 * .watch-trailer-btn, .section-eyebrow/.section-heading/.section-body,
 * .cards-cta-btn) the same way shop.html/game.html do.
 */

html, body.cards-body {
  margin: 0;
  min-height: 100%;
  background: var(--night);
}

/* `background-attachment: fixed` forces a main-thread repaint of the
   backdrop on every scroll frame, which was visibly janky on this page's
   already-heavy binder layout. A fixed-position layer is compositor-only
   (no repaint), so it's used here instead — same technique as game.css. */
body.cards-body {
  background: transparent;
}

body.cards-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--ink);
  background-image:
    linear-gradient(180deg, rgba(10, 18, 48, .6) 0%, rgba(10, 18, 48, .78) 50%, rgba(10, 18, 48, .9) 100%),
    url('assets/backgrounds/sky-islands-bg.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

.cards-page {
  max-width: 1600px;
  margin: 0 auto;
  padding: 18px 20px 0;
}


/* ---------- cards section ---------- */

.cards-section {
  padding: 40px 0 90px;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(91, 54, 176, .22), transparent 65%);
}

.cards-intro { max-width: 640px; margin: 0 auto; text-align: center; }
.cards-intro .section-body { margin-left: auto; margin-right: auto; }

/* ============================================================
 * CARD BINDER - a Pokemon-style closed binder that opens with a
 * page-turn, then shows a two-page 3x3-per-side spread per faction
 * (Adventure / Gadgets / World), tabbed on the right edge. Built to
 * the "design_handoff_card_binder" spec (see that folder's README) -
 * colors/sizes/timings below are pixel-close to that reference.
 *
 * The internal layout uses the reference's exact fixed px sizes
 * (520px pages, 40px spine) so proportions stay true to spec; the
 * whole stage is scaled down as one unit (.binder-stage, via a JS-set
 * --binder-scale) to fit narrower viewports, down to a minimum scale
 * below which .binder-scale-wrap scrolls horizontally instead of
 * shrinking controls past a usable/tappable size.
 * ============================================================ */

.binder-scale-wrap {
  max-width: 1200px;
  margin: 50px auto 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.binder-stage-outer {
  margin: 0 auto;
}

.binder-stage {
  position: relative;
  width: 1136px;
  transform: scale(var(--binder-scale, 1));
  transform-origin: top left;
}

.binder-shell {
  position: relative;
  background: #1c1712;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 255, 255, .05);
  perspective: 1800px;
}

.binder-spread {
  display: flex;
  gap: 0;
  transition: transform .8s cubic-bezier(.65, 0, .35, 1), opacity .8s cubic-bezier(.65, 0, .35, 1);
}
.binder-spread.is-turning {
  transform: rotateY(calc(var(--turn-dir, 1) * 18deg)) scale(.96);
  opacity: .4;
}

.binder-page {
  width: 520px;
  background: #242019;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.binder-page--left { border-radius: 10px 3px 3px 10px; box-shadow: inset 4px 0 12px rgba(0, 0, 0, .35); }
.binder-page--right { border-radius: 3px 10px 10px 3px; box-shadow: inset -4px 0 12px rgba(0, 0, 0, .35); }

.binder-spine {
  width: 40px;
  flex: none;
  background: linear-gradient(to right, #221e18, #1a1610);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 20px 0;
}
.binder-spine-ring {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7a7468, #2a2620 70%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
}

.binder-slot {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, .3);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  transition: transform .15s;
  appearance: none;
  padding: 0;
}
.binder-slot--filled { cursor: zoom-in; }
.binder-slot--filled:hover { transform: translateY(-3px); }
.binder-slot--filled:focus-visible { outline: 3px solid var(--purple-light); outline-offset: 2px; }
.binder-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.binder-slot-empty {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01));
}
.binder-slot-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) 46%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, .1) 54%, transparent 66%);
}
.binder-slot-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 3px rgba(255, 255, 255, .3), inset 0 -6px 10px rgba(0, 0, 0, .18);
}

.binder-cover {
  position: absolute;
  inset: 0;
  cursor: pointer;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(122, 85, 214, .35), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, #1b2452, #0b1332);
  border: 6px solid var(--card-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .05), 8px 0 24px rgba(0, 0, 0, .5);
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: rotateY(0deg);
  transition: transform 1.4s cubic-bezier(.65, 0, .35, 1);
  z-index: 6;
}
.binder-cover.is-open { transform: rotateY(-165deg); pointer-events: none; }
.binder-cover:focus-visible { outline: 3px solid var(--purple-light); outline-offset: 4px; }

/* the cover wears the game's own logo and a gold "open" plate */
.binder-cover-coin {
  width: 420px;
  height: 194px;
  background: url('assets/web/logo-480.webp') center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .45));
  transition: transform .4s var(--ease-out);
}
.binder-cover:hover .binder-cover-coin { transform: rotate(-2deg) scale(1.03); }
.binder-cover-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.binder-cover-label {
  padding: 16px 30px 12px;
  background: var(--gold);
  border: 4px solid var(--card-black);
  border-radius: 8px;
  box-shadow: 0 7px 0 var(--card-black);
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #1d1300;
}

/* .binder-stage is scaled down as one unit to fit narrow viewports (see
   the comment above); without a counter-scale these two controls would
   shrink right along with the card art, down to an unusably small ~9px
   tall close button at the scale floor. Growing back to natural size via
   the inverse of the same variable keeps them tappable at every width,
   without moving their anchor point in the (still-scaled) layout. */
.binder-close-pill {
  position: absolute;
  left: 12px;
  top: -16px;
  transform: scale(calc(1 / var(--binder-scale, 1)));
  transform-origin: top left;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .08);
  border: none;
  color: #c9bfae;
  font: 600 12px system-ui, -apple-system, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
}
.binder-close-pill:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 2px; }

.binder-tabs {
  position: absolute;
  right: -34px;
  top: 36px;
  transform: scale(calc(1 / var(--binder-scale, 1)));
  transform-origin: top right;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.binder-tabs[hidden] { display: none; }
.binder-tab {
  width: 34px;
  height: 78px;
  border-radius: 0 8px 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  appearance: none;
  border: none;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .3);
  transform: translateX(0);
  transition: transform .2s, box-shadow .2s;
}
.binder-tab.is-active { transform: translateX(-6px); box-shadow: 2px 3px 8px rgba(0, 0, 0, .5); }
.binder-tab:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
.binder-tab span {
  writing-mode: vertical-rl;
  font: 700 11px system-ui, -apple-system, sans-serif;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .92);
}

/* ---------- card inspect overlay ---------- */

.binder-inspect-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .72);
  padding: 40px 20px;
}
.binder-inspect-overlay[hidden] { display: none; }

.binder-inspect-card {
  position: relative;
  width: min(340px, 100%, calc((100svh - 80px) * .67));
  max-height: 90svh;
  background: #12100c;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.binder-inspect-card img { width: 100%; display: block; }

.binder-inspect-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: 600 22px system-ui, -apple-system, sans-serif;
  z-index: 2;
}
.binder-inspect-close:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 2px; }

body.binder-inspect-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .binder-cover { transition: none; }
  .binder-spread { transition: none; }
}

/* ---------- phones: tabbed card grid (cards.js) ---------- */

.binder-mobile { margin-top: 28px; }
.binder-mobile[hidden], .binder-scale-wrap[hidden] { display: none; }

.binder-mobile-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
}
.binder-mobile-tab {
  flex: 1;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 4px 7px;
  background: var(--card-black);
  border: 2px solid rgba(255, 246, 227, .22);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: clamp(13px, 3.7vw, 15px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--paper);
  cursor: pointer;
}
.binder-mobile-tab[aria-selected="true"] { background: var(--gold); border-color: var(--card-black); color: #1d1300; box-shadow: 0 4px 0 var(--card-black); }
.binder-mobile-tab:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
.binder-mobile-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 3px 5px 0;
  border-radius: 999px;
  background: rgba(255, 246, 227, .16);
  font-size: 13px;
}
.binder-mobile-tab[aria-selected="true"] .binder-mobile-count { background: rgba(0, 0, 0, .14); }

.binder-mobile-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 44%), 1fr));
  gap: 14px 12px;
}
.binder-mobile-card {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 6%/4%;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.binder-mobile-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 460 / 686;
  border-radius: inherit;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35);
  transition: transform .15s var(--ease-out);
}
.binder-mobile-card:active img { transform: scale(.97); }
.binder-mobile-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.cards-cta {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ---------- footer ---------- */

.cards-footer {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
  padding: 16px 4px 30px;
}

/* ---------- responsive ---------- */

.cards-body .site-footer { margin-top: 0; }

@media (max-width: 900px) {
  .cards-page { padding: 8px var(--gutter) 0; }
  .cards-section { padding: 24px 0 72px; }
  .cards-intro { padding: 0; }
  .cards-cta { margin-top: 34px; }
}

@media (max-width: 360px) {
  .binder-mobile-count { display: none; }
}

@media (max-width: 560px) {
  .cards-intro { text-align: left; }
  .cards-intro .section-heading { font-size: clamp(34px, 10vw, 44px); line-height: 1; }
  .cards-cta { flex-direction: column; align-items: stretch; }
  .cards-cta .btn { display: flex; }
  .cards-cta .btn__face { white-space: normal; text-align: center; }
}