/* One fixed photograph owns every contour. Light and atmosphere move independently. */
body { isolation: isolate; background: #102539; }
.site-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background: linear-gradient(160deg, #365572, #102539 72%);
  --fjord-brightness: 1;
  --fjord-saturation: 1;
  --fjord-tint: transparent;
  --fjord-moon: 0;
  --fjord-sun: 1;
  --fjord-light-duration: 0ms;
}
.fjord-photo, .fjord-tint, #fjord-canvas, .fjord-vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fjord-photo {
  background: var(--fjord-day-image, none) center / cover no-repeat;
  filter: brightness(var(--fjord-brightness)) saturate(var(--fjord-saturation));
  transition: filter var(--fjord-light-duration) cubic-bezier(.333333,0,.666667,1);
  /* Keep photo sampling stable when a native lighting transition begins/ends. */
  will-change: filter;
}
.fjord-tint {
  background-color: var(--fjord-tint);
  mix-blend-mode: multiply;
  transition: background-color var(--fjord-light-duration) cubic-bezier(.333333,0,.666667,1);
}
.site-background::after {
  content: '';
  position: absolute;
  left: var(--fjord-source-left, 0px);
  top: var(--fjord-source-top, 0px);
  width: var(--fjord-source-width, 100%);
  height: var(--fjord-source-height, 100%);
  background-image:
    radial-gradient(circle at 19px 37px, #d6eaffb3 .65px, transparent 1px),
    radial-gradient(circle at 131px 71px, #c8def580 .55px, transparent 1px),
    radial-gradient(circle at 57px 119px, #d6eaff9c .45px, transparent .85px);
  background-size: 193px 163px, 317px 251px, 137px 197px;
  mask-image: var(--fog-mask-sky), linear-gradient(#000, transparent 60%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-composite: intersect;
  opacity: calc(var(--fjord-night, 0) * .6);
  transition: opacity var(--fjord-light-duration) cubic-bezier(.333333,0,.666667,1);
}
.site-background[data-renderer='webgl2']::after { display: none; }
.fjord-haze, .fjord-clouds, .fjord-mountain-mist {
  position: absolute;
  left: var(--fjord-source-left, 0px);
  top: var(--fjord-source-top, 0px);
  width: var(--fjord-source-width, 100%);
  height: var(--fjord-source-height, 100%);
  overflow: hidden;
}
.fjord-haze {
  --fog-tile: var(--fog-water-tile, 1400px);
  top: calc(var(--fjord-source-top, 0px) + var(--fjord-source-height, 100vh) * .591);
  height: calc(var(--fjord-source-height, 100vh) * .15);
  mask: var(--fog-water-image, var(--fog-mask-water))
    0 calc(var(--fjord-source-height, 100vh) * -.591) /
    var(--fjord-source-width, 100vw) var(--fjord-source-height, 100vh) no-repeat;
  pointer-events: none;
}
.fjord-haze, .fjord-mountain-mist {
  /* Tint a cached neutral volume as one composited surface. Never repaint its
     fractal material in response to the per-frame JavaScript lighting weights. */
  filter: var(--fjord-fog-filter, none);
  transition: filter var(--fjord-light-duration, 2.2s) cubic-bezier(.333333,0,.666667,1);
  will-change: filter;
}
.fjord-haze::before, .fjord-haze::after,
.fjord-mountain-mist::before, .fjord-mountain-mist::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100% + var(--fog-tile));
  background: var(--fog-material-image, var(--fog-mask-noise)) 0 0 / var(--fog-tile) 100% repeat-x;
  opacity: var(--fog-water-opacity, .3536);
  animation: fjord-mist var(--fog-period, 7680s) linear infinite;
  will-change: transform;
}
.fjord-haze::after {
  background-position: 0 37%;
  background-size: var(--fog-tile) 130%;
  opacity: calc(var(--fog-water-opacity, .3536) * .45);
  animation-delay: calc(var(--fog-period, 7680s) * -.31);
}
.fjord-mountain-mist {
  --fog-tile: var(--fog-far-tile, 1700px);
  /* Crop the composited surface to the occupied source-space band. The mask still
     uses the complete photograph's coordinate system at every viewport size. */
  top: calc(var(--fjord-source-top, 0px) + var(--fjord-source-height, 100vh) * .31);
  height: calc(var(--fjord-source-height, 100vh) * .301);
  mask: var(--fog-terrain-image, var(--fog-mask-terrain))
    0 calc(var(--fjord-source-height, 100vh) * -.31) /
    var(--fjord-source-width, 100vw) var(--fjord-source-height, 100vh) no-repeat;
  pointer-events: none;
}
.fjord-mountain-mist::before {
  background-position: 0 60%;
  background-size: var(--fog-tile) 170%;
  opacity: calc(var(--fog-mountain-opacity, .8496) * .8);
}
.fjord-mountain-mist::after {
  --fog-tile: var(--fog-slope-tile, 2200px);
  background-position: 0 60%;
  background-size: var(--fog-tile) 200%;
  opacity: calc(var(--fog-mountain-opacity, .8496) * .32);
  animation-delay: calc(var(--fog-period, 7680s) * -.43);
}
.fjord-clouds {
  /* The shared 2D mask preserves the sky in gaps beneath foreground branches. */
  mask: var(--fog-mask-sky) 0 0 / 100% 100% no-repeat;
  --fjord-cloud-tile: calc(var(--fjord-source-width, 100vw) * .84);
}
.fjord-cloud-sheet {
  position:absolute;
  inset:0;
  z-index:1;
  background: url('assets/backgrounds/fjord-cloud-texture.svg') 0 0 / var(--fjord-cloud-tile) 53% repeat-x;
  opacity: calc(.94 - var(--fjord-night, 0) * .49);
  transition: opacity var(--fjord-light-duration) cubic-bezier(.333333,0,.666667,1);
  animation: fjord-cloud-bank 60s linear infinite;
}
.fjord-clouds::before, .fjord-clouds::after {
  content: '';
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  transform:translate(-50%,-50%);
  z-index:0;
  transition: opacity var(--fjord-light-duration) cubic-bezier(.333333,0,.666667,1);
}
.fjord-clouds::before {
  left: var(--fjord-moon-x, 70.2%);
  top: var(--fjord-moon-y, 19%);
  width: var(--fjord-body-size, 1.914%);
  opacity: var(--fjord-moon);
  background:
    radial-gradient(circle at 39% 34%, transparent 36%, #0a192e50 100%),
    var(--fjord-moon-image, none) center / 200% 100%;
  filter:brightness(1.18) contrast(.86) blur(.7px);
  box-shadow: 0 0 10px 2px #d1e0f229, 0 0 34px 12px #c9e3ff0c;
}
.fjord-clouds::after {
  left: var(--fjord-sun-x, 70.2%);
  top: var(--fjord-sun-y, 19%);
  width: var(--fjord-body-size, 1.914%);
  opacity: var(--fjord-sun);
  background: radial-gradient(circle, #fffdf6 35%, #fff2d3 78%, #ffe9b5);
  box-shadow: 0 0 14px 5px #fff1ce70, 0 0 36px 13px #ffe5ab3d, 0 0 75px 22px #ffe5ab10;
  filter:blur(.7px);
}
#fjord-canvas { opacity: 0; transition: opacity .6s ease; }
.site-background[data-renderer='webgl2'] #fjord-canvas { opacity: 1; }
.site-background[data-renderer='webgl2'] .fjord-clouds,
.site-background[data-renderer='webgl2'] .fjord-mountain-mist,
.site-background[data-renderer='webgl2'] .fjord-haze { visibility: hidden; }
.fjord-vignette {
  background: linear-gradient(180deg, #08192e4d, transparent 34%, #03132324),
    radial-gradient(ellipse at center, transparent 48%, #07182c35);
}
.site-background[data-motion='paused'] .fjord-clouds,
.site-background[data-motion='paused'] .fjord-cloud-sheet,
.site-background[data-motion='paused'] .fjord-mountain-mist::before,
.site-background[data-motion='paused'] .fjord-mountain-mist::after,
.site-background[data-motion='paused'] .fjord-clouds::before,
.site-background[data-motion='paused'] .fjord-clouds::after,
.site-background[data-motion='paused'] .fjord-haze::before,
.site-background[data-motion='paused'] .fjord-haze::after { animation-play-state: paused; }
@keyframes fjord-mist {
  from { transform: translate3d(calc(-1 * var(--fog-tile)), 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes fjord-cloud-bank {
  from { background-position: 0 0; }
  to { background-position: var(--fjord-cloud-tile) 0; }
}
.site-background[data-lighting='instant'] .fjord-photo,
.site-background[data-lighting='instant'] .fjord-tint,
.site-background[data-lighting='instant']::after,
.site-background[data-lighting='instant'] .fjord-cloud-sheet,
.site-background[data-lighting='instant'] .fjord-haze,
.site-background[data-lighting='instant'] .fjord-mountain-mist,
.site-background[data-lighting='instant'] .fjord-clouds::before,
.site-background[data-lighting='instant'] .fjord-clouds::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  #fjord-canvas { transition: none; }
  .fjord-photo, .fjord-tint, .site-background::after, .fjord-cloud-sheet,
  .fjord-clouds::before, .fjord-clouds::after { transition: none; }
  .fjord-haze, .fjord-mountain-mist { transition: none; }
  .fjord-clouds, .fjord-cloud-sheet, .fjord-clouds::before, .fjord-clouds::after,
  .fjord-mountain-mist::before, .fjord-mountain-mist::after,
  .fjord-haze::before, .fjord-haze::after { animation-play-state: paused; }
}
@media print { .site-background { display: none !important; } }
@media (max-width: 700px) {
  /* One transported noise sheet per fog region on the lightweight renderer. */
  .fjord-haze::after, .fjord-mountain-mist::after { display: none; }
}

/* HTTP delivery: no render-blocking embedded SVG bundle. */
.site-background {
  --fog-mask-sky: url("assets/backgrounds/delivery/sky-2c83f562298d814d.webp");
  --fog-mask-terrain: url("assets/backgrounds/delivery/terrain-d19157d4471abca3.webp");
  --fog-mask-water: url("assets/backgrounds/delivery/water-b80401432aabf2d4.webp");
  --fog-mask-noise: url("assets/backgrounds/delivery/material-18832c2c83258dce.webp");
  --fjord-day-image: url("assets/backgrounds/delivery/day-9e0c13b68d2e0570.webp");
  /* Match cover geometry before JavaScript, preventing cloud layout shifts. */
  --fjord-source-width: max(100vw, calc(100vh * 1672 / 941));
  --fjord-source-height: max(100vh, calc(100vw * 941 / 1672));
  --fjord-source-left: calc((100vw - var(--fjord-source-width)) / 2);
  --fjord-source-top: calc((100vh - var(--fjord-source-height)) / 2);
}
.fjord-cloud-sheet {
  left: calc(-1 * var(--fjord-cloud-tile));
  right: 0;
  animation-name: fjord-cloud-transport;
  will-change: transform;
}
@keyframes fjord-cloud-transport {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--fjord-cloud-tile), 0, 0); }
}