/* Home = the ASM project hub (SITE-UPGRADE phase 3, 2026-10-13, Connor: "a nice banner when people open the site ... a hub
   going over everything we do"). The phase-1 trailer hero, rarity band, shatter manifesto and sticky story moved off
   the home (the game detail lives on /game/), so their rules are gone from this file. Black / grey / white: his art
   carries the colour. Motion only under html.motion-ok (see motion.css); below the fold the sections use
   content-visibility, so a phone does not lay them out up front. */

.home main { overflow-x: clip; }

.hero-watch { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; margin-left: 4px; padding: 0 4px; border: 0; background: none; color: var(--ink);
  font: 600 11px/1 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.hero-watch i { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 12px; font-style: normal; transition: background .2s, color .2s; }
.hero-watch:hover i, .hero-watch:focus-visible i { background: var(--ink); color: var(--bg-deepest); }
.hero-watch span { color: var(--muted); letter-spacing: .08em; }

.trailer-dialog { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.trailer-dialog::backdrop { background: rgba(0, 0, 0, .88); backdrop-filter: blur(6px); }
.trailer-wrap { width: min(92vw, 420px, calc(84svh * 9 / 16)); aspect-ratio: 9 / 16; border: 1px solid var(--line-strong); border-radius: 18px; overflow: hidden; background: #000; }
.trailer-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.trailer-close { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg-elevated); color: var(--ink); font-size: 22px; line-height: 1; }
.trailer-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

/* index */
.index { max-width: 1320px; margin: 0 auto; padding: 110px var(--gutter) 100px; border-top: 1px solid var(--line); }
.index-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 26px; }
.index-head h2 { margin: 14px 0 0; font-size: clamp(44px, 6.4vw, 96px); }
.index-head p { max-width: 400px; color: var(--ink-secondary); }
.index-head .chips { margin-top: 12px; }
.index-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); gap: 12px; }
.index-card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --c: #fff; position: relative; grid-column: span 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-width: 0;
  padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-base); color: var(--ink); overflow: hidden; isolation: isolate;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .35s var(--ease-out), border-color .25s; }
.index-card::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--c) 22%, transparent), transparent 60%); }
.index-card:is(:hover, :focus-visible) { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.index-card:is(:hover, :focus-visible)::before { opacity: 1; }
.index-media { position: absolute; inset: 0; z-index: -2; }
.index-media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: transform .8s var(--ease-out), opacity .3s; }
.index-card:hover .index-media img { transform: scale(1.04); opacity: .65; }
.index-media-side { display: flex; justify-content: flex-end; }
.index-media-side img { width: auto; max-width: 62%; height: 100%; opacity: .8; }
.index-media-side::after { background: linear-gradient(90deg, var(--bg-base) 30%, transparent 75%), linear-gradient(180deg, transparent 45%, rgba(8, 9, 10, .9) 85%); }
.index-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(8, 9, 10, .92) 78%); }
.index-card .kicker { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.index-card h3 { margin: 0; font: 600 clamp(24px, 2.4vw, 34px)/.95 var(--display); letter-spacing: .005em; }
.index-card p { margin: 0; max-width: 38ch; color: var(--ink-secondary); font-size: 14px; line-height: 1.45; }
.index-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; }
.index-go { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 14px; transition: background .2s, color .2s; }
.index-card:hover .index-go { background: var(--ink); color: var(--bg-deepest); }
.index-card.w4 { grid-column: span 4; } .index-card.w3 { grid-column: span 3; } .index-card.tall { grid-row: span 2; min-height: 400px; }
.index-strip { display: flex; margin-top: 12px; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-base); }
.index-strip a { min-height: 34px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-secondary); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.index-strip a:hover { border-color: var(--line-strong); color: var(--ink); }
.index-market { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 26px; }
.index-market .hero-note { margin: 0; }
@media (hover: none), (prefers-reduced-motion: reduce) { .index-card { transform: none !important; } }
@media (hover: none) { .index-card:active { transform: scale(.985) !important; } }

.home :is(.index, .home-news) { content-visibility: auto; contain-intrinsic-size: auto 1600px; }

/* phones */
@media (max-width: 860px) {
  .hero-watch { margin: 2px 0 0; }
  .index { padding-top: 80px; }
  .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-card, .index-card.w3, .index-card.w4 { grid-column: span 2; }
  .index-card.tall { grid-row: span 1; min-height: 300px; }
  .index-card.half { grid-column: span 1; }
}
@media (max-width: 560px) {
  .index-card.half { grid-column: span 2; min-height: 170px; }
}

/* ---------------------------------------------------------------- the hub (2026-10-13, Connor: "a nice banner when people
   open the site. It's a hub ... going over everything we do", black / grey / white, no blue, calm motion).
   The banner is the first screen and the phone LCP; the centre-line header rules are repeated here because line.css
   arrives after the first paint. */
:root { --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
.mono-label { margin: 0; font: 500 11px/1.25 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
/* grid 1fr auto 1fr: the pill sits on the true centre line even when the side labels differ in width */
.lhead { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 14px; max-width: 1320px; margin: 0 auto 22px; }
.lhead-side { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lhead-side:first-child { grid-column: 1; justify-self: stretch; } .lhead-side:last-child { grid-column: 3; justify-self: stretch; }
.lhead-side > i { flex: 1 1 0; height: 1px; background: var(--line-strong); }
.lhead-side > .mono-label { flex: none; color: var(--subtle); white-space: nowrap; }
.lhead-k { flex: none; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-deepest); color: var(--ink-secondary); }
.hub-hero { position: relative; max-width: 1380px; margin: 0 auto; padding: 116px var(--gutter) 84px; text-align: center; }
.hub-banner { position: relative; isolation: isolate; margin: 0; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 22px; background: var(--bg-deepest); }
.hub-banner picture { display: block; height: 100%; }
.hub-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 47% 63%; }
/* The warm render melts into the black page: a soft vignette and a fade at the foot (no colour added). */
.hub-banner::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 72% 90% at 50% 50%, transparent 52%, rgba(8, 9, 10, .55) 78%, rgba(8, 9, 10, .96) 100%), linear-gradient(180deg, rgba(8, 9, 10, .35), transparent 22%, transparent 70%, var(--bg-deepest) 100%); }
.hub-banner figcaption { z-index: 2; }
.hub-banner figcaption { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; gap: 10px; }
.hub-banner figcaption .mono-label { padding: 7px 11px; border-radius: 999px; background: rgba(8, 9, 10, .76); color: #c9ccd1; }
.hub-title { margin: 40px auto 0; font: 600 clamp(54px, 9vw, 138px)/.9 var(--display); letter-spacing: .005em; text-transform: uppercase; }
.hub-title .hw { display: inline-block; overflow: hidden; padding-bottom: .04em; vertical-align: top; }
.hub-title .hw > span { display: inline-block; }
.hub-lede { max-width: 54ch; margin: 22px auto 0; color: var(--ink); font-size: 19px; line-height: 1.5; text-wrap: balance; }
.hub-sub { max-width: 56ch; margin: 10px auto 0; color: var(--ink-secondary); font-size: 15px; line-height: 1.55; }
.hub-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 28px; }
.hub-actions .button { min-height: 46px; padding: 0 24px; border-radius: 999px; letter-spacing: .12em; }
.hub-status { justify-content: center; margin-top: 22px; }
.chip[data-state="game"] i { background: var(--muted); box-shadow: none; }
/* hub tiles: the index cards, neutral, his art behind each door; slow fades only */
.hub-grid { grid-auto-rows: minmax(250px, auto); }
.hub-grid .index-card:is(.w2, .w3):not(.h2) { min-height: 340px; }
.index-card.w2 { grid-column: span 2; } .index-card.w6 { grid-column: span 6; } .index-card.h2 { grid-row: span 2; min-height: 520px; }
.hub-tile { transform: none !important; }
.hub-tile::before { background: radial-gradient(520px circle at 50% 100%, rgba(255, 255, 255, .05), transparent 60%); }
.hub-tile .index-media img { opacity: .6; transition: opacity 1.2s var(--ease-out), transform 1.8s var(--ease-out); }
.hub-tile:is(:hover, :focus-visible) .index-media img { opacity: .78; transform: scale(1.02); }
.hub-tile .index-top { gap: 10px; }
.hub-tile .index-top .chip { margin-left: auto; }
.hub-tile .index-go { margin-left: auto; }
.hub-tile .index-top .chip + .index-go { margin-left: 0; }
.hub-tile.hub-news { min-height: 170px; }
.hub-collect { display: grid; justify-items: center; gap: 12px; margin: 34px auto 6px; text-align: center; }
.hub-collect-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hub-collect-note { margin: 0; color: var(--muted); font-size: 14px; }
.hub-social-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
@media (max-width: 860px) {
  .hub-hero { padding: 96px 16px 60px; }
  .lhead { column-gap: 10px; } .lhead-side { gap: 10px; } .lhead-side > .mono-label { display: none; }
  .hub-banner { aspect-ratio: 1; border-radius: 16px; }
  .hub-banner img { object-position: 50% 50%; }
  .hub-title { margin-top: 26px; font-size: clamp(44px, 13vw, 64px); }
  .hub-lede { font-size: 16px; }
  .hub-actions .button, .hub-actions .hero-watch { flex: 1 1 100%; justify-content: center; }
  .index-card.w2, .index-card.w6 { grid-column: span 2; }
  .index-card.h2 { grid-row: span 1; min-height: 380px; }
  .index-card.w2:not(.h2) { min-height: 300px; }
}

/* ---- the hub, centred and calm (2026-10-13) */
.hub-tile { align-items: center; text-align: center; }
.hub-tile p { margin-inline: auto; }
.hub-facts { margin: 14px auto 0; color: var(--muted); font-size: 14px; letter-spacing: .02em; }
.hub-facts b { color: var(--ink); font: 600 22px/1 var(--display); letter-spacing: 0; }
.index-strip { justify-content: center; }
/* the banner: it settles in on load, then drifts a little as you scroll past (transform only: the LCP image paints at once) */
@keyframes hub-settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes hub-veil { from { opacity: 1; } to { opacity: 0; } }
@keyframes hub-letter { from { transform: translateY(108%); } to { transform: none; } }
@keyframes hub-drift { to { transform: translateY(7%) scale(1.03); } }
@keyframes hub-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }
html.motion-ok .hub-banner img { animation: hub-settle 1.8s var(--ease-out) both; }
/* the "fade": a black veil lifts off the banner (the image itself paints at once, so it stays the LCP) */
html.motion-ok .hub-banner::before { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--bg-deepest); pointer-events: none; animation: hub-veil 1.4s .05s var(--ease-out) both; }
html.motion-ok .hub-title .hw > span { animation: hub-letter .9s var(--ease-out) both; animation-delay: calc(.3s + var(--i) * 32ms); }
html.motion-ok :is(.hub-lede, .hub-sub, .hub-actions, .hub-status) { animation: hub-rise 1s var(--ease-out) both; }
html.motion-ok .hub-lede { animation-delay: .55s; } html.motion-ok .hub-sub { animation-delay: .62s; } html.motion-ok .hub-actions { animation-delay: .7s; } html.motion-ok .hub-status { animation-delay: .78s; }
@supports (animation-timeline: view()) {
  html.motion-ok .hub-banner picture { display: block; height: 100%; animation: hub-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
}

/* ---- hero v2 (Connor 2026-10-13: "make this part of the home page look alot better because this is the first thing
   people are going to see"). The banner fills the first screen, the wordmark overlaps its foot, the tags move to the
   top corners, and on desktop the art leans a few pixels toward the pointer (home.js sets --px/--py). Black, grey,
   white: the colour comes from the art only. */
.hub-hero { padding-top: 100px; }
.hub-banner { aspect-ratio: auto; height: clamp(440px, calc(100svh - 190px), 820px); border-radius: 26px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 50px 120px -50px rgba(0, 0, 0, .95); }
.hub-banner img { object-position: 50% 60%; }
.hub-banner::after { background: radial-gradient(ellipse 80% 95% at 50% 45%, transparent 55%, rgba(8, 9, 10, .5) 80%, rgba(8, 9, 10, .92) 100%), linear-gradient(180deg, rgba(8, 9, 10, .5), transparent 16%, transparent 56%, rgba(8, 9, 10, .72) 80%, var(--bg-deepest) 100%); }
.hub-banner figcaption { top: 18px; bottom: auto; left: 18px; right: 18px; }
.hub-banner figcaption .mono-label { background: rgba(8, 9, 10, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hub-title { position: relative; z-index: 3; margin-top: -.6em; font-size: clamp(60px, 9.2vw, 152px); white-space: nowrap; text-shadow: 0 12px 48px rgba(0, 0, 0, .6); }
html.motion-ok .hub-banner picture { scale: 1.04; translate: var(--px, 0px) var(--py, 0px); transition: translate 1.4s var(--ease-out); }
@media (max-width: 860px) {
  .hub-hero { padding-top: 88px; }
  .hub-banner { height: auto; aspect-ratio: 1; border-radius: 18px; }
  .hub-banner figcaption { top: 12px; left: 12px; right: 12px; }
  .hub-title { margin-top: -.55em; font-size: clamp(40px, 12.6vw, 72px); white-space: normal; }
}

/* the wordmark answers the pointer (Connor 2026-10-13: "when we hover of the Anti Social Media text it moves"): the
   letter under the pointer lifts, its neighbours follow a little. translate only (the entrance owns transform); the
   word masks get headroom so a lifted letter is never clipped. Desktop with a fine pointer, motion allowed. */
.hub-title .hw { padding-top: .16em; margin-top: -.16em; }
@media (hover: hover) and (pointer: fine) {
  html.motion-ok .hub-title .hw > span { transition: translate .7s var(--ease-out), opacity .7s var(--ease-out); }
  html.motion-ok .hub-title .hw > span:hover { translate: 0 -.13em; }
  html.motion-ok .hub-title .hw > span:has(+ span:hover), html.motion-ok .hub-title .hw > span:hover + span { translate: 0 -.07em; }
  html.motion-ok .hub-title .hw > span:has(+ span + span:hover), html.motion-ok .hub-title .hw > span:hover + span + span { translate: 0 -.03em; }
  html.motion-ok .hub-title:hover .hw > span:not(:hover) { opacity: .82; }
}