/*
 * Pyrogos landing page, "Cobalt dusk": a night sky in the app's cobalt, with clouds
 * drifting sideways and stars twinkling. Logo from apps/web/src/app/icon.svg (copied in at
 * build time). Plus Jakarta Sans is served from this site (fonts/, SIL Open Font License),
 * so visitors' browsers never contact a font service.
 */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 500;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 600;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 700;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --sky-top: #0b1640;
  --sky-bottom: #2a3fa8;
  --horizon-glow: rgb(120 120 255 / 0.55);
  --ink: #f6f7fb;
  --ink-soft: rgb(246 247 251 / 0.74);
  --ink-faint: rgb(246 247 251 / 0.5);
  --pill: #ffffff;
  --pill-ink: #0b1640;
  --font: 'Plus Jakarta Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  background: var(--sky-top);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-family: var(--font);
  overflow-x: hidden;
}

/* ---------- Moving sky ---------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
}

/* Light rising from below the horizon. */
.sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 60% at 50% 110%, var(--horizon-glow), transparent 70%);
}

.layer {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
}

.stars-small {
  background-image: url('sky/stars-small.svg');
  animation: twinkle 7s ease-in-out infinite alternate;
}

.stars-large {
  background-image: url('sky/stars-large.svg');
  animation: twinkle 11s ease-in-out infinite alternate-reverse;
}

/* Two cloud layers at different speeds give the sky depth. Each moves exactly one tile
   width per loop, so the loop is seamless. The filter shifts the grey clouds to cobalt. */
.clouds-far {
  background-image: url('sky/clouds-far.svg');
  opacity: 0.4;
  filter: sepia(0.2) hue-rotate(190deg) saturate(1.6);
  animation: drift-far 240s linear infinite;
}

.clouds-near {
  inset: -10% 0;
  background-image: url('sky/clouds-near.svg');
  opacity: 0.55;
  filter: sepia(0.2) hue-rotate(190deg) saturate(1.6);
  animation: drift-near 140s linear infinite;
}

@keyframes drift-far {
  to {
    background-position: -1600px 0;
  }
}

@keyframes drift-near {
  to {
    background-position: -1800px 0;
  }
}

@keyframes twinkle {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 0.9;
  }
}

/* People who ask their device for less motion get a still sky. */
@media (prefers-reduced-motion: reduce) {
  .layer {
    animation: none;
  }
}

/* ---------- Page ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(28px, env(safe-area-inset-top)) clamp(16px, 4vw, 80px) 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 34px;
  border-radius: 999px;
  background: var(--pill);
  color: var(--pill-ink);
  font: 600 18px/1 var(--font);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
}

.button-small {
  min-height: 46px;
  padding: 0 22px;
  font-size: 16px;
}

a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 40px 16px;
  text-align: center;
}

h1 {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(38px, 5.6vw, 72px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.lead {
  margin: -8px 0 0;
  max-width: 44ch;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500;
  line-height: 1.55;
}

.notice {
  margin: 0;
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 500;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 24px clamp(16px, 4vw, 80px) max(32px, env(safe-area-inset-bottom));
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 500;
}

.footer p {
  margin: 0;
}

@media (max-width: 560px) {
  .nav {
    padding-top: max(20px, env(safe-area-inset-top));
  }
}