/* Steady Hand Labs: coming soon. Our own code, no frameworks. */

@font-face {
  font-family: "Michroma";
  src: url("../fonts/Michroma-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --space-black: #0b0e12;
  --ink: #050709;          /* the black inside the mark artwork */
  --slate: #1a1f27;
  --steel: #3a434f;
  --stone: #d7dce2;
  --stone-dim: #8f98a3;    /* 6.6:1 on space black */
  --amber: #f4a259;
  --glow: #ffb980;

  --display: "Michroma", "Eurostile", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* hero mark sizing: fits width and leaves room for the text below */
  --stage-w: min(94vw, 1000px, calc((100svh - 15rem) * 1.475));
}

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

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--space-black);
  color: var(--stone);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Darker core behind the mark so the artwork's own black melts into the page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 38%, var(--ink) 0%, rgba(5, 7, 9, 0.6) 45%, transparent 75%);
}

/* ---------- cursor spotlight ---------- */
.spot {
  --x: 50vw;
  --y: 38vh;
  --r: 340px;
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  contain: strict;
}
.spot__grid,
.spot__glow {
  position: absolute;
  inset: 0;
}
.spot__grid {
  /* dots + a fine amber hairline grid, invisible outside the light */
  background-image:
    radial-gradient(circle at center, rgba(215, 220, 226, 0.7) 0 1px, transparent 1.6px),
    linear-gradient(to right, rgba(244, 162, 89, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244, 162, 89, 0.16) 1px, transparent 1px);
  background-size: 24px 24px, 96px 96px, 96px 96px;
  background-position: 12px 12px, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, rgba(0, 0, 0, 0.45) 38%, transparent 100%);
          mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, rgba(0, 0, 0, 0.45) 38%, transparent 100%);
  opacity: 0.85;
}
.spot__glow {
  background: radial-gradient(circle calc(var(--r) * 1.15) at var(--x) var(--y),
    rgba(244, 162, 89, 0.2) 0%, rgba(244, 162, 89, 0.07) 35%, transparent 70%);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  z-index: 2;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vh, 3.5rem) 16px 1rem;
  text-align: center;
  overflow-x: clip;
}

.stage {
  position: relative;
  width: var(--stage-w);
  aspect-ratio: 1254 / 850;
  animation: rise 1.8s cubic-bezier(.2, .7, .1, 1) both;
}
.stage__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
}

/* breathing amber light on the orb (orb centre measured at 57.18% / 30.65%) */
.orb-glow {
  position: absolute;
  left: 57.18%;
  top: 30.65%;
  width: 34%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 185, 128, 0.42) 0%, rgba(244, 162, 89, 0.18) 22%, rgba(244, 162, 89, 0.05) 45%, transparent 68%);
  mix-blend-mode: screen;
  animation: breathe 5.6s ease-in-out infinite;
}

.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.particles i {
  position: absolute;
  left: var(--px);
  top: var(--py);
  width: var(--ps);
  height: var(--ps);
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 6px 1px rgba(244, 162, 89, 0.7);
  opacity: 0;
  animation: drift var(--pd) linear var(--pdl) infinite;
}

/* full-bleed video background, only revealed once orb-loop.mp4 is actually playing */
.hero-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
  pointer-events: none;
}
.has-video .hero-video { opacity: 1; }
.has-video .stage__img,
.has-video .frame { visibility: hidden; }

/* ---------- type ---------- */
.wordmark {
  margin: calc(var(--stage-w) * -0.055) 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(0.92rem, 4.1vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: 0.32em;
  /* optical centring: tracking adds space after the last glyph */
  padding-left: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: fade 1.6s ease 0.5s both;
}
.wordmark .stone { color: var(--stone); }
.wordmark .amber { color: var(--amber); text-shadow: 0 0 18px rgba(244, 162, 89, 0.35); }

.tagline {
  margin: clamp(1rem, 2.6vh, 1.6rem) 0 0;
  font-family: var(--display);
  font-size: clamp(0.78rem, 2.6vw, 1rem);
  letter-spacing: 0.24em;
  padding-left: 0.24em;
  color: var(--stone);
  animation: fade 1.6s ease 0.9s both;
}
.place {
  margin: 0.85rem 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  padding-left: 0.28em;
  text-transform: uppercase;
  color: var(--stone-dim);
  animation: fade 1.6s ease 1.2s both;
}

/* ---------- footer ---------- */
.foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 16px max(1.5rem, env(safe-area-inset-bottom));
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--stone-dim);
  animation: fade 1.6s ease 1.4s both;
}
.foot p { margin: 0; }
.foot .fine { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; }

a {
  color: var(--stone);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 162, 89, 0.45);
  padding: 0.35em 0.1em 0.15em;
  transition: color 0.25s ease, border-color 0.25s ease;
}
a:hover { color: var(--glow); border-bottom-color: var(--amber); }
a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
  border-radius: 2px;
  color: var(--glow);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- 404 ---------- */
.lost .stage { --stage-w: min(80vw, 520px, calc((100svh - 17rem) * 1.475)); }
.code {
  margin: 1.4rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  padding-left: 0.4em;
  color: var(--amber);
}
.lost h1 {
  margin: 0.8rem 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1rem, 4vw, 1.6rem);
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  text-transform: uppercase;
}
.lost .tagline { color: var(--stone-dim); font-size: clamp(0.72rem, 2.4vw, 0.85rem); letter-spacing: 0.12em; }
.lost .home { margin-top: 1.6rem; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.12em; }

/* ---------- home page: zoomed mark, drift, rotating dim spotlights ---------- */
.home::before { background: radial-gradient(ellipse 70% 60% at 50% 40%, var(--ink) 0%, rgba(5, 7, 9, 0.6) 50%, transparent 80%); }

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  animation: fade 1.8s ease both;
}
/* the frame is the cropped mark (3:2). Taller than the viewport on desktop so it bleeds. */
.frame {
  --fw: 160svh;
  position: absolute;
  left: 50%;
  top: 49svh;
  width: var(--fw);
  aspect-ratio: 3 / 2;
  translate: -50% -50%;
  transform-origin: 60% 22%;
  animation: push 40s ease-in-out infinite alternate;
  will-change: transform;
}
.frame picture, .frame__img { display: block; width: 100%; height: 100%; }
.frame__img {
  /* fade only the outermost edge so the artwork's black melts into the page */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-composite: intersect;
}
.frame .orb-glow { left: 59.8%; top: 17.4%; width: 40%; }
.frame .particles { z-index: 3; }

/* dim stage lights: one composited layer each, only rotate. overlay lifts the metal, leaves the black alone. */
.beam {
  --a: rgba(255, 246, 232, 1);
  position: absolute;
  left: var(--bx);
  top: var(--by);
  width: 150%;
  aspect-ratio: 1;
  translate: -50% -50%;
  rotate: var(--r0, 0deg);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: var(--bo, 0.5);
  background: conic-gradient(from -16deg,
    transparent 0deg, rgba(0,0,0,0) 0deg,
    color-mix(in srgb, var(--a) 6%, transparent) 4deg,
    color-mix(in srgb, var(--a) 25%, transparent) 8deg,
    color-mix(in srgb, var(--a) 60%, transparent) 12deg,
    var(--a) 16deg,
    color-mix(in srgb, var(--a) 60%, transparent) 20deg,
    color-mix(in srgb, var(--a) 25%, transparent) 24deg,
    color-mix(in srgb, var(--a) 6%, transparent) 28deg,
    transparent 32deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, #000 30%, transparent 98%);
          mask-image: radial-gradient(circle closest-side, #000 0%, #000 30%, transparent 98%);
  will-change: transform;
}
.beam--a { --bx: -6%;  --by: -14%; --r0: 118deg; --bo: 0.5; animation: spin 47s linear infinite; }
.beam--b { --bx: 106%; --by: 108%; --r0: -62deg; --bo: 0.4; --a: rgba(255, 176, 100, 1); animation: spin 71s linear infinite reverse; }
.beam--c { --bx: 48%;  --by: 124%; --r0: 0deg;   --bo: 0.45; animation: sway 89s ease-in-out infinite alternate; }

/* soft dark gradient behind the wordmark, tagline and email */
.scrim {
  position: fixed;
  inset: auto 0 0 0;
  height: 52svh;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5, 7, 9, 0.94) 0%, rgba(5, 7, 9, 0.8) 35%, rgba(5, 7, 9, 0.35) 70%, transparent 100%);
}

.home .hero {
  justify-content: flex-end;
  padding-top: 0;
  padding-bottom: clamp(0.5rem, 2vh, 1.5rem);
}
.home .wordmark { margin-top: 0; text-shadow: 0 2px 24px rgba(5, 7, 9, 0.9); }
.home .tagline { text-shadow: 0 2px 18px rgba(5, 7, 9, 0.9); }

@keyframes push { from { scale: 1; } to { scale: 1.06; } }
@keyframes spin { from { rotate: var(--r0); } to { rotate: calc(var(--r0) + 360deg); } }
@keyframes sway { from { rotate: -48deg; } to { rotate: 48deg; } }

@media (max-width: 700px) {
  .frame { --fw: 190vw; top: 37svh; left: 44%; transform-origin: 60% 22%; }
  .scrim { height: 46svh; }
  .beam { width: 190%; }
}

/* ---------- motion ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.86); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
@keyframes drift {
  0%   { opacity: 0; transform: translate(0, 0); }
  15%  { opacity: var(--po); }
  85%  { opacity: calc(var(--po) * 0.6); }
  100% { opacity: 0; transform: translate(var(--pdx), var(--pdy)); }
}

@media (max-width: 600px) {
  /* the artwork's edges are pure black, so let it run past the gutters on phones */
  :root { --stage-w: min(128vw, 1000px, calc((100svh - 15rem) * 1.475)); }
}
@media (max-width: 480px) {
  .wordmark { letter-spacing: 0.22em; padding-left: 0.22em; font-size: clamp(0.85rem, 4.6vw, 1.2rem); }
  .spot { --r: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
  .orb-glow { opacity: 0.8; transform: none; }
  .particles { display: none; }
  .frame, .beam, .scene { animation: none !important; }
  .beam--a { --r0: 128deg; --bo: 0.7; }
  .beam--b { --r0: -58deg; --bo: 0.55; }
  .beam--c { rotate: 12deg; --bo: 0.6; }
}

/* ---------- minimal page: a small glowing mark and the name, bottom centre ---------- */
.home .spot__glow { opacity: 0.45; }
.sign {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 0 16px max(2.2rem, calc(env(safe-area-inset-bottom) + 1.4rem));
  text-align: center;
  animation: fade 2.4s ease 0.3s both;
}
.sign__mark { position: relative; height: 72px; display: grid; place-items: center; }
.sign__img {
  position: relative;
  display: block;
  height: 72px;
  width: auto;
  mix-blend-mode: screen;   /* the artwork's black drops out against the page */
  -webkit-mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 78%, transparent 100%);
  animation: flicker 9s linear infinite;
}
.sign__halo {
  position: absolute;
  left: 60%; top: 24%;
  width: 150%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 176, 100, 0.34) 0%, rgba(244, 162, 89, 0.12) 30%, transparent 62%);
  animation: halo 6.5s ease-in-out infinite;
}
.sign__name {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.36em;
  padding-left: 0.36em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--stone);
}
.sign__name .amber { color: var(--amber); text-shadow: 0 0 10px rgba(244, 162, 89, 0.35); }

/* candle-like flicker: smooth, small, at most ~3 changes a second, never a strobe */
@keyframes flicker {
  0%, 100% { opacity: 0.82; }
  6%  { opacity: 0.66; }
  11% { opacity: 0.9; }
  19% { opacity: 0.74; }
  24% { opacity: 0.95; }
  33% { opacity: 0.8; }
  38% { opacity: 0.6; }
  44% { opacity: 0.78; }
  53% { opacity: 0.92; }
  58% { opacity: 0.72; }
  67% { opacity: 0.86; }
  72% { opacity: 0.64; }
  80% { opacity: 0.9; }
  88% { opacity: 0.76; }
}
@keyframes halo {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
@media (max-width: 480px) {
  .sign__mark, .sign__img { height: 48px; }
  .sign__name { font-size: 11px; letter-spacing: 0.3em; padding-left: 0.3em; }
}
@media (prefers-reduced-motion: reduce) {
  .sign__img { animation: none !important; opacity: 0.85; }
  .sign__halo { animation: none !important; opacity: 0.8; }
}

/* ---------- stacked name: the initials line up as S / H / L ---------- */
.sign__name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5em;
  padding-left: 0;
  line-height: 1;
  color: var(--stone);
}
.sign__name .ln { display: block; letter-spacing: 0.36em; }
.sign__name b {
  font-weight: 400;
  color: var(--amber);
  text-shadow: 0 0 10px rgba(244, 162, 89, 0.45);
  margin-right: 0.08em;
}

/* equal-width lines: every line is the same width, letters spread edge to edge */
.sign__name { align-items: stretch; width: 7.6em; gap: 0.55em; letter-spacing: 0; }
.sign__name .ln { display: flex; justify-content: space-between; letter-spacing: 0; }
.sign__name b, .sign__name i { font-style: normal; margin: 0; }
/* Kevin: middle line squished 10% in height */
.sign__name .ln:nth-child(2) { transform: scaleY(0.9); }
/* Kevin round 3: tighter lines; HAND and LABS share one 4-column grid so
   H/L, A/A, N/B, D/S sit in the same columns; middle letters slightly narrower */
.sign__name { gap: 0.28em; }
.sign__name .ln:nth-child(2),
.sign__name .ln:nth-child(3) {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.sign__name .ln:nth-child(2) > :nth-child(2),
.sign__name .ln:nth-child(2) > :nth-child(3),
.sign__name .ln:nth-child(3) > :nth-child(2),
.sign__name .ln:nth-child(3) > :nth-child(3) { justify-self: center; }
.sign__name .ln:nth-child(2) > :first-child,
.sign__name .ln:nth-child(3) > :first-child { justify-self: start; }
.sign__name .ln:nth-child(2) > :last-child,
.sign__name .ln:nth-child(3) > :last-child { justify-self: end; }
.sign__name .ln:nth-child(2) { transform: none; }
.sign__name .ln:nth-child(2) > * { display: inline-block; transform: scale(0.94, 0.9); }
.sign__name .ln:nth-child(2) > :first-child { transform-origin: left center; }
.sign__name .ln:nth-child(2) > :last-child { transform-origin: right center; }


/* ---------- accessibility: pause animation (WCAG 2.2.2) ---------- */
.sign__pause {
  position: absolute;
  right: -26px; bottom: -4px;
  width: 20px; height: 20px;
  padding: 0; margin: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0.22;
  transition: opacity 0.25s ease;
}
.sign__pause::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: 8px; height: 9px;
  border-left: 2px solid var(--amber);
  border-right: 2px solid var(--amber);
}
.sign__pause[aria-pressed="true"]::before {
  width: 0; height: 0;
  border-right: 0;
  border-left: 8px solid var(--amber);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  translate: -35% -50%;
}
.sign__pause:hover, .sign__pause:focus-visible { opacity: 0.9; }
.sign__pause:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.paused-anim *, .paused-anim *::before, .paused-anim *::after { animation-play-state: paused !important; }
@media (max-width: 480px) { .sign__pause { right: -26px; } }