/* style.css — placeholder page: night sky, constellation mark, (i) panel. No external fonts or assets.
   version: 0.4.1 · created 2026-10-01 by Pascal Ehlig, ITS · edited 2026-10-02 by Pascal Ehlig, ITS
*/
:root {
  --bg-0: #070a17; --bg-1: #0e1530; --line: #9fb4ff; --star: #e8edff; --core: #f5b942;
  --text: #eef1fb; --muted: #9aa3c4; --panel: rgba(16, 22, 48, .92); --edge: rgba(159, 180, 255, .22);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-1) 0%, var(--bg-0) 70%) fixed, var(--bg-0);
  color: var(--text); overflow-x: hidden;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
}
.sky { position: fixed; inset: 0; pointer-events: none; opacity: .55;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 72%, #cfd8ff 50%, transparent 51%), radial-gradient(1px 1px at 22% 80%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 58%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 38% 34%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 8% 52%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 88%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 30% 62%, #cfd8ff 50%, transparent 51%);
}
main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 64px 16px 88px; position: relative; }
.mark { width: 132px; height: 132px; overflow: visible; }
.mark .path { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .75;
  stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 2.4s ease-out forwards; }
.mark .stars circle { fill: var(--star); opacity: .35; animation: twinkle 3.2s ease-in-out infinite; }
.mark .stars circle:nth-child(2) { animation-delay: .4s; } .mark .stars circle:nth-child(3) { animation-delay: .8s; }
.mark .stars circle:nth-child(4) { animation-delay: 1.2s; } .mark .stars circle:nth-child(5) { animation-delay: 1.6s; }
.mark .stars circle:nth-child(6) { animation-delay: 2s; } .mark .stars circle:nth-child(7) { animation-delay: 2.4s; }
.mark .stars circle:nth-child(8) { animation-delay: 2.8s; }
.mark .core { fill: var(--core); }
.mark .halo { fill: var(--core); opacity: .18; transform-origin: 37px 34px; animation: pulse 2.4s ease-in-out infinite; }
.word { margin: 14px 0 28px; font-size: 15px; letter-spacing: .42em; text-transform: lowercase; color: var(--muted);
  padding-left: .42em; }
h1 { margin: 0; font-size: clamp(28px, 5vw, 44px); font-weight: 600; letter-spacing: -.01em; }
.lead { margin: 12px 0 32px; font-size: 18px; color: var(--muted); max-width: 34em; }
.bar { width: min(320px, 80vw); height: 3px; border-radius: 3px; background: rgba(159, 180, 255, .15); overflow: hidden; }
.bar span { display: block; width: 35%; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--core), transparent); animation: slide 3.6s ease-in-out infinite; }
.loader { margin: 26px 0 0; font-size: 15px; color: var(--muted); max-width: min(40em, 100%); perspective: 600px; }
.loader .stage { display: flex; flex-direction: column; align-items: center; gap: 10px;
  will-change: transform, opacity, clip-path, filter; }
.loader .line { margin: 0; min-height: 3em; }
.figure { width: 76px; height: 76px; overflow: visible; }
.figure polyline { fill: none; stroke: var(--line); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.figure .star { fill: var(--star); }
.figure .core { fill: var(--core); }
.figure .halo { fill: var(--core); opacity: .18; }
.loader .dots { display: inline-block; width: 1.6em; text-align: left; color: var(--core); }
.clock { position: fixed; top: 16px; left: 16px; z-index: 3; display: flex; flex-direction: column; gap: 2px;
  font-variant-numeric: tabular-nums; color: var(--muted); line-height: 1.1; }
#clock-time { font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: .04em; }
#clock-date { font-size: 12px; letter-spacing: .04em; }
footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 16px;
  justify-content: space-between; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  font-size: 13px; color: var(--muted); background: rgba(7, 10, 23, .72); border-top: 1px solid var(--edge);
  backdrop-filter: blur(6px); }
footer .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); letter-spacing: .3em; }
footer .motto { flex: 1; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
footer .host { letter-spacing: .04em; opacity: .8; }
@media (max-width: 560px) { footer .motto { display: none; } }

.info-btn { position: fixed; top: 16px; right: 16px; z-index: 3; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--edge); background: rgba(16, 22, 48, .6); color: var(--muted); cursor: pointer;
  font: italic 600 15px/1 Georgia, "Times New Roman", serif; transition: color .2s, border-color .2s; }
.info-btn:hover, .info-btn:focus-visible, .info-btn[aria-expanded="true"] { color: var(--text); border-color: var(--line); outline: none; }
.info { position: fixed; top: 58px; right: 16px; z-index: 2; width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 80px); overflow: auto; background: var(--panel); border: 1px solid var(--edge);
  border-radius: 12px; padding: 14px 16px 16px; backdrop-filter: blur(8px); box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.info header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.info h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.info .close { background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; }
.info dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13px; }
.info dt { color: var(--muted); }
.info dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
  word-break: break-all; }
.info .sep { grid-column: 1 / -1; border-top: 1px solid var(--edge); margin: 6px 0 2px; padding-top: 6px;
  color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes twinkle { 0%, 100% { opacity: .35; } 30% { opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .18; } 50% { transform: scale(1.5); opacity: .05; } }
@keyframes slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) {
  .mark .path { animation: none; stroke-dashoffset: 0; } .mark .stars circle { animation: none; opacity: 1; }
  .mark .halo, .bar span { animation: none; } .bar span { width: 100%; opacity: .5; }
  .loader .stage { will-change: auto; }
}