/* ============================================================
   sirius.mcscheleba.com – ein Brief, wie ein Programmierer ihn schreibt.
   Kein Framework, keine Abhängigkeiten.
   ============================================================ */
:root{
  --bg:#05070f;
  --bg2:#0b1230;
  --ink:#e6ebf7;
  --ink-soft:#aab6d3;
  --ink-dim:#6f7d9e;
  --warm:#fff1d6;
  --accent:#ffd98a;
  --line:rgba(170,195,255,.6);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--serif);
  color:var(--ink);
  line-height:1.6;
  background:
    radial-gradient(ellipse 70% 45% at 75% 15%, rgba(40,55,120,.35), transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 85%, rgba(70,40,110,.22), transparent 70%),
    linear-gradient(var(--bg), var(--bg2) 60%, var(--bg));
  background-attachment:fixed;
  overflow-x:hidden;
}
/* schwaches Milchstraßen-Band, quer über den Himmel */
body::before{
  content:"";position:fixed;inset:-20% -20%;z-index:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgba(200,215,255,.05) 47%, rgba(200,215,255,.08) 50%, rgba(200,215,255,.05) 53%, transparent 62%);
}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main{position:relative;z-index:1}

/* ---------- Ladebalken (rein zum Spaß, die Seite ist längst da) ---------- */
#boot{
  position:fixed;inset:0;z-index:20;background:var(--bg);
  display:grid;place-content:center;gap:14px;justify-items:center;
  font:.78rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);
  transition:opacity .7s ease;
}
#boot.done{opacity:0;pointer-events:none}
#boot .bar{width:min(60vw,220px);height:2px;background:rgba(255,255,255,.12);overflow:hidden}
#boot .bar i{display:block;height:100%;width:0;background:var(--accent);transition:width 1.1s cubic-bezier(.2,.6,.2,1)}
#boot.run .bar i{width:100%}

/* ---------- Abschnitte ---------- */
section{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:grid;align-content:center;justify-items:center;
  padding:clamp(28px,7vh,80px) max(20px,env(safe-area-inset-left)) clamp(28px,7vh,80px) max(20px,env(safe-area-inset-right));
}

/* Intro: getippter Text */
.intro .typed{
  font:1.02rem/1.9 var(--mono);color:var(--ink);
  max-width:40ch;width:100%;margin:0;min-height:8em;
}
.intro .line{margin:0;min-height:1.9em;white-space:pre-wrap;padding-left:2ch;text-indent:-2ch}
.intro .line::before{content:"> ";color:var(--ink-dim)}
.intro .line.cur::after{content:"▍";color:var(--accent);animation:blink 1s steps(1) infinite;margin-left:.05em}
.intro .line.hide{visibility:hidden}
@keyframes blink{50%{opacity:0}}
.hint{
  position:absolute;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);
  font:.7rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);
  text-decoration:none;display:grid;justify-items:center;gap:10px;
  padding:.9em 1.6em .8em;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  opacity:0;transition:opacity 1.2s ease;
}
.hint-note{
  position:absolute;left:50%;bottom:calc(0px + env(safe-area-inset-bottom));transform:translateX(-50%);
  width:max-content;max-width:80vw;text-align:center;
  font:.66rem/1.5 var(--mono);color:var(--ink-dim);opacity:0;transition:opacity 1.2s ease .3s;
}
.hint-note.show{opacity:1}
.hint.show{opacity:1}
.hint::after{content:"";width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{translate:0 6px}}

/* Sternbild-Abschnitte */
.star{gap:clamp(14px,3.5vh,32px);width:100%;max-width:620px;margin:0 auto}
.figure{position:relative;width:min(78vw,340px);aspect-ratio:1;display:grid;place-items:center}
.figure svg{width:100%;height:100%;overflow:visible;display:block}
.text{max-width:50ch;width:100%}
.text>*{opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform .9s ease}
.text>:nth-child(1){transition-delay:.15s}
.text>:nth-child(2){transition-delay:.3s}
.text>:nth-child(3){transition-delay:.6s}
.text>:nth-child(4){transition-delay:1.15s}
.text>:nth-child(5){transition-delay:1.5s}
.text>:nth-child(6){transition-delay:1.8s}
.text>:nth-child(7){transition-delay:2s}
.on .text>*{opacity:1;transform:none}
.kicker{font:500 .72rem/1 var(--mono);letter-spacing:.22em;color:var(--ink-dim);margin:0 0 .9em}
h2{font:400 clamp(1.9rem,5.2vw,2.5rem)/1.1 var(--serif);letter-spacing:-.01em;margin:0 0 .6em}
.fact{color:var(--ink-soft);font-size:1.02rem;margin:0 0 1.1em}
.letter{color:var(--warm);font-size:1.2rem;line-height:1.55;margin:0 0 1.1em}
.ps{color:var(--ink-soft);font-style:italic;font-size:.98rem;margin:0 0 1.1em}
.meta{font:.7rem/1.7 var(--mono);letter-spacing:.06em;color:var(--ink-dim);margin:0}
.now{font:.7rem/1.7 var(--mono);letter-spacing:.06em;color:rgba(255,217,138,.85);margin:.2em 0 0}
.now:empty{display:none}

/* SVG-Bestandteile */
.st{fill:#fff;transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .7s cubic-bezier(.2,.8,.3,1.25) var(--d,0s)}
.on .st{transform:scale(1)}
.on .st.tw{animation:tw var(--tw,2.6s) ease-in-out infinite alternate}
@keyframes tw{from{opacity:1}to{opacity:.55}}
.gl{opacity:0;transition:opacity 1.2s ease calc(var(--d,0s) + .2s)}
.on .gl{opacity:1}
.ln{fill:none;stroke:var(--line);stroke-width:.45;stroke-linecap:round;
    stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .75s ease-out var(--d,0s)}
.on .ln{stroke-dashoffset:0}
.ln.faint{stroke:rgba(170,195,255,.28)}
.ln.dash{stroke-dasharray:.03 .025;stroke-dashoffset:0;opacity:0;transition:opacity 1s ease var(--d,0s);stroke:rgba(255,217,138,.55)}
.on .ln.dash{opacity:1}
.lb{font:3.4px var(--mono);fill:var(--ink-soft);letter-spacing:.08px;opacity:0;transition:opacity 1s ease var(--d,0s)}
.lb.warm{fill:var(--accent)}
.on .lb{opacity:1}
.lens{opacity:0;transform:scale(.9);transform-box:fill-box;transform-origin:center;transition:opacity .9s ease var(--d,0s),transform .9s ease var(--d,0s)}
.on .lens{opacity:1;transform:none}
.lens .ring{fill:none;stroke:rgba(255,217,138,.6);stroke-width:.35;stroke-dasharray:1.1 1.1}
.lens .arm{stroke:rgba(255,217,138,.45);stroke-width:.3}
.lens .disc{fill:rgba(8,12,30,.88);stroke:rgba(255,217,138,.55);stroke-width:.35}
.lens .cap{font:3.1px var(--mono);fill:var(--accent);text-anchor:middle;letter-spacing:.08px}

/* ---------- Suchmodus: Handy in Richtung Sternbild halten ---------- */
.seek .figure{overflow:hidden;border-radius:50%;box-shadow:inset 0 0 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12)}
.found .figure{transition:border-radius .9s ease,box-shadow .9s ease}
.seek .st{transform:scale(1);opacity:.6}
.seek .gl{opacity:.35}
.seek .text{display:none}
.arrow{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.arrow svg{width:34%;height:34%;overflow:visible;transition:opacity .35s ease}
.arrow path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.on .arrow{display:none}
.seekhint{font:.78rem/1.65 var(--mono);letter-spacing:.05em;color:var(--ink-soft);text-align:center;margin:0;max-width:30ch}
.seekhint b{display:block;color:var(--accent);font-weight:500;margin-bottom:.3em}
.seekhint a{display:block;margin-top:.9em;color:var(--ink-dim);text-decoration:underline dotted;opacity:0;pointer-events:none;transition:opacity .8s ease}
.seekhint.late a{opacity:1;pointer-events:auto}
.on .seekhint{display:none}
#dbg{position:fixed;left:8px;bottom:8px;z-index:30;font:11px/1.4 var(--mono);color:#9fb;background:rgba(0,0,0,.6);padding:6px 8px;border-radius:6px;white-space:pre;pointer-events:none}

/* Finale: Sirius */
.finale .figure{width:min(84vw,380px)}
.sirius-core{fill:#fff}
.on .sirius-core{animation:pulse 4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
.scint{mix-blend-mode:screen;opacity:0}
.on .scint{animation:scint var(--p,5s) ease-in-out infinite alternate}
@keyframes scint{0%{opacity:.15}100%{opacity:.75}}

/* Outro */
.outro .text{text-align:center;max-width:30rem}
.outro .big{font-size:clamp(1.3rem,4.5vw,1.7rem);line-height:1.5;color:var(--warm);margin:0 0 2em}
.outro .meta{margin-bottom:2em}
.btn[hidden]{display:none}
.btn{
  display:inline-block;font:.76rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--bg);background:var(--accent);padding:.95em 1.5em;border-radius:999px;text-decoration:none;
}
.top{display:block;margin-top:2.2em;font:.7rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none}

/* breite Bildschirme: Bild links, Text rechts */
@media (min-width:900px){
  .star{grid-template-columns:minmax(300px,420px) minmax(320px,460px);max-width:980px;column-gap:64px;align-items:center;justify-items:start}
  .figure{width:100%;justify-self:end}
  .finale .figure{width:100%}
  .outro{grid-template-columns:1fr;justify-items:center}
}
@media (prefers-reduced-motion:reduce){
  .st,.ln,.lb,.lens,.gl,.text>*,.hint,.sirius-core,.scint{transition:none!important;animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  .ln.dash{stroke-dasharray:.03 .025!important}
  .scint{opacity:.45!important}
  #boot{display:none}
  html{scroll-behavior:auto}
}