/* vaivaurbon.com
   The page is one steel plate drawn by assets/site.js. The words in the HTML are real text;
   once the plate is drawn they turn transparent and the plate shows them engraved and filled black.
   Without the script (or without WebGL) the same words show as black ink on a steel gradient. */

@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: block;
}

:root {
  --frame: 12px;             /* the black around the plate */
  --ink: #121316;
  --accent: #ff5a1c;         /* the orange of the reference numbers: link underline and focus */
  --plate-hi: #eceef2;
  --plate-mid: #c3c6cb;
  --plate-lo: #9a9da3;
  --sans: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
@media (max-width: 720px) { :root { --frame: 8px; } }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { background: #000; overscroll-behavior: none; }
body {
  background: #000;
  color: var(--ink);
  font-family: var(--sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#metal {
  position: fixed;
  inset: var(--frame);
  width: calc(100% - 2 * var(--frame));
  height: calc(100% - 2 * var(--frame));
  display: block;
}

/* the plates sit side by side and the page rolls sideways */
.rail {
  position: fixed;
  inset: var(--frame);
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: radial-gradient(120% 90% at 30% -12%, var(--plate-hi) 0%, var(--plate-mid) 48%, var(--plate-lo) 100%);
}
.rail::-webkit-scrollbar { display: none; }
.metal .rail { background: transparent; }

.panel {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
}

/* her layout: every line in capitals at 10% letter spacing */
.title, .lines, .buttons { margin: 0; text-transform: uppercase; letter-spacing: .1em; line-height: 1; }
.title { font-weight: 700; font-size: clamp(22px, 2.335vw, 60px); }
.lines { font-weight: 400; font-size: clamp(11px, 1.167vw, 30px); display: flex; flex-direction: column; align-items: center; gap: .45em; margin-top: 1.4em; }
.buttons { font-weight: 400; font-size: clamp(11px, 1.167vw, 30px); display: flex; gap: 4em; margin-top: 2.4em; }

a { color: inherit; text-decoration: none; position: relative; }
a::after { content: ""; position: absolute; inset: -10px -8px; }          /* a larger target for a finger */
a::before {                                                               /* the orange line under a link */
  content: ""; position: absolute; left: 0; right: .1em; bottom: -.34em; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
a:hover::before, a:focus-visible::before { transform: scaleX(1); }
a:focus-visible { outline: none; }
::selection { background: rgba(255, 90, 28, .35); }

/* placed by the script: every word sits exactly where the plate cuts it */
.placed .panel { display: block; padding: 0; }
.placed .lines, .placed .buttons { display: block; margin: 0; }
.placed .title, .placed .line, .placed .buttons a { position: absolute; white-space: nowrap; margin: 0; line-height: 1; }
.metal .title, .metal .line, .metal .buttons a { color: transparent; }

@media (prefers-reduced-motion: reduce) {
  a::before { transition: none; }
}