/* ============================================================
   home.css — index.html specific styles
   ============================================================ */

/* ---------- Hero ---------- */
.home-hero { text-align: center; }
.home-hero__inner {
  padding-block: clamp(var(--space-24), 16vh, 12rem) clamp(var(--space-20), 12vh, 10rem);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
}
.home-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-3xl);
  letter-spacing: -0.01em;
  line-height: 1.05;
  max-width: 16ch;
}
.home-hero__sub {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  max-width: 54ch;
}
.home-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-2); }
.home-hero__tag {
  margin-top: var(--space-6);
  font-family: var(--font-alt);
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.hide-mobile { display: none; }
@media (min-width: 700px) { .hide-mobile { display: inline; } }

/* ---------- Game feature card ---------- */
.game-feature {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: color-mix(in oklab, var(--color-surface) 92%, transparent);
}
@media (min-width: 860px) { .game-feature { grid-template-columns: 0.85fr 1.15fr; } }

.game-feature__art {
  position: relative;
  min-height: 280px;
  display: grid; place-items: center;
  overflow: hidden;
  background:
    radial-gradient(80% 80% at 50% 40%, rgba(168,85,247,0.35), transparent 60%),
    radial-gradient(60% 60% at 30% 80%, rgba(255,138,30,0.28), transparent 60%),
    linear-gradient(160deg, #160f22, #0b0714);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 860px) { .game-feature__art { border-bottom: 0; border-right: 1px solid var(--color-border); } }

.rift-orb {
  position: absolute; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffd9a8, var(--amber) 40%, var(--purple-deep) 100%);
  box-shadow: 0 0 60px rgba(168,85,247,0.6), inset 0 0 30px rgba(255,255,255,0.25);
  animation: orbPulse 5s ease-in-out infinite;
}
.rift-ring {
  position: absolute; width: 210px; height: 210px; border-radius: 50%;
  border: 2px dashed rgba(255,171,77,0.5);
  animation: spin 18s linear infinite;
}
.game-feature__bunny {
  position: relative; font-size: 3.4rem;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5));
  animation: bob 3.5s ease-in-out infinite;
}
.game-feature__badge {
  position: absolute; top: var(--space-4); left: var(--space-4);
  font-family: var(--font-alt); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber-bright);
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgba(255,171,77,0.4);
  border-radius: var(--radius-full);
  background: rgba(10,7,16,0.5);
}
@keyframes orbPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.game-feature__body { padding: clamp(var(--space-6), 4vw, var(--space-12)); }
.game-feature__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  margin-top: var(--space-2);
}
.game-feature__tag {
  font-family: var(--font-alt);
  color: var(--color-primary);
  font-weight: 600;
  margin-top: var(--space-2);
}
.game-feature__desc { color: var(--color-text-muted); margin-top: var(--space-4); }
.game-feature__stats {
  display: flex; gap: var(--space-8); margin-top: var(--space-6);
}
.game-feature__stats li { display: flex; flex-direction: column; }
.game-feature__stats b {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700;
  color: var(--color-text);
}
.game-feature__stats span {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--color-text-faint);
}
.game-feature__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  margin-top: var(--space-8);
}
.store-soon {
  font-family: var(--font-alt); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint);
}

/* ---------- About ---------- */
.about__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
@media (min-width: 820px) { .about__grid { grid-template-columns: 1fr 1.2fr; gap: var(--space-16); } }
.about__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.about__copy p { color: var(--color-text-muted); }
.about__copy strong { color: var(--color-text); }
.about__owner {
  margin-top: var(--space-2);
  font-family: var(--font-alt);
  color: var(--color-text-faint) !important;
  font-size: var(--text-sm);
}

/* ---------- Contact ---------- */
.contact__card { text-align: center; padding: clamp(var(--space-8), 5vw, var(--space-16)); border-radius: var(--radius-2xl); border: 1px solid var(--color-border); background: color-mix(in oklab, var(--color-surface) 92%, transparent); }
.contact__card .eyebrow, .contact__card .section-lead { margin-inline: auto; }
.contact__card .section-lead { text-align: center; }
.contact__links {
  display: grid; gap: var(--space-4); margin-top: var(--space-8);
  grid-template-columns: 1fr; max-width: 640px; margin-inline: auto;
}
@media (min-width: 620px) { .contact__links { grid-template-columns: 1fr 1fr; } }
.contact__link {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
.contact__link:hover { border-color: var(--color-accent); transform: translateY(-3px); box-shadow: var(--glow-purple); }
.contact__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-faint); }
.contact__email { font-family: var(--font-alt); font-weight: 600; color: var(--color-primary); font-size: var(--text-base); word-break: break-word; }