/* Mercurial Vapor landing page.
   Positions are in vw, measured from the 1094 px wide layout, so the page keeps its composition at any desktop width. */

:root {
  --lime: #91ff00;
  --text-size: max(12px, 1.28vw);
  color-scheme: dark;
}

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

html {
  background: #000;
}

body {
  margin: 0;
  background: #000;
  color: var(--lime);
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text-size);
  font-weight: 400;
  line-height: 1.15;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
}

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

/* Lenis smooth scroll */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* The vapor, the dissolving marks and the ground are drawn here, behind the page */
.vapor {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.no-vapor .vapor {
  display: none;
}

.page {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
   Hero. It scrolls with the page; the chrome wordmark and the swoosh turn to vapor as it goes.
   --------------------------------------------------------------------------- */
.hero-stage {
  position: relative;
  height: 56.38vw; /* the boot starts here */
}

.kicker {
  position: absolute;
  top: 9.3vw;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.wordmark {
  position: absolute;
  top: 14.67vw;
  left: 0;
  width: 100%;
  margin: 0;
  line-height: 0;
}

.wordmark-art {
  display: block;
  width: 100%;
  height: auto;
}

.swoosh {
  position: absolute;
  top: 34.53vw;
  left: 11.47vw;
  width: 35.65vw;
  height: auto;
}

/* Marks the canvas draws (and dissolves) keep their place in the page but are not shown there */
.in-canvas {
  visibility: hidden;
}

/* When the canvas cannot draw a mark, a mask clears it from left to right instead */
.css-dissolve {
  --edge: calc(var(--dissolve, 0) * 120%);
  -webkit-mask-image: linear-gradient(to right, transparent calc(var(--edge) - 20%), #000 var(--edge));
  mask-image: linear-gradient(to right, transparent calc(var(--edge) - 20%), #000 var(--edge));
}

.tagline {
  position: absolute;
  top: 23.06vw;
  left: 52.77vw;
  margin: 0;
  text-indent: 5.3vw;
  white-space: nowrap;
}

.footnote {
  position: absolute;
  top: 36.1vw;
  left: 78.45vw;
  margin: 0;
  font-size: 2.85vw;
  font-weight: 300;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   The boot
   --------------------------------------------------------------------------- */
.product {
  position: relative;
  height: 21.32vw;
}

.boot {
  position: absolute;
  top: 0;
  left: 30.05vw;
  width: 39.9vw;
  height: auto;
}

/* ---------------------------------------------------------------------------
   Chapters: hovering a title shows its image in the middle
   --------------------------------------------------------------------------- */
.chapters {
  position: relative;
  height: 28.7vw;
  margin-top: 10.5vw;
}

.chapter-list {
  position: absolute;
  top: 0;
  left: 7.36vw;
  display: grid;
  gap: 3.42vw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapter-link {
  display: grid;
  grid-template-columns: 4.84vw max-content;
  width: max-content;
  white-space: nowrap;
}

.chapter-title {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s ease;
}

.chapter-link.is-active .chapter-title,
.chapter-link:focus-visible .chapter-title {
  text-decoration-color: currentColor;
}

.chapter-link:focus-visible {
  outline: none;
}

.chapter-media {
  position: absolute;
  top: 0;
  left: 44.58vw;
  width: 23.82vw;
  aspect-ratio: 581 / 701;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50% 0 50% 0);
  pointer-events: none;
}

.chapter-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
}

.chapter-aside {
  position: absolute;
  top: 0;
  left: 86.31vw;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   The cracked ground the vapor rises from, drawn by the canvas. 2.4:1, as in the illustration.
   --------------------------------------------------------------------------- */
.vent {
  aspect-ratio: 12 / 5;
  margin-top: 24.23vw;
}

/* ---------------------------------------------------------------------------
   Settings panel (press H to hide it; data-panel="hidden" on .page ships it hidden)
   --------------------------------------------------------------------------- */
.panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  width: 244px;
  padding: 14px 16px 16px;
  border: 1px solid rgb(145 255 0 / 0.22);
  border-radius: 10px;
  background: rgb(10 10 10 / 0.86);
  color: #e6e6e6;
  font: 12px/1.4 "Inter Tight", system-ui, sans-serif;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.panel[hidden] {
  display: none;
}

.panel-title {
  display: flex;
  justify-content: space-between;
  margin: 0 0 10px;
  color: var(--lime);
}

.panel-title span {
  color: #8a8a8a;
}

.panel-control {
  display: grid;
  grid-template-columns: 58px 1fr 32px;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.panel-control input {
  width: 100%;
  margin: 0;
  accent-color: var(--lime);
}

.panel-control output {
  color: #9a9a9a;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.panel-button {
  width: 100%;
  margin-top: 8px;
  padding: 7px 0;
  border: 1px solid rgb(145 255 0 / 0.4);
  border-radius: 6px;
  background: transparent;
  color: var(--lime);
  font: inherit;
  cursor: pointer;
}

.panel-button:hover,
.panel-button:focus-visible {
  background: rgb(145 255 0 / 0.1);
}