/* venilio.ch: a dark field and a word, lit by a light that wanders. */

@font-face {
  font-family: "Unbounded";
  src: url("/fonts/unbounded-latin-200-normal.woff2") format("woff2");
  font-weight: 200;
  font-display: swap;
}

:root {
  --deep: #04060b;
  --mist: #0b1220;
  --slate: #3a4458;
  --moon: #c9d2e3;
  /* Where the light is: on the page, and relative to the word. light.js moves it. */
  --x: 50%;
  --y: 50%;
  --mx: 50%;
  --my: 50%;
  color-scheme: dark;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--deep);
  color: var(--slate);
  font-family: "Unbounded", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The light's glow on the dark itself. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(
    45rem circle at var(--x) var(--y),
    rgb(40 60 100 / 0.22),
    rgb(20 32 56 / 0.12) 30%,
    rgb(11 18 32 / 0.05) 55%,
    transparent 80%
  );
  pointer-events: none;
}

main {
  position: relative;
  padding: 0 1.5rem;
  text-align: center;
}

.mark {
  margin: 0 -0.16em 0 0;
  font-size: clamp(2.75rem, 12vw, 9.5rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.16em;
  color: transparent;
  background: radial-gradient(
    24rem circle at var(--mx) var(--my),
    var(--moon),
    #7a869e 28%,
    #1d2535 68%
  );
  -webkit-background-clip: text;
  background-clip: text;
  animation: surface 3.4s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

.soon {
  margin: 2.75rem -0.5em 0 0;
  font-size: 0.8125rem;
  font-weight: 200;
  letter-spacing: 0.5em;
  color: #6c7891;
  animation: appear 2.4s ease 2.8s both;
}

.grain {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

::selection {
  background: var(--moon);
  color: var(--deep);
}

@keyframes surface {
  from {
    opacity: 0;
    filter: blur(24px);
    letter-spacing: 0.4em;
  }
  to {
    opacity: 1;
    filter: blur(0);
    letter-spacing: 0.16em;
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mark,
  .soon {
    animation: none;
  }
}