/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/IBMPlexSans-cyrillic-8dacae5c.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/IBMPlexSans-latin-ext-e1ae4a6b.woff2) format('woff2');
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+018F, U+0259;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/IBMPlexSans-latin-6148594d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/IBMPlexSans-cyrillic-8dacae5c.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/IBMPlexSans-latin-ext-e1ae4a6b.woff2) format('woff2');
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+018F, U+0259;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/IBMPlexSans-latin-6148594d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Unbounded-cyrillic-3e88c0f8.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Unbounded-latin-ext-6b5846e4.woff2) format('woff2');
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+018F, U+0259;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Unbounded-latin-aef5c246.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Unbounded-cyrillic-3e88c0f8.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Unbounded-latin-ext-6b5846e4.woff2) format('woff2');
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+018F, U+0259;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Unbounded-latin-aef5c246.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The "under construction" page (placeholder.mjs): the logo going up slab by slab on ink, the
   message in three languages, and a strip of site-safety stripes along the bottom. Shipped
   with fonts.css only. */

:root {
  --ink: #26221d;
  --stone: #e7dfcc;
  --stone-soft: #c9bfa9;
  --signal: #f2b300;
  --display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --text: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--stone);
  font: 400 1.125rem/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
}

.soon {
  width: min(100%, 980px);
  padding: 48px clamp(20px, 6vw, 64px) 96px;
}

.soon__lockup {
  display: block;
  width: clamp(220px, 44vw, 430px);
  height: auto;
  overflow: visible;
}

.soon__title {
  margin: clamp(36px, 7vw, 72px) 0 0;
  max-width: 12em;
  font: 600 clamp(2.1rem, 6.8vw, 5rem) / 1.02 var(--display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.soon__lead {
  margin: clamp(18px, 3vw, 28px) 0 0;
  max-width: 28em;
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  line-height: 1.4;
}

/* The same message in Russian and English, side by side where there is room. */
.soon__also {
  margin-top: clamp(40px, 7vw, 72px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 28px clamp(32px, 6vw, 64px);
  max-width: 760px;
  color: var(--stone-soft);
  font-size: 1.0625rem;
}

.soon__also p {
  margin: 0;
}

/* A small yellow slab over each, as over the services on the site. */
.soon__also p::before {
  content: '';
  display: block;
  width: 28px;
  height: 8px;
  margin-bottom: 14px;
  background: var(--signal);
}

.soon__also strong {
  color: var(--stone);
  font-weight: 600;
}

/* The words are there from the first frame; only the logo moves. The mark goes up like the
   building it stands for: the core first, then the slabs from the ground, the yellow one
   last. Lengths inside the SVG are its own units (32 high). */
.soon__core,
.soon__slab {
  transform-box: fill-box;
}

.soon__core {
  transform-origin: 50% 100%;
  animation: soon-core 0.6s var(--ease) 0.2s both;
}

.soon__slab {
  animation: soon-slab 0.55s var(--ease) both;
}

.soon__slab--1 {
  animation-delay: 0.55s;
}

.soon__slab--2 {
  animation-delay: 0.75s;
}

.soon__slab--3 {
  animation-delay: 0.95s;
}

.soon__slab--4 {
  animation-delay: 1.15s;
}

/* The top slab is set again every few seconds: the building is not finished. */
.soon__slab--5 {
  animation: soon-slab 0.55s var(--ease) 1.4s both, soon-set 7s ease-in-out 5s infinite;
}

.soon__word {
  animation: soon-fade 0.9s ease-out 1.7s both;
}

/* One stripe pair is 36px along the 45 degree line, so 50.91px along the strip: the tile is
   that wide and moves by exactly one tile, which loops without a jump. */
.soon__stripe {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  background: repeating-linear-gradient(-45deg, var(--signal) 0 18px, var(--ink) 18px 36px);
  background-size: 50.91px 100%;
  animation: soon-stripe 2.4s linear infinite;
}

@keyframes soon-core {
  from {
    transform: scaleY(0);
  }
}

@keyframes soon-slab {
  from {
    opacity: 0;
    transform: translateX(9px);
  }
}

@keyframes soon-set {
  0%,
  84%,
  100% {
    transform: none;
  }

  91% {
    transform: translateY(-3px);
  }
}

@keyframes soon-fade {
  from {
    opacity: 0;
  }
}

@keyframes soon-stripe {
  to {
    background-position-x: 50.91px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .soon__core,
  .soon__slab,
  .soon__word,
  .soon__stripe {
    animation: none;
  }
}