/* ------------------------------------------------------------------
   schematk. — landing page
   Ported from the schematk. Design System, templates/homepage/Homepage.dc.html
   ("Near-empty landing page: a dark grained field, nebula gradients,
    a few sphere stars, the wordmark.")

   Deviation from source: the original template drove the gradient layers
   from the pointer via --sk-mx / --sk-my and a mousemove + rAF loop.
   That behaviour is intentionally omitted. The ambient drift below is
   the template's own sk-neb / sk-neb2 / sk-neb3 animation, unchanged.
   ------------------------------------------------------------------ */

:root {
  /* Ink + paper */
  --ink-void:   #08090B;   /* page ground, from the template */
  --paper:      #FAF9F5;

  /* Accents */
  --accent:     #26394B;   /* slate blue */
  --node:       #C2603A;   /* ember — the point */

  --font-sans:  "Instrument Sans", -apple-system, "Helvetica Neue", sans-serif;

  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-drift:    cubic-bezier(.45, 0, .55, 1);
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink-void);
  overflow: hidden;
}

/* ---------- Stage -------------------------------------------------- */

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 56px clamp(28px, 5vw, 64px) 40px;
  overflow: hidden;
  background: var(--ink-void);
  color: var(--paper);
  font-family: var(--font-sans);
  /* dvh keeps the footer off the mobile URL bar; vh is the fallback. */
  height: 100vh;
  height: 100dvh;
}

/* ---------- Ambient field ------------------------------------------ */

.field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: sk-in 2800ms var(--ease-out) both;
}

.neb {
  position: absolute;
  will-change: transform, opacity;
}

.neb--blue {
  left: -6%;
  top: -8%;
  width: min(1080px, 104vw);
  height: 82%;
  background: radial-gradient(ellipse at 44% 48%,
    rgba(74, 110, 142, .60) 0%,
    rgba(66,  98, 126, .25) 42%,
    rgba(61,  90, 115, .06) 66%,
    rgba(61,  90, 115, 0)   80%);
  filter: blur(64px);
  animation: sk-neb 74s var(--ease-drift) infinite;
}

.neb--ember {
  right: -8%;
  bottom: -10%;
  width: min(1000px, 100vw);
  height: 78%;
  background: radial-gradient(ellipse at 56% 54%,
    rgba(194, 96, 58, .41) 0%,
    rgba(178, 88, 54, .16) 42%,
    rgba(194, 96, 58, .05) 66%,
    rgba(194, 96, 58, 0)   80%);
  filter: blur(66px);
  animation: sk-neb2 98s var(--ease-drift) infinite;
}

.neb--silver {
  left: 24%;
  top: 22%;
  width: min(720px, 74vw);
  height: 58%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(132, 146, 156, .27)  0%,
    rgba(132, 146, 156, .095) 46%,
    rgba(120, 132, 140, 0)    76%);
  filter: blur(58px);
  animation: sk-neb3 124s var(--ease-drift) infinite;
}

/* Grain. The design system reserves grain for objects, not pages — this
   template is the deliberate exception: the field itself is the object. */
.grain {
  position: absolute;
  inset: 0;
  background-image: url("/assets/grain-light.png");
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: .44;
}

/* ---------- Footer -------------------------------------------------- */

.foot {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  animation: sk-in 900ms var(--ease-out) 600ms both;
}

.wordmark {
  height: 34px;
  width: auto;
  display: block;
}

.links {
  display: flex;
  align-items: baseline;
  gap: 28px;
}

.links a {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(250, 249, 245, .55);
  text-decoration: none;
  border: 0;
  white-space: nowrap;
  transition: color 240ms var(--ease-standard);
}

.links a:hover,
.links a:focus-visible {
  color: var(--paper);
}

.links a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- Motion --------------------------------------------------- */

@keyframes sk-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes sk-neb {
  0%, 100% { opacity: .80; transform: translate3d(0, 0, 0) scale(1);       }
  33%      { opacity: .94; transform: translate3d(2.2%, -1.4%, 0) scale(1.05); }
  66%      { opacity: .86; transform: translate3d(-1.6%, 1.8%, 0) scale(1.02); }
}

@keyframes sk-neb2 {
  0%, 100% { opacity: .78; transform: translate3d(0, 0, 0) scale(1.02);        }
  40%      { opacity: .92; transform: translate3d(-2.4%, 1.2%, 0) scale(1);     }
  70%      { opacity: .84; transform: translate3d(1.4%, -1.8%, 0) scale(1.05);  }
}

@keyframes sk-neb3 {
  0%, 100% { opacity: .70; transform: translate3d(0, 0, 0) scale(1);        }
  50%      { opacity: .90; transform: translate3d(1.8%, 2%, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Small screens -------------------------------------------- */

@media (max-width: 560px) {
  .stage { padding: 40px 24px 32px; }

  .foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .links { gap: 20px; }

  .wordmark { height: 26px; }
}