/* ============================================================
   WARWAKE — warwakegame.com
   Palette: cold hull steel, signal orange, deck sand.
   ============================================================ */

:root{
  --bg:        #080D11;
  --bg-2:      #0D151B;
  --panel:     #101B22;
  --line:      #1D2C36;
  --line-soft: #16232C;

  --ink:       #E8EFF4;
  --ink-2:     #A9BCC8;
  --muted:     #6F8593;

  --accent:    #FF6A13;   /* signal orange */
  --rust:      #A8412A;
  --sand:      #CBB994;   /* deck */
  --sea:       #2C4E5E;

  --f-disp: "Saira Condensed", "Arial Narrow", sans-serif;
  --f-body: "Archivo", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 56px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
  /* depth: cold horizon glow at top, hull black below */
  background-image:
    radial-gradient(120% 70% at 50% -10%, #16303E 0%, rgba(22,48,62,0) 62%),
    linear-gradient(180deg, #0A1319 0%, #080D11 40%);
  background-attachment:fixed;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* film grain — keeps flat dark from looking like a default template */
.grain{
  position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.16;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* ─────────────── top bar ─────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:24px;
  padding:14px var(--pad);
  background:rgba(8,13,17,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand__mark{
  width:12px; height:12px; flex:none;
  background:var(--accent);
  clip-path:polygon(50% 0,100% 100%,0 100%);   /* bow triangle */
}
.brand__word{
  font-family:var(--f-disp); font-weight:800; font-size:20px;
  letter-spacing:.16em; line-height:1;
}
.topnav{ display:flex; gap:26px; margin-left:auto; }
.topnav a{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2); text-decoration:none;
  padding-bottom:2px; border-bottom:1px solid transparent; transition:.18s;
}
.topnav a:hover{ color:var(--ink); border-bottom-color:var(--accent); }
.topbar__cta{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.06em;
  text-decoration:none; color:var(--bg); background:var(--accent);
  padding:8px 14px; white-space:nowrap; transition:.18s;
}
.topbar__cta:hover{ background:#ff8038; }
@media (max-width:860px){
  .topnav{ display:none; }
  .topbar__cta{ margin-left:auto; }
}

/* ─────────────── hero ─────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) clamp(56px,9vh,110px);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:52% 58%;
  filter:saturate(.95) contrast(1.04) brightness(1.02);
  transform:scale(1.08);
  animation:driftIn 2.6s cubic-bezier(.16,.8,.24,1) forwards;
}
@keyframes driftIn{ to{ transform:scale(1); } }

.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(8,13,17,.80) 0%, rgba(8,13,17,.05) 32%, rgba(8,13,17,.62) 74%, #080D11 100%),
    linear-gradient(90deg, rgba(8,13,17,.74) 0%, rgba(8,13,17,.10) 52%, rgba(8,13,17,0) 78%);
}

.hero__body{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin-inline:auto;
}

.tag{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2);
  display:flex; align-items:center; gap:10px; margin:0 0 18px;
  opacity:0; animation:up .8s .5s cubic-bezier(.16,.8,.24,1) forwards;
}
.tag__dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(255,106,19,.6); animation:ping 2.4s infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(255,106,19,.55); }
  70%{ box-shadow:0 0 0 11px rgba(255,106,19,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,106,19,0); }
}

.hero__title{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(74px, 17vw, 230px);
  line-height:.82; letter-spacing:-.015em; margin:0 0 22px;
  display:flex; flex-wrap:wrap;
}
.hero__title .line{
  display:block; opacity:0;
  animation:up 1s cubic-bezier(.16,.8,.24,1) forwards;
}
.hero__title .line:nth-child(1){ animation-delay:.15s; }
.hero__title .line:nth-child(2){ animation-delay:.32s; color:var(--accent); }

@keyframes up{
  from{ opacity:0; transform:translateY(28px); }
  to  { opacity:1; transform:none; }
}

.hero__sub{
  max-width:56ch; font-size:clamp(17px,2vw,21px); color:var(--ink-2);
  margin:0 0 34px; opacity:0;
  animation:up .9s .62s cubic-bezier(.16,.8,.24,1) forwards;
}
.hero__sub em{ color:var(--sand); font-style:normal; }

.cta-row{
  display:flex; flex-wrap:wrap; gap:12px; opacity:0;
  animation:up .9s .78s cubic-bezier(.16,.8,.24,1) forwards;
}

.btn{
  font-family:var(--f-mono); font-size:13.5px; letter-spacing:.05em;
  text-decoration:none; padding:14px 22px;
  border:1px solid var(--line); color:var(--ink);
  background:rgba(13,21,27,.72); backdrop-filter:blur(6px);
  display:inline-flex; align-items:center; gap:10px; transition:.2s;
}
.btn:hover{ border-color:var(--ink-2); background:rgba(29,44,54,.8); }
.btn--primary{
  background:var(--accent); color:#150800; border-color:var(--accent); font-weight:500;
}
.btn--primary:hover{ background:#ff8038; border-color:#ff8038; }
.btn__arrow{ transition:transform .2s; }
.btn--primary:hover .btn__arrow{ transform:translateX(4px); }
.btn--ghost{ color:var(--muted); border-style:dashed; cursor:default; }
.btn--ghost:hover{ border-color:var(--line); background:rgba(13,21,27,.72); }

.hero__rule{
  position:absolute; left:var(--pad); bottom:0; z-index:2;
  display:flex; align-items:center; gap:12px;
}
.hero__rule-label{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.28em; color:var(--muted);
  writing-mode:vertical-rl; padding-bottom:14px;
}
@media (max-width:760px){ .hero__rule{ display:none; } }

/* ─────────────── sections ─────────────── */
.section{ padding:clamp(78px,11vw,150px) 0; position:relative; }
.section--panel{
  background:var(--panel);
  border-block:1px solid var(--line-soft);
  /* faint chart grid for depth */
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:96px 96px, 96px 96px;
}

.eyebrow{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin:0 0 16px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::after{ content:""; height:1px; flex:1; max-width:120px; background:var(--line); }

.h2{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(34px,5.4vw,64px); line-height:1.02;
  letter-spacing:-.01em; margin:0 0 28px; max-width:19ch;
}

.lede{ color:var(--ink-2); max-width:60ch; font-size:17.5px; margin:0 0 18px; }
.lede--wide{ max-width:70ch; margin-bottom:52px; }

.link-arrow{
  font-family:var(--f-mono); font-size:13.5px; letter-spacing:.05em;
  color:var(--accent); text-decoration:none; display:inline-flex; gap:8px;
  border-bottom:1px solid rgba(255,106,19,.35); padding-bottom:3px; margin-top:8px;
}
.link-arrow:hover{ border-bottom-color:var(--accent); }

/* ─────────────── pillars ─────────────── */
.pillars{
  list-style:none; margin:52px 0 0; padding:0;
  display:grid; gap:1px; background:var(--line-soft);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  border:1px solid var(--line-soft);
}
.pillar{ background:var(--bg-2); padding:36px 30px 40px; position:relative; }
.pillar::before{
  content:""; position:absolute; top:0; left:0; width:0; height:2px;
  background:var(--accent); transition:width .5s cubic-bezier(.16,.8,.24,1);
}
.pillar:hover::before{ width:100%; }
.pillar__num{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.16em;
  color:var(--accent); display:block; margin-bottom:20px;
}
.pillar__title{
  font-family:var(--f-disp); font-weight:700; font-size:26px; line-height:1.12;
  margin:0 0 14px; letter-spacing:.005em;
}
.pillar__body{ color:var(--ink-2); font-size:16px; margin:0; }

/* ─────────────── status ─────────────── */
.status{
  display:grid; gap:clamp(40px,6vw,80px);
  grid-template-columns:1.25fr .75fr; align-items:start;
}
@media (max-width:880px){ .status{ grid-template-columns:1fr; } }

.spec{
  margin:0; border:1px solid var(--line);
  background:rgba(8,13,17,.6); backdrop-filter:blur(2px);
}
.spec__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:14px 18px; border-bottom:1px solid var(--line-soft);
}
.spec__row:last-child{ border-bottom:0; }
.spec dt{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.spec dd{ margin:0; font-family:var(--f-mono); font-size:13.5px; color:var(--ink); text-align:right; }
.spec__row--live dd{ color:var(--accent); }
.spec__row--live dd::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-right:8px; vertical-align:middle;
  animation:ping 2.4s infinite;
}

/* ─────────────── gallery ─────────────── */
.shot{ margin:0 0 22px; border:1px solid var(--line-soft); background:var(--bg-2); }
.shot img{ width:100%; }
.shot figcaption{
  font-family:var(--f-mono); font-size:12.5px; color:var(--muted);
  padding:13px 16px; border-top:1px solid var(--line-soft);
  display:flex; gap:12px; align-items:baseline;
}
.shot__k{ color:var(--accent); flex:none; }
.shot--wide{ margin-bottom:22px; }

.shot-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
.shot-grid .shot{ margin:0; }

/* ─────────────── cards ─────────────── */
.cards{
  display:grid; gap:22px; margin-top:52px;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
}
.card{
  position:relative; display:block; text-decoration:none;
  background:var(--bg-2); border:1px solid var(--line);
  padding:30px 28px 56px; transition:.22s;
}
.card:hover{ border-color:var(--accent); transform:translateY(-3px); }
.card__k{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:16px;
}
.card__title{
  font-family:var(--f-disp); font-weight:700; font-size:28px; margin:0 0 12px; line-height:1.1;
}
.card__body{ color:var(--ink-2); font-size:15.5px; margin:0; }
.card__go{
  position:absolute; left:28px; bottom:24px;
  font-family:var(--f-mono); color:var(--accent); font-size:18px; transition:transform .2s;
}
.card:hover .card__go{ transform:translateX(5px); }
.card--dim{ opacity:.62; }
.card--dim:hover{ border-color:var(--line); transform:none; }
.card__go--off{ color:var(--muted); }

/* ─────────────── footer ─────────────── */
.foot{ border-top:1px solid var(--line-soft); padding:56px 0 34px; }
.foot__in{
  display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:flex-start;
}
.foot__word{
  font-family:var(--f-disp); font-weight:800; font-size:30px; letter-spacing:.16em; margin:0 0 8px;
}
.foot__note{ color:var(--muted); font-size:14.5px; margin:0; max-width:42ch; }
.foot__links{ display:flex; flex-direction:column; gap:9px; }
.foot__links a{
  font-family:var(--f-mono); font-size:13px; color:var(--ink-2); text-decoration:none;
}
.foot__links a:hover{ color:var(--accent); }
.foot__fine{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  margin-top:44px; padding-top:20px; border-top:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:11.5px; color:var(--muted);
}

/* ─────────────── reveal ─────────────── */
[data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1);
}
[data-reveal].in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .hero__media img{ transform:none; }
  html{ scroll-behavior:auto; }
}

/* second heading block inside a section (gallery: in-engine -> renders) */
.eyebrow--gap{ margin-top:clamp(72px,9vw,120px); }
.lede strong{ color:var(--sand); font-weight:500; }