/* ============================================================
   Deeprion Labs, the painted night scene
   ------------------------------------------------------------
   Layers of the scene painted by js/scene.js: the homepage hero
   (layered, with the train) and the still scenes of the subpage
   heroes and the blog listing head (one canvas, data-scene).
   Loaded on the homepage before home.css, on the subpages after
   styles.css, and on the blog listing after blog.css.
   ============================================================ */
.scene{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.scene.ready{opacity:1}
.scene .layer{position:absolute;left:0;width:100%;transform:translate3d(0,calc(var(--s) * var(--k) * 1px),0);will-change:transform}
.scene canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.scene .ground-fill{position:absolute;left:0;right:0;bottom:-400px;background:linear-gradient(#100f1d,#0c0b15 60%)}
.scene .grain{position:absolute;inset:0;opacity:.13;mix-blend-mode:overlay;background-size:160px 160px}
.scene .vignette{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 0%,rgba(8,8,20,.0) 50%,rgba(8,8,20,.45) 100%)}
.tw{position:absolute;width:2px;height:2px;margin:-1px 0 0 -1px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(214,208,255,.75);opacity:.35}
.hero-frame.live .tw{animation:tw var(--d,5s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes tw{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
/* still scenes: above the night-ridge.svg fallback on the host, under its scrim (::before, z-index -1) and its text */
.dl-hero > .scene,.dl-blog-head > .scene{z-index:-2;transition:opacity .9s cubic-bezier(.2,.6,.2,1)}
/* while a width change repaints, the old canvas is cropped from the bottom centre (where the rail lines up), never stretched */
.dl-hero > .scene canvas,.dl-blog-head > .scene canvas{object-fit:cover;object-position:50% 100%}
/* the canvas is a compositor layer and the scrim overlaps it; a layer of the hero's own keeps
   that overlap inside the hero, so the page below it rasterizes exactly as without a scene */
.dl-hero[data-scene-state],.dl-blog-head[data-scene-state]{will-change:transform}
/* the homepage vignette spans a tall frame, so its mountains get only its light part; a subpage
   hero is short and its mountains would sit under the darkest part. The vignette stays full behind
   the heading and the lead, then eases to 30% from just under the lead (--vg-y, set by scene.js),
   so the mountains, the rail and the motif get about the darkening the homepage gives its own */
.dl-hero > .scene .vignette,.dl-blog-head > .scene .vignette{-webkit-mask-image:linear-gradient(#000 0,#000 var(--vg-y,70%),rgba(0,0,0,.3) calc(var(--vg-y,70%) + 70px),rgba(0,0,0,.3) 100%);mask-image:linear-gradient(#000 0,#000 var(--vg-y,70%),rgba(0,0,0,.3) calc(var(--vg-y,70%) + 70px),rgba(0,0,0,.3) 100%)}
.scene.is-swap{transition:none}
@media (prefers-reduced-motion: reduce){
  .scene .layer{transform:none!important}
  .scene.is-static{transition:none}
}