/* Strela website. Brand rules: assets/brand/README.md (D-025). Plain CSS, no build step.
   Layout: one dark column; every page opens with the mark on the visor line. */

@font-face { font-family: "Michroma"; src: url("fonts/Michroma-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --void: #07080a;
  --plate: #0e1013;
  --line: #23272c;
  --steel: #6b7076;
  --facet: #8d9196;
  --ash: #a9acae;
  --bone: #e4e1da;
  --signal: #f7f6f2;
  --ice: #6fd3ff;
  --font-mark: "Michroma", "Eurostile", "Arial Black", sans-serif;
  --font-body: "Barlow", "Segoe UI", Arial, sans-serif;
  --font-hud: "IBM Plex Mono", Consolas, monospace;
  --measure: 68ch;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--void); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--void); color: var(--bone); font: 400 18px/1.6 var(--font-body); }
img, svg { max-width: 100%; }
a { color: var(--signal); text-decoration-color: var(--ice); text-underline-offset: .2em; }
a:hover { color: var(--ice); }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* ---------------------------------------------------------------- header and nav */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--signal); }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand span { font: 400 17px/1 var(--font-mark); letter-spacing: .22em; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: center; }
.nav a { font: 500 13px/1 var(--font-hud); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--ash); padding: 8px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--signal); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ice); }
.nav .cta { color: var(--void); background: var(--signal); padding: 9px 14px; }
.nav .cta:hover { color: var(--void); background: var(--ice); }

/* ---------------------------------------------------------------- visor line */
.visor { position: relative; height: 1px; background: linear-gradient(90deg, var(--line), var(--steel) 50%, var(--line)); }
.visor::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; margin-top: -.5px; background: radial-gradient(closest-side, var(--ice), rgba(111, 211, 255, 0)); background-size: 60% 100%; background-repeat: no-repeat; background-position: var(--eye-x, 50%) 0; }

/* ---------------------------------------------------------------- hero (home) */
.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 9vw, 104px) clamp(40px, 7vw, 80px); background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(111, 211, 255, .07), rgba(111, 211, 255, 0) 70%); }
.hero .wrap { display: grid; justify-items: center; text-align: center; gap: 22px; position: relative; }
/* The visor line runs through the mark's slit: the eye sits at 261/512 of the mark's height. */
.mark-row { position: relative; width: 100%; display: grid; place-items: center; }
.mark-row::before { content: ""; position: absolute; left: -50vw; right: -50vw; top: 50.98%; height: 1px; background: linear-gradient(90deg, rgba(107, 112, 118, 0), var(--steel) 35%, var(--ice) 50%, var(--steel) 65%, rgba(107, 112, 118, 0)); }
.hero-mark { position: relative; width: clamp(150px, 26vw, 250px); height: auto; overflow: visible; display: block; }
.eyebrow { font: 500 13px/1.3 var(--font-hud); letter-spacing: .36em; text-transform: uppercase; color: var(--ice); margin: 0; }
.wordmark { font: 400 clamp(38px, 9vw, 92px)/1 var(--font-mark); letter-spacing: .2em; color: var(--signal); margin: 0; display: inline-flex; align-items: baseline; padding-left: .2em; white-space: nowrap; }
.wordmark svg { height: .78em; width: .858em; margin-left: .05em; }
.tagline { font-size: clamp(19px, 2.4vw, 24px); color: var(--ash); margin: 0; max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.button { display: inline-block; font: 500 14px/1 var(--font-hud); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 15px 22px; border: 1px solid var(--bone); color: var(--signal); }
.button:hover { border-color: var(--ice); color: var(--ice); }
.button.primary { background: var(--signal); color: var(--void); border-color: var(--signal); }
.button.primary:hover { background: var(--ice); border-color: var(--ice); color: var(--void); }

/* ---------------------------------------------------------------- page header (inner pages) */
.page-head { padding-block: clamp(40px, 7vw, 72px) clamp(28px, 4vw, 40px); }
.page-head .wrap { display: grid; gap: 14px; }
h1 { font: 400 clamp(30px, 5.5vw, 54px)/1.1 var(--font-mark); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); margin: 0; text-wrap: balance; }
.lede { font-size: clamp(19px, 2.2vw, 22px); color: var(--ash); margin: 0; max-width: var(--measure); }

/* ---------------------------------------------------------------- content */
main { display: block; }
.section { padding-block: clamp(36px, 6vw, 64px); }
.section + .section { border-top: 1px solid var(--line); }
h2 { font: 400 clamp(20px, 3vw, 26px)/1.25 var(--font-mark); letter-spacing: .1em; text-transform: uppercase; color: var(--signal); margin: 0 0 18px; text-wrap: balance; }
h3 { font: 600 19px/1.35 var(--font-body); color: var(--signal); margin: 28px 0 8px; }
.prose { max-width: var(--measure); }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--ice); }
.prose strong { color: var(--signal); font-weight: 600; }
.muted { color: var(--ash); }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pillar { background: var(--void); padding: 26px 24px 28px; display: grid; gap: 10px; align-content: start; }
.pillar .num { font: 500 12px/1 var(--font-hud); letter-spacing: .3em; color: var(--ice); }
.pillar h3 { margin: 0; font: 400 16px/1.35 var(--font-mark); letter-spacing: .1em; text-transform: uppercase; }
.pillar p { margin: 0; color: var(--ash); }

.status { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: baseline; border: 1px solid var(--line); background: var(--plate); padding: 18px 20px; max-width: var(--measure); }
.status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--ice); align-self: center; }
.status b { font: 500 13px/1.3 var(--font-hud); letter-spacing: .24em; text-transform: uppercase; color: var(--signal); }
.status p { grid-column: 2; margin: 0; color: var(--ash); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); max-width: 860px; counter-reset: step; }
.steps li { background: var(--void); padding: 22px 24px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 18px; counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font: 500 14px/1.6 var(--font-hud); letter-spacing: .2em; color: var(--ice); }
.steps h3 { margin: 0; }
.steps p { margin: 0; color: var(--ash); }

.rules-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rules-nav a { font: 500 12px/1 var(--font-hud); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--ash); border: 1px solid var(--line); padding: 10px 12px; }
.rules-nav a:hover { color: var(--signal); border-color: var(--steel); }
.rule-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; max-width: var(--measure); }
.rule-list li { padding-left: 18px; position: relative; }
.rule-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 1px; background: var(--ice); }
.rule-list b { color: var(--signal); font-weight: 600; }

/* ---------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--line); margin-top: clamp(24px, 5vw, 48px); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 28px 40px; font: 400 13px/1.6 var(--font-hud); color: var(--steel); letter-spacing: .04em; }
.site-footer a { color: var(--ash); }

@media (max-width: 560px) {
  body { font-size: 17px; }
  .steps li { grid-template-columns: 1fr; }
  .steps li::before { grid-row: auto; }
}
/* ---------------------------------------------------------------- live Discord counts */
.live { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font: 500 12px/1.4 var(--font-hud); letter-spacing: .22em; text-transform: uppercase; color: var(--ash); margin: 6px 0 0; }
.live b { color: var(--signal); font-weight: 500; letter-spacing: .08em; }
.live .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 8px var(--ice); }
.live .sep { color: var(--steel); }

/* ---------------------------------------------------------------- HUD grid behind the hero */
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(228, 225, 218, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(228, 225, 218, .045) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 50% 42%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 55% 60% at 50% 42%, #000 20%, transparent 75%); }

/* ---------------------------------------------------------------- pillars */
.pillar { position: relative; transition: background-color .25s ease; }
.pillar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ice); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.pillar:hover { background: var(--plate); }
.pillar:hover::before { transform: scaleX(1); }

/* ---------------------------------------------------------------- motion (only when allowed) */
@media (prefers-reduced-motion: no-preference) {
  .hero-mark .eye { animation: eye 4s ease-in-out infinite; }
  @keyframes eye { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

  /* A scan of light runs along the visor line. */
  .mark-row::after { content: ""; position: absolute; top: 50.98%; left: 50%; width: 180px; height: 1px; margin-left: -90px; background: linear-gradient(90deg, rgba(111, 211, 255, 0), var(--ice), rgba(111, 211, 255, 0)); animation: scan 7s cubic-bezier(.45, 0, .55, 1) infinite; }
  @keyframes scan { 0% { transform: translateX(-60vw); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(60vw); opacity: 0; } }

  /* Entrance: the line draws out, then the mark, name and text settle in. */
  .js .hero .mark-row::before { animation: draw 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  .js .hero .hero-mark { animation: rise .9s .25s cubic-bezier(.2, .7, .2, 1) both; }
  .js .hero .eyebrow, .js .hero .wordmark, .js .hero .tagline, .js .hero .actions, .js .hero .live { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .js .hero .wordmark { animation-delay: .45s; }
  .js .hero .tagline { animation-delay: .6s; }
  .js .hero .actions { animation-delay: .72s; }
  .js .hero .live { animation-delay: .85s; }
  @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* Sections fade up as they scroll into view (site.js adds .in). */
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .js .reveal.in { opacity: 1; transform: none; }
}