/* ------------------------------------------------------------------
   schematk. lab — lab.schematk.ca
   The home page's field (public/styles.css): same ground, nebula
   gradients, drift and grain, so the two read as one place. The
   difference is the short list of projects above the wordmark.
   ------------------------------------------------------------------ */

:root {
  /* Ink + paper */
  --ink-void:   #08090B;
  --paper:      #FAF9F5;
  --paper-72:   rgba(250, 249, 245, .72);
  --paper-55:   rgba(250, 249, 245, .55);
  --paper-38:   rgba(250, 249, 245, .38);
  --rule:       rgba(250, 249, 245, .12);

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

  --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);

  /* Pointer position, -1..1 from the centre, set by /pointer.js. */
  --px: 0;
  --py: 0;
}

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

html {
  background: var(--ink-void);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ink-void);
  color: var(--paper);
  font-family: var(--font-sans);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

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

@property --neb-x { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --neb-y { syntax: "<percentage>"; inherits: false; initial-value: 50%; }

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

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

.neb--blue   { translate: calc(var(--px) * 22px)  calc(var(--py) * 14px); }
.neb--ember  { translate: calc(var(--px) * -16px) calc(var(--py) * -10px); }
.neb--silver { translate: calc(var(--px) * 30px)  calc(var(--py) * 20px); }

.neb--blue {
  left: -6%;
  top: -8%;
  width: min(1080px, 104vw);
  height: 82%;
  --neb-x: 44%;
  --neb-y: 48%;
  background: radial-gradient(ellipse at var(--neb-x) var(--neb-y),
    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 34s var(--ease-drift) infinite,
    sk-neb-c1 23s var(--ease-drift) infinite;
}

.neb--ember {
  right: -8%;
  bottom: -10%;
  width: min(1000px, 100vw);
  height: 78%;
  --neb-x: 56%;
  --neb-y: 54%;
  background: radial-gradient(ellipse at var(--neb-x) var(--neb-y),
    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 41s var(--ease-drift) infinite,
    sk-neb-c2 29s var(--ease-drift) infinite;
}

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

.grain {
  position: absolute;
  inset: 0;
  background-image: url("/assets/grain-light.png");
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: .44;
}

/* ---------- Page ----------------------------------------------------- */

/* The home page's stage: an empty field, the wordmark at the foot. The
   only addition is the list, sitting just above it. Grows and scrolls
   if the list ever outgrows the screen. */
.page {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 56px clamp(28px, 5vw, 64px) 40px;
}

main {
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(48px, 9vh, 96px);
}

.projects {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  animation: sk-in 1400ms var(--ease-out) 900ms both;
}

.project {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--paper-72);
  text-decoration: none;
  transition: color 240ms var(--ease-standard);
}

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

/* ---------- Status --------------------------------------------------- */

.status {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.status--live     { background: var(--node); box-shadow: 0 0 10px rgba(194, 96, 58, .7); }
.status--wip      { border: 1.5px solid var(--node); }
.status--private  { background: var(--silver); }
.status--archived { border: 1.5px solid var(--paper-38); }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

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

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand a { display: block; border-radius: 2px; }

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

.tag {
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--paper-55);
  padding-left: 16px;
  border-left: 1px solid var(--rule);
  line-height: 22px;
}

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

.links a {
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--paper-55);
  text-decoration: none;
  white-space: nowrap;
  transition: color 240ms var(--ease-standard);
}

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

a.project:focus-visible,
.links a:focus-visible,
.brand 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: .78; transform: translate3d(0, 0, 0) scale(1);         }
  33%      { opacity: 1;   transform: translate3d(7%, -4.5%, 0) scale(1.12); }
  66%      { opacity: .86; transform: translate3d(-5%, 6%, 0) scale(1.04);   }
}

@keyframes sk-neb2 {
  0%, 100% { opacity: .76; transform: translate3d(0, 0, 0) scale(1.04);     }
  40%      { opacity: 1;   transform: translate3d(-8%, 4%, 0) scale(.98);   }
  70%      { opacity: .86; transform: translate3d(5%, -6%, 0) scale(1.12);  }
}

@keyframes sk-neb3 {
  0%, 100% { opacity: .66; transform: translate3d(0, 0, 0) scale(1);         }
  50%      { opacity: .95; transform: translate3d(6%, 6.5%, 0) scale(1.14);  }
}

@keyframes sk-neb-c1 {
  0%, 100% { --neb-x: 44%; --neb-y: 48%; }
  33%      { --neb-x: 58%; --neb-y: 38%; }
  66%      { --neb-x: 34%; --neb-y: 60%; }
}

@keyframes sk-neb-c2 {
  0%, 100% { --neb-x: 56%; --neb-y: 54%; }
  40%      { --neb-x: 40%; --neb-y: 62%; }
  70%      { --neb-x: 66%; --neb-y: 40%; }
}

@keyframes sk-neb-c3 {
  0%, 100% { --neb-x: 50%; --neb-y: 50%; }
  50%      { --neb-x: 36%; --neb-y: 62%; }
}

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

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

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

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

  .links { gap: 20px; }

  .wordmark { height: 26px; }
}