/* Graphican home — the cosmos film. One tall section; a sticky stage whose layers are driven by the browser's own
   scroll timeline (view-timeline --cos). Only transform / opacity move (plus a few one-off properties), nothing runs per
   frame in JS, no 3D. Without scroll timelines or with reduced motion the same blocks are simply stacked.
   Story (% of the film): 0 black hole · 8 editors come out of it · 31 through it into space · 34 tools fall like stars
   · 46 the Earth rises, templates on its orbit · 64 down to Mongolia · 72 Mongolian fonts · 80 three reviews on the map
   · 89 back out to the Earth · 92 the brand light rises behind it · 100 pricing, footer. */

@font-face { font-family:"GW playfairdisplay"; font-display:swap; src:url(/assets/fonts/web/wall/playfairdisplay.woff) format("woff"); }
@font-face { font-family:"GW oswald"; font-display:swap; src:url(/assets/fonts/web/wall/oswald.woff) format("woff"); }
@font-face { font-family:"GW lora"; font-display:swap; src:url(/assets/fonts/web/wall/lora.woff) format("woff"); }
@font-face { font-family:"GW montserrat"; font-display:swap; src:url(/assets/fonts/web/wall/montserrat.woff) format("woff"); }
@font-face { font-family:"GW merriweather"; font-display:swap; src:url(/assets/fonts/web/wall/merriweather.woff) format("woff"); }
@font-face { font-family:"GW nunito"; font-display:swap; src:url(/assets/fonts/web/wall/nunito.woff) format("woff"); }
@font-face { font-family:"GW roboto"; font-display:swap; src:url(/assets/fonts/web/wall/roboto.woff) format("woff"); }

.cosmos { --space:#090909; --D:min(70vw, 44svh, 480px); --gy:64%; --R:min(47vw, 540px); --cw:clamp(76px, 10vw, 128px);
  position:relative; background:var(--space); color:#fff; overflow-x:clip; }
.cosmos .eyebrow { color:#ffffffb3; margin-bottom:16px; }
.cosmos h2 { font-size:clamp(40px, 5.6vw, 84px); color:#fff; text-shadow:0 4px 40px #224eff66; }
.cosmos p { color:#ffffffc7; }
.cosmos .text-link { color:#fff; margin-top:22px; }
.cs-mark { position:absolute; left:0; width:1px; height:1px; pointer-events:none; }
.cs-zone { position:absolute; left:0; top:0; width:1px; height:100svh; pointer-events:none; }   /* where the black hole can be seen */

/* ---------- shared pieces (both modes) ---------- */
.cs-stars { position:absolute; inset:-10%; background:url(/assets/home/cosmos/stars-a.svg) 0 0 / 520px 520px; }
.cs-stars.b { background:url(/assets/home/cosmos/stars-b.svg) 120px 60px / 340px 340px; opacity:.8; }
.cs-hole { position:absolute; left:0; right:0; top:0; height:100svh; overflow:hidden; }
/* the hero: the owner's «steppe night» picture (.github/scripts/cosmos_steppe.py) — a rider, a ger and a giant planet.
   .hs covers the screen like object-fit:cover but keeps the picture's own coordinates, so the turning planet (a canvas drawn by home-cosmos.js),
   the twinkling stars and the shooting stars stay exactly on the painted planet and sky at every screen size.
   --ax / --ay choose which part stays in view when the screen is narrower / wider than the picture. */
.cs-hole { background:#090909; }
.hs { --w:max(100vw, 100svh * 1198 / 1313); position:absolute; width:var(--w); aspect-ratio:1198 / 1313;
  left:calc((100vw - var(--w)) * var(--ax, .5)); top:calc((100svh - var(--w) * 1313 / 1198) * var(--ay, .5)); }
@media (max-aspect-ratio:1198/1313) { .hs { --ax:.78; } }
.hs > * { position:absolute; }
.hs-bg { inset:0; width:100%; height:100%; }
/* the planet (centre 478,475 · radius 522 of 1198×1313, fitted along the whole lit rim): its cloud bands drift right → left, so it turns;
   the painted rim light stays where it is, lit from the right, and the texture fades out towards the dark side */
.hs-pl { left:-3.67%; top:-3.58%; width:87.15%; height:auto; aspect-ratio:1; border-radius:50%;
  -webkit-mask:linear-gradient(#000 0 79%, transparent 87%); mask:linear-gradient(#000 0 79%, transparent 87%); }   /* its lower edge sinks behind the mountains */
/* the twinkling stars: 60 tiny dots (each its own few-pixel layer, so they cost next to no GPU memory) */
.hs-tw { left:var(--x); top:var(--y); width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius:50%;
  background:#fff; box-shadow:0 0 6px 1px #e2e2e2aa; opacity:.25; }
.hs-sp { left:var(--x); top:var(--y); width:16px; height:16px; margin:-8px 0 0 -8px; opacity:0; will-change:transform, opacity;
  background:radial-gradient(circle, #fff 0 1.4px, #e2e2e266 2.4px, transparent 5px), linear-gradient(90deg, transparent 0 46%, #f0f0f0cc 50%, transparent 54%), linear-gradient(0deg, transparent 0 46%, #f0f0f0cc 50%, transparent 54%); }
.hs-mt { left:var(--x); top:var(--y); width:170px; height:2px; opacity:0; border-radius:2px; transform-origin:100% 50%; filter:drop-shadow(0 0 3px #d4d4d4);
  background:linear-gradient(90deg, transparent, #e2e2e266 60%, #fff); will-change:transform, opacity; }
@media (prefers-reduced-motion:no-preference) {
  .hs-tw { animation:hs-tw var(--d) ease-in-out var(--o) infinite paused; }
  .hs-sp { animation:hs-sp var(--d) ease-in-out infinite paused; }
  .hs-sp:nth-of-type(2n) { animation-delay:-1.9s; } .hs-sp:nth-of-type(3n) { animation-delay:-3.1s; }
  .hs-mt { animation:hs-mt var(--d) linear infinite paused; }
  .hs-mt:nth-of-type(2) { animation-delay:-7s; } .hs-mt:nth-of-type(3) { animation-delay:-15s; }
  /* everything moves only while the hero is on screen (home-cosmos.js sets html.hz-on; it also turns the planet) */
  .hz-on .hs-tw, .hz-on .hs-sp, .hz-on .hs-mt { animation-play-state:running; }
}
@media (prefers-reduced-motion:reduce) { .hs-tw { opacity:.7; } .hs-sp { opacity:.7; } }
@keyframes hs-tw { 0%, 100% { opacity:.15; transform:scale(.7); } 50% { opacity:1; transform:scale(1); } }
@keyframes hs-sp { 0%, 100% { opacity:0; transform:scale(.4) rotate(0deg); } 50% { opacity:1; transform:scale(1.15) rotate(45deg); } }
/* a shooting star: one quick streak down to the left, then a long quiet pause */
@keyframes hs-mt { 0% { opacity:0; transform:rotate(-32deg) translateX(0) scaleX(.3); } 1.5% { opacity:1; } 6% { opacity:0; transform:rotate(-32deg) translateX(-340px) scaleX(1); } 100% { opacity:0; transform:rotate(-32deg) translateX(-340px); } }
.cs-hole::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, #090909b3 0%, transparent 20%, transparent 50%, #09090973 70%, #090909e0 100%); }
.cs-hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:120px var(--pad) 22px; text-align:center; }
.cs-hero .eyebrow { position:absolute; top:112px; left:0; right:0; }
.cs-hero h1 { font-size:clamp(70px, 12.5vw, 220px); line-height:1; letter-spacing:-.065em; text-shadow:0 0 60px #3a61ff80; }
.cs-hero > p { margin:14px auto clamp(26px, 4svh, 48px); max-width:40ch; font-size:clamp(15px, 1.3vw, 18px); line-height:1.6; }
.cs-hero .hero-tools { width:100%; max-width:1200px; margin:0 auto; text-align:left; }
.cs-hero .scroll-note { color:#ffffffa6; }

.cs-sc:not(.cs-hero) { position:relative; padding:clamp(70px, 10vh, 120px) var(--pad) 40px; text-align:center; }
.cs-sc h2 { margin:0 auto; }
.cs-sc > p { margin:16px auto 0; max-width:40ch; }

.cs-eds { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; max-width:1120px; margin:clamp(28px, 5svh, 56px) auto 0; }
.cs-ed { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:22px; border-radius:22px; text-align:left; background:#1e1e1ed9; border:1px solid #97baff4d; box-shadow:0 0 50px -10px #224eff80; transition:border-color .2s, background .2s; }
.cs-ed:hover { border-color:#dfdfdf; background:#313131e6; }
.cs-ed svg { width:28px; height:28px; color:#dfdfdf; }
.cs-ed b { font:400 clamp(26px, 2.4vw, 36px)/1 var(--display); letter-spacing:-.04em; }
.cs-ed span { font-size:13.5px; line-height:1.5; color:#ffffffb3; }

.cs-sts { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; max-width:900px; margin:clamp(26px, 4svh, 48px) auto 0; }
.cs-st { position:relative; display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:12px; padding:14px 16px; border-radius:18px; text-align:left; background:#1e1e1ee6; border:1px solid #ffffff26; }
.cs-st:hover { border-color:#dfdfdf; }
.cs-st .tool-icon { grid-row:span 2; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#224eff40; color:#eeeeee; }
.cs-st .tool-icon svg { width:20px; height:20px; }
.cs-st b { font-size:14.5px; font-weight:600; }
.cs-st small { font-size:12px; color:#ffffff99; line-height:1.4; }
.cs-st::before { content:""; position:absolute; left:70%; bottom:85%; width:160px; height:2px; border-radius:2px; background:linear-gradient(90deg, #fff, #dfdfdf80 30%, transparent); transform-origin:0 50%; transform:rotate(-58deg); opacity:0; pointer-events:none; }

.cs-tp { display:block; }
.cs-tp span { display:block; width:var(--cw); aspect-ratio:4 / 5; border-radius:12px; overflow:hidden; background:#292929; box-shadow:0 14px 40px -10px #000c, 0 0 0 1px #ffffff22; }
.cs-tp img { width:100%; height:100%; object-fit:cover; }

.cs-mn-map { position:relative; width:min(92vw, 940px); margin:0 auto; }
.cs-mn svg { width:100%; height:100%; display:block; overflow:visible; }
.cs-mn-f { fill:#224eff38; }
.cs-mn-l { fill:none; stroke:#e2e2e2; stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.cs-w { position:absolute; left:var(--x); top:var(--y); translate:-50% -50%; font-size:clamp(20px, 3.4vw, 46px); line-height:1; white-space:nowrap; color:#fff; text-shadow:0 0 24px #224eff; }
.cs-pin { position:absolute; left:var(--x); top:var(--y); width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:#e4e4e4; box-shadow:0 0 0 4px #358dff55, 0 0 24px 6px #358dffaa; }
.cs-pin::after { content:""; position:absolute; inset:-10px; border-radius:50%; border:1.5px solid #e4e4e4; opacity:0; }

.cs-rcs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; max-width:1180px; margin:clamp(26px, 4svh, 48px) auto 0; text-align:left; }
.cosmos .review { background:#1e1e1eeb; border:1px solid #97baff40; color:#fff; }
.cosmos .review blockquote { color:#fff; }
.cosmos .review small, .cosmos .review .eyebrow { color:#ffffff99; }

.cs-end .button { margin-top:24px; background:#fff; color:#2e2e2e; }
.cs-end .button:hover { background:#f4f4f4; }
.cs-after { height:40svh; background:linear-gradient(180deg, #090909 0%, #232323 22%, #1f3280 45%, #8caff5 70%, #eaeaea 86%, var(--paper) 100%); }

/* ---------- stacked mode: no scroll timelines, or reduced motion ---------- */
.cs-stage { position:relative; display:flex; flex-direction:column; }
.cs-sky { position:absolute; inset:0; overflow:hidden; opacity:.7; pointer-events:none; }
.cs-dawn, .cs-globe, .cs-rim, .cs-flood { display:none; }
.cs-hero { order:1; } .cs-tools { order:2; } .cs-fall { order:3; } .cs-tpl { order:4; } .cs-earth { order:5; } .cs-local { order:6; } .cs-mn { order:7; } .cs-rv { order:8; } .cs-end { order:9; padding-bottom:12vh !important; }
.cs-orb-c { display:grid; grid-template-columns:repeat(4, var(--cw)); justify-content:center; gap:14px; padding:24px var(--pad) 0; }
.cs-mn { position:relative; padding:20px 0 0; }

@media (max-width:760px) {
  .cs-hero h1 { font-size:clamp(64px, 18vw, 120px); }
  .cs-eds { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .cs-ed { padding:16px; gap:8px; border-radius:18px; }
  .cs-ed span { font-size:12.5px; }
  .cs-sts { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .cs-st { padding:12px; column-gap:10px; border-radius:14px; }
  .cs-st small { display:none; }
  .cs-st .tool-icon { grid-row:auto; width:34px; height:34px; }
  .cs-rcs { grid-template-columns:1fr; }
  .cs-orb-c { grid-template-columns:repeat(2, var(--cw)); }
  .cs-hero .eyebrow { top:100px; }
}

/* ---------- film mode: retired 2026-11 (the brand look stacks the chapters as sections, see assets/ulzii.css) ---------- */

/* the hero links sit on the dark video in every colour scheme */
.cosmos .hero-tools, .cosmos .hero-tools a { color:#fff; border-color:#ffffff40; }
.cosmos .hero-tools a:hover { background:#ffffff1a; }

/* the real download count, under the falling tools */
.cs-dl { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:4px 10px; margin:22px auto 0; }
.cs-dl b { font:400 clamp(26px, 3vw, 40px)/1 var(--display); letter-spacing:-.04em; color:#fff; }
.cs-dl span { font-size:13px; color:#ffffffb3; }
.cs-dl small { flex-basis:100%; font-size:11px; color:#ffffff73; }

/* iBrand is tightly drawn: give its letters a little air (owner, 2026-10-15) */
.home-cosmos h1, .home-cosmos h2, .home-cosmos h3 { letter-spacing:0; }
.home-cosmos .cs-hero h1 { letter-spacing:-.01em; }
.home-cosmos .brand, .cs-ed b, .cs-dl b, .home-cosmos .hero-tools span, .home-cosmos .plan-price b { letter-spacing:.005em; }
.home-cosmos .price { border-top:0; }   /* the film's light flows straight into pricing */

/* header over the dark film: white links and account (the phone menu keeps its light panel) */
.home-cosmos .gh-user { color:#fff; }
@media (min-width:901px) { .home-cosmos .gh-nav { color:#fff; } }