/* The "under construction" page of haluande.com: the logo at the centre of a quiet solar system. */
:root{
  color-scheme:dark;
  --bg:#030913; --line:#173449; --cyan:#10d8ef; --violet:#8f5bff; --orange:#ff6b00; --green:#2ee0c1; --amber:#ffc66b; --muted:#a7b2bf;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(60% 60% at 50% 50%,#082033 0%,var(--bg) 70%);color:#f4f7fb;font:16px/1.5 "Manrope",ui-sans-serif,system-ui,sans-serif;overflow:hidden}
.construction{position:relative;display:grid;place-items:center;min-height:100%;padding:16px}

/* Orbits are squashed circles; each carries one planet in the colour of an application. */
.system{position:absolute;inset:0;display:grid;place-items:center;transform:scaleY(.42)}
.orbit,.sun{grid-area:1/1;border-radius:50%}
.orbit{border:1px solid var(--line);animation:turn linear infinite}
.orbit-1{width:min(46vw,380px);aspect-ratio:1;border-color:rgba(16,216,239,.35);animation-duration:38s}
.orbit-2{width:min(66vw,560px);aspect-ratio:1;border-color:rgba(143,91,255,.3);animation-duration:56s;animation-direction:reverse}
.orbit-3{width:min(86vw,740px);aspect-ratio:1;border-color:rgba(255,107,0,.25);animation-duration:80s}
.orbit-4{width:min(106vw,920px);aspect-ratio:1;border-style:dashed;border-color:rgba(46,224,193,.22);animation-duration:110s;animation-direction:reverse}
.planet{position:absolute;top:50%;left:-7px;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--tone);box-shadow:0 0 18px 2px var(--tone)}
.orbit-2 .planet{left:auto;right:-9px;width:18px;height:18px;margin-top:-9px}
.orbit-3 .planet{top:-6px;left:50%;width:12px;height:12px;margin:0 0 0 -6px}
.orbit-4 .planet{top:auto;bottom:-8px;left:50%;width:16px;height:16px;margin:0 0 0 -8px}
.tone-cyan{--tone:var(--cyan)}.tone-violet{--tone:var(--violet)}.tone-orange{--tone:var(--orange)}.tone-green{--tone:var(--green)}
.sun{width:min(40vw,300px);aspect-ratio:1;background:radial-gradient(circle,rgba(16,216,239,.28),rgba(16,216,239,.06) 45%,transparent 70%)}
@keyframes turn{to{transform:rotate(360deg)}}

.content{position:relative;display:grid;justify-items:center;gap:18px;text-align:center}
.mark{width:88px;height:88px;filter:drop-shadow(0 0 28px rgba(16,216,239,.55))}
h1{margin:0;line-height:0}
.wordmark{height:30px;width:auto;max-width:80vw}
.note{display:flex;align-items:center;gap:10px;margin:6px 0 0;color:var(--muted);font:500 12.5px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.note-de{margin:-10px 0 0;color:var(--muted);opacity:.75}
.dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(255,198,107,.18)}

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