/* Ulyss stealth site. Interim identity (omnient-branding, 16-19 Oct 2026). No scripts, no external requests. */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/ulyss-wordmark.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/barlow-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-semibold.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-condensed-bold.woff2") format("woff2");
}

:root {
  color-scheme: dark light;
  --bg: #15181C;
  --text: #EDE6D6;
  --text2: #B0B0B0;
  --line: #3D434B;
  --accent-text: #E95B29;
  --lockup-w: clamp(200px, 40vw, 400px);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #EFEEE7;
    --text: #15181C;
    --text2: #4A4D52;
    --line: #D3D2CB;
    --accent-text: #B2421A;
  }
}

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

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.hero {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15vh 16px 10vh;
  text-align: center;
}

/* Lockup: the mark plus ULYSS, as drawn by omnient-branding. Clear space of one ring radius is built into the margins. */
.lockup {
  margin: 0;
  width: var(--lockup-w);
  color: var(--text);
  line-height: 0;
}
.lockup svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}


/* "Coming soon": same width as the lockup, letters spread edge to edge under a hairline, so it is centred on ULYSS by construction. */
.soon {
  position: relative;
  box-sizing: content-box;
  width: var(--lockup-w);
  margin: clamp(30px, 6.5vh, 56px) 0 0;
  padding: clamp(18px, 2.6vh, 26px) 0 0;
  font-family: "Barlow Condensed", "Arial Narrow", "Barlow", sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.soon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.2%;
  right: 1.2%;
  height: 1px;
  background: var(--line);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.letters {
  display: flex;
  justify-content: space-between;
  padding: 0 1.2%;
  white-space: nowrap;
}
.letters > span { display: inline-block; }
.letters > span > span { display: inline-block; }
.letters > .gap { width: .45em; }
.soon .plain { display: block; text-align: center; }

.back { margin: 20px 0 0; font-size: .95rem; }

/* Legal block: one tracked row on a content-width hairline, Barlow, well clear of the lockup. */
.legal {
  flex: 0 0 auto;
  position: relative;
  width: min(100% - 32px, 760px);
  margin: 0 auto;
  padding: clamp(28px, 4.5vh, 44px) 0 clamp(32px, 5vh, 48px);
  text-align: center;
  color: var(--text2);
}
.legal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
.legal-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px clamp(14px, 2.4vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.legal-row li { display: flex; align-items: center; gap: inherit; }
.legal-row li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line);
}
.legal-name { font-weight: 600; color: var(--text); }
.legal-copy {
  margin: clamp(14px, 2vh, 20px) 0 0;
  font-size: .75rem;
  line-height: 1.5;
  letter-spacing: .04em;
}
@media (max-width: 560px) {
  .legal-row { flex-direction: column; gap: 10px; }
  .legal-row li + li::before { display: none; }
}

a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
a:hover, a:focus-visible { text-decoration-color: currentColor; }
a:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 4px;
  border-radius: 2px;
}
.back a { text-decoration-color: currentColor; }

/* MOTION. Everything that moves lives here and only plays when the visitor allows motion.
   A static build (./build.sh --static) turns this block off entirely. */
@media (prefers-reduced-motion: no-preference) {
  /* Lockup, once per page load: ring 0-0.9 s, dot 0.7-1.15 s, ULYSS 1.15-1.85 s, then still. */
  .lockup .ring {
    stroke-dasharray: 5.5292;
    stroke-dashoffset: 5.5292;
    animation: ring .9s cubic-bezier(.22, 1, .36, 1) forwards;
  }
  .lockup .dot {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    animation: dot .45s .7s cubic-bezier(.34, 1.56, .64, 1) forwards;
  }
  .lockup .word {
    opacity: 0;
    animation: word .7s 1.15s cubic-bezier(.22, 1, .36, 1) forwards;
  }
  @keyframes ring { to { stroke-dashoffset: 0; } }
  @keyframes dot { to { transform: scale(1); } }
  @keyframes word {
    from { opacity: 0; letter-spacing: .7px; }
    to { opacity: 1; letter-spacing: .403px; }
  }

  /* Coming soon: the rule draws, the letters rise in one by one. */
  .soon::before {
    transform: scaleX(0);
    transform-origin: center;
    animation: rule .9s 1.6s cubic-bezier(.22, 1, .36, 1) forwards;
    transition: background-color .5s ease;
  }
  @keyframes rule { to { transform: none; } }
  .letters > span {
    opacity: 0;
    transform: translateY(.55em);
    animation: rise .7s cubic-bezier(.22, 1, .36, 1) forwards;
  }
  .letters > .gap { animation: none; }
  .letters > span:nth-child(1) { animation-delay: 1.85s; }
  .letters > span:nth-child(2) { animation-delay: 1.91s; }
  .letters > span:nth-child(3) { animation-delay: 1.97s; }
  .letters > span:nth-child(4) { animation-delay: 2.03s; }
  .letters > span:nth-child(5) { animation-delay: 2.09s; }
  .letters > span:nth-child(6) { animation-delay: 2.15s; }
  .letters > span:nth-child(8) { animation-delay: 2.21s; }
  .letters > span:nth-child(9) { animation-delay: 2.27s; }
  .letters > span:nth-child(10) { animation-delay: 2.33s; }
  .letters > span:nth-child(11) { animation-delay: 2.39s; }
  @keyframes rise { to { opacity: 1; transform: none; } }

  /* Hover or touch: a wave through the letters, the rule brightens. */
  .letters > span > span { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
  .soon:hover .letters > span > span, .soon:active .letters > span > span { transform: translateY(-.14em); }
  .soon:hover .letters > span:nth-child(1) > span { transition-delay: 0s; }
  .soon:hover .letters > span:nth-child(2) > span { transition-delay: .03s; }
  .soon:hover .letters > span:nth-child(3) > span { transition-delay: .06s; }
  .soon:hover .letters > span:nth-child(4) > span { transition-delay: .09s; }
  .soon:hover .letters > span:nth-child(5) > span { transition-delay: .12s; }
  .soon:hover .letters > span:nth-child(6) > span { transition-delay: .15s; }
  .soon:hover .letters > span:nth-child(8) > span { transition-delay: .18s; }
  .soon:hover .letters > span:nth-child(9) > span { transition-delay: .21s; }
  .soon:hover .letters > span:nth-child(10) > span { transition-delay: .24s; }
  .soon:hover .letters > span:nth-child(11) > span { transition-delay: .27s; }
  .soon:hover::before, .soon:active::before { background: var(--text2); }

  /* 404: plain line fades in. */
  .soon .plain { opacity: 0; animation: fade .6s .2s ease-out forwards; }
  .lockup-static + .soon::before { animation-delay: .1s; }
  @keyframes fade { to { opacity: 1; } }

  /* Links: underline eases in. */
  a { transition: text-decoration-color .35s ease, color .35s ease; }
}