/* Homepage composition (design overhaul Phase 2). Loaded by index.html only.
   Brand values come from ui/brand.css and ui/lazarus.css; this file owns layout.
   Motion: state changes are CSS transitions (interruptible); arrivals, count-ups, scrambles and
   scroll progress are added by ui/lazarus.js and are optional. Nothing here starts hidden. */

/* ---------- shared pieces ---------- */
.home-head { display: grid; justify-items: start; gap: 6px; margin-bottom: clamp(28px, 4vw, 44px); }
.home-head--center { justify-items: center; text-align: center; }
.home-title { margin: 0; font: 400 var(--lz-size-section)/var(--lz-leading-display) var(--lz-display); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.home-title em { font-style: normal; color: var(--lz-accent); transition: color var(--lz-arrive) var(--lz-settle); }
.home-sub { max-width: 34em; margin-top: 8px; color: var(--lz-secondary); font: 400 var(--lz-size-body)/var(--lz-leading-body) var(--lz-body); }
.home .lz-kicker { transition: color var(--lz-arrive) var(--lz-settle); }

/* ---------- hero: one action, one compact live strip ---------- */
.hero__cta-row { align-items: center; gap: 10px 24px; }
.hero-live { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 28px 0 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); border-left: 3px solid var(--lz-original); background: rgba(8, 8, 8, .66); animation: lazHeroIn .58s var(--fx-ease, var(--lz-settle)) .24s backwards; }
.hero-live__item { display: grid; align-content: center; gap: 4px; min-height: 58px; padding: 9px 18px 10px; box-shadow: -1px 0 rgba(255, 255, 255, .1); }
.hero-live dt { color: var(--lz-muted); font: 700 12px/1.3 var(--lz-heading); letter-spacing: .16em; text-transform: uppercase; }
.hero-live dd { margin: 0; color: var(--lz-text); font: 700 17px/1.1 var(--lz-heading); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-live dd b { color: var(--lz-original); font-weight: 800; }
.hero-live__item--life dd, .hero-live__item--life dd b { color: var(--lz-life); }
.hero-live__narrow { display: none; }
@media (max-width: 760px) {
  .hero-live__narrow { display: inline; }
  .hero-live .hero-live__wide { display: none; }
  /* Three fixed columns: late numbers never change the strip's height. Player counts live in the world cards. */
  .hero-live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .hero-live__item[data-live-count] { display: none; }
  .hero-live__item { padding-inline: 10px; }
  .hero-live dt { letter-spacing: .1em; }
  .hero-live dd { font-size: 16px; }
}

/* ---------- choose your world ---------- */
/* The split position is a typed property so it can transition; older browsers switch instantly. */
@property --split { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.worlds { position: relative; padding: clamp(72px, 9vw, 112px) 0 0; }
.worlds__stage { --split: 50%; --slant: 3%; position: relative; isolation: isolate; height: clamp(540px, 70vh, 660px); overflow: hidden; background: #050505; border-block: 1px solid var(--lz-border); transition: --split 520ms var(--lz-settle); }
.worlds[data-gamemode="original"] .worlds__stage { --split: 60%; }
.worlds[data-gamemode="life"] .worlds__stage { --split: 40%; }
.world { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.world--og { --lz-accent: var(--lz-original); clip-path: polygon(0 0, calc(var(--split) + var(--slant)) 0, calc(var(--split) - var(--slant)) 100%, 0 100%); }
.world--life { --lz-accent: var(--lz-life); justify-content: flex-end; clip-path: polygon(calc(var(--split) + var(--slant)) 0, 100% 0, 100% 100%, calc(var(--split) - var(--slant)) 100%); }
/* The art never resizes: the moving edge only uncovers more of a still picture. */
.world__art { position: absolute; top: 0; z-index: -2; width: 66%; max-width: none; height: 100%; object-fit: cover; filter: saturate(.94) brightness(.86); transition: filter var(--lz-arrive) var(--lz-settle); }
.world--og .world__art { left: 0; object-position: 58% 50%; }
.world--life .world__art { right: 0; object-position: 30% 50%; }
.world::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.world--og::before { background: linear-gradient(90deg, rgba(5, 6, 5, .9) 0%, rgba(5, 6, 5, .55) 30%, rgba(5, 6, 5, .04) 62%), linear-gradient(0deg, rgba(5, 6, 5, .94) 0%, rgba(5, 6, 5, .16) 58%, rgba(5, 6, 5, .26) 100%); }
.world--life::before { background: linear-gradient(270deg, rgba(5, 6, 5, .9) 0%, rgba(5, 6, 5, .55) 30%, rgba(5, 6, 5, .04) 62%), linear-gradient(0deg, rgba(5, 6, 5, .94) 0%, rgba(5, 6, 5, .16) 58%, rgba(5, 6, 5, .26) 100%); }
.world__body { position: relative; width: min(440px, 34vw); margin-inline: max(4vw, calc((100vw - 1280px) / 2)); padding-bottom: clamp(28px, 4vw, 48px); }
.world__kicker { color: var(--lz-secondary); font: 700 12px/1.5 var(--lz-heading); letter-spacing: .18em; text-transform: uppercase; }
.world__name { margin: 4px 0 12px; color: var(--lz-accent); font: 400 var(--lz-size-hero)/.9 var(--lz-display); letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 6px 30px rgba(0, 0, 0, .6); }
.world__mash { color: var(--lz-text); font: 700 clamp(17px, 1.5vw, 20px)/1.3 var(--lz-heading); letter-spacing: .08em; text-transform: uppercase; }
.world__detail { display: grid; gap: 18px; margin-top: 14px; transition: opacity var(--lz-arrive) var(--lz-settle) 90ms; }
/* Three lines reserved, so both names sit on the same line whichever blurb is shorter. */
.world__blurb { max-width: 30em; min-height: 4.8em; color: var(--lz-secondary); font: 400 16px/1.6 var(--lz-body); }
.world__facts { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; }
.world__facts dt { color: var(--lz-muted); font: 700 12px/1.3 var(--lz-heading); letter-spacing: .16em; text-transform: uppercase; }
.world__facts dd { margin: 5px 0 0; color: var(--lz-text); font: 400 26px/1 var(--lz-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.world__facts dd small { margin-left: 1px; color: var(--lz-muted); font: 700 14px/1 var(--lz-heading); letter-spacing: .04em; }
.world__facts .count__val { font: inherit; color: inherit; }
.world__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 22px; }
.world__links { display: flex; flex-wrap: wrap; gap: 0 18px; transition: opacity var(--lz-arrive) var(--lz-settle) 90ms; }
.world__links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--lz-secondary); font: 700 14px/1 var(--lz-heading); letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .28); text-underline-offset: 5px; transition: color var(--lz-feedback) var(--lz-settle), text-decoration-color var(--lz-feedback) var(--lz-settle); }
.world__links a:hover { color: var(--lz-accent); text-decoration-color: currentColor; }
/* The seam: a 3px stroke on the moving edge, green at the top, gold at the bottom. */
.worlds__seam { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, var(--lz-original), var(--lz-life)); clip-path: polygon(calc(var(--split) + var(--slant) - 1.5px) 0, calc(var(--split) + var(--slant) + 1.5px) 0, calc(var(--split) - var(--slant) + 1.5px) 100%, calc(var(--split) - var(--slant) - 1.5px) 100%); }
@media (min-width: 901px) {
  .worlds[data-gamemode="original"] .world--og .world__art,
  .worlds[data-gamemode="life"] .world--life .world__art { filter: saturate(1.05) brightness(.96); }
  .worlds[data-gamemode="original"] .world--life .world__art,
  .worlds[data-gamemode="life"] .world--og .world__art { filter: saturate(.35) brightness(.46); }
  /* The side that was not chosen keeps its name and its button; the rest steps back, faster than it arrived.
     It stays in the reading order for screen readers, and a keyboard focus inside it selects that side. */
  .worlds[data-gamemode="original"] .world--life :is(.world__detail, .world__links),
  .worlds[data-gamemode="life"] .world--og :is(.world__detail, .world__links) { opacity: 0; pointer-events: none; transition: opacity var(--lz-exit) linear; }
}
@media (max-width: 900px) {
  .worlds__stage { display: grid; gap: 16px; height: auto; padding-inline: 4vw; overflow: visible; border: 0; background: none; }
  .world { position: relative; inset: auto; min-height: 480px; overflow: hidden; clip-path: none; border: 1px solid var(--lz-border); }
  .world--life { justify-content: flex-start; }
  .world__art { width: 100%; }
  .world--og .world__art { object-position: 62% 50%; }
  .world--life .world__art { object-position: 42% 50%; }
  .world--og::before, .world--life::before { background: linear-gradient(0deg, rgba(5, 6, 5, .97) 0%, rgba(5, 6, 5, .82) 44%, rgba(5, 6, 5, .12) 100%); }
  .world__body { width: auto; margin: 0; padding: 150px 18px 18px; }
  .worlds__seam { display: none; }
}
@media (min-width: 601px) and (max-width: 900px) { .worlds__stage { grid-template-columns: 1fr 1fr; } }

/* ---------- inside the worlds: pinned art, scrolling features ---------- */
.showcase { position: relative; padding: clamp(72px, 9vw, 120px) 0; }
.showcase__list { margin: 0; padding: 0; list-style: none; }
.feature { --lz-accent: var(--lz-original); position: relative; min-width: 0; }
.feature[data-gamemode="life"] { --lz-accent: var(--lz-life); }
.feature__art { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.feature__world { color: var(--lz-accent); font: 700 12px/1.4 var(--lz-heading); letter-spacing: .18em; text-transform: uppercase; }
.feature__title { margin: 6px 0 8px; font: 700 var(--lz-size-panel)/var(--lz-leading-heading) var(--lz-heading); letter-spacing: .02em; text-transform: uppercase; transition: color var(--lz-arrive) var(--lz-settle); }
.feature__body { max-width: 30em; color: var(--lz-secondary); font: 400 16px/1.6 var(--lz-body); transition: color var(--lz-arrive) var(--lz-settle); }
.feature__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; color: var(--lz-accent); font: 700 14px/1 var(--lz-heading); letter-spacing: .12em; text-transform: uppercase; }
.feature__link span { transition: transform var(--lz-feedback) var(--lz-settle); }
@media (hover: hover) and (pointer: fine) { .feature__link:hover span { transform: translateX(4px); } }
.showcase__frame { position: relative; overflow: hidden; border: 1px solid var(--lz-border); background: #050505; }
.showcase__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 420ms var(--lz-settle), transform var(--lz-scene) var(--lz-settle); }
.showcase__frame img.is-active { opacity: 1; transform: none; }
.showcase__frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(5, 6, 5, .86), transparent 40%); }
.showcase__caption { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; color: var(--lz-text); font: 700 14px/1.3 var(--lz-heading); letter-spacing: .14em; text-transform: uppercase; }
.showcase__count { color: var(--lz-accent); font-variant-numeric: tabular-nums; transition: color var(--lz-arrive) var(--lz-settle); }
.showcase__progress, .showcase__rail span { display: block; height: 3px; background: var(--lz-accent); transform: scaleX(0); transform-origin: left center; }
.showcase__progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; transition: background-color var(--lz-arrive) var(--lz-settle); }
.showcase__rail { display: none; height: 3px; margin: 2px 4vw 0; background: var(--lz-border); }
@media (min-width: 1061px) {
  .showcase__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 76px); align-items: start; width: min(1280px, 92vw); margin: 0 auto; }
  .showcase__frame { position: sticky; top: 112px; height: min(calc(100vh - 152px), 620px); }
  /* Wide screens use the pinned frame, so the list pictures are never fetched here (they are lazy and
     not rendered). With JavaScript off, a <noscript> rule in index.html shows them instead. */
  .feature__art { display: none; }
  .showcase:not(.is-pinned) .showcase__frame { display: none; }
  .showcase:not(.is-pinned) .showcase__body { grid-template-columns: 1fr; }
  .showcase:not(.is-pinned) .showcase__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
  .showcase.is-pinned .showcase__list { display: grid; padding-block: 4vh 10vh; }
  .showcase.is-pinned .feature { padding: clamp(24px, 4.2vh, 42px) 0 clamp(24px, 4.2vh, 42px) 28px; border-left: 2px solid var(--lz-border); transition: border-color var(--lz-arrive) var(--lz-settle); }
  .showcase.is-pinned .feature.is-active { border-left-color: var(--lz-accent); }
  .showcase.is-pinned .feature:not(.is-active) :is(.feature__title, .feature__body) { color: var(--lz-muted); }
}
@media (max-width: 1060px) {
  /* Phones and tablets: a swipe row. It scrolls inside itself; the page never scrolls sideways. */
  .showcase__frame { display: none; }
  .showcase__list { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4vw; padding: 4px 4vw 16px; scrollbar-width: none; }
  .showcase__list::-webkit-scrollbar { display: none; }
  .feature { flex: 0 0 min(80vw, 380px); scroll-snap-align: start; border: 1px solid var(--lz-border); border-top: 2px solid var(--lz-accent); background: var(--lz-surface); }
  .feature__text { padding: 16px 18px 10px; }
  .showcase__rail { display: block; }
}

/* ---------- proof: three real numbers ---------- */
.proof { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 9vw, 120px) 0; border-block: 1px solid var(--lz-border); }
.proof__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.proof__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.66) saturate(.95); }
.proof__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 8, .92), rgba(8, 8, 8, .56) 58%, rgba(8, 8, 8, .76)); }
.lz-ui .proof__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
/* Page exception: the proof numerals use the hero scale, capped at 84px. */
.lz-ui .proof .lz-metric strong { margin-top: 10px; font-size: clamp(44px, 6vw, 84px); line-height: 1; }
.lz-ui .proof .lz-metric:first-child strong { color: var(--lz-accent); }
.proof .lz-metric p { max-width: 24em; margin-top: 14px; color: var(--lz-secondary); font: 400 16px/1.6 var(--lz-body); }
.proof .lz-metric p b { color: var(--lz-text); font-weight: 600; }
@media (max-width: 760px) {
  .lz-ui .proof__metrics { grid-template-columns: 1fr; gap: 0; }
  .lz-ui .proof .lz-metric, .lz-ui .proof .lz-metric:nth-child(odd) { padding: 22px 0; border: 0; border-top: 1px solid var(--lz-border); }
  .lz-ui .proof .lz-metric:first-child { padding-top: 0; border-top: 0; }
}

/* ---------- rules in brief ---------- */
.brief { padding: clamp(72px, 9vw, 120px) 0; }
.brief__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
.brief__lead p { max-width: 30em; margin-top: 16px; color: var(--lz-secondary); font: 400 16px/1.65 var(--lz-body); }
.brief__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 24px; }
.lz-ui .brief .lz-disclosure { margin-top: 0; }
.lz-ui .brief .lz-disclosure:last-child { border-bottom: 1px solid var(--lz-border); }
.lz-ui .brief .lz-disclosure > summary { min-height: 60px; font: 700 19px/1.3 var(--lz-heading); letter-spacing: .04em; text-transform: uppercase; }
.lz-ui .brief .lz-disclosure p { max-width: 36em; padding-bottom: 4px; color: var(--lz-secondary); font: 400 16px/1.65 var(--lz-body); }
.lz-ui .brief .lz-disclosure p b { color: var(--lz-text); font-weight: 600; }
@media (max-width: 860px) { .brief__grid { grid-template-columns: 1fr; } }

/* ---------- final call ---------- */
.community__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.community__bg { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .worlds__stage, .world__art, .world__detail, .world__links, .world__links a, .home-title em, .home .lz-kicker,
  .feature__title, .feature__body, .feature__link span, .showcase__frame img, .showcase__count, .showcase__progress,
  .showcase.is-pinned .feature { transition: none; }
  .showcase__frame img { transform: none; }
  .hero-live { animation: none; }
}