/* myuol.ai, launching soon. Light only; UOL green #347803, deep green #245402, lime #8dc63f,
   ink #14200e, paper #f7f8f3. Outfit (SIL Open Font License, OFL.txt) is served from here. */

@font-face {
  font-family: "Outfit";
  src: url("/outfit.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f7f8f3;
  --ink: #14200e;
  --green: #347803;
  --deep: #245402;
  --lime: #8dc63f;
  color-scheme: light;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- backdrop: two slow glows and a fine dot field that fades towards the edges ---- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.glow {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.glow-lime {
  width: 78vmax;
  height: 78vmax;
  top: -34vmax;
  right: -26vmax;
  background: radial-gradient(closest-side, rgba(141, 198, 63, 0.42), rgba(141, 198, 63, 0.14) 55%, rgba(141, 198, 63, 0) 100%);
  animation: drift-a 26s ease-in-out infinite alternate;
}

.glow-green {
  width: 70vmax;
  height: 70vmax;
  bottom: -36vmax;
  left: -28vmax;
  background: radial-gradient(closest-side, rgba(52, 120, 3, 0.22), rgba(52, 120, 3, 0.07) 55%, rgba(52, 120, 3, 0) 100%);
  animation: drift-b 32s ease-in-out infinite alternate;
}

.dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(36, 84, 2, 0.16) 1px, transparent 1.25px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 85%);
          mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 85%);
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-7vmax, 6vmax, 0) scale(1.08); }
}

@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.04); }
  to   { transform: translate3d(8vmax, -5vmax, 0) scale(0.96); }
}

/* ---- the words ---- */

main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  text-align: center;
}

h1 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(3rem, 11.5vw, 9rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.18em);
  animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) forwards;
}

.soon {
  padding-right: 0.04em; /* the gradient's last letter keeps its edge */
  background: linear-gradient(100deg, var(--deep) 0%, var(--green) 38%, var(--lime) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation-delay: 0.14s;
}

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* A phone stacks the two words, larger. */
@media (max-width: 560px) {
  h1 { font-size: 19vw; line-height: 0.96; }
  .word { display: block; }
}

/* ---- a quiet line that keeps moving: work in progress ---- */

.progress {
  position: relative;
  width: clamp(120px, 18vw, 200px);
  height: 3px;
  margin-top: clamp(28px, 5vw, 48px);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(52, 120, 3, 0.13);
  opacity: 0;
  animation: fade 1s ease 0.6s forwards;
}

.progress span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(141, 198, 63, 0), var(--lime) 45%, var(--green));
  animation: sweep 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

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

@keyframes fade {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .glow, .progress span { animation: none; }
  .progress span { transform: translateX(70%); }
  .word, .progress { animation: none; opacity: 1; transform: none; }
}