/* Home page only. Shared pieces live in site.css; this file holds the
   few things the home page does that no other page does.

   The page opens with three equal spots, one per major project: One Button,
   Code Name and the Arcade. Each is a full-bleed panel of near-viewport
   height, with big display type, its own colour world (--c) and one clear
   primary button. */

/* ---- The three panels, shared shape ------------------------- */

.panel {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg);
  border-top: 6px solid var(--c, #fff);
}
/* The first panel sits under the overlay header, so it has no top border. */
.panel--ob { border-top: 0; }

.panel .hero-body h1,
.panel .hero-body h2,
.panel .arc-top h2 {
  font-size: clamp(64px, 15vw, 176px);
  line-height: .82;
  margin: 0;
}
.panel small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  color: #D9D4E8;
  margin-bottom: 8px;
}
/* "Game one", "Game two", "Play now": a little pill in the panel's colour. */
.panel-no {
  background: var(--c);
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 12px;
  letter-spacing: .18em;
  font-size: 11.5px;
}
.panel-line {
  margin: 22px 0 0;
  max-width: 34ch;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.4;
  color: #E4E1EE;
}
.btn-xl { padding: 18px 40px; font-size: 16px; }
.panel .btn-row { align-items: center; }

/* One Button: the existing teaser hero, now the first of three. */
.panel--ob .bars i { box-shadow: 0 0 24px -2px currentColor; }

/* Code Name: purple world over Trixie's clip. The wash keeps the clip
   readable but unmistakably purple. */
.panel--code::after {
  background:
    linear-gradient(180deg, rgba(7,7,12,.72) 0, rgba(7,7,12,0) 24%, rgba(60,18,110,.28) 55%, rgba(7,7,12,.94) 90%, var(--bg) 100%);
}
.panel--code .hero-body h2 { text-shadow: 0 0 60px rgba(168, 85, 247, .55); }
.panel--code small { color: #E3CCFF; }
.bars--code i { opacity: .9; }
.panel--code .btn-solid { background: var(--v); border-color: var(--v); color: #fff; }
.panel--code .btn-solid:hover { background: #fff; color: var(--ink); }
.panel--code .btn-ghost { border-color: #fff; }

/* The Arcade: a pixel-grid backdrop with the five games lined up. */
.panel--arcade {
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 56px);
  padding: clamp(72px, 9vw, 120px) var(--pad) clamp(40px, 6vw, 72px);
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(59, 227, 107, .22), transparent 70%),
    radial-gradient(55% 50% at 90% 10%, rgba(59, 167, 255, .20), transparent 70%),
    radial-gradient(60% 55% at 60% 100%, rgba(255, 59, 78, .16), transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg);
}
.arc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
}
.btn-play { background: var(--g); border-color: var(--g); padding: 20px 64px; font-size: 20px; letter-spacing: .16em; }
.btn-play:hover { background: #fff; border-color: #fff; }

.arc-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.6vw, 18px);
}
.arc-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: clamp(12px, 1.6vw, 18px);
  background: var(--c);
  color: var(--ink);
  border-radius: 16px;
  transition: transform .25s var(--ease-out);
}
.arc-card:hover { transform: translateY(-8px) rotate(-1deg); }
.arc-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.arc-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 10px;
  animation: pixel-bob 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -.6s);
}
.arc-card:hover img { animation-name: pixel-wiggle; animation-duration: .9s; }
.arc-card b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 34px);
  text-transform: uppercase;
  line-height: .92;
}
.arc-card span {
  margin-top: auto;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@keyframes pixel-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes pixel-wiggle {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-6px) rotate(-3deg); }
  75% { transform: translateY(-6px) rotate(3deg); }
}

/* ---- Studio line, news, join -------------------------------- */

/* Premise: big line left, short text right. */
.premise {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  padding: clamp(56px, 8vw, 90px) var(--pad) clamp(48px, 7vw, 80px);
}
.premise h2 { font-size: clamp(54px, 8vw, 92px); line-height: .9; }
.premise p { margin: 0 0 18px; font-size: clamp(18px, 2vw, 20px); line-height: 1.55; color: #C9C6D6; max-width: 46ch; }

/* News: the one real post. */
.news-one { padding: 0 var(--pad); }
.news-one .head { padding-left: 0; padding-right: 0; }
.news-one .card { display: block; max-width: 640px; }
.news-one .card:hover { border-color: var(--line-strong); }
.news-one .by { margin: 0; color: var(--mut-dim); font-size: 15px; }

.join { margin-top: clamp(56px, 8vw, 80px); }

@media (max-width: 1100px) {
  .arc-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .premise { grid-template-columns: 1fr; gap: 24px; align-items: start; }
}
@media (max-width: 600px) {
  .panel { min-height: 92vh; min-height: 92svh; }
  .panel .btn-row { flex-direction: column; align-items: stretch; }
  .panel .hero-body { padding-bottom: 36px; }
  .panel small { letter-spacing: .2em; font-size: 12px; }
  .arc-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .arc-row > :last-child { grid-column: 1 / -1; }
  .arc-row > :last-child .arc-card { flex-direction: row; align-items: center; }
  .arc-row > :last-child .arc-card img { width: 38%; }
  .arc-row > :last-child .arc-card span { margin-left: auto; margin-top: 0; }
  .btn-play { padding: 18px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .arc-card img { animation: none; }
  .arc-card:hover { transform: none; }
}