/* Homepage (Stillsuit HUD, 2026-09-30). Tokens come from site.css. */
.home .section { padding: clamp(2.5rem, 5vw, 4rem) 0; }

/* hero: poster first, the 0.8 MB loop fades in after the page has loaded */
.home-hero { position: relative; min-height: min(88vh, 760px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #100d09 url('/assets/home/hero-poster.webp') center 35% / cover no-repeat; }
.home-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: 0; transition: opacity 1.2s ease; }
.home-hero-video.playing { opacity: 1; }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(16,13,9,.9) 0%, rgba(16,13,9,.55) 45%, rgba(16,13,9,.1) 80%), linear-gradient(0deg, var(--bg) 0%, rgba(16,13,9,.4) 30%, transparent 55%); }
.home-hero-inner { position: relative; z-index: 2; width: 100%; padding-top: 6rem; padding-bottom: 2rem; }
.home-eyebrow { font: 500 .78rem/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--glow-bright); margin-bottom: 1rem; }
.home-title { font: 700 clamp(3rem, 8vw, 6.4rem)/.92 var(--font-display); letter-spacing: -.02em; max-width: 12ch; text-wrap: balance; color: var(--ink); text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.home-lede { margin-top: 1.25rem; max-width: 52ch; font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.55; color: var(--ink); opacity: .9; }
.home-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* HUD strip across the foot of the hero */
.home-hud { position: relative; z-index: 2; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 1px; width: calc(100% - 3rem); max-width: 1052px; padding: 0; margin: 0 auto 2.5rem; background: var(--border); border: 1px solid var(--border); }
.hud-cell { display: flex; align-items: baseline; gap: .6rem; padding: .9rem 1.25rem; background: rgba(21,17,12,.92); backdrop-filter: blur(4px); flex-wrap: wrap; }
.hud-num { font: 700 2.2rem/1 var(--font-display); color: var(--live); font-variant-numeric: tabular-nums; }
.hud-amber { color: var(--sand); }
.hud-label { font: .7rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hud-dot { align-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--live); animation: hud-breathe 1.6s ease-in-out infinite; }
.home-hud[data-live="false"] .hud-dot { background: var(--faint); animation: none; }
.home-hud[data-live="false"] .hud-live .hud-num { color: var(--muted); }
@keyframes hud-breathe { 0%,100% { box-shadow: 0 0 0 0 rgba(63,182,201,.55); } 50% { box-shadow: 0 0 0 7px rgba(63,182,201,0); } }
.hud-search { align-items: center; justify-content: flex-end; }
.hud-name { font: 700 1.3rem/1 var(--font-display); color: var(--ink); letter-spacing: .02em; }
.hud-copy { font: .72rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; padding: .5rem .8rem; border: 1px solid var(--glow); background: transparent; color: var(--glow-bright); cursor: pointer; border-radius: 2px; }
.hud-copy:hover { background: rgba(213,155,72,.12); }
.hud-copied { font: .72rem/1 var(--font-mono); color: var(--live); min-width: 4ch; }

/* worlds */
.world-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.world-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 1.25rem; overflow: hidden; color: var(--ink); border: 1px solid var(--border); background: var(--bg-card); isolation: isolate; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.world-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.world-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(16,13,9,.96) 10%, rgba(16,13,9,.35) 60%, rgba(16,13,9,.1)); }
.world-tile:hover { color: var(--ink); border-color: var(--glow); }
.world-tile:hover img { transform: scale(1.04); }
.world-mode { align-self: flex-start; font: .7rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; padding: .35rem .55rem; background: rgba(16,13,9,.8); border: 1px solid var(--border); color: var(--sand); margin-bottom: auto; }
.world-amtal .world-mode { color: #f08a6e; border-color: rgba(214,90,68,.5); }
.world-name { font: 700 2.2rem/1 var(--font-display); margin-top: 6rem; }
.world-line { margin-top: .4rem; font-size: .95rem; color: var(--muted); line-height: 1.45; }
.world-foot { margin-top: 1.25rem; color: var(--muted); }

/* portal */
.home-portal { background: linear-gradient(180deg, transparent, rgba(27,23,18,.7) 20%, rgba(27,23,18,.7) 80%, transparent); }
.portal-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.portal-list { list-style: none; display: grid; gap: .9rem; margin: 0 0 2rem; }
.portal-list li { padding-left: 1.1rem; border-left: 2px solid var(--glow); color: var(--muted); line-height: 1.5; }
.portal-list b { color: var(--ink); font-weight: 600; }
.portal-shots { position: relative; padding-bottom: 18%; }
.portal-shots img { display: block; width: 100%; height: auto; border: 1px solid var(--border); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.shot-side { position: absolute; width: 58% !important; right: -4%; bottom: 0; }

/* why */
.why-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.why { background: var(--bg); padding: 1.5rem; }
.why h3 { font: 700 1.35rem/1.1 var(--font-display); color: var(--sand); margin-bottom: .5rem; }
.why p { color: var(--muted); line-height: 1.55; }

/* other games */
.other-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.other-game { display: grid; grid-template-columns: 38% minmax(0, 1fr); align-items: center; gap: 1rem; padding: .75rem; border: 1px solid var(--border); background: var(--bg-card); color: var(--muted); }
.other-game img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.other-game b { display: block; font: 700 1.3rem/1.1 var(--font-display); color: var(--ink); margin-bottom: .25rem; }
.other-game:hover { border-color: var(--glow); color: var(--muted); }

/* join */
.join-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; padding-top: 2rem; padding-bottom: 2rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.join-band .section-title { margin-bottom: .4rem; }
.join-band p { color: var(--muted); }
.join-band .home-ctas { margin-top: 0; }

@media (max-width: 860px) {
  .home-hud { grid-template-columns: 1fr 1fr; }
  .hud-search { grid-column: 1 / -1; justify-content: flex-start; }
  .world-tiles, .why-row, .other-games, .portal-grid { grid-template-columns: 1fr; }
  .world-tile { min-height: 230px; }
  .world-name { margin-top: 3.5rem; }
  .shot-side { width: 55% !important; right: 0; }
}
@media (max-width: 480px) {
  .hud-cell { padding: .75rem .9rem; }
  .hud-num { font-size: 1.8rem; }
  .other-game { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hud-dot { animation: none; }
  .home-hero-video { display: none; }
  .world-tile img { transition: none; }
}