/* ================================================================
   CS// WORLD ENGINE v8
   Persistent story objects. This layer is independent of page routing.
   ================================================================ */
.cs-story-stage{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  transition:opacity .7s ease;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 23%,#000 48%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 23%,#000 48%,#000 100%);
}
.cs-story-stage.active{opacity:.72}
.cs-story-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cs-story-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 70% 48%,transparent 0 20%,rgba(0,0,0,.08) 43%,rgba(0,0,0,.42) 100%),
    linear-gradient(90deg,rgba(0,0,0,.78),transparent 44%);
}
.cs-story-hud{
  position:fixed;z-index:12;right:30px;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;
  font:600 8px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.34);
  pointer-events:none;
}
.cs-story-hud b{color:rgba(255,255,255,.78);font-weight:600}
body[data-cs-world] main,
body[data-cs-world] footer{position:relative;z-index:2}
body[data-cs-world] .site-header,
body[data-cs-world] .nav,
body[data-cs-world] .cs-portfolio-back{z-index:70}
@media(max-width:900px){
  .cs-story-stage,.cs-story-hud{display:none}
}