/* ============================================================
   AIS GAMES — home page sections
   Hero (video knockout + parallax icons), intro, showcase,
   explore icon wall, stats.
   Requires: tokens.css, main.css — every value here is a token.
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  /* No overflow clipping: the parallax icons spill into the next
     section so the page reads as one continuous surface */
  background: var(--bg);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Fallback shows through the letters until the video is ready */
  background: var(--grad-hero);
  background-size: var(--hero-grad-size) var(--hero-grad-size);
  animation: hero-shift var(--dur-hero-shift) ease-in-out infinite alternate;
}
@keyframes hero-shift {
  from { background-position: 0% 40%; }
  to { background-position: 100% 60%; }
}

.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  /* Hidden until playback actually starts (js adds .playing);
     until then the gradient fallback shows through the letters */
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease);
}
.hero-media.playing video { opacity: 1; }

.hero-knockout {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
/* The knockout plate follows the page background in both themes
   (mask rects live inside <defs> and are unaffected) */
.hero-knockout > rect,
.hero-knockout-m > rect { fill: var(--bg); }
/* Hero headline: regular width, lighter than the display cut, so the
   letters stay elegant and leave the hero room to breathe */
.knockout-text {
  font-family: var(--font);
  font-weight: var(--w-sub);
  font-stretch: var(--stretch-text);
  font-size: var(--text-hero-svg);
  letter-spacing: var(--tracking-hero);
}

/* Portrait knockout only exists on phones */
.hero-knockout-m { display: none; }
.knockout-text-m {
  font-family: var(--font);
  font-weight: var(--w-sub);
  font-stretch: var(--stretch-text);
  font-size: var(--text-hero-svg-m);
  letter-spacing: var(--tracking-hero);
}

.hero-icons {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero-icons .parallax {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  transform: rotate(var(--r, 0deg));
  will-change: transform;
}
.hero-icons img {
  width: 100%;
  /* Every game icon on the site is rounded the same way, whether or not the
     game baked a rounding into its own file (only Float Up does). */
  border-radius: var(--radius-icon);
  filter: var(--shadow-icon);
  /* Staggered pop-in, then a gentle endless float */
  animation:
    icon-pop var(--dur-reveal) var(--ease-pop) both var(--d, 0s),
    icon-float var(--dur-float) ease-in-out infinite alternate calc(var(--d, 0s) + var(--dur-reveal));
}
@keyframes icon-pop {
  from { opacity: 0; transform: scale(var(--pop-from)); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes icon-float {
  from { translate: 0 calc(var(--float-amp) * -1); }
  to { translate: 0 var(--float-amp); }
}

/* ---------- Intro ---------- */
.intro {
  padding-block: var(--pad-intro-top) var(--pad-intro-bottom);
  text-align: center;
}
.intro p {
  font-size: var(--text-lead);
  font-weight: var(--w-ui);
  letter-spacing: var(--tracking-lead);
  line-height: var(--lh-copy);
}
/* Key phrases carry the brand gradient (theme-aware text variant) */
.intro strong {
  font-weight: var(--w-sub);
  background: var(--grad-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Showcase ---------- */
.showcase {
  display: flex;
  flex-direction: column;
  gap: var(--gap-cards);
  padding-block: var(--section-pad);
}

/* Card sections sit narrower than the nav/footer, like the reference */
.showcase.container-wide,
.stats.container-wide {
  width: var(--w-cards);
}

.card-wide { min-height: var(--h-card-wide); }

.card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-cards);
}
.card-row .card { min-height: var(--h-card-tall); }

/* The button sits at the foot of the card, as far from the bottom edge as the
   eyebrow is from the top: sitting under the title it covered the middle of
   the artwork. */
.showcase .card {
  display: flex;
  flex-direction: column;
}
.showcase .card-content {
  flex: 1;
  padding-bottom: var(--pad-card-top);
}
.showcase .card-content .btn { margin-top: auto; }

/* ---------- Explore all games ---------- */
.explore {
  position: relative;
  overflow: hidden;
  background: var(--surface-night);
  margin-block: var(--section-pad);
  padding-block: var(--pad-explore);
}

.explore-icons {
  position: absolute;
  inset: calc(var(--explore-bleed) * -1) 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--tile-gap);
  opacity: var(--explore-icons-alpha);
}
.explore-row {
  display: flex;
  gap: var(--tile-gap);
  width: max-content;
  animation: row-drift var(--dur-drift) ease-in-out infinite alternate;
}
.explore-row:nth-child(even) {
  margin-left: calc(var(--tile) * -0.6);
  animation-direction: alternate-reverse;
}
.explore-row:nth-child(2) { animation-delay: calc(var(--dur-drift) * -0.25); }
.explore-row:nth-child(3) { animation-delay: calc(var(--dur-drift) * -0.5); }
.explore-row:nth-child(4) { animation-delay: calc(var(--dur-drift) * -0.75); }
@keyframes row-drift {
  from { transform: translateX(calc(var(--drift-amp) * -1)); }
  to { transform: translateX(var(--drift-amp)); }
}
.explore-row img {
  width: var(--tile);
  border-radius: var(--radius-icon);
}

.explore-overlay {
  position: absolute;
  inset: 0;
  background: var(--grad-explore-overlay);
}

.explore-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
  padding-inline: var(--sp-5);
  color: var(--ink-on-art); /* purple section stays dark in both themes */
  text-decoration: none;
  cursor: pointer;
}
.explore-content:hover .btn { background: var(--accent-hover); }
.explore-title {
  font-size: var(--text-explore);
  font-weight: var(--w-display);
  font-stretch: var(--stretch-display);
  letter-spacing: var(--tracking-display);
  word-spacing: var(--word-display);
  margin-bottom: var(--sp-2);
}

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-cards);
  padding-block: var(--section-pad) var(--pad-section);
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  min-height: var(--h-stat);
  padding: var(--pad-stat) var(--sp-5);
}
/* Stat cards are flat art, no photo scrim needed */
.stat-card::before { content: none; }

.stat-warm { background: var(--grad-stat-warm); }
.stat-dark { background: var(--grad-stat-dark); }

/* Giant gradient figure with the label overlaid on it */
.stat-number {
  position: relative;
  display: grid;
  place-items: center;
  line-height: var(--lh-figure);
  margin-block: var(--sp-2);
}
.stat-figure {
  font-weight: var(--w-display);
  font-stretch: var(--stretch-display);
  font-size: var(--text-figure);
  letter-spacing: var(--tracking-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Accent type on the neutral card, a light tint of it on the wine one */
.stat-figure-accent { background-image: var(--grad-accent); }
.stat-figure-warm  { background-image: var(--grad-tint); }

.stat-label {
  position: absolute;
  top: var(--stat-label-y);
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--ink-on-art); /* stat cards stay dark in both themes */
  font-weight: var(--w-heading);
  font-size: var(--text-figure-label);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-shadow: var(--shadow-title);
  white-space: nowrap;
}

.stat-collage {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.stat-collage img {
  width: var(--icon-collage);
  border-radius: var(--radius-icon);
  transform: rotate(var(--r, 0deg));
  box-shadow: var(--shadow-pop);
  transition: transform var(--dur-fast) var(--ease);
}
.stat-card:hover .stat-collage img { transform: rotate(0deg); }

/* ---------- Responsive (home) ---------- */
@media (max-width: 860px) {
  /* Shorter hero: without the floating icons a full-height hero
     leaves too much empty canvas on phones */
  .hero {
    height: var(--h-hero-m);
    height: var(--h-hero-m-s);
    min-height: var(--h-hero-min-m);
  }

  /* Swap the landscape knockout for the portrait one; the video keeps
     playing through the letters exactly like on desktop */
  .hero-knockout { display: none; }
  .hero-knockout-m {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  /* No floating app icons on phones */
  .hero-icons { display: none; }

  .card-row { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .showcase.container-wide,
  .stats.container-wide { width: calc(100% - var(--gutter) * 2); }
}

/* ---------- Reduced motion (home) ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-media { animation: none; }
  .hero-media video { transition: none; }
  .hero-icons img { animation: none; }
  .hero-icons .parallax { will-change: auto; }
  .explore-row { animation: none; }
  .stat-collage img { transition: none; }
}