:root {
  color-scheme: dark;
  background: #0b2229;
  color: #d5ad61;
  font-family: system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

.wallpaper {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background-color: #0b2229;
  background-image: url('./assets/background.png');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Original artwork lettering, with a transparent background. */
.masthead {
  position: relative;
  z-index: 2;
  padding: 24px 24px;
  text-align: center;
}
.masthead h1 { margin: 0; line-height: 0; }
.wordmark {
  display: block;
  width: min(100%, 546px);
  height: auto;
  margin-inline: auto;
}

/* All three assets share one canvas and move independently, without rotation. */
.parallax-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
.parallax-ready .parallax-scene { visibility: visible; }
.depth-layer {
  position: absolute;
  inset: -32px;
  width: calc(100% + 64px);
  height: calc(100% + 64px);
  object-fit: cover;
  object-position: center top;
  max-width: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .parallax-ready .parallax-scene { visibility: hidden; }
}

/* A second copy of the distant terrain covers the arch feet. It uses exactly
   the same canvas and displacement as the backplate, so no terrain drifts. */
.terrain-occluder {
  clip-path: polygon(0 44%, 10% 52%, 18% 60%, 25% 65%, 32% 72%,
    42% 79%, 50% 82%, 58% 79%, 68% 72%, 75% 65%, 82% 60%,
    90% 52%, 100% 44%, 100% 100%, 0 100%);
}

/* Keep the terrain mask in image coordinates, including on narrow screens. */
.parallax-canvas {
  position: absolute;
  top: -32px;
  left: 50%;
  width: max(calc(100% + 64px), calc(175.793vh + 112.508px));
  width: max(calc(100% + 64px), calc(175.793dvh + 112.508px));
  aspect-ratio: 1663 / 946;
  transform: translateX(-50%);
}
.parallax-canvas .depth-layer {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Keep the complete fine rays behind the moving planet. Only the inner
   portion follows it, fading into the stationary rays without a hard cut. */
.planet-only {
  -webkit-mask-image: radial-gradient(ellipse 12% 24% at 50.5% 26%, #000 73%, transparent 100%);
  mask-image: radial-gradient(ellipse 12% 24% at 50.5% 26%, #000 73%, transparent 100%);
}

/* Portrait composition retains both arch arms and reserves quiet sky for the name. */
@media (max-aspect-ratio: 4/5) {
  .wallpaper {
    background-image: url('./assets/background-mobile.png');
    background-position: center center;
    background-size: cover;
  }
  .parallax-ready .parallax-scene { visibility: hidden; }
  .masthead {
    padding: clamp(28px, 6vh, 52px) 24px 24px;
    padding-top: clamp(28px, 6dvh, 52px);
  }
  .wordmark { width: min(88%, 360px); }
}

/* Give the desktop composition the same breathing room as the portrait art. */
@media (min-aspect-ratio: 4/5) {
  .wallpaper {
    --sky-space: clamp(96px, 15vh, 180px);
    --sky-space: clamp(96px, 15dvh, 180px);
    background-image: url('./assets/quiet-sky.png');
  }
  .wallpaper::before {
    content: '';
    position: absolute;
    inset: var(--sky-space) 0 0;
    background: url('./assets/background.png') center top / cover no-repeat;
    pointer-events: none;
  }
  .wallpaper.parallax-ready::before { visibility: hidden; }
  .masthead { padding: clamp(28px, 5vh, 56px) 32px 24px; }
  .wordmark { width: min(70%, 440px); }
  .parallax-canvas {
    top: var(--sky-space);
    width: max(calc(100% + 64px), calc((100vh - var(--sky-space) + 32px) * 1.75793));
    width: max(calc(100% + 64px), calc((100dvh - var(--sky-space) + 32px) * 1.75793));
  }
}

/* Blend only the upper edge into the continuous sky; no blur or overlay panel. */
@media (min-aspect-ratio: 4/5) {
  .parallax-canvas,
  .wallpaper::before {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 110px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 110px);
  }
}