/* Layout: Figma "Home / Concept (tightened)" (Saluki file, node 78:351), the horizon version. One screen.
   The copy sits in the 1728 x 1117 frame, scaled to fit the window (--u is one Figma pixel) and centred.
   The point-cloud horizon behind it covers the whole window (horizon.js). */
@font-face {
  font-family: "Clash Grotesk";
  src: url("fonts/clash-grotesk-subset.woff") format("woff");
  font-weight: 200 700; font-display: swap;
}
:root {
  color-scheme: dark;
  --ground: #0C1013;
  --cream: #F7F4ED;
  --arrow: #F1BE4A;
  --display: "Clash Grotesk", "Arial Black", system-ui, sans-serif;
  --body: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --u: min(calc(100vw / 1728), calc(100vh / 1117), 1.25px);
}
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--cream); overflow: hidden; }
body { font-family: var(--body); -webkit-font-smoothing: antialiased; display: grid; place-items: center; }

body::before { content: ""; position: fixed; inset: 0; background: url("images/horizon-colour.jpg") 90% 62% / cover no-repeat; pointer-events: none; }
/* Desktop: the picture drawn 7% larger than cover and moved 3% right and 4% down, kept inside the window's edges,
   matching DESKTOP_ZOOM and DESKTOP_SHIFT in horizon.js so the points land on it when they fade in. */
@media (min-width: 901px) {
  body::before {
    --bg-w: max(107vw, calc(107vh * 900 / 582));
    --bg-h: calc(var(--bg-w) * 582 / 900);
    background-size: var(--bg-w) var(--bg-h);
    background-position:
      clamp(calc(100vw - var(--bg-w)), calc((100vw - var(--bg-w)) * 0.9 + var(--bg-w) * 0.03), 0px)
      clamp(calc(100vh - var(--bg-h)), calc((100vh - var(--bg-h)) * 0.62 + var(--bg-h) * 0.04), 0px);
  }
}
/* The picture is the fallback: hidden while the point cloud is expected (the inline script in index.html), shown if it fails. */
body::before { transition: opacity 600ms ease; }
.horizon body::before { opacity: 0; }
#stage.ready { opacity: 1; }
#stage { opacity: 0; transition: opacity 900ms ease; position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  body::before, #stage { transition: none; }
}

.hero { position: relative; z-index: 1; width: calc(1728 * var(--u)); height: calc(1117 * var(--u)); }
.intro, .contact { position: absolute; left: calc(96 * var(--u)); width: calc(1536 * var(--u)); display: flex; flex-direction: column; }
.intro { top: calc(242 * var(--u)); gap: calc(48 * var(--u)); }
.contact { bottom: calc(241 * var(--u)); gap: calc(16 * var(--u)); }

/* Wordmark: "Saluki" in a bronze to gold gradient with SOFTWARE at about half the size underneath.
   The margins trim the line boxes to the ink (Clash: ascent 0.89, descent 0.25, gap 0.09, cap 0.67),
   so the block runs from the top of "Saluki" to the baseline of SOFTWARE, 202px in the frame. */
.wordmark { margin: 0; font-family: var(--display); font-weight: 700; font-size: calc(192 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; }
.wordmark span { display: block; line-height: 1; }
.wordmark span:first-child {
  margin-top: -0.138em; color: #D9A12A;
  --light-far: #8B6E2B; --light-mid: #BE8F25; --light-near: #F6B41E;
}
.wordmark span:last-child { font-size: 0.5208em; text-transform: uppercase; margin-top: -0.455em; margin-bottom: -0.18em; }
.tagline {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: calc(48 * var(--u)); line-height: 1.05; letter-spacing: -0.005em;
}

.email {
  display: inline-flex; align-items: center; gap: calc(16 * var(--u)); align-self: flex-start;
  font-family: var(--display); font-weight: 700; font-size: calc(64 * var(--u)); line-height: 1.125; letter-spacing: -0.01em;
  color: var(--cream); text-decoration: none; border-radius: 4px;
}
.email .at { font-size: 0.75em; }
.email .arrow { font-family: var(--body); font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--arrow); transition: transform 0.25s ease;
  --light-far: var(--arrow); --light-mid: var(--arrow); --light-near: var(--arrow); }

/* Lit by the band: horizon.js sets --light-* so the gradient and glow follow the point cloud's light.
   The defaults (Figma's colours, no glow) show if the script doesn't run. */
.wordmark span:first-child, .email .arrow {
  background: linear-gradient(var(--light-angle, 130deg), var(--light-far), var(--light-mid), var(--light-near));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0.12em var(--light-glow, transparent));
}
.email:hover .arrow, .email:focus-visible .arrow { transform: translateX(6px); }
.email:focus-visible { outline: 2px solid var(--arrow); outline-offset: 6px; }
.pitch { margin: 0; font-size: max(15px, calc(20 * var(--u))); line-height: 1.5; }
.legal { margin: calc(56 * var(--u)) 0 0; font-size: max(11px, calc(14 * var(--u))); line-height: 1.45; }

/* Phones and narrow tablets: no phone frame for this design yet, so the copy stacks in the column,
   brand at the top and contact at the bottom, with the horizon behind (cropped to the clouds, lower right). */
@media (max-width: 900px) {
  html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
  body { display: block; }
  .hero {
    box-sizing: border-box; width: 100%; height: auto; min-height: 100svh;
    padding: max(32px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
    display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  }
  .intro, .contact { position: static; width: auto; }
  .intro { gap: 16px; }
  /* "Saluki" is about 2.8em wide. */
  .wordmark { font-size: min(150px, calc((100vw - 40px) / 2.8)); }
  .tagline { font-size: clamp(22px, 7vw, 32px); }
  .email { font-size: clamp(28px, 10vw, 44px); gap: 10px; }
  .pitch { font-size: 15px; }
  .legal { margin-top: 16px; font-size: 12px; }
  /* The horizon runs behind the copy here, so a fade in the ground colour sits between them at the top and bottom
     (the band stays clear in the middle), and the smaller text gets a soft shadow in the same colour.
     The arrow is left out: a shadow would paint over its gradient. */
  .hero { z-index: 2; }
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom,
      rgb(12 16 19 / 0.75) 0%, rgb(12 16 19 / 0.4) 26%, rgb(12 16 19 / 0) 40%,
      rgb(12 16 19 / 0) 52%, rgb(12 16 19 / 0.65) 70%, rgb(12 16 19 / 0.9) 100%);
  }
  .tagline, .email > span:first-child, .pitch, .legal { text-shadow: 0 0 3px rgb(12 16 19 / 0.9), 0 0 12px rgb(12 16 19 / 0.9); }
}

/* One brief entrance; CSS keeps it independent of WebGL and JavaScript loading.
   Backwards fill applies only during the stagger, leaving no persistent transform afterwards. */
@keyframes text-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .wordmark, .tagline, .contact {
    animation: text-enter 560ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  .tagline { animation-delay: 120ms; }
  .contact { animation-delay: 240ms; }
  /* Keyboard users can reach the email immediately, including during its entrance. */
  .contact:focus-within { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .email .arrow { transition: none; }
  .email:hover .arrow, .email:focus-visible .arrow { transform: none; }
}