/* Hero layout. One block per variant, chosen by data-hero on <html>; changing
   that attribute is the whole switch. The unitless --hero-* numbers are the
   scene's layout constants, read by /script.js at startup: camera in world
   units and degrees, sizes in world units, and name and knot positions as
   fractions of the visible frame (-0.5 is the left or bottom edge, 0 the
   centre). The HTML name is placed from the same numbers, so it sits exactly
   where the 3D name renders. */

/* ---------- symmetric: the original hero, frozen ---------- */

:root[data-hero="symmetric"] {
  --hero-fov: 75;
  --hero-cam-x: 0;
  --hero-cam-y: 0;
  --hero-cam-z: 5;
  --hero-look-x: 0;
  --hero-look-y: 0;
  --hero-look-z: 0;
  /* phones pull the camera back as the screen narrows:
     distance = clamp(cam-z, cam-z-narrow / max(aspect, aspect-floor), cam-z-max) */
  --hero-cam-z-narrow: 4;
  --hero-cam-z-max: 10.5;
  --hero-aspect-floor: 0.4;
  --hero-name-x: 0;
  --hero-name-y: 0;
  --hero-name-z: 0;
  /* 1.5 when the name was JetBrains Mono; Lexend runs wider, so 1.35 keeps
     the name at its old width (Kian, 30 Sep 2026) */
  --hero-name-size: 1.35;
  --hero-name-lines: 1;
  --hero-name-leading: 0.95;
  --hero-name-align: center;
  --hero-knot-x: 0;
  --hero-knot-y: 0;
  --hero-knot-z: 0;
  --hero-knot-scale: 1;
  --hero-fog-near: 6;
  --hero-fog-far: 20;
  --hero-fog-near-narrow: 9;
  --hero-fog-far-narrow: 30;

  /* one world unit at the name's depth, in CSS pixels; the extruded front
     face sits 0.035 nearer the camera than the name's centre */
  --hero-tan: tan(calc(var(--hero-fov) * 0.5deg));
  --hero-unit: calc(100dvh / (2 * var(--hero-cam-z) * var(--hero-tan)));
  --hero-face: calc(var(--hero-cam-z) / (var(--hero-cam-z) - 0.035));
}

@media (max-width: 767.98px) {
  :root[data-hero="symmetric"] {
    --hero-unit: clamp(
      100dvh / (2 * min(var(--hero-cam-z-max), var(--hero-cam-z-narrow) / var(--hero-aspect-floor)) * var(--hero-tan)),
      100vw / (2 * var(--hero-cam-z-narrow) * var(--hero-tan)),
      100dvh / (2 * var(--hero-cam-z) * var(--hero-tan))
    );
    /* phones: KIAN over SHAH, so the whole name fits (Kian, 30 Sep 2026) */
    --hero-name-lines: 2;
  }
}

html[data-hero="symmetric"]:not(.simple),
html[data-hero="symmetric"]:not(.simple) body {
  height: 500vh;
}

html[data-hero="symmetric"] #mobius {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* TextGeometry's em is size * 100 / 72 world units (typeface.json scale);
   -0.025em puts the centre of Lexend's capitals on the anchor */
html[data-hero="symmetric"]:not(.simple) #site-title {
  position: fixed;
  top: calc(50% - var(--hero-name-y) * 100dvh * var(--hero-face));
  left: calc(50vw + var(--hero-name-x) * 100vw * var(--hero-face));
  margin: 0;
  font-size: calc(var(--hero-name-size) * 100 / 72 * var(--hero-unit) * var(--hero-face));
  line-height: var(--hero-name-leading);
  white-space: nowrap;
  text-align: center;
  transform: translate(-50%, -50%) translateY(-0.025em);
}

@media (max-width: 767.98px) {
  html[data-hero="symmetric"]:not(.simple) #site-title {
    white-space: normal;
    width: min-content;
  }
}

html[data-hero="symmetric"]:not(.simple) #site-tagline {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

html[data-hero="symmetric"] .scroll-indicator {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

@media (max-width: 768px) {
  html[data-hero="symmetric"]:not(.simple),
  html[data-hero="symmetric"]:not(.simple) body {
    height: 400vh;
  }

  html[data-hero="symmetric"] .scroll-indicator {
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- asymmetric: name left, knot right (the default) ---------- */

:root[data-hero="asymmetric"] {
  --hero-fov: 75;
  --hero-cam-x: 0;
  --hero-cam-y: 0;
  --hero-cam-z: 5;
  --hero-look-x: 0;
  --hero-look-y: 0;
  --hero-look-z: 0;
  --hero-cam-z-narrow: 4;
  --hero-cam-z-max: 10.5;
  --hero-aspect-floor: 0.4;
  /* the name stacked in the left 55% of the frame, the knot shifted right and
     enlarged so its left lobe still threads through N and AH */
  --hero-name-x: -0.44;
  --hero-name-y: 0.06;
  --hero-name-z: 0;
  --hero-name-size: 1.35;
  --hero-name-lines: 2;
  --hero-name-leading: 0.95;
  --hero-name-align: left;
  --hero-knot-x: 0.18;
  --hero-knot-y: 0;
  --hero-knot-z: 0;
  --hero-knot-scale: 1.1;
  --hero-fog-near: 6;
  --hero-fog-far: 20;
  --hero-fog-near-narrow: 9;
  --hero-fog-far-narrow: 30;

  --hero-tan: tan(calc(var(--hero-fov) * 0.5deg));
  --hero-unit: calc(100dvh / (2 * var(--hero-cam-z) * var(--hero-tan)));
  --hero-face: calc(var(--hero-cam-z) / (var(--hero-cam-z) - 0.035));
  --hero-name-em: calc(var(--hero-name-size) * 100 / 72 * var(--hero-unit) * var(--hero-face));
}

@media (max-width: 767.98px) {
  :root[data-hero="asymmetric"] {
    --hero-unit: clamp(
      100dvh / (2 * min(var(--hero-cam-z-max), var(--hero-cam-z-narrow) / var(--hero-aspect-floor)) * var(--hero-tan)),
      100vw / (2 * var(--hero-cam-z-narrow) * var(--hero-tan)),
      100dvh / (2 * var(--hero-cam-z) * var(--hero-tan))
    );
    /* phones: name left, knot offset so it bleeds off the right edge */
    --hero-name-x: -0.42;
    --hero-name-y: 0.2;
    --hero-name-size: 1.2;
    --hero-knot-x: 0.15;
    --hero-knot-y: -0.155;
    --hero-knot-scale: 0.92;
  }
}

html[data-hero="asymmetric"]:not(.simple),
html[data-hero="asymmetric"]:not(.simple) body {
  height: 500vh;
}

html[data-hero="asymmetric"] #mobius {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

html[data-hero="asymmetric"]:not(.simple) #site-title {
  position: fixed;
  top: calc(50% - var(--hero-name-y) * 100dvh * var(--hero-face));
  left: calc(50vw + var(--hero-name-x) * 100vw * var(--hero-face));
  width: min-content;
  margin: 0;
  font-size: var(--hero-name-em);
  line-height: var(--hero-name-leading);
  text-align: left;
  transform: translateY(-50%) translateY(-0.025em);
}

/* the subtitle under the name's capitals, on the same left edge */
html[data-hero="asymmetric"]:not(.simple) #site-tagline {
  position: fixed;
  top: calc(50% - var(--hero-name-y) * 100dvh * var(--hero-face)
    + (var(--hero-name-leading) * (var(--hero-name-lines) - 1) + 0.7) * 0.5 * var(--hero-name-em)
    + var(--space-m));
  left: calc(50vw + var(--hero-name-x) * 100vw * var(--hero-face));
  margin: 0;
}

/* the scroll cue sits under the text column */
html[data-hero="asymmetric"] .scroll-indicator {
  position: fixed;
  bottom: 40px;
  left: calc(50vw + var(--hero-name-x) * 100vw * var(--hero-face));
  text-align: left;
}

@media (max-width: 768px) {
  html[data-hero="asymmetric"]:not(.simple),
  html[data-hero="asymmetric"]:not(.simple) body {
    height: 400vh;
  }

  html[data-hero="asymmetric"] .scroll-indicator {
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }

  html[data-hero="asymmetric"]:not(.simple) #site-tagline {
    white-space: normal;
    max-width: calc(100vw - 2 * (0.5 + var(--hero-name-x)) * 100vw);
  }
}