/* v21 1. Socket: the v16 Supernova world (a tilted spiral over an airless ridge). The whole logo is there from the first
   frame, unlit: the wordmark in quiet grey, the spark a solid grey socket. A star in the outer disk flares up and at its
   peak condenses into the kosmos mark, which flies straight home, shrinking, and arrives at the socket as light; the light
   pours into the spark from the core out to the tips, then "kosmos ai" slides out of the spark to the right, lit, into
   its place. Scrolling away early fast-forwards the homecoming. No JS or reduced motion: the full logo, lit. */
:root{--page:#050609;--grain-o:.08;--sky:#020306}
.scene .sky{opacity:0;transition:opacity 2.2s var(--ease)}
.scene .sky.on{opacity:1}
.scene .rays{mix-blend-mode:screen}
.scene .lit{opacity:0}
.fade{height:12%}
.cue{display:none}
.claim h1,.claim .sub{text-shadow:0 2px 28px rgba(2,3,6,.75)}
/* landing hero (2026-11-02, Andreas's reference: centred two-line claim, one CTA, no eyebrow; the v21 treatment for the h1:
   white, the key word in italic, the amber period) */
.claim .sub{max-width:none;margin-top:18px;font-size:clamp(21px,2.3vw,36px);line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.caption{text-shadow:0 1px 14px rgba(0,0,0,.85),0 0 4px rgba(0,0,0,.6)}
@media (max-width:700px){.claim{--claim-top:15%}.claim h1{font-size:clamp(38px,11.5vw,50px)}.claim .sub{margin-top:12px}}
/* the header logo: the full logo (in flow, the only layer without JS or with reduced motion), and for the homecoming the
   grey teaser wordmark, the spark (grey socket, then lit) and the lit wordmark that slides out of it */
.mark{position:relative}
.mark .tw,.mark .ts,.mark .sw{position:absolute;left:0;top:0;pointer-events:none;opacity:0}
.dock .mark .full{opacity:0;animation:show .01s 10s forwards} /* if the scene never runs, the lit logo still comes */
.dock .mark .tw{opacity:.42;animation:hide .01s 10s forwards}
.dock .mark .ts{opacity:.3;animation:hide .01s 10s forwards}
.dock.go .mark img{animation:none}
.dock.done .mark img{animation:none}
.dock.done .mark .tw{display:none}
.dock.done .mark .ts,.dock.done .mark .sw{opacity:1}
.dock.done .mark .sw{-webkit-mask-image:none!important;mask-image:none!important} /* the slide's mask would cut the glow to a box */
.mark .ts{transform-origin:8.974% 53.474%}
@keyframes show{to{opacity:1}}
@keyframes hide{to{opacity:0}}

/* coming soon: the landing hero alone, so the logo centres on the bar and the bottom right holds founder and legal */
.hero{max-height:none}
.bar{grid-template-columns:1fr}
.mark{justify-self:center}
.foot{position:absolute;right:28px;bottom:24px;text-align:right;font:400 11.5px/1.55 var(--mono);letter-spacing:.01em;color:var(--ink-3);text-shadow:0 1px 14px rgba(0,0,0,.85),0 0 4px rgba(0,0,0,.6)}
.foot nav{display:flex;justify-content:flex-end;gap:18px;margin-top:6px}
.foot a{color:var(--ink-2);text-underline-offset:3px;transition:color .2s var(--ease)}
.foot a:hover{color:var(--ink)}
@media (max-width:860px){.caption{bottom:82px}.foot{left:28px;right:28px;text-align:left}.foot nav{justify-content:flex-start}}
@media (max-width:700px){.caption{left:16px;right:16px;bottom:76px}.foot{left:16px;right:16px;bottom:18px;font-size:10.5px}}
@media (prefers-reduced-motion:reduce){.foot a{transition:none}}

/* Impressum and privacy: the same night page and type, no scene */
.doc{max-width:640px;margin-inline:auto;padding:28px 16px 96px}
.doc-logo{display:block;width:max-content;margin:0 auto clamp(56px,9vw,104px)}
.doc-logo img{display:block;height:34px;width:auto}
.doc h1{font:350 clamp(40px,6vw,72px)/1.02 var(--serif);letter-spacing:-.03em}
.doc h1 .dot{color:var(--amber)}
.doc h2{margin-top:44px;font:400 23px/1.25 var(--serif);letter-spacing:-.01em}
.doc p,.doc address{margin-top:14px;font-style:normal;font-size:18px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.doc a{color:var(--amber);text-underline-offset:3px}
.doc-foot{display:flex;gap:18px;margin-top:64px;font:400 12px/1.5 var(--mono);letter-spacing:.02em}
.doc-foot a{color:var(--ink-2)}

/* the caption crosses the lit ridge here, so one step brighter than on the landing page */
.caption{color:var(--ink-2)}
.caption b{color:var(--ink)}