/* cosmos — the night sky (top-left). Every selector lives under .corner--cosmos.
   The root's box and mask come from tokens.css; nothing here touches them.
   Local z: haze 1 · stars 2 · halo 3 · moon 4 · veil + bank 5 · edge of the world 6. */

.corner--cosmos {
  /* the edge of the world (rift x, ground y) and its drawing scale, in moon units */
  --cosmos-edge-u: calc(var(--moon-size) / 100);
  --cosmos-edge-x: calc(var(--moon-left) + var(--moon-size) * 1.59);
  /* ground at 1.6 moons below the moon's top: ~36vh, inside the top half of the box */
  --cosmos-ground: calc(var(--moon-top) + var(--moon-size) * 1.6);
  /* mist never reaches the seam: every sheet is gone by 32vw (DIRECTION §3, stage step at ~38vw) */
  --cosmos-mist-w: 32vw;
  /* drift amplitude: DIRECTION §4 caps translation at 1.5% of the box (≈11.5px at 1280) */
  --cosmos-drift-x: calc(var(--region-w) * .015);
  --cosmos-drift-y: calc(var(--region-h) * .004);
}
/* phone: the band above the card is 0-29vh and the seam fade starts at 34vw, so the
   traveler steps in from the seam, grows to stay legible (he grows up and left from the
   rift, so his feet stay on the ground), and never sinks behind the card on short phones */
@media (max-width: 640px) {
  .corner--cosmos {
    --cosmos-edge-u: calc(var(--moon-size) * 1.38 / 100);
    --cosmos-edge-x: calc(var(--moon-left) + var(--moon-size) * 1.26);
    --cosmos-ground: min(calc(var(--moon-top) + var(--moon-size) * 2), calc(25vh - 30px));
  }
}
/* the same, against the small viewport (what shows under the browser's toolbars; see tokens.css) */
@supports (height: 1svh) {
  @media (max-width: 640px) {
    .corner--cosmos { --cosmos-ground: min(calc(var(--moon-top) + var(--moon-size) * 2), calc(25svh - 30px)); }
  }
}

/* --- the moon: the only hero. Lit from the right (toward the page), soft terminator,
       the dark limb held by earthshine so it reads as a sphere, never a black disc. --- */
.corner--cosmos .cosmos__moon {
  position: absolute; z-index: 4;
  top: var(--moon-top); left: var(--moon-left);
  width: var(--moon-size); height: var(--moon-size);
  display: block;
  user-select: none;
}
.corner--cosmos .cosmos__halo {
  position: absolute; z-index: 3;
  top: calc(var(--moon-top) - var(--moon-size) * .75);
  left: calc(var(--moon-left) - var(--moon-size) * .75);
  width: calc(var(--moon-size) * 2.5); height: calc(var(--moon-size) * 2.5);
  border-radius: 50%;
  background: radial-gradient(circle at 54% 50%,
    color-mix(in srgb, var(--moonlight) 15%, transparent) 0%,
    color-mix(in srgb, var(--moonlight) 9%, transparent) 22%,
    color-mix(in srgb, var(--moonlight) 4%, transparent) 36%,
    color-mix(in srgb, var(--moonlight) 1.5%, transparent) 50%,
    transparent 70%);
  animation: cosmos-breathe var(--t-breathe) var(--ease-calm) infinite alternate;
  will-change: opacity;
}
/* glows swing at most .12 (DIRECTION §4) */
@keyframes cosmos-breathe { from { opacity: .88; } to { opacity: 1; } }

/* --- the sky: one SVG in moon units, anchored so unit 50 = the moon's top-left --- */
.corner--cosmos .cosmos__sky {
  position: absolute; z-index: 2;
  top: calc(var(--moon-top) - var(--moon-size));
  left: calc(var(--moon-left) - var(--moon-size));
  width: calc(var(--moon-size) * 4); height: calc(var(--moon-size) * 4);
  overflow: visible;
}
.corner--cosmos .cosmos__dust circle,
.corner--cosmos .cosmos__field circle,
.corner--cosmos .cosmos__bright circle:not([fill]) { fill: var(--star); }
.corner--cosmos .cosmos__bright .cosmos__warm { fill: var(--star-warm); }
.corner--cosmos .cosmos__stop { stop-color: var(--star); }
.corner--cosmos .cosmos__stop--warm { stop-color: var(--star-warm); }

.corner--cosmos .cosmos__tw {
  animation: cosmos-twinkle calc(var(--t-twinkle) * var(--k, 1)) ease-in-out var(--d, 0s) infinite alternate;
}
@keyframes cosmos-twinkle { from { opacity: 1; } to { opacity: .55; } }

/* --- mist. Every sheet is an inline SVG noise field (never a tiled background, so there is
       no seam to find), filled with --moonlight, larger than its drift on every side, and
       moving inside a fixed soft mask: the wisps flow, the bank's outline stays put. --- */
.corner--cosmos .cosmos__noise { display: block; overflow: hidden; }
.corner--cosmos .cosmos__mistfill { fill: var(--moonlight); }

/* sheets are drawn in moon units (viewBox), so the wisps keep their size against the moon
   from phone to desktop; each is ≥ .12 moon larger than its window on every side (> drift) */
.corner--cosmos .cosmos__sheet {
  position: absolute;
  top: calc(var(--moon-size) * -.12);
  height: calc(var(--moon-size) * 1.14);
  will-change: transform;
}

/* far haze: a texture, not a shape; upper-left only, gone well before the seam */
.corner--cosmos .cosmos__haze {
  position: absolute; z-index: 1;
  left: 0; top: 0;
  width: var(--cosmos-mist-w); height: var(--cosmos-ground);
  opacity: .13;
  -webkit-mask-image: radial-gradient(ellipse 66% 64% at 30% 34%, #000 0%, rgba(0,0,0,.5) 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 66% 64% at 30% 34%, #000 0%, rgba(0,0,0,.5) 50%, transparent 100%);
}
.corner--cosmos .cosmos__haze .cosmos__noise { width: 100%; height: 100%; }

/* the veil: in front of the moon's lower third only, centred on its lower limb */
.corner--cosmos .cosmos__veil {
  position: absolute; z-index: 5;
  left: 0; width: var(--cosmos-mist-w);
  top: calc(var(--moon-top) + var(--moon-size) * .55);
  height: calc(var(--moon-size) * .9);
  opacity: .26;
  -webkit-mask-image:
    radial-gradient(ellipse calc(var(--moon-size) * 1.3) calc(var(--moon-size) * .36)
      at calc(var(--moon-left) + var(--moon-size) * .46) calc(var(--moon-size) * .45),
      #000 0%, rgba(0,0,0,.45) 55%, transparent 100%),
    linear-gradient(to right, #000 0%, #000 58%, transparent 100%);
          mask-image:
    radial-gradient(ellipse calc(var(--moon-size) * 1.3) calc(var(--moon-size) * .36)
      at calc(var(--moon-left) + var(--moon-size) * .46) calc(var(--moon-size) * .45),
      #000 0%, rgba(0,0,0,.45) 55%, transparent 100%),
    linear-gradient(to right, #000 0%, #000 58%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.corner--cosmos .cosmos__sheet--veil {
  left: calc(var(--moon-left) - var(--moon-size) * 1.9);
  width: calc(var(--moon-size) * 6);
  animation: cosmos-drift 64s var(--ease-calm) infinite alternate-reverse;
}

/* the bank: on and just above the ground line, below the edge drawing so the traveler and
   the hairline stay crisp; the ground sits at 73% of its height */
.corner--cosmos .cosmos__bank {
  position: absolute; z-index: 5;
  left: 0; width: var(--cosmos-mist-w);
  top: calc(var(--cosmos-ground) - var(--moon-size) * .66);
  height: calc(var(--moon-size) * .9);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 24%, #000 44%, #000 60%, rgba(0,0,0,.4) 80%, transparent 100%),
    linear-gradient(to right, #000 0%, #000 50%, rgba(0,0,0,.45) 76%, transparent 100%);
          mask-image:
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 24%, #000 44%, #000 60%, rgba(0,0,0,.4) 80%, transparent 100%),
    linear-gradient(to right, #000 0%, #000 50%, rgba(0,0,0,.45) 76%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.corner--cosmos .cosmos__sheet--a,
.corner--cosmos .cosmos__sheet--b {
  left: calc(var(--moon-size) * -.4);
  width: calc(var(--moon-size) * 6.6);
}
.corner--cosmos .cosmos__sheet--a {
  opacity: .25;
  animation: cosmos-drift var(--t-drift) var(--ease-calm) infinite alternate;
}
/* a second sheet drifting the other way and slowly swelling, so the bank changes shape */
.corner--cosmos .cosmos__sheet--b {
  opacity: .14;
  animation: cosmos-drift 72s var(--ease-calm) infinite alternate-reverse,
             cosmos-swell 40s var(--ease-calm) infinite alternate;
}

@keyframes cosmos-drift {
  from { transform: translate3d(calc(var(--cosmos-drift-x) * -1), 0, 0); }
  to   { transform: translate3d(var(--cosmos-drift-x), calc(var(--cosmos-drift-y) * -1), 0); }
}
/* swing .11 (≤ .12) */
@keyframes cosmos-swell { from { opacity: .14; } to { opacity: .03; } }

/* --- the edge of the known world: viewBox 60..250 x 190..280, rift at (209, 250) --- */
.corner--cosmos .cosmos__edge {
  position: absolute; z-index: 6;
  width: calc(var(--cosmos-edge-u) * 190); height: calc(var(--cosmos-edge-u) * 90);
  left: calc(var(--cosmos-edge-x) - var(--cosmos-edge-u) * 149);
  top: calc(var(--cosmos-ground) - var(--cosmos-edge-u) * 60);
  overflow: visible;
}

.corner--cosmos .cosmos__ground { fill: none; stroke-width: .6; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* the rift: where he parts the sky, a sliver of the page's light shows through */
.corner--cosmos .cosmos__rift {
  animation: cosmos-breathe var(--t-breathe) var(--ease-calm) -5s infinite alternate;
}

/* the traveler is a silhouette against the light past the edge: night on dusk */
.corner--cosmos .cosmos__traveler { stroke: var(--night); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.corner--cosmos .cosmos__cloak { fill: var(--night); stroke-width: .5; }
.corner--cosmos .cosmos__limb { stroke-width: 1.05; }
.corner--cosmos .cosmos__staff { stroke-width: .55; }
.corner--cosmos .cosmos__head { fill: var(--night); stroke: none; }

@media (prefers-reduced-motion: reduce) {
  .corner--cosmos .cosmos__halo,
  .corner--cosmos .cosmos__tw,
  .corner--cosmos .cosmos__rift,
  .corner--cosmos .cosmos__sheet { animation: none; }
}