/* Clavaron holding page.

   Deliberately not a recolour of the Vodentix page. Vodentix is a product —
   warm, light, geometric, approachable. Clavaron is the house it belongs to,
   so it reads darker, quieter and more permanent: a high-contrast serif on
   near-black, with brass rather than teal. Siblings in construction and pace,
   not in appearance. */

:root {
  --ink: #0d0f11; /* near-black, faintly cool — the ground everything sits on */
  --ink-lift: #14171a; /* one step up, for the loader bed */
  --paper: #f2efe8; /* warm off-white, never pure #fff */
  --muted: #8b9198;
  --faint: #565c63;
  --brass: #c8a464; /* the single accent — used three times, never more */

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --write: cubic-bezier(0.65, 0.02, 0.28, 1); /* pen speed: quick in, settled out */
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* A very faint vignette so the centre reads as lit and the edges recede.
   Sits behind everything and never intercepts a pointer. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 50% 42%,
    rgba(255, 255, 255, 0.035) 0%,
    rgba(255, 255, 255, 0) 62%
  );
}

.stage {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}

/* ---------- the lettering ---------- */

.wordmark {
  position: relative;
  margin: 0;
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: clamp(3rem, 11vw, 7rem);
  line-height: 1;
  letter-spacing: -0.035em;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

/* Each letter is wiped in from its own left edge, staggered, so the word
   assembles in reading order. The tiny rise on top stops it feeling mechanical. */
.wordmark span {
  display: inline-block;
  clip-path: inset(0 100% -18% 0);
  transform: translateY(0.07em);
  opacity: 0;
  animation: write 0.44s var(--write) forwards;
  animation-delay: calc(var(--i) * 62ms);
}

@keyframes write {
  from {
    clip-path: inset(0 100% -18% 0);
    transform: translateY(0.07em);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  to {
    clip-path: inset(0 0 -18% 0);
    transform: translateY(0);
    opacity: 1;
  }
}

/* The nib: a short brass stroke that runs the baseline while the letters
   land, then lifts off the end of the word. */
.nib {
  position: absolute;
  left: 0;
  bottom: 0.1em;
  width: 0.075em;
  height: 0.1em;
  border-radius: 0.04em;
  background: var(--brass);
  opacity: 0;
  animation: nib-run 1.16s var(--write) forwards;
}

@keyframes nib-run {
  0% {
    left: 0;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  74% {
    left: calc(100% - 0.075em);
    opacity: 1;
  }
  100% {
    left: calc(100% - 0.075em);
    opacity: 0;
    transform: translateY(-0.5em);
  }
}

/* ---------- the flourish ---------- */

.rule {
  display: block;
  width: clamp(3.2rem, 12vw, 5.5rem);
  height: 1px;
  margin: 1.6rem 0 0;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.85;
  animation: draw 0.62s var(--ease) 0.94s forwards;
}

@keyframes draw {
  to {
    transform: scaleX(1);
  }
}

/* ---------- the line beneath ---------- */

.signature {
  margin: 1.5rem 0 0;
  font-size: clamp(0.66rem, 1.9vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* offsets the trailing letter-space so it stays centred */
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transform: translateY(0.5rem);
  animation: rise 0.72s var(--ease) 1.14s forwards;
}

.origin {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 2.1rem;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
  opacity: 0;
  animation: rise 0.72s var(--ease) 1.34s forwards;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- the loader ---------- */

.loader {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--ink-lift);
  overflow: hidden;
  opacity: 0;
  animation: rise 0.6s var(--ease) 1.58s forwards;
}

.loader-run {
  position: absolute;
  inset: 0 auto 0 0;
  width: 32%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--brass) 42%,
    var(--brass) 58%,
    transparent
  );
  animation: sweep 2.6s var(--ease) 1.58s infinite;
}

@keyframes sweep {
  from {
    transform: translateX(-105%);
  }
  to {
    transform: translateX(420%);
  }
}

/* ---------- narrow screens ---------- */

@media (max-width: 380px) {
  .wordmark {
    letter-spacing: -0.045em;
  }
  .signature {
    letter-spacing: 0.3em;
    text-indent: 0.3em;
  }
}

/* ---------- anyone who asked for less movement ---------- */

@media (prefers-reduced-motion: reduce) {
  .wordmark span,
  .rule,
  .signature,
  .origin,
  .loader,
  .loader-run,
  .nib {
    animation: none;
  }

  .wordmark span {
    clip-path: none;
    opacity: 1;
    transform: none;
  }

  .rule {
    transform: scaleX(1);
  }

  .signature,
  .origin,
  .loader {
    opacity: 1;
    transform: none;
  }

  .nib {
    display: none;
  }

  /* Static, but not dead: the loader keeps a fixed brass seam on the edge. */
  .loader-run {
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--brass), transparent);
    opacity: 0.5;
  }
}