/* ===== Goblin Division — Operator Minimalism / ZERO FLUFF ===== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* ---- Variables ---- */
:root{
  --bg:#0A0A0A;        /* charcoal */
  --fg:#D0D0D0;        /* iron gray */
  --muted:#777777;     /* secondary text */
  --accent:#B3362E;    /* tactical red */
  --grid:8px;
  --logo-size:clamp(72px,18vmin,180px);
  --gap-lg:clamp(12px,3vmin,28px);
  --gap-sm:clamp(6px,1.5vmin,16px);
  --gap-logo: clamp(20px, 6vmin, 56px);   /* space logo → name  */
  --gap-name: clamp(8px,  2.5vmin, 24px); /* space name → tagline */
  --menace: cubic-bezier(.2,0,.1,.9);
}

/* ---- Base / Reset ---- */
*{box-sizing:border-box}
html,body{height:100%}
html{font-size:16px}
body{
  margin:0;
  font-family:Inter,"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---- Centering wrapper (mobile-safe viewport) ---- */
.center{
  display:grid;
  grid-template-rows: 1.1fr auto;   /* slight bias above center */
  justify-items:center;
  align-items:center;
  text-align:center;

  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;

  padding:
    max(calc(var(--grid)*4), env(safe-area-inset-top))
    max(calc(var(--grid)*4), env(safe-area-inset-right))
    max(calc(var(--grid)*4), env(safe-area-inset-bottom))
    max(calc(var(--grid)*4), env(safe-area-inset-left));
}

/* ---- Vertical stack ---- */
.stack{
  display:grid;
  justify-items:center;
  row-gap: var(--gap-name);
  /* remove the old translateY */
}

/* ---- Typography ---- */
h1,h2{margin:0}
.brand-name{
  font-weight:700;
  letter-spacing:0.15em;
  line-height:1.05;
  font-size:clamp(2rem,6vw,4rem);
  text-transform:uppercase;
}
/* tagline now anchored */
.tagline{
  margin: calc(var(--grid)*3 + env(safe-area-inset-bottom)) 0 0;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.35;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
}
.description{
  margin: var(--gap-sm) 0 0;
  color: var(--fg);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.5;
  max-width: 46ch;
}

/* ---- Logo ---- */
.brand-mark{
  height:var(--logo-size);
  width:auto;
  display:block;
  margin-bottom: var(--gap-logo);
}

.social{
  margin-top: var(--gap-sm);
}
.social-link{
  color: var(--fg);
  text-decoration: none;
  letter-spacing: 0.08em;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.social-link:hover,
.social-link:focus-visible{
  color: var(--accent);
  border-color: var(--accent);
}
.tagline .social-link{
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* ---- Selection ---- */
::selection{background:rgba(179,54,46,.35); color:#fff}

/* ---- Optional minimal entrance (no JS) ---- */
@media (prefers-reduced-motion: no-preference){
  /* start states */
  .brand-mark,.brand-name,.tagline{
    opacity:0;
    transform:translateY(4px);
  }

  /* separate animations: quick move + slow fade */
  @keyframes riseMove { to { transform:none; } }
  @keyframes riseFade { to { opacity:1; } }
  @keyframes pulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.008); } /* tiny, ominous */
  }

  /* logo */
  .brand-mark{
    animation:
      riseMove .45s linear .25s forwards,
      riseFade 8s var(--menace) .25s forwards,
      pulse 2s ease-in-out .35s infinite; /* starts after fade finishes */
  }

  /* name */
  .brand-name{
    animation:
      riseMove .45s linear   .40s forwards,
      riseFade 1.8s linear   .40s forwards;
  }

  /* tagline */
  .tagline{
    animation:
      riseMove .45s linear   .55s forwards,
      riseFade 2.0s linear   .55s forwards; /* even slower for the signature line */
  }
}

/* ---- Small screens ---- */
@media (max-width:420px){
  .center{padding:calc(var(--grid)*3)}
}