/*
  Homepage-specific styles: hero, studio intro, games section.
  Consumes tokens from tokens.css and base from site.css.
*/

/* ================================================================
   HERO
================================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-void) 0%, var(--bg-surface) 60%, var(--accent-tint) 100%);
}

/* Subtle noise grain — dark mode only */
:root[data-theme="dark"] .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 640px;
  padding: 0 24px;
}

.hero-logo {
  width: 200px;
  height: 200px;
  object-fit: contain;
  transition: none;
}

.hero-tagline {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 3vw, 22px);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  margin: 0;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 768px) {
  .hero { min-height: 70vh; }
  .hero-logo { width: 140px; height: 140px; }
}

/* ================================================================
   STUDIO INTRO
================================================================ */
.studio-intro {
  background-color: var(--bg-base);
  padding: 80px 0;
  text-align: center;
}

.studio-intro .container { max-width: 640px; }

.studio-intro p {
  font-size: 18px;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* ================================================================
   GAMES SECTION
================================================================ */
.games-section {
  padding: 80px 0;
  background-color: var(--bg-base);
}

.games-section .section-heading { text-align: center; }

@media (max-width: 768px) {
  .studio-intro  { padding: 48px 0; }
  .games-section { padding: 48px 0; }
}