/* The launcher's night sky (Adjust's ui/Widgets.hpp, Ui::Palette, and the sign-in scene), with its
   default accent. The sky itself is drawn by astral.js; this is the page and the logo's light. */

:root {
  color-scheme: dark;
  --zenith: #05060c;
  --horizon: #1e1c41;
  /* The logo at rest, and lit (the launcher's Ui::Brand with its glow at 1). */
  --mark-top: #ac9fd4;
  --mark-top-lit: #ece6e6;
  --mark-bottom: #816fc8;
  --mark-star: #f8f4ea;
  --word: #e2e0ea;
  --word-lit: #9e90d1;
  --halo: 179 167 214;
}

html,
body {
  margin: 0;
  height: 100%;
  background: linear-gradient(var(--zenith), var(--horizon)) fixed;
}

body {
  overflow: hidden;
}

.sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

main {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
}

.brand {
  position: relative;
  margin: 0;
  width: min(560px, 74vw);
  /* A little above the middle: the eye's center, and room for the hills. */
  translate: 0 -5vh;
  animation: arrive 1.8s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* The moon's faint halo, centered on the crescent. */
.brand::before {
  content: "";
  position: absolute;
  left: 16%;
  top: 50%;
  width: 64%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--halo) / 0.13), rgb(var(--halo) / 0.045) 55%, transparent);
  transition: opacity 0.9s ease;
  opacity: 0.8;
  pointer-events: none;
}

.logo {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.mark-top,
.mark-bottom,
.word-top,
.word-bottom {
  transition: stop-color 1.1s ease;
}

.mark-top { stop-color: var(--mark-top); }
.mark-bottom { stop-color: var(--mark-bottom); }
.mark-star { fill: var(--mark-star); }
.word-top,
.word-bottom { stop-color: var(--word); }

/* Lit: on hover, and when it twinkles by itself now and then. Light comes on quickly, fades slowly. */
.brand:hover .mark-top,
.brand.lit .mark-top { stop-color: var(--mark-top-lit); }
.brand:hover .word-top,
.brand.lit .word-top { stop-color: var(--word-lit); }
.brand:hover::before,
.brand.lit::before { opacity: 1; }
.brand:hover .mark-top,
.brand:hover .word-top,
.brand.lit .mark-top,
.brand.lit .word-top { transition-duration: 0.35s; }

@keyframes arrive {
  from {
    opacity: 0;
    filter: blur(8px);
    translate: 0 calc(-5vh + 10px);
  }
}

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