/* Cosmos: carries the homepage's universe into every inner page.
   Loaded after a page's own styles. The starfield and each page's own element come from cosmos.js. */
#cosmos{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
main,footer{position:relative;z-index:1}
body{font:300 17px/1.75 var(--face)}
.lede{font-family:var(--face);font-style:normal;font-weight:200;letter-spacing:.01em}
/* section grounds become light, not paint: they fade to transparent so the stars show through */
.open,.page-head{background:radial-gradient(ellipse 60% 70% at 50% 0%,rgba(11,29,56,.85) 0%,rgba(0,7,22,0) 70%)}
.end{background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(11,29,56,.8) 0%,rgba(0,7,22,0) 70%)}
.feat{background:radial-gradient(ellipse 70% 70% at 72% 40%,rgba(16,32,61,.8) 0%,rgba(0,7,22,0) 70%)}
.stage{background:radial-gradient(ellipse 70% 70% at 66% 50%,rgba(10,26,53,.85) 0%,rgba(0,7,22,0) 72%)}
.stage::after{background:linear-gradient(90deg,rgba(0,7,22,.92) 0%,rgba(0,7,22,.5) 26%,transparent 42%)}
/* dividers become light lines */
.chapter,.section,.end,.story,.avyro,.melai,footer{border-top:1px solid transparent;border-image:linear-gradient(90deg,rgba(240,180,106,0),rgba(240,180,106,.45) 30%,rgba(79,151,255,.4) 70%,rgba(79,151,255,0)) 1}
.open,.page-head,.feat{position:relative}
.kicker::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);margin-right:14px;vertical-align:.12em}
.num{filter:drop-shadow(0 0 14px rgba(240,180,106,.35))}
h1{text-shadow:0 0 40px rgba(79,151,255,.3)}
@media (max-width:860px){
  body{font-size:16px}
  .stage::after{background:linear-gradient(0deg,rgba(0,7,22,.95) 0%,rgba(0,7,22,.8) 30%,transparent 46%)}
}
/* holographic sheen (Products): a moving rainbow film that follows the pointer */
body[data-cosmos="holo"] .pcard,body[data-cosmos="holo"] .feats>div{position:relative;overflow:hidden}
body[data-cosmos="holo"] .pcard::after,body[data-cosmos="holo"] .feats>div::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.0;transition:opacity .4s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.10),transparent 40%),
  linear-gradient(115deg,transparent 20%,rgba(79,151,255,.16) 35%,rgba(160,120,255,.14) 45%,rgba(240,180,106,.16) 55%,rgba(127,211,164,.12) 65%,transparent 80%);
  background-size:100% 100%,250% 250%;background-position:0 0,var(--mx,50%) var(--my,50%);mix-blend-mode:screen}
body[data-cosmos="holo"] .pcard:hover::after,body[data-cosmos="holo"] .feats>div:hover::after{opacity:1}
@media (hover:none){body[data-cosmos="holo"] .pcard::after{opacity:.6}
  @media (prefers-reduced-motion:no-preference){body[data-cosmos="holo"] .pcard::after{animation:holo 6s ease-in-out infinite alternate}@keyframes holo{to{background-position:0 0,100% 100%}}}}
body[data-cosmos="holo"] .appicon{box-shadow:0 20px 50px -18px rgba(79,151,255,.7),0 0 0 1px rgba(255,255,255,.12),0 0 40px -6px rgba(160,120,255,.45)}
/* frames and cards on inner pages catch a little light */
.pcard,.ccard,.plat,.feats,.principles,.pair,.frame,.statements{box-shadow:0 0 0 1px rgba(143,186,255,.04),0 30px 80px -50px rgba(79,151,255,.45)}
/* the background steps back while a scroll story plays */
#cosmos{transition:opacity .9s ease}
body.story-on #cosmos{opacity:.35}
/* Philosophy: line of thought */
body{position:relative}
.thought{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:visible}
.tl-ghost{fill:none;stroke:rgba(143,186,255,.08);stroke-width:1}
.tl-line{fill:none;stroke:url(#tlg);stroke-width:1.4;filter:drop-shadow(0 0 4px rgba(240,180,106,.55))}
.tl-tip{fill:#fff6e6;filter:drop-shadow(0 0 6px #f0b46a) drop-shadow(0 0 12px #f0b46a);transition:opacity .4s}
.tl-node{opacity:0;transition:opacity 1.1s ease}
.tl-node.lit{opacity:1}
.tl-hub{fill:#f0b46a;filter:drop-shadow(0 0 6px #f0b46a)}
.tl-star{fill:#dbe9ff;filter:drop-shadow(0 0 5px #4f97ff)}
.tl-branch{stroke:rgba(143,186,255,.55);stroke-width:1}
.tl-lead{stroke:rgba(240,180,106,.4);stroke-width:1;stroke-dasharray:2 5}
.tl-halo{fill:rgba(240,180,106,.18);filter:blur(3px)}
.tl-node .tl-branch{stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset 1.4s ease .2s}
.tl-node.lit .tl-branch{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.tl-node,.tl-node .tl-branch{transition:none}}