/* ============================================================================
   R&G TCG — LANDING PAGE
   Hero-first marketing page. Reuses the shop header/nav from styles.css
   (.announce, .header, .logo, .nav, .icon-btn, .btn) so the chrome matches
   index.html 1:1. Everything below is landing-only.
   ============================================================================ */

.landing {
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(160,124,255,.30), transparent 60%),
    radial-gradient(900px 560px at 8% 12%, rgba(201,75,155,.16), transparent 55%),
    radial-gradient(800px 600px at 50% 110%, rgba(63,109,240,.12), transparent 60%),
    var(--color-bg);
  background-attachment: fixed;
}

.landing main { max-width: var(--layout-max); margin: 0 auto; }

/* ----------------------------------------------------------------------
   HERO
   ---------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-12);
  padding: clamp(48px, 8vw, 120px) var(--layout-gutter) clamp(56px, 7vw, 110px);
  overflow: visible;
}

.hero__glow {
  position: absolute;
  inset: -10% 30% 20% -10%;
  background: radial-gradient(closest-side, rgba(107,59,214,.20), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

.hero__copy { position: relative; z-index: 1; max-width: 620px; }

.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary-strong);
  background: var(--color-surface);
  border: var(--outline);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-offset-sm);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(48px, 7.5vw, 92px);
  line-height: 0.96;
  letter-spacing: -1px;
  color: var(--color-ink);
  margin-bottom: var(--space-5);
}
.hero__headline span { color: var(--color-primary); display: block; }

.hero__body {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  max-width: 56ch;
}
.hero__body strong { color: var(--color-ink); font-weight: 700; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.hero__cta-discord {
  background: var(--color-ink);
  color: #fff;
  box-shadow: var(--shadow-offset-accent);
}
.hero__cta-discord:hover { background: #000; }

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
}
.hero__chips li {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
  background: var(--color-surface);
  border: var(--outline);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-offset-sm);
  padding: var(--space-2) var(--space-4);
}
.hero__chips li::before { content: "✦ "; color: var(--color-primary); }

/* ----------------------------------------------------------------------
   HERO ART — floating cards spilling out of the chest, NO framing box
   ---------------------------------------------------------------------- */
.hero__art {
  position: relative;
  z-index: 1;
  height: clamp(380px, 38vw, 520px);
  display: grid;
  place-items: center;
}

/* The chest centerpiece */
.rip-chest {
  position: relative;
  width: clamp(220px, 22vw, 300px);
  height: clamp(180px, 18vw, 240px);
  z-index: 3;
  filter: drop-shadow(10px 14px 0 rgba(26,19,32,.28));
  animation: chest-bob 6s var(--ease-standard) infinite;
}
.rip-chest__body {
  position: absolute;
  inset: auto 0 0 0;
  height: 72%;
  background: var(--color-ink);
  border: var(--outline);
  border-radius: 18px 18px 16px 16px;
  display: grid;
  place-items: center;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 5px, transparent 5px 10px);
}
.rip-chest__lid {
  position: absolute;
  top: 14%;
  left: 4%;
  right: 4%;
  height: 34%;
  background: var(--color-ink);
  border: var(--outline);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  z-index: 2;
  clip-path: polygon(0 100%, 0 22%, 34% 22%, 50% 60%, 66% 22%, 100% 22%, 100% 100%);
}
.rip-chest__window {
  position: relative;
  z-index: 1;
  width: 64%;
  height: 60%;
  margin-top: 18%;
  border: 1.5px dashed rgba(255,255,255,.55);
  border-radius: 12px;
  display: grid;
  place-items: center;
  gap: 2px;
  text-align: center;
}
.rip-chest__window strong {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  color: #fff;
  line-height: 1;
}
.rip-chest__window em {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(11px, 1.1vw, 14px);
  color: var(--color-primary-soft);
}

/* Floating product cards */
.rip-card {
  position: absolute;
  width: clamp(96px, 9vw, 128px);
  aspect-ratio: 3 / 4;
  border: var(--outline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-offset-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  z-index: 4;
  color: #fff;
  animation: card-float 7s var(--ease-standard) infinite;
}
.rip-card__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(0,0,0,.28);
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
}
.rip-card__set {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1;
}

.rip-card--pkm { background: var(--color-cat-pokemon); top: 2%;  left: 6%;  transform: rotate(-11deg); animation-delay: 0s; }
.rip-card--mtg { background: var(--color-cat-magic);   top: 8%;  right: 4%; transform: rotate(10deg);  animation-delay: -1.4s; }
.rip-card--op  { background: var(--color-cat-onepiece);bottom: 6%; right: 10%; transform: rotate(8deg);  animation-delay: -2.8s; }
.rip-card--lor { background: var(--color-cat-lorcana); bottom: 2%; left: 10%; transform: rotate(-7deg); animation-delay: -4.2s; z-index: 2; }

@keyframes chest-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes card-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .rip-chest, .rip-card { animation: none; }
}

/* ----------------------------------------------------------------------
   HOW IT WORKS BAND
   ---------------------------------------------------------------------- */
.band { padding: clamp(40px, 6vw, 80px) var(--layout-gutter); }
.band__inner { max-width: 1200px; margin: 0 auto; }

.band__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary-strong);
  margin-bottom: var(--space-3);
}
.band__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.5px;
  color: var(--color-ink);
  margin-bottom: var(--space-9);
  max-width: 18ch;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.feature {
  background: var(--color-surface);
  border: var(--outline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-offset-md);
  padding: var(--space-8);
  transition: transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-base);
}
.feature:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--color-border); }
.feature--accent { background: var(--color-primary); color: #fff; box-shadow: 4px 4px 0 var(--color-border); }
.feature--accent:hover { box-shadow: 7px 7px 0 var(--color-border); }

.feature__num {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  color: var(--color-primary-strong);
  margin-bottom: var(--space-4);
}
.feature--accent .feature__num { color: rgba(255,255,255,.85); }
.feature h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.05;
  margin-bottom: var(--space-3);
}
.feature p { font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--color-text-muted); }
.feature--accent p { color: rgba(255,255,255,.9); }

/* ----------------------------------------------------------------------
   COMMUNITY / DISCORD BAND
   ---------------------------------------------------------------------- */
.community { padding: clamp(20px, 4vw, 48px) var(--layout-gutter) clamp(48px, 7vw, 96px); }
.community__card {
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-12);
  background: var(--color-ink);
  border: var(--outline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-offset-lg);
  padding: clamp(28px, 4vw, 56px);
  color: #fff;
}
.community__card::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 60%;
  height: 140%;
  background: radial-gradient(closest-side, rgba(160,124,255,.45), transparent 70%);
  pointer-events: none;
}
.community__copy { position: relative; z-index: 1; }
.community__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary-soft);
  margin-bottom: var(--space-3);
}
.community__copy h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.5px;
  margin-bottom: var(--space-4);
  max-width: 16ch;
}
.community__copy > p {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: var(--leading-relaxed);
  color: rgba(255,255,255,.78);
  margin-bottom: var(--space-6);
  max-width: 52ch;
}
.community__note {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: .5px;
  color: rgba(255,255,255,.55);
  margin-top: var(--space-4);
}

.community__badges {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
.cbadge {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-md);
  border: var(--outline);
  box-shadow: 4px 4px 0 rgba(0,0,0,.5);
  font-family: var(--font-display);
  font-size: 20px;
  color: #fff;
  transform: rotate(-4deg);
}
.cbadge:nth-child(even) { transform: rotate(5deg); }
.cbadge--pkm { background: var(--color-cat-pokemon); }
.cbadge--mtg { background: var(--color-cat-magic); }
.cbadge--ygo { background: var(--color-cat-yugioh); }
.cbadge--lor { background: var(--color-cat-lorcana); }
.cbadge--op  { background: var(--color-cat-onepiece); }
.cbadge--more { background: var(--color-surface); color: var(--color-ink); font-size: 14px; }

/* ----------------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------------- */
.landing-footer { border-top: var(--outline); background: var(--color-surface); }
.landing-footer__inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: var(--space-8) var(--layout-gutter);
}
.landing-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: var(--space-4);
}
.landing-footer__links a {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background var(--dur-base), color var(--dur-base);
}
.landing-footer__links a:hover { background: var(--color-primary-tint); color: var(--color-primary-strong); }
.landing-footer__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  color: var(--color-text-muted);
}

/* ----------------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-8); text-align: left; }
  .hero__art { order: -1; height: clamp(300px, 60vw, 400px); }
  .feature-grid { grid-template-columns: 1fr; }
  .community__card { grid-template-columns: 1fr; }
  .community__badges { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .hero, .band, .community { padding-inline: var(--layout-gutter-sm); }
  .landing-footer__inner { padding-inline: var(--layout-gutter-sm); }
  .landing-footer__meta { margin-left: 0; width: 100%; }
  .cbadge { width: 72px; height: 72px; font-size: 17px; }

  /* Keep the header compact like the shop: drop the secondary Discord
     button and stop the primary CTA from wrapping. */
  .header__actions .icon-btn { display: none; }
  .header__actions .btn--primary {
    white-space: nowrap;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-body-sm);
  }
}