/* ============================================================
   RS9 GAME — home.css  (homepage-specific styles)
   ============================================================ */

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height) + var(--space-8));
  padding-bottom: var(--space-12);
  background: radial-gradient(ellipse at 50% 30%, #1A0005 0%, var(--color-bg) 65%);
  overflow: hidden;
}
.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; }
.hero__badge { margin-bottom: var(--space-5); }
.hero h1 { font-size: var(--text-hero); margin-bottom: var(--space-4); }
.hero h1 .word { display: inline-block; opacity: 0; animation: ember-rise var(--duration-slow) var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
.hero__sub { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xl); color: var(--color-white); text-transform: none; letter-spacing: 0; margin-bottom: var(--space-4); }
.hero__lead { max-width: 520px; margin-bottom: var(--space-6); }
.hero__bonus { margin-top: var(--space-8); display: flex; align-items: center; gap: var(--space-4); }
.hero__bonus-amt {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-6xl); line-height: 0.9;
  background: linear-gradient(100deg, #F5C451 0%, #fff6d8 25%, #F5C451 50%, #b8862a 75%, #F5C451 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 4s linear infinite;
}
.hero__bonus-label { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 130px; }

.hero__media { position: relative; display: flex; justify-content: center; }
.hero__media::before {
  content: ''; position: absolute; inset: -10% 10%;
  background: radial-gradient(circle at 50% 50%, rgba(232, 0, 29, 0.35), transparent 65%);
  filter: blur(30px); z-index: 0;
}
.hero__phone { position: relative; z-index: 1; max-width: 300px; border-radius: var(--radius-xl); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); animation: float 6s ease-in-out infinite; border: 1px solid var(--color-border); }

.scroll-hint { position: absolute; bottom: var(--space-6); left: 50%; transform: translateX(-50%); color: var(--color-white-30); font-size: var(--text-2xl); animation: bounce-down 2s ease-in-out infinite; }

@media (min-width: 992px) {
  .hero__grid { grid-template-columns: 1.4fr 1fr; gap: var(--space-16); }
  .hero__phone { max-width: 340px; }
}

/* ---------- HOW TO / STEPS TIMELINE ---------- */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.step { position: relative; background: var(--color-surface); border: 1px solid var(--color-border-white); border-radius: var(--radius-lg); padding: var(--space-6); }
.step__num { font-family: var(--font-display); font-weight: 700; font-size: var(--text-5xl); color: var(--color-accent); line-height: 1; opacity: 0.9; }
.step h3 { font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-2); }
.step p { font-size: var(--text-sm); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* ---------- GAMES PREVIEW (scroll-snap row) ---------- */
.games-row {
  display: flex; gap: var(--space-4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--space-4);
  scrollbar-width: thin; scrollbar-color: var(--color-accent) transparent;
}
.games-row::-webkit-scrollbar { height: 6px; }
.games-row::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: var(--radius-pill); }
.game-card {
  position: relative; flex: 0 0 200px; aspect-ratio: 211 / 260;
  border-radius: var(--radius-lg); overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--color-border-white);
  background: linear-gradient(160deg, #2a0008, #0f0f0f);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base), border-color var(--duration-base);
}
.game-card__img { width: 100%; height: 100%; object-fit: cover; }
.game-card__fallback { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-display); font-size: var(--text-4xl); color: rgba(255,255,255,0.15); }
.game-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-4); background: linear-gradient(to top, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.2) 55%, transparent 100%); transition: background var(--duration-base); }
.game-card__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: #fff; font-size: var(--text-lg); letter-spacing: 0.04em; }
.game-card__play { align-self: flex-start; margin-top: var(--space-2); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.08em; background: var(--color-accent); color: #fff; padding: 4px var(--space-3); border-radius: var(--radius-pill); }
.game-card:hover { transform: scale(1.03); box-shadow: var(--shadow-glow); border-color: var(--color-accent); }
.game-card:hover .game-card__overlay { background: linear-gradient(to top, rgba(8,8,8,0.96) 0%, rgba(20,0,4,0.5) 60%, rgba(232,0,29,0.15) 100%); }
@media (min-width: 768px) { .game-card { flex-basis: 280px; } }

/* ---------- BONUS SHOWCASE ---------- */
.bonus-showcase { background: radial-gradient(ellipse at center, #1A0005 0%, var(--color-bg) 70%); }
.bonus-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: center; }
.bonus-card {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #2a0008 0%, #12000a 100%);
  border: 1px solid var(--color-accent);
  display: grid; place-items: center; text-align: center;
  overflow: hidden;
  animation: pulse-glow 3s ease-in-out infinite;
}
.bonus-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.14) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 3.5s linear infinite;
}
.bonus-card__inner { position: relative; z-index: 1; }
.bonus-card__label { font-family: var(--font-display); letter-spacing: 0.2em; color: var(--color-gold); font-size: var(--text-sm); }
.bonus-card__amt { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 12vw, 5rem); color: #fff; text-shadow: 0 0 30px rgba(232,0,29,0.6); line-height: 1; }
.bonus-card__sub { color: var(--color-white-70); font-size: var(--text-sm); margin-top: var(--space-2); }
@media (min-width: 992px) { .bonus-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- BLOG PREVIEW ---------- */
.blog-card { background: var(--color-surface); border: 1px solid var(--color-border-white); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base), border-color var(--duration-base); display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow); border-color: var(--color-border); }
.blog-card__img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
.blog-card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.blog-card__meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.blog-card h3 { font-size: var(--text-lg); text-transform: none; letter-spacing: 0.01em; line-height: 1.3; margin-bottom: var(--space-2); }
.blog-card p { font-size: var(--text-sm); margin-bottom: var(--space-4); flex: 1; }
.blog-card__link { font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: 0.06em; color: var(--color-accent); }
.blog-card__link:hover { text-decoration: underline; }