@font-face {
  font-family: Space;
  src: url('assets/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Space;
  src: url('assets/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #EFE8DC;
  --ink: #242823;
  --green: #2A6B4F;
  --orange: #E07A3F;
  /* The orbit mark is as tall as the screen allows but never wider than the screen,
     so the sun is never cut off on phones. */
  --orbit-size: min(calc(120vh * 400 / 470), 100vw);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: Space, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The approved Sidamis orbit symbol, spread over the whole viewport as a quiet
   background (same proportions as the web welcome screen), behind all content. */
.orbit-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: .24;
  pointer-events: none;
  user-select: none;
}

/* The whole mark stays in view and is centred on its own axis: the two mirrored arcs meet at
   48.125% across and 43.72% down the 400x470 canvas, and that point sits behind the Welaps logo. */
.sidamis-composition {
  position: absolute;
  left: 50%;
  top: 43.8%;
  width: var(--orbit-size);
  aspect-ratio: 400 / 470;
  transform: translate(-48.125%, -43.72%);
  container-type: inline-size;
}

.arc {
  position: absolute;
  display: block;
  width: 61.25%;
  height: 71.2766%;
  left: 7.5%;
  top: 8.0851%;
  border: 1.5px solid #677867;
  border-radius: 50%;
  transform: rotate(-31deg);
}

.arc-two { left: 27.5%; transform: rotate(31deg); border-color: #A6AD93; }
.arc-three { left: 18%; top: 6.8085%; transform: rotate(88deg); border-color: #C3C8B8; }

.sun {
  position: absolute;
  display: block;
  width: 19.75%;
  aspect-ratio: 1;
  left: 74%;
  top: 16.5957%;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 0 3.5cqw var(--paper);
}

/* Welaps in the middle, the status under it, the Sidamis wordmark at the bottom. */
.coming-soon {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto auto 1fr auto;
  justify-items: center;
  padding: 32px 24px calc(28px + env(safe-area-inset-bottom));
  text-align: center;
}

.product-signature {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.product-emblem {
  position: relative;
  /* At most 42% of the orbit, so the arcs pass around the logo and never through it. */
  width: min(clamp(200px, 36vmin, 300px), calc(var(--orbit-size) * .42));
  height: min(clamp(200px, 36vmin, 300px), calc(var(--orbit-size) * .42));
  overflow: hidden;
  flex: 0 0 auto;
}

/* Original 1024px PNG, unmodified: alpha bounds x187..818, y99..784.
   Center the complete 632x686px artwork, not the transparent square canvas. */
.product-emblem img {
  display: block;
  position: absolute;
  width: 149.2711%;
  height: auto;
  max-width: none;
  left: 50%;
  top: 50%;
  transform: translate(-49.1211%, -43.1641%);
}

.status {
  grid-row: 3;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: clamp(18px, 3vh, 28px) 0 0;
  padding: 11px 24px 11px 20px;
  border: 1px solid #C9CFBF;
  border-radius: 999px;
  background: #FBF8F2;
  color: var(--green);
  font-size: clamp(17px, 2.6vw, 20px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
}

.status-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--orange);
  animation: status-pulse 2.4s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.78); }
}

.wordmark {
  grid-row: 5;
  font-size: clamp(34px, 6vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.065em;
}

.wordmark span { color: var(--orange); }

@media (max-width: 420px) {
  .status { padding: 10px 20px 10px 16px; }
}

@media (max-height: 600px) {
  .coming-soon { padding-block: 20px calc(18px + env(safe-area-inset-bottom)); }
  .product-emblem { width: 140px; height: 140px; }
  .status { margin-top: 14px; }
  .wordmark { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot { animation: none; }
}