:root {
  --landscape-sky-image: none;
  --landscape-far-image: none;
  --landscape-middle-image: none;
  --landscape-near-image: none;
  --landscape-sky-top: #151515;
  --landscape-sky-mid: #454440;
  --landscape-horizon: #77736a;
  --landscape-far-light: #73716d;
  --landscape-far-dark: #595856;
  --landscape-middle-light: #62605b;
  --landscape-middle-dark: #3c3b38;
  --landscape-near-light: #54514a;
  --landscape-near-dark: #292825;
}

:root[data-theme="light"] {
  --landscape-sky-top: #ffffff;
  --landscape-sky-mid: #fafafa;
  --landscape-horizon: #f3f2ef;
  --landscape-far-light: #eeeae4;
  --landscape-far-dark: #d6d4d1;
  --landscape-middle-light: #cdc9c1;
  --landscape-middle-dark: #929496;
  --landscape-near-light: #b9ac96;
  --landscape-near-dark: #726b62;
}

.landscape {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  contain: strict;
}

:root[data-landscape] .landscape {
  visibility: visible;
}


#webgl {
  z-index: 1;
}

.vignette {
  z-index: 2;
}

[data-barba="container"] {
  z-index: 3;
}

.landscape__sky {
  position: absolute;
  inset: 0;
  background-image: var(--landscape-sky-image), radial-gradient(ellipse 70% 55% at 79% 34%, #ffffff00, transparent 70%), linear-gradient(var(--landscape-sky-top), var(--landscape-sky-mid) 38%, var(--landscape-horizon) 68%, var(--landscape-near-dark));
  background-size: cover;
  background-position: center;
}

.landscape__sun {
  position: absolute;
  width: 5.6vmin;
  height: 5.6vmin;
  left: 77%;
  top: 25%;
  border-radius: 50%;
  background: #ffe4ac;
  opacity: .66;
  box-shadow: 0 0 45px 18px #ffce7b38, 0 0 130px 65px #e8b76822;
}

.landscape__layer {
  position: absolute;
  left: -8%;
  width: 116%;
  transform-origin: 50% 85%;
  will-change: transform;
}

.landscape__surface {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;

  -webkit-mask-image: linear-gradient(#000 0 64%, #000e 74%, #0007 87%, transparent 100%);
  mask-image: linear-gradient(#000 0 64%, #000e 74%, #0007 87%, transparent 100%);
}

.landscape__layer--far {
  top: 18%;
  height: 55%;
}

.landscape__layer--far .landscape__surface {
  clip-path: polygon(0% 52.71%, 1% 50.78%, 2% 49.06%, 3% 49.28%, 4% 46.90%, 5% 45.60%, 6% 43.70%, 7% 41.72%, 8% 43.22%, 9% 43.52%, 10% 44.67%, 11% 45.05%, 12% 46.15%, 13% 45.85%, 14% 42.28%, 15% 39.38%, 16% 37.87%, 17% 33.65%, 18% 31.93%, 19% 28.96%, 20% 24.72%, 21% 23.57%, 22% 18.88%, 23% 22.88%, 24% 24.82%, 25% 25.32%, 26% 28.54%, 27% 30.56%, 28% 31.10%, 29% 33.74%, 30% 33.76%, 31% 36.99%, 32% 37.79%, 33% 39.82%, 34% 38.93%, 35% 37.31%, 36% 35.79%, 37% 33.51%, 38% 30.24%, 39% 29.68%, 40% 27.33%, 41% 23.77%, 42% 21.15%, 43% 24.00%, 44% 24.98%, 45% 27.19%, 46% 28.38%, 47% 29.75%, 48% 26.42%, 49% 24.27%, 50% 22.61%, 51% 20.83%, 52% 17.68%, 53% 16.02%, 54% 13.10%, 55% 16.34%, 56% 18.23%, 57% 19.86%, 58% 21.85%, 59% 24.10%, 60% 26.47%, 61% 30.87%, 62% 32.90%, 63% 34.60%, 64% 35.06%, 65% 38.39%, 66% 39.11%, 67% 42.93%, 68% 44.37%, 69% 45.10%, 70% 45.26%, 71% 45.30%, 72% 46.84%, 73% 47.61%, 74% 46.38%, 75% 44.42%, 76% 42.70%, 77% 40.15%, 78% 37.07%, 79% 34.74%, 80% 33.55%, 81% 29.46%, 82% 30.97%, 83% 33.78%, 84% 34.46%, 85% 37.62%, 86% 37.92%, 87% 41.02%, 88% 37.54%, 89% 36.59%, 90% 34.10%, 91% 31.89%, 92% 28.48%, 93% 26.19%, 94% 27.73%, 95% 29.95%, 96% 32.97%, 97% 33.38%, 98% 35.66%, 99% 38.30%, 100% 39.17%, 100% 100%, 0 100%);
  background-image: var(--landscape-far-image), radial-gradient(ellipse 65% 90% at 80% 22%, #ffffff26, transparent 75%), radial-gradient(ellipse 55% 85% at 20% 65%, #3433310c, transparent 80%), linear-gradient(165deg, var(--landscape-far-light), var(--landscape-far-dark) 75%);
}

.landscape__layer--middle {
  top: 31%;
  height: 47%;
}

.landscape__layer--middle .landscape__surface {
  clip-path: polygon(0% 37.00%, 1% 36.90%, 2% 36.62%, 3% 36.18%, 4% 35.62%, 5% 35.00%, 6% 34.38%, 7% 33.82%, 8% 33.38%, 9% 33.10%, 10% 33.00%, 11% 33.29%, 12% 34.15%, 13% 35.51%, 14% 37.32%, 15% 39.45%, 16% 41.79%, 17% 44.21%, 18% 46.55%, 19% 48.68%, 20% 50.49%, 21% 51.85%, 22% 52.71%, 23% 53.00%, 24% 53.17%, 25% 53.69%, 26% 54.51%, 27% 55.59%, 28% 56.87%, 29% 58.28%, 30% 59.72%, 31% 61.13%, 32% 62.41%, 33% 63.49%, 34% 64.31%, 35% 64.83%, 36% 65.00%, 37% 64.73%, 38% 63.93%, 39% 62.66%, 40% 61.00%, 41% 59.07%, 42% 57.00%, 43% 54.93%, 44% 53.00%, 45% 51.34%, 46% 50.07%, 47% 49.27%, 48% 49.00%, 49% 48.90%, 50% 48.61%, 51% 48.14%, 52% 47.51%, 53% 46.75%, 54% 45.89%, 55% 44.97%, 56% 44.03%, 57% 43.11%, 58% 42.25%, 59% 41.49%, 60% 40.86%, 61% 40.39%, 62% 40.10%, 63% 40.00%, 64% 39.78%, 65% 39.12%, 66% 38.06%, 67% 36.63%, 68% 34.89%, 69% 32.90%, 70% 30.74%, 71% 28.50%, 72% 26.26%, 73% 24.10%, 74% 22.11%, 75% 20.37%, 76% 18.94%, 77% 17.88%, 78% 17.22%, 79% 17.00%, 80% 17.10%, 81% 17.40%, 82% 17.86%, 83% 18.46%, 84% 19.14%, 85% 19.86%, 86% 20.54%, 87% 21.14%, 88% 21.60%, 89% 21.90%, 90% 22.00%, 91% 21.78%, 92% 21.14%, 93% 20.15%, 94% 18.89%, 95% 17.50%, 96% 16.11%, 97% 14.85%, 98% 13.86%, 99% 13.22%, 100% 13.00%, 100% 100%, 0 100%);
  background-image: var(--landscape-middle-image), radial-gradient(ellipse 46% 78% at 78% 24%, #fff2da50, transparent 78%), radial-gradient(ellipse 48% 70% at 30% 55%, #454a5426, transparent 80%), linear-gradient(165deg, var(--landscape-middle-light), var(--landscape-middle-dark));
}

.landscape__layer--near {
  top: 40%;
  height: 45%;
}

.landscape__layer--near .landscape__surface {
  clip-path: polygon(0% 8.00%, 1% 8.10%, 2% 8.40%, 3% 8.88%, 4% 9.50%, 5% 10.22%, 6% 11.00%, 7% 11.78%, 8% 12.50%, 9% 13.12%, 10% 13.60%, 11% 13.90%, 12% 14.00%, 13% 14.31%, 14% 15.24%, 15% 16.73%, 16% 18.71%, 17% 21.08%, 18% 23.72%, 19% 26.50%, 20% 29.28%, 21% 31.92%, 22% 34.29%, 23% 36.27%, 24% 37.76%, 25% 38.69%, 26% 39.00%, 27% 39.28%, 28% 40.09%, 29% 41.40%, 30% 43.14%, 31% 45.23%, 32% 47.55%, 33% 50.00%, 34% 52.45%, 35% 54.77%, 36% 56.86%, 37% 58.60%, 38% 59.91%, 39% 60.72%, 40% 61.00%, 41% 61.00%, 42% 61.00%, 43% 61.00%, 44% 61.00%, 45% 61.00%, 46% 61.00%, 47% 61.00%, 48% 61.00%, 49% 61.00%, 50% 61.00%, 51% 61.00%, 52% 61.00%, 53% 61.00%, 54% 60.77%, 55% 60.11%, 56% 59.04%, 57% 57.61%, 58% 55.90%, 59% 54.00%, 60% 52.00%, 61% 50.00%, 62% 48.10%, 63% 46.39%, 64% 44.96%, 65% 43.89%, 66% 43.23%, 67% 43.00%, 68% 42.80%, 69% 42.22%, 70% 41.28%, 71% 40.02%, 72% 38.50%, 73% 36.78%, 74% 34.94%, 75% 33.06%, 76% 31.22%, 77% 29.50%, 78% 27.98%, 79% 26.72%, 80% 25.78%, 81% 25.20%, 82% 25.00%, 83% 24.91%, 84% 24.67%, 85% 24.27%, 86% 23.75%, 87% 23.15%, 88% 22.50%, 89% 21.85%, 90% 21.25%, 91% 20.73%, 92% 20.33%, 93% 20.09%, 94% 20.00%, 95% 20.40%, 96% 21.50%, 97% 23.00%, 98% 24.50%, 99% 25.60%, 100% 26.00%, 100% 100%, 0 100%);
  background-image: var(--landscape-near-image), radial-gradient(ellipse 52% 62% at 76% 22%, #ffebcb45, transparent 78%), radial-gradient(ellipse 48% 70% at 22% 55%, #363c4426, transparent 80%), linear-gradient(175deg, var(--landscape-near-light), var(--landscape-near-dark));
}

.landscape__mist {
  position: absolute;
  inset: 24% -10% 0;
  background: radial-gradient(ellipse 70% 29% at 52% 35%, #e6e4de70, transparent 75%);
  opacity: .75;
}


.landscape__layer--far.is-photographic .landscape__surface {
  clip-path: none;
  background-image: var(--landscape-far-image);
}

.landscape__layer--middle.is-photographic .landscape__surface {
  clip-path: none;
  background-image: var(--landscape-middle-image);
}

.landscape__layer--near.is-photographic .landscape__surface {
  clip-path: none;
  background-image: var(--landscape-near-image);
}

.hero__discovery {
  position: absolute;
  left: var(--pad);
  bottom: clamp(2.5rem, 8vh, 6rem);
  max-width: 50%;
  visibility: hidden;
  opacity: 0;
}

.hero__discovery-label,
.hero__discovery-note {
  display: block;
  font-size: .75rem;
  line-height: 1.6;
  letter-spacing: .12em;
  color: var(--muted);
  font-family: var(--f-display);
}

.hero__discovery p {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.22;
  margin: .65rem 0 1rem;
  text-wrap: balance;
}

:root[data-landscape] .hero {
  height: 100svh;
  min-height: 100svh;
}



@media(max-width:760px) {
  .landscape__layer {
    left: -38%;
    width: 176%;
  }

  .landscape__layer--far {
    top: 15%;
    height: 57%;
  }

  .landscape__layer--middle {
    top: 28%;
    height: 51%;
  }

  .landscape__layer--near {
    top: 39%;
    height: 48%;
  }

  .landscape__sun {
    left: 77%;
    top: 29%;
    width: 8vmin;
    height: 8vmin;
  }

  .hero__discovery {
    right: var(--pad);
    bottom: 9vh;
  }

  .hero__discovery-label {
    letter-spacing: .04em;
  }

  :root[data-landscape] .hero__cue {
    display: flex;
    bottom: 1.4rem;
    right: var(--pad);
  }

  :root[data-landscape] .hero__cue i {
    height: 2rem;
  }
}

@media(prefers-reduced-motion:reduce) {
  .landscape__layer {
    will-change: auto;
  }
}


:root[data-landscape] {
  --home-copy-shadow: 0 1px 2px #101010e6, 0 0 9px #10101099;
  --home-copy-color: #f4f2ed;
}
:root[data-landscape][data-theme="light"] {
  --home-copy-shadow: 0 1px 2px #ffffffcc, 0 0 9px #ffffff80;
  --home-copy-color: #242424;
}
:root[data-landscape] :is(.hero__lead, .hero__discovery, .manifesto__text, .seasons__title, .season, .outro__p) {
  text-shadow: var(--home-copy-shadow);
}
:root[data-landscape] .season p {
  color: var(--home-copy-color);
  font-weight: 300;
  line-height: 1.75;
  max-width: 34ch;
}


.landscape__sun { display: none; }