:root {
  
  --atmos-read-core: var(--bg-deep);
  --atmos-read-mid:  var(--bg-deep);
  --atmos-read-soft: var(--bg-deep);
  --atmos-bar:       var(--bg-deep);
  --atmos-floor:     var(--bg-deep);
  --atmos-corner:    var(--bg-deep);
  




























  --atmos-read-core: color-mix(in srgb, var(--bg-deep) 78%, transparent);
  --atmos-read-mid:  color-mix(in srgb, var(--bg-deep) 54%, transparent);
  --atmos-read-soft: color-mix(in srgb, var(--bg-deep) 20%, transparent);
  --atmos-bar:       color-mix(in srgb, var(--bg-deep) 93%, transparent);
  --atmos-floor:     color-mix(in srgb, var(--bg-deep) 96%, transparent);
  --atmos-corner:    color-mix(in srgb, var(--bg-deep) 60%, transparent);

  


  --atmos-page-heavy: var(--bg-deep);
  --atmos-page-light: var(--bg-deep);
  --atmos-page-col:   var(--bg-deep);
  --atmos-page-heavy: color-mix(in srgb, var(--bg-deep) 74%, transparent);
  --atmos-page-light: color-mix(in srgb, var(--bg-deep) 40%, transparent);
  --atmos-page-col:   color-mix(in srgb, var(--bg-deep) 58%, transparent);

  



  --atmos-fog:      var(--border-2);
  --atmos-fog-soft: var(--border);
  --atmos-flash:    var(--edge-lit);
  --atmos-shaft:    var(--border);
  --atmos-fog:      color-mix(in srgb, var(--edge-lit) 15%, transparent);
  --atmos-fog-soft: color-mix(in srgb, var(--edge-lit) 7%, transparent);
  --atmos-flash:    color-mix(in srgb, var(--edge-lit) 74%, transparent);
  --atmos-shaft:    color-mix(in srgb, var(--edge-lit) 20%, transparent);

  



  --atmos-bloom:     var(--accent-glow);
  --atmos-bloom-hot: var(--accent-glow);
  --atmos-bloom:     color-mix(in srgb, var(--accent) 26%, transparent);
  --atmos-bloom-hot: color-mix(in srgb, var(--accent-hi) 34%, transparent);

  



  --atmos-par-near: 13px;   
  --atmos-par-far:  5px;    
  --atmos-scroll:   18px;   
}




































.night {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    
    linear-gradient(180deg,
      var(--atmos-bar) 0, var(--atmos-bar) 62px,
      var(--atmos-read-mid) 92px, transparent 130px),
    
    radial-gradient(46% 52% at 26% 37%,
      var(--atmos-read-core) 0%, var(--atmos-read-core) 34%,
      var(--atmos-read-mid) 58%, var(--atmos-read-soft) 80%, transparent 100%),
    radial-gradient(38% 78% at 2% 48%,
      var(--atmos-read-core) 0%, var(--atmos-read-mid) 46%, transparent 100%),
    
    linear-gradient(0deg,
      var(--atmos-floor) 0, var(--atmos-read-core) 54px,
      var(--atmos-read-soft) 150px, transparent 240px),
    
    radial-gradient(122% 108% at 58% 34%,
      transparent 0%, transparent 52%, var(--atmos-corner) 100%),
    
    var(--art-background, none) 50% center / cover no-repeat,
    
    var(--backdrop-layers, none),
    
    var(--bg-deep);
}














































main {
  background-image: linear-gradient(180deg,
    transparent 0,
    transparent clamp(150px, 26vh, 300px),
    var(--atmos-page-heavy) clamp(430px, 72vh, 760px));
}






















@supports (animation-timeline: scroll()) {
  .night[data-atmos] ~ main {
    background-image: linear-gradient(180deg,
      transparent 0,
      transparent clamp(150px, 26vh, 300px),
      var(--atmos-page-light) clamp(430px, 72vh, 760px));
  }
  .wc-page {
    position: absolute; inset: 0;
    opacity: 0;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--atmos-page-col) 9%,
      var(--atmos-page-col) 91%,
      transparent 100%);
    animation: wc-page-scrim linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 92vh;
  }
  @keyframes wc-page-scrim { from { opacity: 0; } to { opacity: 1; } }
}












.foot { margin-top: 0; padding-top: 110px; }












@media (max-width: 820px) {
  .night {
    background:
      linear-gradient(180deg,
        var(--atmos-bar) 0, var(--atmos-bar) 58px,
        var(--atmos-read-soft) 22%, var(--atmos-read-mid) 44%,
        var(--atmos-read-core) 62%, var(--atmos-read-core) 90%,
        var(--atmos-floor) 100%),
      radial-gradient(140% 84% at 50% 26%,
        transparent 0%, transparent 52%, var(--atmos-corner) 100%),
      var(--art-background, none) 50% 22% / cover no-repeat,
      var(--backdrop-layers, none),
      var(--bg-deep);
  }
}
















.night[data-atmos] { background: var(--bg-deep); }





.night[data-atmos][data-art="none"] {
  background: var(--backdrop-layers, none), var(--bg-deep);
}



.night[data-atmos]::after { display: none; }

.wc-atmos {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  


  isolation: isolate;
  

  contain: layout paint style;
}




































.wc-plane {
  position: absolute; inset: -3%;
  background: var(--art-background) 50% center / cover no-repeat;
  











  






















  filter: brightness(1.34) saturate(1.1);
  will-change: translate, scale;
  translate: calc(var(--wc-px, 0) * var(--atmos-par-near))
             calc(var(--wc-py, 0) * var(--atmos-par-near) * .5
                  - var(--wc-sy, 0) * var(--atmos-scroll));
}
.wc-plane-sky {
  translate: calc(var(--wc-px, 0) * var(--atmos-par-far))
             calc(var(--wc-py, 0) * var(--atmos-par-far) * .5
                  - var(--wc-sy, 0) * var(--atmos-scroll) * .38);
  


  -webkit-mask-image: linear-gradient(180deg,
    black 0%, black 40%, transparent 84%);
  mask-image: linear-gradient(180deg,
    black 0%, black 40%, transparent 84%);
}






@keyframes wc-ken-near { from { scale: 1; }     to { scale: 1.04; } }
@keyframes wc-ken-far  { from { scale: 1.038; } to { scale: 1; } }
.night[data-atmos] .wc-plane-base { animation: wc-ken-near 46s ease-in-out infinite alternate; }
.night[data-atmos] .wc-plane-sky  { animation: wc-ken-far  61s ease-in-out infinite alternate; }


















.wc-bloom {
  position: absolute; inset: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(10% 13% at var(--wc-b1x, 22%) var(--wc-b1y, 18%),
      var(--atmos-bloom-hot), transparent 58%),
    radial-gradient(13% 10% at var(--wc-b2x, 52%) var(--wc-b2y, 88%),
      var(--atmos-bloom), transparent 60%);
  opacity: .55;
  animation: wc-bloom-breathe 7.4s ease-in-out infinite alternate;
}
@keyframes wc-bloom-breathe { from { opacity: .38; } to { opacity: .62; } }










.wc-fog {
  position: absolute; inset: -18% -55%;
  mix-blend-mode: screen;
  will-change: transform;
}
.wc-fog-far {
  background:
    radial-gradient(30% 40% at 14% 52%, var(--atmos-fog), transparent 72%),
    radial-gradient(24% 30% at 40% 44%, var(--atmos-fog-soft), transparent 74%),
    radial-gradient(34% 36% at 68% 56%, var(--atmos-fog), transparent 70%),
    radial-gradient(22% 28% at 90% 48%, var(--atmos-fog-soft), transparent 76%);
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, black 24%, black 50%, transparent 74%);
  mask-image: linear-gradient(180deg, transparent 4%, black 24%, black 50%, transparent 74%);
  opacity: .5;
}
.wc-fog-near {
  background:
    radial-gradient(38% 34% at 22% 58%, var(--atmos-fog), transparent 70%),
    radial-gradient(28% 26% at 56% 66%, var(--atmos-fog-soft), transparent 74%),
    radial-gradient(42% 30% at 84% 60%, var(--atmos-fog), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, transparent 40%, black 66%, black 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 40%, black 66%, black 92%, transparent 100%);
  opacity: .4;
}
@keyframes wc-drift-a {
  from { transform: translate3d(-7%, 0, 0); }
  to   { transform: translate3d( 7%, 0, 0); }
}
@keyframes wc-drift-b {
  from { transform: translate3d( 9%, 1%, 0); }
  to   { transform: translate3d(-9%, -1%, 0); }
}
.night[data-atmos] .wc-fog-far  { animation: wc-drift-a 127s ease-in-out infinite alternate; }
.night[data-atmos] .wc-fog-near { animation: wc-drift-b  83s ease-in-out infinite alternate; }



.night[data-wx="fog"]   .wc-fog-far  { opacity: .92; }
.night[data-wx="fog"]   .wc-fog-near { opacity: .78; }
.night[data-wx="storm"] .wc-fog-far  { opacity: .70; }
.night[data-wx="storm"] .wc-fog-near { opacity: .58; }
.night[data-wx="rain"]  .wc-fog-far  { opacity: .62; }
.night[data-wx="rain"]  .wc-fog-near { opacity: .50; }
.night[data-wx="clear"] .wc-fog-far  { opacity: .26; }
.night[data-wx="clear"] .wc-fog-near { opacity: .18; }














.wc-shafts {
  position: absolute; inset: -22% -34%;
  mix-blend-mode: screen;
  opacity: .5;
  background: repeating-linear-gradient(102deg,
    transparent 0 46px,
    var(--atmos-shaft) 46px 58px,
    transparent 58px 118px);
  -webkit-mask-image: radial-gradient(66% 64% at 64% -4%, black 0%, transparent 78%);
  mask-image: radial-gradient(66% 64% at 64% -4%, black 0%, transparent 78%);
  filter: blur(7px);
  will-change: transform;
}
@keyframes wc-shaft-drift {
  from { transform: translate3d(-3%, 0, 0) skewX(-1.2deg); }
  to   { transform: translate3d( 3%, 0, 0) skewX(1.2deg); }
}
.night[data-atmos] .wc-shafts { animation: wc-shaft-drift 74s ease-in-out infinite alternate; }
.night[data-wx="clear"]  .wc-shafts { opacity: .78; }
.night[data-wx="cloudy"] .wc-shafts { opacity: .5; }
.night[data-wx="fog"]    .wc-shafts { opacity: .62; }
.night[data-wx="rain"]   .wc-shafts { opacity: .26; }
.night[data-wx="storm"]  .wc-shafts { opacity: .14; }





.wc-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  mix-blend-mode: screen;
}







.wc-flash {
  position: absolute; inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    linear-gradient(180deg, var(--atmos-flash) 0%,
      var(--atmos-fog) 22%, transparent 54%),
    radial-gradient(56% 34% at 68% 2%, var(--atmos-flash), transparent 74%);
}





.wc-veil {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg,
      var(--atmos-bar) 0, var(--atmos-bar) 62px,
      var(--atmos-read-mid) 92px, transparent 130px),
    radial-gradient(46% 52% at 26% 37%,
      var(--atmos-read-core) 0%, var(--atmos-read-core) 34%,
      var(--atmos-read-mid) 58%, var(--atmos-read-soft) 80%, transparent 100%),
    radial-gradient(38% 78% at 2% 48%,
      var(--atmos-read-core) 0%, var(--atmos-read-mid) 46%, transparent 100%),
    linear-gradient(0deg,
      var(--atmos-floor) 0, var(--atmos-read-core) 54px,
      var(--atmos-read-soft) 150px, transparent 240px);
}














.wc-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(122% 108% at 58% 34%,
    transparent 0%, transparent 50%, var(--atmos-corner) 100%);
}
.wc-chroma {
  position: absolute; inset: 0;
  mix-blend-mode: screen;
  



  opacity: .18;
  background:
    linear-gradient(90deg, var(--atmos-bloom-hot), transparent 22%,
      transparent 78%, var(--atmos-bloom)),
    var(--art-background) calc(50% + 2px) center / cover no-repeat,
    var(--art-background) calc(50% - 2px) center / cover no-repeat;
  background-blend-mode: multiply, exclusion, normal;
  -webkit-mask-image: radial-gradient(74% 70% at 50% 46%, transparent 58%, black 100%);
  mask-image: radial-gradient(74% 70% at 50% 46%, transparent 58%, black 100%);
}
.night[data-art="none"] .wc-chroma { display: none; }









.wc-grain {
  position: absolute; inset: -12%;
  mix-blend-mode: overlay;
  opacity: .085;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.62'/%3E%3C/svg%3E");
  will-change: transform;
}
@keyframes wc-grain-jitter {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-2%, 1.4%, 0); }
  40%  { transform: translate3d(1.6%, -1.8%, 0); }
  60%  { transform: translate3d(-1.2%, -1%, 0); }
  80%  { transform: translate3d(2%, 1.2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.night[data-atmos] .wc-grain { animation: wc-grain-jitter 1.1s steps(1, end) infinite; }
















@keyframes wc-intro {
  0%   { opacity: 0; scale: 1.04; filter: brightness(.25) saturate(.5); }
  55%  { opacity: 1; }
  100% { opacity: 1; scale: 1;    filter: brightness(1) saturate(1); }
}




.night[data-intro="1"] .wc-atmos {
  animation: wc-intro 860ms cubic-bezier(.2, .7, .2, 1) both;
}
















.night[data-q="low"] .wc-grain,
.night[data-q="low"] .wc-chroma,
.night[data-q="low"] .wc-shafts,
.night[data-q="low"] .wc-fog-near { display: none; }
.night[data-q="low"] .wc-plane-sky { display: none; }
.night[data-q="low"] .wc-plane { filter: none; }
.night[data-q="low"] .wc-bloom { animation: none; opacity: .72; }

.night[data-q="off"] .wc-grain,
.night[data-q="off"] .wc-chroma { display: none; }
.night[data-q="off"] .wc-plane,
.night[data-q="off"] .wc-fog,
.night[data-q="off"] .wc-shafts,
.night[data-q="off"] .wc-bloom,
.night[data-q="off"] .wc-atmos { animation: none !important; }
.night[data-q="off"] .wc-plane { translate: none; }
.night[data-q="off"] .wc-canvas { display: none; }


.night[data-q="off"] .wc-plane,
.night[data-q="off"] .wc-fog,
.night[data-q="off"] .wc-grain { will-change: auto; }












@media (prefers-reduced-motion: reduce) {
  .night[data-atmos] .wc-plane-base,
  .night[data-atmos] .wc-plane-sky,
  .night[data-atmos] .wc-fog-far,
  .night[data-atmos] .wc-fog-near,
  .night[data-atmos] .wc-shafts,
  .night[data-atmos] .wc-grain,
  .night[data-atmos] .wc-bloom,
  .night[data-intro="1"] .wc-atmos { animation: none; }
  .wc-plane { translate: none; will-change: auto; }
  .wc-fog, .wc-grain, .wc-shafts { will-change: auto; }
  .wc-canvas { display: none; }
  .wc-flash { opacity: 0; }
}







@media (max-width: 820px) {
  .wc-plane-sky, .wc-grain, .wc-chroma, .wc-shafts { display: none; }
  .wc-fog-near { opacity: .38; }
  
  .wc-page { background: var(--atmos-page-col); }
  .wc-veil {
    background-image:
      linear-gradient(180deg,
        var(--atmos-bar) 0, var(--atmos-bar) 58px,
        var(--atmos-read-soft) 22%, var(--atmos-read-mid) 44%,
        var(--atmos-read-core) 62%, var(--atmos-read-core) 90%,
        var(--atmos-floor) 100%);
  }
  .wc-vignette {
    background: radial-gradient(140% 84% at 50% 26%,
      transparent 0%, transparent 52%, var(--atmos-corner) 100%);
  }
  :root { --atmos-par-near: 8px; --atmos-par-far: 3px; --atmos-scroll: 18px; }
}











@media (forced-colors: active) {
  .night, .wc-atmos { display: none; }
  main { background-image: none; }
}