/* A living moonlit forest, using the existing Niavis artwork. */
.forest{overflow:hidden;contain:paint}
/* Keep the moon inside the right edge when the full-height artwork crops on tall screens. */
.forest .scene{position:absolute;left:50%;left:min(50%,calc(100% - 54dvh - 32px));top:0;height:100%;width:auto;min-width:100%;transform:translateX(-50%);overflow:visible}
.depth-layer{transform-origin:center bottom}
.fireflies{position:absolute;inset:0;pointer-events:none}
.firefly{position:absolute;width:var(--size);height:var(--size);background:#f7d18a;border-radius:50%;box-shadow:0 0 10px 3px rgba(238,200,127,.28);opacity:.5}
.view-section{text-align:center;background:#0b2118;padding-bottom:108px}
.view-heading{max-width:1090px;margin:0 auto 55px}
.view-heading h2{font-size:clamp(2.35rem,4.4vw,3.8rem)}
.view-heading>p:last-child{max-width:670px;margin:26px auto 0;color:var(--muted);font-size:18px}
.view-label{font-size:12px;font-weight:600;letter-spacing:.27em;color:#c9b48f;margin:0 auto 23px}
.view-frame{max-width:720px;margin:0 auto}
.view-window{aspect-ratio:3/4;border:12px solid #203b2b;border-radius:50% 50% 22px 22px / 37.5% 37.5% 22px 22px;isolation:isolate}
.view-window img{object-position:center center;transform-origin:center center}
.view-window .zoom-cue{bottom:22px;right:22px}
.zoom-cue{transition:background .2s,border-color .2s,transform .2s var(--ease)}
.lightbox-body img{transform-origin:center}
.desktop-nav a{transition:color .18s ease}
@media(hover:hover){.gallery-link:hover .zoom-cue{transform:scale(1.08)}}
@media(prefers-reduced-motion:no-preference){
  .js .l-mist1{animation:mist-near 19s ease-in-out infinite alternate}
  .js .l-mist2{animation:mist-far 25s ease-in-out -9s infinite alternate}
  .js .l-sky>use{transform-box:fill-box;transform-origin:center;animation:moonlight 14s ease-in-out -4s infinite alternate}
  .js .stars circle{animation:starlight 7s ease-in-out infinite alternate}
  .js .stars circle:nth-child(3n){animation-delay:-3.5s;animation-duration:11s}
  .js .stars circle:nth-child(3n+1){animation-delay:-5s;animation-duration:9s}
  .js .firefly{animation:firefly-drift var(--duration) ease-in-out var(--delay) infinite alternate}
  .js .hero .forest *{animation-play-state:paused}
  .js .hero.scene-running .forest *{animation-play-state:running}
  @keyframes mist-near{from{transform:translate3d(-65px,8px,0);opacity:.42}to{transform:translate3d(65px,-10px,0);opacity:.88}}
  @keyframes mist-far{from{transform:translate3d(80px,-7px,0);opacity:.5}to{transform:translate3d(-80px,12px,0);opacity:.9}}
  @keyframes moonlight{from{opacity:.82;transform:scale(.992)}to{opacity:1;transform:scale(1.015)}}
  @keyframes starlight{from{opacity:.25}to{opacity:.8}}
  @keyframes firefly-drift{0%{transform:translate3d(0,0,0);opacity:.12}40%{opacity:.85}100%{transform:translate3d(var(--dx),var(--dy),0);opacity:.22}}
}
@media(max-width:900px){.view-heading{margin-bottom:42px}.view-section{padding-bottom:75px}}
@media(max-width:600px){
  .forest .scene{left:82%;transform:translateX(-82%)}
  .view-heading h2{font-size:clamp(2rem,8.3vw,2.8rem);line-height:1.23}
  .view-heading>p:last-child{font-size:16px;margin-top:22px}
  .view-label{font-size:11px;margin-bottom:20px}
  .view-heading{margin-bottom:35px}
  .view-window{border-width:7px;border-bottom-left-radius:16px;border-bottom-right-radius:16px}
  .view-window .zoom-cue{bottom:14px;right:14px}
  .view-section{padding-bottom:58px}
    .firefly{box-shadow:0 0 8px 2px rgba(238,200,127,.25)}
}
@media(prefers-reduced-motion:reduce){.depth-layer{transform:none!important}.firefly{opacity:.4}}