<!-- set role and aria-label to expose this as an image to accessibility tools -->
<div class="landscape" role="img" aria-label="Monotone illustration of a landscape. Trees are in the foreground, a loch and forest is in a valley and in the background a mountain range is visible.">
  
  <!-- sun -->
  <div class="landscape__sunWrap">
    <div class="landscape__sun"></div>
  </div>
  
  <!-- landscape layer 1 - clouds -->
  <div class="landscape__layer" style="--offset:0.96">
    <div class="landscape__image">
      <svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
        <path d="M1830 81c23-15 55-16 83-21-32 8-63 15-91 32l-4 8c-22 8-47 9-69 18 33 2 65-15 98-14-132 29-265 60-397 86 38-32 94-25 130-60 30-5 57-21 88-20 20 6 37-5 56-6 7-22 34-31 54-22 17 8 34-4 52-1zm576 28c84-1 168-1 251 16 10 2 21 4 27 13-38 23-84 29-127 39l-1 5c10 2 20 3 29 7-45 1-90-2-134 7 25 8 54 8 79 17-64-1-129 0-192-11v-8c83-20 168-32 251-52-3-4-7-6-13-6-57-6-114-17-170-27zm-391 75c101-10 203-23 304-32v6c-50 9-101 15-150 28l-1 6c12 0 23-2 35-1-45 15-94 16-140 24-11-5-41 1-24-18l-1-9c-8 0-19 6-23-4zm36 15c23 18 55-6 82-4v-8c-27 1-55 5-82 12zm681-33c63-9 125 12 188 8-45 12-95 13-139 28 28 0 56-3 84-1-90 9-179 21-268 38-71 10-144 15-215 25-10 0-24 9-28-4 79-24 165-30 247-49 16-15 36-24 59-25 20-18 49-11 72-20zm198 60c18-1 37-6 55-4-40 13-90 12-125 30 17 5 34 2 51 3l-12 7c29 0 58-4 88-1-33 9-73 23-105 9-43 2-87-3-130 5-8-3-3-12 2-15-66 7-131 20-197 25v-9c123-23 249-33 373-50z" style="fill: var(--c0);"/>
      </svg>
    </div>
  </div>
  
  <!-- landscape layer 2 - mountains 1 -->
  <div class="landscape__layer" style="--offset:0.92">
    <div class="landscape__image">
      <svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
        <path d="M1740 213c11 1 556 40 576 44 10 1 19 5 29 4 14-3 27-9 41-10 13-1 25 3 38 3 12-1 24 3 36 3 9 1 20 0 28 5 9 4 18 9 28 9 11 1 21-3 32-3 14 0 25 9 37 13 9 3 19 1 27-3 11-3 17-14 28-16 11-3 21 4 32 2l30-6c12-1 23-5 34-4l24 4h32c15 1 29 5 44 5 12 0 25-2 37 0l23 6c10 2 19 8 30 9 16 2 30 12 47 13 16 2 33 3 49-1 4-1 0 710 0 710H0h1146s-7-784 0-786c8-2 16-2 24 0 10 2 20 8 30 10l54 3c27 0 53-5 80-4l39 2c14 2 29 3 43-3 11-3 21-9 32-9 11-1 22 2 32 7 15 6 32 3 47-1 18-3 35-12 53-12 17-1 35 3 52 3 9 0 19 4 28 2 14-2 28-6 42-7 13-1 25 7 38 8z" style="fill: var(--c2);"/>
        <path d="M2687 271c32 36 78 61 108 62 23 0 55-22 72-43-7 15-16 27-28 35 21-4 36-15 50-29-2 5-7 11-14 18 6-2 12-6 18-11-45 42-68 44-94 48l-22 4c-4 0-10-5-10-5-46 2-81-7-104-39-1-3 0-4 1-6 1-3 0-6-2-9 1-3 3-4 5-6l-3-11c28 31 55 51 81 55-28-16-49-35-58-63zm-1491-27c17 11 32 26 49 38s39 28 54 37c12 7 24 13 37 17 17 6 41 15 62 15 36 1 75-4 112-17 22-7 76-33 99-43 19-9 46-21 55-27 13-8 22-9 19-19-1-4-13-1-15-2-4-1-8-2-7-3 1-3 9-1 23-7 8-4 20-5 17-15-1-7-18-7-31-4-16 4-38 3-48 4-11 0-22 0-16 8 3 4 28 17 27 19s-19-3-29-3h-28l-12 3c-1-1 1-2 6-6 8-7 4-11-6-12-6 0-21 3-29-6 0-1 0-2-2-2-12 3-36 6-44 5-3 0-3 5 0 6 3 2 18 3 19 5 0 2-15 8-10 13 3 2 26 5 24 7-3 2-25-1-29 0-2 1-9 5-15 4-8 0-23-6-32-5-10 1-17 15-17 20-1 2 3 5 4 6 2 1 8 0 7 2-2 4-9 2-12 3-3 2-8 11-8 15 1 3 13 5 13 7s-13 2-18 0c-6-2-16-11-21-13-3-1-10 4-10 0-1-5 20-6 28-15 9-9 20-31 22-41 2-7-1-17-5-18-3-1-15 6-30 7-20 2-67-4-94-2-29 2-74 5-91 2-15-2-38 3-18 17zm1322 33c1-2 1-4 4-4 10 0 26-2 31-1 9 3 18 4 22 10 5 5 4 17 5 25 1 14-20 31-32 30-5 0-8-2-8-2h5c12-1 32-22 23-33-7-8-38 21-47 24-2 0-4-4-5-2-2 3-16 4-19 1 0-1 12-3 10-5-2-1-14 1-18 1l-5-4c-3-2-9-1-14-1-6 0-12-4-12-4-2 5 23 13 22 14-2 2-27-8-40-14-13-5-30-9-39-14-6-4-12-10-15-15-4-6-6-14-6-19 0-2 3-5 6-6l10-1 16 2 6 1 2 5c0 3 2 14 0 14-1 0-14-14-15-13-1 2 7 13 11 17l8 9c1 1 4 1 5-2l-3-17-2-9c1-2 3-4 5-4l7-1 2 2 1 26 3 6 2 2h2c0-1-2-2-2-7l1-13 2-13c0-1 0-3 3-3 8 0 20 0 26 2l15 5 16 6c4 2-1 9-2 15l-1 17h2c1-6 7-19 12-27zm6 39c4-2 16-19 17-27l1 1-1 7h2l3-2 1 1c-4 6-19 21-22 21-1 0-2 0-1-1zm-10 0c5-3 8-8 8-15l-7 6c-1-1 5-14 12-20 2-2 7-1 7 1 3 10-10 26-15 28-4 2-5 0-5 0zm7-30c-3 4-9 19-9 22 1 1-2 0-2-2 0-4 7-18 9-21 1-1 3 0 2 1zm-38 16l1 5 2-1c0-2-2-5-3-4zm14-24c0 12-2 10-2 26h-2v-15c-1-2-6-7-7-6l-1 14c-1 1-2 0-2-1l-2-8v-9l-3-3-1 13c0 2-2 0-2-1l1-13c0-1 2-4 4-4s6 1 7 3l5 9c2-1 2-4 3-5h2zm-51 19l2 4c2 1 4 0 3-2-1-1-4-3-5-2zm105-3l-2 4h1l3-3c0-1-1-2-2-1zm-87-25v24c0 2-4 2-5 0a55 55 0 013-23c0-1 2-3 2-1z" style="fill: var(--c3);"/>
      </svg>
    </div>
  </div>
  
  <!-- landscape layer 3 - mountains 2 -->
  <div class="landscape__layer" style="--offset:0.9">
    <div class="landscape__image">
      <svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
        <path d="M1982 177c15-3 31 0 47 4s29 14 45 19l43 16c11 4 22 11 35 12 20 2 38-7 56-11 14-2 28-4 40 3 17 9 35 14 52 23 20 9 38 23 59 32 36 17 73 31 111 46 32 14 66 24 100 33 19 4 37 10 54 18 24 11 52 13 78 12 21-3 41-7 61-12 15-4 30-2 44-9 27-16 55-32 87-37 20-4 41-5 61-11 17-4 32-10 48-18 21-10 44-14 67-14 21 1 41 6 62 8 15 1 29-6 42-13 15-7 30-15 46-19 8-2 15 0 22 1 17 5 34 6 50 12 25 9 52 10 77 17 19 4 37 12 56 14 19 3 37 11 56 14 18 3 35 9 52 10 11 1 22 1 32 4 15 5 31 5 46 10 20 8 40 12 60 20 21 9 42 18 65 21 34 5 67-4 101-9 25-3 50-4 75-4 29 1 59 6 88 8v623H0V362c22-11 45-22 68-30 17-5 35-8 53-12 33-8 68-14 102-23l92-24c25-9 52-16 79-17l24-1c25-2 49 4 74 3 13-1 25-6 38-4 10 2 18 10 28 12 19 5 39 2 58-1l44-9c16-4 32-12 48-17 27-11 54-18 82-25 11-4 22-4 33-2 15 3 29 5 43 9 16 4 34 6 51 4 15-1 29-8 44-10 18-2 36 5 54 8 12 3 23-3 35-4 10-2 20 1 30 2 27 3 52-10 78-9 7-1 15 1 22 4 12 8 25 15 36 24 29 21 61 37 91 55 37 19 79 30 121 32 12 0 25 2 37 0 13-1 24-6 36-10l46-16 43-19c37-13 72-31 106-50 26-12 54-19 82-24 27-5 55 0 82 1 43 0 81-23 122-32z" style="fill: var(--c3);"/>
        <path d="M3169 281l5-3c15-7 30-15 46-19 8-2 15 0 22 1l6 2-2 2c-15 0-23 5-26 7-2 1-3 6 0 6 14 1 26 8 31 11 2 2 7 7 2 9-14 5-15 13-6 19-3 4 0 10 1 14 1 6-3 16-7 23-21 35-81 50-118 54-31 2-75 2-93 6-19 5-39 8-53 10-10 1-21 1-30-1-8 7-59 11-88 13s-53-1-82 0c-8 0-19-4-26-5-6 0-14 1-20-1-4-1-5-4-12-8-4-2-12-2-17-7l16-1c2 0 9-3 2-4-5 0-20 2-32 0 10-2 34-7 39-12 2-1 1-4-1-4-4 1-35 2-45-1 20-3 36-6 41-11l41-9c15-4 30-2 44-9 27-16 55-32 87-37 20-4 41-5 61-11 17-4 32-10 48-18 17-8 35-13 54-14 13 5 9 16 7 20-4 12-23 27-33 30-3 0-3 4 0 4 7 1 28-3 41-10a1259 1259 0 0197-46zm-702 153c-12 0-20-2-32-3-15-1-27 4-58-1-51-8-85-33-122-43-31-9-64-10-96-17-41-9-90-25-125-44-43-23-130-46-164-54l-30-3c-3 0-24 2-45 8-32 10-69 27-73 28-66 13-164 54-207 67-17 5-44 15-51 13-2 0-5-5-8-5-13 2-41 19-59 21-37 3-91-10-164-5-34 2-61 16-119 16-30 0-84-12-121-26-29-8-71-19-91-21-18-2-48-6-73-1-16 3-29 11-33 8-6-7 4-24 16-33 12-10 44-14 59-26 15-11 32-35 45-42 10-5 22-6 33-5-7-7-5-12 1-17-18-13-40-19-58-23l25-1c15-1 29-8 44-10 18-2 36 5 54 8 12 3 23-3 35-4 10-2 20 1 30 2 25 2 48-8 72-9a124 124 0 00-56 25c-17 13-57 44-77 47-4 0-39 18-56 22-13 4-30 1-39 2-6 0-13 4-13 4l52 7c9 0 21 7 17 10-2 3-6 4-30 4l45 5c32 2 58 1 82 0l-60-13c-6-1-19-2-19-4 2-5 19-8 26-8 20 0 80 6 96 6v-4c-9 0-17-7-18-10-2-5 5-13 11-12 14 0 54-2 67 3 3 1 13-3 13-3-8 0-25-8-30-13-4-4-8-9-7-14 2-9 17-31 23-38 1-2 10-2 17-2l20 14c29 21 61 37 91 55 37 19 79 30 121 32l18 1 19-1c13-1 24-6 36-10l46-16 43-19c37-13 72-31 106-50l22-9 10-3 38-10 3 3c3 1 12-2 18-1 10 1 32 0 41 8 3 4-18 6-17 8s16 4 20 6 4 5 3 8c-3 8-15 10-15 11 0 3 21 2 21 2l33 6 52 13-36-20 8-13s33 3 49 7c20 5 45 13 67 22l75 38s-15-11-21-19-16-21-16-32c0-8 4-19 12-21 16-4 65-2 80-5l12-2c19 0 36-8 53-12 10-2 21-3 31-1l20 22c10 10 22 26 34 35 11 10 26 15 38 23 15 11 34 46 61 61 17 10 38 10 60 9l11-1c3-1 3-4 0-4-7 0-27-2-37-8-10-5-21-10-29-17-6-5-18-16-15-21 1-2 16-1 23 0 9 2 24 7 28 10 3 2 6 0 4-2-4-4-21-13-32-18l-31-11c-17-6-47-14-69-28-14-9-30-24-37-33l-2-5c11 5 23 9 34 15 20 9 38 23 59 32 36 17 73 31 111 46 25 10 51 19 77 27l-1 4c-8 3-27-1-32-4-2-2-4 0-3 0 7 9 35 17 46 19 5 1 7 8 16 13 15 10 26 11 31 15 2 1 0 6-2 6-6 0-29-1-35-5-2-1-4 2-1 3 4 3 18 9 30 11l-19-2c-7-1-18 0-25 2-14 3-41 15-56 19-9 3-28 4-28 4l-1 1zM0 400v-38c22-11 45-22 68-30 17-5 35-8 53-12 33-8 68-14 102-23l92-24c25-9 52-16 79-17l24-1h21c-19-1-78 2-108 21-35 22-87 55-113 82-12 12-19 36-46 41-18 4-46-8-68-5-22 2-50 17-68 17-12 0-27-8-36-11zm568-132c16 2 33-1 48-3l44-9c16-4 32-12 48-17 27-11 54-18 82-25 11-4 22-4 33-2l10 2-19 1c-13 2-28 9-40 15-21 9-54 33-86 41-50 14-101 12-114 2l-6-5zm1391-85l3 3c2 1 6-1 8-1l13 5v4c-3 0-3 2 0 5-11 1-22 1-23 7 0 0 9 0 13 2l11 9c-4 3-1 5 2 9 0 0-23-5-26 2-1 3 26 20 26 20-31-12-74-25-127-39h1c35 0 66-15 99-26z" style="fill: var(--c4);"/>
      </svg>
    </div>
  </div>
  
  <!-- landscape layer 4 - mountains 3 -->
  <div class="landscape__layer" style="--offset:0.86">
    <div class="landscape__image">
      <svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 408s1229-15 1235-22c8-10 23-16 37-15 19 0 37-2 56-5 20-3 40-2 60-6 31-3 61-6 91-15 23-7 48-9 71-17 40-13 80-24 119-41 20-7 40-15 61-21 29-10 61-6 90 2l44 8c22 3 44 9 65 13 19 4 37 9 54 16 11 4 23 9 35 9 19 0 39 1 58 6 13 4 26 10 39 13l41 12c24 8 50 13 76 17 22 3 43 7 64 14 52 18 105 35 158 49 11 3 22-2 33 2 4 2 8 6 10 10h388c47-1 79-3 80-4 6-11 14-19 25-25 19-11 38-24 60-26l33-7 44-11c59-12 119-23 179-33 30-6 62-10 92-18 39-11 78-21 118-23 23 0 45-2 67 3 17 3 34 6 49 13 23 10 45 23 69 34 15 6 28 16 43 23 16 8 34 14 51 22 16 7 35 14 52 9 7-2 14-1 21 0 20 2 39-1 58-3 15-1 27 12 42 11l32 1v597H0V408z" style="fill: var(--c5);"/>
        <path d="M3470 296c15-3 31-5 46-6 23 0 45-2 67 3 17 3 34 6 49 13 23 10 45 23 69 34 15 6 28 16 43 23 16 8 34 14 51 22 16 7 35 14 52 9 7-2 14-1 21 0 20 2 39-1 58-3 15-1 27 12 42 11l32 1v84c-16 49-56 84-111 112l-171-143s39-18 40-26c0-2-8-9-17-12-12-4-41-10-56-10-9 0-24-6-26-10-2-2 0-4 3-5 0 0-13-12-22-14-9-3-25-1-31-1-3 0-5-3-2-4 3-3 13-4 20-4 0 0-26-15-41-20a267 267 0 00-88-8c-4 1-6-3-3-6 7-5 36-9 47-14 0 0-11-3-15-6l-8-8c-9-2-35-5-45-10l-4-2zm-1705-21c31 2 158 35 158 35-18 2-21 2-20 12 1 9 14 12 16 16-3 4-1 8 0 10-10 5-40 18-60 23-11 2-27 3-34 2-5-1-8-7-12-10s-11-4-11-6c1-3 9-7 15-9l16-4c4-1 3-9-1-10l-26-1c-9 0-19 2-24 3-1-4-4-4-5-6-1-3 5-7 0-12-6-4-10-2-15-2 6-6 23-10 28-12 5-3 4-9-3-11-7-3-36-5-42-7 3-5 13-12 20-11z" style="fill: var(--c4);"/>
      </svg>
    </div>
  </div>
  
  <!-- landscape layer 5 - valley 1 -->
  <div class="landscape__layer" style="--offset:0.83">
    <div class="landscape__image">
      <svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
        <path d="M396 354c9 0 18-3 27-5 7-1 14 0 20 2 17 3 34-1 51 2 9 2 19 2 29 2 13 1 26-3 39-1 11 2 22 1 33 1 16-2 33 1 49-1 22-2 44 3 66 2 16 0 31 4 46 5 9 0 18 4 28 4 6 1 12 0 18-1 12-1 22-6 34-7l33-2c10-1 19 4 29 4 9 1 18 1 27 4 14 3 28 3 42 3 19 1 39-2 59 2 15 3 30 6 46 6 17-1 35 0 52-4 23-5 47-5 70-3 17 2 32 11 48 15 27 7 56 10 84 10 16-1 31 6 45 13 10 4 20 4 30 7 6 2 10 9 16 12 7 2 15-2 22-5 12-4 25-2 37-5 23-6 47-1 70-4 15-3 29 9 43 3 13-5 28-10 43-7s29 6 44 7c9 0 17-5 26-5 16 0 33 2 49-1 10-2 18-7 28-8 8-1 17 3 25 1 31-11 63-4 94-10 11-2 23-3 34-2 14 0 28-5 42-4 11 1 20 7 31 9 9 2 18-1 27-3 13-2 26 1 38-2l18-6c7 0 14 4 21 4 13 0 26 3 40 4 11-1 20 8 31 8s22 0 33-3 22-8 33-10l28-5c4-1 8 3 11 5 13 1 27 6 39 1 7-2 14 1 21 3 12 4 24 6 37 9 11 3 22 1 34 3 7 1 15 4 23 4h35c9 1 17 5 26 6l29 4c13 3 27 1 41 2 10 0 19 5 28 6l36 3c14 3 28 2 42 2 12 0 24 2 35 0 12-1 23-4 33-7 10-4 20-3 30-3 11 0 21-5 32-6 13 0 27-1 40-4 7-2 14-7 22-7 8-1 17-1 25-4 13-4 26-2 39-3l23 1c12 2 24 1 35 5 9 3 19 5 29 5 8 0 16-2 24-4 11-2 22 1 32 0l27-1c11 0 22-3 33-1l37 3c11 0 22 6 33 5l21 1c10 3 20-2 30-3 16-2 32-6 48-1 16 6 34 1 51 3l55-7c8-1 16 3 24 3 9 0 17-8 26-8s17 6 24 11c12 9 26 17 42 18 15 2 31 3 46 1 25-3 50-7 74-13 13-2 25-10 39-8 18 2 37 4 55 3 17-1 34 2 51 0 12-2 24 0 36 1 7 0 12-6 19-8 8 0 16 2 25 1 12-3 23 3 35 3 13 2 25-5 37-5 10-2 18 8 29 7 9-1 18-3 28-3v597H0V391l36-5c11-1 23 1 34 3 17-3 34-9 52-8 15 1 31-2 46-3 9-1 15-7 24-8 13 0 26 1 39-4 5-1 10-5 16-5 20 1 39-1 59-1 16 1 30-6 46-6l24-2c7-1 13 2 20 2z" style="fill: var(--c6);"/>
      </svg>
    </div>
  </div>
  
  <!-- landscape layer 6 - valley 2 -->
  <div class="landscape__layer" style="--offset:0.8">
    <div class="landscape__image">
      <svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
        <path d="M651 500c3-5 8-9 14-11 7-2 15 0 23 0 32 2 64 9 96 2 11-2 20-9 30-11 16-3 33-2 50-4 15-2 29 7 44 2 14-6 29-6 44-6 8 0 16 3 24 4 8-1 16-4 24-4 13 0 25 3 38 2 35-2 71 0 106 2 19 1 38-5 56 1 15 5 31 2 46 2l35 2c10 2 21-2 31-2 19-1 38-5 57-8 7-1 13 2 20 4 7 3 14 3 22 5l20 8 18 2c13 1 25 8 39 7 17-1 34-2 51 0 14 2 27-5 41-6 12 0 23-6 34-8 14-3 26 5 40 4 20-1 39-10 56-21 11-6 24-4 36-4 25 2 49-3 74-3 14 1 26-7 40-8l20-5c12 0 25 5 36-2 7-5 16-8 26-7 7 1 13 6 19 10 11 5 23 6 35 7 10 1 19 6 29 7 11 2 22 0 33 2 8 1 15 5 23 6 9 2 18 1 28 3l20 5c21 3 42 0 63 3 10 0 19 5 28 6 9 2 19 2 28 2 11-1 20 5 30 5 17 0 34 6 51 8 12 2 25 0 37 0 31 7 62 0 92-5 10-2 20 1 30 2 21 2 41-5 62-4 23-2 47 2 69-5 26-7 52-13 79-16 19-4 38-3 56-9 18-4 36-9 54-9 10-1 18-6 28-7 8 0 16 1 23-3 10-5 22-4 33-4 10 0 20 0 30 3 8 3 16-2 24-3 18-3 36 0 54-1 8-3 17-4 26-6 16-6 32 3 48 1 15-1 29-5 44-4 12 1 19-10 30-13 9-1 17 2 26 1 13-2 26 5 39 3 8-1 14-6 22-9 6-1 13 2 19 3 15 4 31 1 46 5 14 3 29-2 43 2 9 3 17-4 25-6 11-4 22-11 34-11 20-1 40 2 60 4 14 0 26-7 38-10l54-5c11 0 20-7 31-8 14 1 27 10 41 11 13-3 26-8 40-6 5 1 7 7 13 9 5 2 11 2 16 6 11 8 23 15 34 24 5 5 10 9 16 12 6 0 12-2 19-1l24 6c19 6 34 22 54 23 8 1 16 4 23 8 16 9 34 13 48 24 16 6 32 14 43 27 6 7 16 7 24 10 8 5 13 12 20 17v443H651V500z" style="fill: var(--c7);"/>
      </svg>
    </div>
  </div>
  
  <!-- landscape layer 7 - loch -->
  <div class="landscape__layer" style="--offset:0.75">
    <div class="landscape__image">
      <svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
        <path d="M2550 660c-30 10-61 4-91 1-9 0-11-10-13-17-30-4-65 5-92-14-5-6-11-14-6-21 7-13 23-15 36-17l70-10c32-4 64 0 97 1 36-6 73 0 110-6 20-2 40-9 61-9 31 1 61 3 92 2 92-6 184 7 276 6 24-4 39 16 59 24 32 9 65 13 98 17 18 1 34 10 48 20 8 4 11 16 5 23-6 11-19 12-30 16-5 22-23 44-47 47-31 4-63 0-95 2-27 2-55 0-82 1s-52-8-78-13c-27-7-56-5-84-9-35-4-70-4-105-9l-109-13c-13-2-27 2-40 1-9-1-14-11-24-10-19-3-37-8-55-13h-1z" style="fill: var(--c2);"/>
        <path d="M2454 582c32-4 64 0 97 1-32 7-66 5-98 13-10 2-21-2-30-6l3 11c-20 3-40 6-59 12-4 3-12 4-4 12 3 7 12 8 18 10l57 3c16 1 29 13 45 15 22 3 45 0 67 7-30 10-61 4-91 1-9 0-11-10-13-17-30-4-65 5-92-14-5-6-11-14-6-21 7-13 23-15 36-17l70-10z" style="fill: var(--c0);"/>
      </svg>
    </div>
  </div>
  
  <!-- landscape layer 8 - foreground 1 -->
  <div class="landscape__layer" style="--offset:0.4">
    <div class="landscape__image">
      <svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
        <path d="M4000 1000H0V274l12-2-6 10c9-3 14-11 19-18 2 4 6 8 3 12-3 5-10 9-10 16l-9 3c4 2 9 8 14 6l6-12c5 3 10 4 15 1-1-4-3-9-7-12v-10c8-2 16 1 23 1l2-13c-2 3-3 6-6 7l-10-3c-2-8 5-14 12-14 3-5 6-12 13-11l-5-3c5-3 10-5 16-6l1 14 7 2-1 9h7l-7 9 8 7c-1 4-4 7-7 10l12 2-1 6c-8 5-16 8-25 9 9 3 18-2 28-4-1 4 0 10-5 13-6 7-15 10-23 12 7 0 15 1 22 4 6 1 12-2 17 0l-1 9 10-16 3 3-1-9c5 3 11 3 16 0-5-1-10-4-9-10l13-1-6-7c6-1 11-2 16-5l1 15 4-2v-6l12 1c4-4 5-8 8-12l-7-8c6-3 4-10 4-16l8 1-3-5 13-4c2 8 0 16-2 23l-4 3c5 6 10 13 19 13-4 2-7 5-11 6h-6l5 12c1 10 7 19 11 28 2 6 6 8 10 12l8-4c-2-11 3-21 8-30 9 2 13 11 20 16 1 7-7 5-11 4l10 9 5-7c2 6 0 11-2 16h8c2 5 6 9 11 12v5l-5 1 1 3h12v6c7 0 12-4 17-8-8-1-14-3-21-6l-1-5h17c-7-3-16-5-19-14 6 0 10 3 15 5h10l6 6 1-14c-6 2-12 3-19 3 0-4 1-7-1-11-4-5-11-9-13-16l14 7v-3l9 2-9-13 13-4-10-15 11 5c-3-5-3-11-3-17l18 5-7 8 15-1-2 10h-7l6 7 12-6-11 16 11-3c-4 5-11 7-17 10 1 5 8 6 12 9 4-3 8-5 13-6 0 4 1 9-2 13l-13 8c-4-1-7-2-11-1l10 7-15-5v1l1 3v1c10 5 20 1 29-3-2 6-5 12-10 15 7-2 13-6 21-3-5 5-11 6-17 5v5l9-3-8 11 14-4c-2 2-3 5-6 6-5 2-10 2-12 8l12-3 12 9-2-18 5-2 1 6 1-12 4 8 8-2c-5 4-9 9-7 15l6-4 1 5c3-2 5-6 8-4 8 2 14 8 22 8l12 3-13-15h4l-7-8 5-6-6-4v-4l11 6-4-12 14 6c-1-5-3-10-3-16l9-10 2 10 8-4c-5 4-9 9-8 16l8-5v4l9-1c-4 6-6 14-10 21l19-5c-4 5-9 9-11 16l14-7c-2 5-4 10-8 14l1 8-8 7 15 1c-6 6-14 12-16 21 5-1 11-2 14-7 4-4 9-6 14-7l5 6 5-4v9c0 5-2 12 5 14 4 4 9 2 12-1l-8-10c1-4 0-9 4-11l19 2 1-13-4 9-12-4c1-3 0-8 4-9 7-4 14-11 18-19 4 0 8-1 11-3 2 6 3 12 9 15l-1 8 6-2c-1 4-3 7-6 11 5 2 9 6 15 7l12 2c-9-6-12-16-17-24l4-5-7-4 9-5 3-6 11 7-2-16 8-11 3 9 6-3-8 13 15 5-1 15c10-2 19-9 26-17l-4-2-4-14 2-8 11 2-1 6 7-2c-1 6-3 12 2 17-5 5-4 12-3 19l17-1v6l9 3-10 3 12 6c-7 9-16 2-23-3l-2 11 13-2c-2 5-5 9-9 13 3 5 10 3 15 4l1-8c7-4 14-8 18-16 3-6 10-6 15-7 1 6 3 12 9 15l-1 7 6 1-7 9 8 6-3 10 10 2-8 11h9v8l-14 12c13 3 26 4 39 5l-7-11 11 5 5-4c-4-2-7-5-8-9l13-2-7-6 17-4c0 5 0 10-3 15l9-3-8 12c7 3 15 3 22 0l-9-11 8 3-2-14 17 4-8 6 11 1-3 9c1 3 2 7 1 10 0 4-3 9 0 13 6 7 15 10 19 17 6 9 6 19 8 28 4 8 14 10 21 11l39 11c4 0 7 2 9 3l-8-16 13 7c-4-8-9-17-9-26l13 1-5-8 13 2c-4-6-15-4-17-13l14 4c-6-6-11-12-15-19 7-2 13 3 20 4-5-3-9-8-11-15l20 6-2 7c3-6 8-10 13-14l-17 4c4-2 8-4 10-8l-12 1-1-4h-8c-3-5-5-11-4-17l14 8 12-9c-6-3-13-6-18-11l11 3-11-16 11 6 7-5c-5-2-10-6-9-12h16l-9-8c6-1 14 1 18-5 1 6 2 13-2 18l12-5-11 15 13 4-9 12 9 2c5-3 10-6 15-7-2 7-9 10-13 16l-4 11c-6 1-12-1-17-3v13c7-4 16-3 23-7 3-3 6-3 10-2-5 7-13 10-20 13h12c4 0 4 5 6 7l4-5 7-1v-8l11-1c-3-4-5-9-5-14l14 2v-5h-8v-5c6-5 11-12 19-17l7 12c5 7-1 19 9 23 3-3 9-6 10-11l9-18c4-7 5-16 8-24l-9 2-8-7 10-1 10-14-7 2c3-6 0-11-1-17l1-9 12 3-1 7 8-3-3 12 5 5-5 7 1 13 18-2-2 7 9 3 1 3h-6l-2 2 11 7-12 3c-3-3-6-6-10-7l-4 10 14-2c-2 5-6 9-9 13 3 5 11 4 16 5l-10 4 18 2-4 6 11-1v-7l15 1c1-7 2-13-3-19l4-4-2-9h6c1-6 6-7 11-8 2 7 1 13-2 19l3 3-7 1c4 7 10 12 18 14l-16 5c3 5 5 11 6 17 4 12 12 22 19 32 3 7 10 4 15 5 1-4 4-7 8-9l12 9 7-4-9-2-6-15c8 3 17 7 26 8l13-5v-4-1c-6 2-13 7-20 6 4-2 8-5 13-6l-1-1-1-3-1-1c-4 1-8 2-10 6l-5-5v-1l3-2 1-1-14-1-5-9 1-12 16 9c6-2 10-6 15-10l1-2c-9-3-17-6-23-13l15 4c-5-7-11-13-15-21l16 8 8-9-8-1c-4-3-3-8-4-13l20 2c-2-5-7-8-12-11 7-1 14-3 21-2l3-6c2 8 4 17-1 24l14-7c-3 10-13 15-14 25l4-3 13 2-11 17 12 2 16-9c2 5 6 8 11 10v4l6-1c0 6-1 12 4 16l-6 7 1 13 17-1v6l10 4v-9c-8-4-17-8-20-16l5-2 12 7c7 3 15 2 22 6l-10-12c1-6-4-9-7-12l6-2c-3-4-6-7-7-12l12 7-3-12c4 1 9 3 13 6-1-5-3-11-2-16l8-8 2 7 6-1c-3 3-6 8-6 13l14 1c-1 6-1 12-6 16l1 2-5 5c7-4 14-8 22-10-3 6-10 10-11 17l13-7-7 14 1 8-8 7 15 1c-6 6-13 12-16 20l25-5-6 9c8-2 13-10 18-16l3 10-11 16-8 3 10 10c5-4 7-10 10-16l8 4 6-4-8-10 2-10 8-1v11l3-9 10 1 1-13c-2 3-3 6-6 7l-10-3c0-5 1-9 6-10 6-3 10-9 14-14 2-6 9-6 13-8l3 12 7 3-3 8h7l-6 9 8 6-6 9 10 2c6 10 13 20 17 31 1 6 7 6 12 7l-8-13a576 576 0 0111 5v-2h1c-4-5-5-11-4-17l12 6c-5-7-13-12-14-21l1-1 2-1h1l16 11 7-2c-7-6-10-15-16-21-5-5-5-12-6-18 5 5 11 10 19 10l1-10c-8-4-16-8-20-16l1-1h3l1-1 12 7c7 3 15 2 22 6l-10-12c1-6-4-8-7-11l5-3c-2-4-5-7-6-12l12 7-3-12c4 1 9 3 13 6l-2-12c-2-6 4-9 7-12l3 7 6-1c-3 3-6 8-6 13l14 1c-1 6-1 12-6 16l1 2-5 5c7-4 14-8 22-10-3 6-10 10-11 17l13-7-7 14 1 8-8 7 15 1c-6 6-13 12-16 20l25-5-6 9c8-2 13-10 18-16l3 10-11 16-8 3 10 10c5-4 7-10 10-16l8 4 6-4-8-10c0-5 2-9 4-12l7 3-1 9 3-9 10 1 1-13c-2 3-3 6-6 7l-10-3c0-5 1-9 6-10 6-3 10-9 14-14 2-6 9-6 13-8l3 12 7 3-3 8h7l-6 9 7 6-4 11h10c-1 3-3 6-6 8-6 5-13 6-20 7 9 3 18-2 27-4-1 6-3 13-9 16-5 5-12 5-18 7l21 3 17 1-5 14h-7l4 9h13-9l6-14 12 5 9-6-16-9h8l-7-12 10 5 8-6h-8l-3-8h12l-5-7c6 0 11-2 16-5l-1 15 7-2-8 12 10 2-4 11 6 2v-1l2-1h1l-3-9 8-4-6-10 7 2-2-12 15 2-6 6 12 1c0 4-3 7-7 9l5 3 10-3-7 8 5 4-13 8 9 4 11-3 5 9 5-1c-4-6-6-12-8-18 12 0 23-2 35-4-11-1-25-8-24-21 8 2 17 7 25 2-10 1-20-4-25-12l10-1-4-11 7-5c-3-3-8-8-2-11l1-4c5-3 7-9 9-14h1l2 1h1c8 2 11 11 17 15 3 3 10 6 9 12l-9 5c-3-2-4-6-6-9l2 13h9l3 8-1-9h10c1 7-3 14-7 20 5 1 10 2 15 1 2 4 2 10 7 10 3-1 6-4 8-7l-6-2-9-17c-1-3 1-5 2-8 5 6 9 12 17 15l-6-9 23 5c0-9-9-13-14-19 5 0 10-2 15-1l-8-6 1-9c-4-4-6-8-8-12l13 6c-1-7-8-10-10-16 7 2 15 5 21 9-5-5-9-13-9-21l13-2c-1-5-3-9-7-13l6 2 4-8 1 9 2-3 4 2-2 16 10-3v9c5-2 9-6 11-11 7 3 13 7 19 12 5-8 16-8 19-16l-15-5c-5-2-10-7-14-12l17 6c-3-10-12-16-17-25 8 2 14 7 20 11l3-6c-1-5-4-9-7-13 1-4 1-7-1-11 8 3 16 3 25 2-3-6-10-9-16-13 6-1 14 2 18-3l9 3 2-10c4 5 3 12 4 18 0 5-4 9-6 13l19-10c-3 10-11 17-17 24l10 5h11c-4 8-10 15-15 22 6 0 11 0 16 3 6-6 13-10 21-12-1 3-1 8-4 11-7 5-14 10-19 17l1 14c-10 2-21 1-30-4v20l11-2-5-6 21 3 14-10 8 3-8 10c-7 3-15 4-21 10 9-1 19-2 27 2l-1 5c-8 3-16 5-24 10l-8-2c4 5 8 12 15 13h20c-9 5-21 3-29 11l22 8-17 1 1 7-7-7c1 5 4 9 7 11l-1 5c-5-3-12-6-18-3l7 6c8 6 18 2 26 5l5-9h10l-5-8 21-1-10-6c7-1 16-1 22-8l-10-4-7-10-11-4 1-4 11-6-9-2 1-5h10l-3-9 22 2 2-16-7-9 7-4-3-15 10 2-3-7 16-4-2 10h4c-3 6-7 14-2 21l-10-2 13 16 12 2-11 7h-10l7 15-3 4 10 13-5 1c7 4 10 13 13 20 5 4 10 8 11 14 7 2 13 4 20 4l-9-4c-2-8-4-16-2-24 0-8 7-14 11-22 9 6 16 15 24 22l-8 6-7-5c3 5 7 9 12 12l5-7c5 6 1 13-2 18l12 2 1 10h10v8l-7 5 14 1c2 1 3 4 4 6 8 2 14-3 18-9-9-2-20-2-25-11 6-3 14-2 21-2-8-4-17-6-22-14l4-4c6 5 12 9 20 8 5 0 8 6 13 4l1-15c-7 4-15 4-23 4v-12c-6-7-16-11-18-21l13 6c4 4 10 1 16 1l-11-15 16-5c-5-6-10-11-14-18l15 7c-6-7-5-16-2-24l2 7c7-1 13 0 20 1l-11 10h17c0 3 2 7-1 9-2 3-6 2-10 3l9 8 14-8c-3 7-9 12-12 20l12-4c-5 7-14 10-22 13l15 11 15-9 2 6 16-9c5-6 10-14 13-22-5 5-9 11-16 13-6 1-14 1-17-5l8-10-2-5c5-4 9-8 15-10 0-5 1-9 3-13 2-5 7-7 10-11a320 320 0 01-4-1l-1-2 11-12-4-6c3-5 9-11 7-18l-8 1-3 5 1-8-5 3-6-9 17 1-3-7c5-3 9-8 13-13l-11 2 5-5-6-6 3-3c-4-6-3-13-1-20 6 0 11 4 17 4l-4 5 2 4 9-4v13l-1 1-3 1-1 1 12 6-11 10c3 6 3 12 2 18 9 1 18-2 26-1-2 3-3 7-1 10l9-1 3 7h-10l-2 3 13 5 1 4-16 7-4 9c-2 3-6 4-10 5 5 10 17 6 25 11h-13v6c8-1 17-1 25 1l-7 7 14 3-1 7h-10c3 5 8 8 13 11l-10-4-8 5-7-6c0 6 3 10 6 14-6-2-8-8-10-14h-15c1 5 1 10 5 14 3 2 6 2 9 2l-3 7 6 1-1 5c9 2 18 7 28 5l5 15c-3 2-6-3-9-4l-3 3c-4-2-8-3-13-3l6 7c-6 1-13 0-19-2 5 4 10 9 13 16l4-1 6 6-1 6c5 5 9 13 18 13 21 4 42-2 63 2-8-6-18-4-26-9-5-4-5-9-4-14l13 6 11-9c-6-2-12-5-17-10l8 1-9-13 12 6 6-5-7-3-1-8h14l-8-7c6-1 12-2 18-5 0 6 0 12-3 17l11-5-10 14 12 3-8 12c8 2 15-2 22-5-3 7-9 11-13 16l-2 10-17-3 1 12 4-1 1-4 6 1c7 1 12-7 18-4-3 6-10 9-16 11l15 3c-4 2-7 6-10 10 6 1 12 0 18-1l-5-3v-6h8l1-8 8-2-3-11c3-4 8-1 12-1l-7-6c6-6 11-15 19-18l7 14c1 7 0 15 7 19 4-4 9-7 11-12 6-12 11-24 14-37-5-1-11-2-15-5 7-2 13-7 17-13-5-7-7-16-5-24 9 1 17 9 16 19l3 3c-5 5-4 12-3 19l16-1-1 6 9 1-4 7 7 6c-4 0-7 2-10 1l-12-6-2 11 12-2c-3 4-5 9-9 13l16 3c-3 1-7 1-9 5h17l-4 5 19 8v-7c-5-4-10-7-13-13 9 3 18 7 28 9-6-6-12-15-11-24l5-7 9 4c-1-4-3-8-2-12l5-6 3 5 4-1-6 9 12 1-2 12 9-1-7 10 9-2-7 19 7 1-10 15 12-2 4 4 12-10c0 9-6 16-13 21l7 6a394 394 0 016-8l1 1h1l8-4c-3-5-5-10-4-15l16 1-12-8c6-4 11-9 15-15 2-3 6-4 9-5l9 17v17l7 1c-4 6-11 9-18 11l19-4c-1 10-11 14-19 17l23 3c6 3 12 5 19 6l-8-6c1-3 0-6-2-9l8 3c1-3-1-6-2-9l8-1-3-6h9c3 5 4 10 1 15l6 2-3 8 12-3-6 9c18 4 36 8 55 8 7-2 6-9 5-14-4 0-6 4-9 6l-2-6-9 10-7-6c-7 1-14-1-21-3 3-5 7-9 13-12 7-3 11-10 17-17 3-4 10-5 14-9 4-6 8-12 11-20-6 6-11 13-19 13-4 0-8 1-11-2-2-5 3-9 5-13l-2-5 15-10 3-12c2-5 7-8 11-11l-6-1 10-13-2-7c3-6 7-10 7-16l-8-1-4 5 1-5c-4-2-12-2-10-8 5-1 11 0 16 1l-3-7c5-3 9-8 13-12l-11 2 5-6-6-5 4-2-6-8 3-5v-8c5 0 10 2 13 5l4-1-3 8 11-2-2 17 7 3-9 10c2 6 2 12 2 18 8 1 17-1 25-2-1 3-5 7-1 10 3 1 11-1 11 5l-12 3c4 3 8 6 14 6v6c-6 0-15 5-18-2-3-3-7-4-11-5l-4 14 19-3c-1 8-8 13-14 17l11 6v9l15-2-14-6 18-4c6 5 14 9 23 6-4-3-9-4-14-5 1-7-3-12-6-19 9 5 18 8 27 10 9 3 16-4 24-5l-2-6c-8 3-15 9-25 8l2-4c5-1 11-2 15-5-2-2-4-6-7-5-5 0-8 4-10 6l-6-5 5-6-16 1-7-10c-3-5 0-12 0-17 8 2 15 6 21 11 4-1 5-6 10-7 3-2 11-4 9-9l-14-4c-6-3-10-8-14-13l17 6c-3-10-14-16-17-26l20 11c1-2 4-4 3-7-1-4-4-7-6-11l-1-12c7 3 15 3 24 2-2-7-10-9-16-13l16-1 2-4 9 5 4-11 3 18c1 5-4 9-6 13l19-8-7 13-11 10c7 5 14 7 23 6-5 8-11 15-15 23 5-1 11-3 15-6l-3 9c9-4 16-11 26-13-1 4-2 9-6 12l-20 17c2 4 5 10 1 14-10 3-21 2-29-5l-1 16c0 2-1 5 2 5 3 3 7-1 10-2l-5-5c8 1 15 3 22 2l16-10 6 4-4 6c-6 8-18 6-25 14 9-1 19-2 27 2l-1 6c-7 2-13 7-21 5l-1 4-11-1c5 5 9 12 16 13h21c-11 5-23 4-32 11l24 8-17 2 1 5-6 2 7 4-2 5c-6-3-12-5-19-4 3 3 5 6 8 7 7 6 17 2 26 5v-7l7-1-1-10 6-5-6-7 5-2 7-20c5 2 10 2 13 6 4 7 11 11 17 16 2 6-5 10-9 13h16c0 7-3 13-6 20h14c1 5 4 10 8 12 2-3 10-6 5-9-7-6-14-15-12-24l16 13-3-8 21 5c0-9-9-13-14-19l12-1c-6-7-6-17-11-25l12 4c-3-5-6-10-11-14l14 2-4-16c5-1 11-1 15 4-1-6-2-11-6-16l4 1 4-6c3 3 6 5 7 8l-2 14 10-5 8 7-3 14c-2 7-7 12-11 17 5 0 11 0 16-2 5-3 11-6 18-7-3 8-11 11-17 15l-1 8c7 0 13-3 18-5-2 11-10 21-18 30l2 6c7-4 13-9 21-12 1 11-12 13-16 22l13-5 2 7c-5 5-10 10-11 18 24-2 48-1 71-5-4-2-11-5-7-12 7 0 15-3 22-6-2-4-5-7-10-9 2-2 3-5 6-6h17c-7-7-19-6-28-7l3-5c-10-1-17-8-25-12l3-5c6 1 11-1 14-6 7 4 16 8 23 3v-7l-5-2-7 5-3-21c6-1 11-4 17-7l1 9 5-4h6c-3-5-7-11-6-18 1-4 5-7 8-10 3 2 5 5 9 6 7-1 14-5 16-12l-6 3-2-11-9 1v-5l6-3-5-8 6-7c10 5 21 5 32 6-1-3-2-7-5-8l-18-6-2-13c6-1 9-4 11-9l9 2v-7c8-6 12-14 16-22l6 5 7-8h7c1 6-1 12 1 18s10 4 14 5l-4 16 8-6 1 9c-2 4-7 6-11 9l16 10c-3 6-7 13-12 17l20 2-4 12-6 1 3-11c-4 4-5 10-8 14-8 6-18 7-27 6 9 9 23 1 33-1 6-2 12-3 13-9l16 1c0-4 1-9-1-13-2-6 0-13 0-20h5c1-5 6-7 11-7 1 8 1 17-5 23l8 10 9 2c-4 5-10 5-15 6 3 8 4 17 8 25 5 8 8 18 17 22 10 3 20 0 30 2 1-6-1-11-4-15h7l4-11-6 1-7-11 2-12 15 9c5-6 11-9 18-11-9-3-18-6-24-14l14 4-14-20 16 8 9-10-7 3c-4-4-6-10-6-16 7 1 14 3 21 0l-13-10 21-2 3-5c2 8 4 17-2 24 5-2 9-5 14-6-2 7-8 13-13 18 5 3 11 5 17 5l-11 18 12-5-1 7 12-12c11 2 21-5 32-6l-3-6 7-1-4-7 12-3c4-5 6-12 4-18-5 2-11 3-16 1l-4 7-1-8-7 9-10-6-11 4 13-8 1-4-9 1c-4-1-3-7-4-10l17-2c-3-3-7-6-7-10 9-2 19-2 27 1l1-8-15 1c6-6 15-4 22-7l7-7c-5 0-10-3-15-5l4-6c-7-6-16-10-24-13l1-5c4-1 10 0 13-4 2-2 0-5 0-7l-10 4 1-9c5 1 11 2 14-4l-5-9c10 2 20 5 30 3-1-7 0-14 2-21l-11-11 12-7-5-2c1-5 2-11 0-16l10 4 3-4-5-7 6 2c3-5 9-7 15-6l-1 10 4 3c-3 4-5 9-5 14l-4 7 8 5-15-2c4 6 10 10 15 15l-1 6 18 2c-3 2-5 6-7 9l-10-8 5 9c-5-2-12-3-14 3 2 6 7 10 9 16 0 3-3 4-4 7 5 6 12 10 13 18h-6l9 7c4 6 5 13 6 19l19 13-5 3 9 12-2 6c-6 1-11 3-17 1-8-2-13-10-18-16 2 10 8 17 13 25 4 6 13 4 17 11 6 7 11 16 20 20 7 3 12 9 16 15l12-3-1-5-10-7 1-6c8 5 16 9 25 7v-1l1-3 1-1-12-9-7 5c-8-6-17-12-19-22 11 0 20 13 32 8-4-7-11-11-18-15l-2-12c-7-1-12-5-15-11 6-1 11-3 16-6 8 8 19 15 31 11l-4-5-15-2 3-12c-6-3-11-8-9-15l13 7c7 4 14 3 20 6 5 2 12 5 16 1 6-4 12-6 18-6v-9l-8 1c-5 3-8 7-13 9h-14l1-5c7 0 15-2 21-5-1-3-2-6-5-8l-12 1-5 9c-2-3-5-6-9-8l-1-11c-4 2-8 4-13 4-5-6-9-13-12-20l3-20c4 3 9 6 14 7 7 2 9 12 18 11l1-8c9-3 20-5 22-15l-21-6c-7-4-14-9-19-16 9 1 16 6 25 7l-7-11c-5-9-17-14-18-25 11 3 18 12 27 16 3-4 5-9 6-13l5 4c2-3 2-7 1-11l-8 5-12-13 6-5-6-9c12 4 23 5 35 3-1-11-15-11-20-18h22l1-8c4 4 9 6 14 8l2-15c8 9 4 22 8 32-4 3-11 7-9 13 8-6 17-11 27-14l-11 21c-8 1-11 8-15 13l10 2 4 6c5-2 11-2 16-2-3 12-16 20-19 32 8 0 15-4 22-7-3 3-6 7-6 12 5-1 9-5 12-8 7-5 15-8 23-11l-3 11h9l6 7 6-3-6 7 4 4 11-4c-2 6-1 12 0 18l-5 1c3 4 8 6 12 8-4 4-9 8-11 13 1 7 3 14 2 21 10 1 20 0 29-3l2 4-6 8c5 3 11 3 16 2a390 390 0 00-2 4h4l-2 6-11-6 1 8h5v5l9-1 2 8-20 4 2 3-1 1-5 5 1 5-13 8c7 11 22 4 30 13l-16-1v8c10-1 22-4 31 2-4 2-7 5-9 8l18 2-2 9-6 3-6-4 5 10-12 7-9-11c1 4 0 8 2 12l8 6-9-1-4-14-18-1-3 8 8-1c2 5 3 10 9 12 11 5 24 6 37 8 5-5 10-11 13-18l-8-7c2-13 20-16 19-29l-12-4c1-9 12-11 17-18 7-8 8-20 9-31 5-11 16-18 24-27v511zm-864-313c-2 2-4 5-4 8 3-1 8-2 10-6l-6-2zm357 1l1 3 3-1c0-3-2-3-4-2zm-259-10l7 8c6-2 12-8 10-16-7 1-12 5-17 8zm-339 3c-1 1-1 3 1 3h4c2-3-3-6-5-3zm148-1v4c1 1 3 1 4-1 2-3-3-5-4-2zm318-6c2 2 2 6 5 6 2-2 2-6 3-9l-8 3zm166-1l-3 3c-1 1-2 2-1 4 3 1 8-6 4-7zm-29-2l8 7 2-8-10 1zm-242-1l6 7 6-7h-12zm-172-2c1 3 3 5 6 6l8 2c-2-6-9-6-14-8zm652-2l-2 3c0 2 1 3 2 3 3 0 3-6 0-6zm-1143-23l-1 7c-7-3-15-5-22-2 1 4 4 9 9 10 1 3 2 6 5 8 5 2 11 3 17 3-4-3-9-7-9-13 6 1 11 6 16 9l3-3-14-19h-4zm1007 13c0 3 2 5 4 7l8 5c-4-4-7-9-12-12zm-905 8l1 3 1-1c1-2 1-3-2-2zm571-20l1 7 8 1v14l6-8-2-10-13-4zm-623 18l-1 3 8-3 2-3-9 3zm860-2l1 3 1-1c1-2 1-3-2-2zm-1007-6l1 7c3 1 7 1 10-1l-11-6zm384 3v3h3c1-3 0-4-3-3zm53-4c-1 0-2 1-2 3v3c4 3 7-9 2-6zm-63-17c-4 7 2 16 10 16 7 4 15 11 23 5 0-4-5-6-8-9 1-5 5-2 7 0 4 2 8 2 12 2l2-4-8-5h-13l-8-5c0 4 2 9 4 12l-4-1c0-4-1-7-3-11-4 2-9 1-14 0zm782-6c-1 4 0 11 5 13l27 15-14-13c-2-2-2-6-5-9h-9c-2-1-4-4-4-6zm-143 23l11 5c1-3 1-7 3-10-6 0-11 1-14 5zm215 1v3h4c1-3 0-4-4-3zm-1192-5l-10-1-12 4 24 3c5-4 7-10 10-15-4 3-7 8-12 9zm833 1c-1 1 0 3 1 3h3c2-2-2-5-4-3zm-427-5l1 7c4 0 4-5 5-7l-2-1h-3-1v1zm643-7c1 6 7 10 11 14-1-7-3-14-8-19l-3 5zm-89 6l1 7 3 1v-8h-4zm212 1v4h5c3-3-2-7-5-4zm27-2c-2 1-1 3 0 4h4c2-3-2-7-4-4zm-471-19l-6 5 9-2-3 9c8-5 16-9 25-9l-5 8 5-2 1 12c7-2 14-1 20 3l3-5c2-1 5-2 4-5h-1l-2-1h-1c-11 1-18-11-29-12-7 0-13 1-19-1h-1zm63 9l-1 12 16 2 1-5-13-4c6-4 12-5 18-7-7 0-14 0-21 2zm-830 11l1 3 1-2c1-1 1-2-2-1zm1016-23c7 0 14-2 21 1v5c-7 3-14 3-20 7l-6-1c3 8 11 14 20 12l9-12c-2-6 3-11 0-17-8-2-18-2-24 5zm-1488 21c0 2 1 3 2 3l4-1c0-3-5-3-6-2zm1611-62l-3 13c5 5 10 10 17 13 9 2 14 12 21 17 9 5 16 12 23 19 4 1 4-3 4-6-5-6-8-13-14-18-9-8-3-21-9-30l-10-3c-2 4-4 8-8 9l-10-12-1 6h-6c0-3-2-6-4-9v1zm-1644 54l1 7 13 1-14-8zm1635 2c-1 2 0 3 2 4 1 2 3 2 4 2 1-3-4-7-6-6zm-133-8l4 5-4 6 7 2c0-4 2-9 5-12h7c-3-7-13-4-19-1zm-219 8c-3 2-3 3-1 4 1 1 4 1 5-1 2-3-3-4-4-3zm458-1c-2 2 0 3 2 3s4 0 4-3-5-2-6 0zm-813-3l-2 2 2 2c3-1 3-3 0-4zm-16-1l5 2 5 1c0-5-7-2-10-3zm53-9l3 11 7 1v-8c-3-3-6-4-10-4zm951 7c-1 2 1 4 3 4h4c-1-3-4-5-7-4zm-1870-27l-8 5-6-5 3 6-17 14c6 2 14 1 21 0-6 4-13 6-19 8l2 4c9-1 17-3 26-6l-1-5h1l2-1h1v-5l8-2c2-4 6-8 3-13l-13 1-3 8-5 3c3-3 6-7 6-12h-1zm601 18v8l5-6-5-2zm465 1c1 3 3 7 7 7v-8l-7 1zm259-20l-17 15c-7 2-15-1-20 5 5-1 11 0 15 3l7-5c3 5 8 8 14 9l-4-6 17-1c-1-4-6-3-9-4 5-2 12-1 16-6-5-2-9-6-10-11l11 2v-11c-6 4-13 8-20 10zm-916 21l1 5c4 1 7 0 9-3l-10-2zm-293 0c-2 1-2 2-1 3s3 2 4 1c5-2 0-7-3-4zm-211 0c-2 2-1 3 0 4l4-1c2-3-3-5-4-3zm1677-8l-2 5 12 7-10-12zm-1481 4c-2 2 2 3 3 5l7-1 3-9 10 4 1-4c-8-1-16 0-24 5zm783 4l10-2-9-7-1 9zm37-8v5l11 3-1-10-10 2zm-755-5c7 0 11 6 12 12 3-1 5-2 6-4l-6-2 4-7c-5-1-12-5-16 1zm705 10l9 2-4-10c-2 2-7 4-5 8zm781-8v6l7 3c4-2 2-6 2-9h-9zm-1828 5v3h3c1-3 0-4-3-3zm-269-5c-4 1-5 4-7 7 5 3 7-1 9-5l7 2 2-4h-11zm664-11v8l-9 2c3 2 4 6 6 9l11-1 2-3c-4 1-9 1-14-1l8-6-4-8zm-425 11l8 2 10 5c-3-8-11-11-18-7zm1944 3l7 3 7-1c-2-6-9-4-14-2zm-1686-20c2 8 7 15 12 21 3-1 6-3 9-2 7 0 14-2 21-4-5 0-10-2-14-6-4 2-9 4-14 3-6-2-10-7-14-12zm1443-16c-4 5-9 8-14 11 2 4 2 8 1 13l-5 1c-6-1-13-2-19-5l-1 16c3 1 7 2 9-2l-3-4 17 2 11-7 9-1 6-5-5-2c-1-6-6-12-2-18l-4 1zm-583 29v3c0 1 1 2 3 0 2-1 0-6-3-3zm-714-3c-2 1-2 3-2 4 1 2 2 3 4 2 3-1 2-7-2-6zm736-3c-5-1-9 1-12 3 1 8 13 9 15 1l7 3c0-6-6-12-10-7zm-997 5l-1 4 10-1c-2-2-6-2-9-3zm306-10c-1 4-2 8-7 8l-2-6-6 10c5 2 12 1 17 0 0-4 1-9-2-12zm-676-5l-3 6 6 4 2 7c1-2 2-6 1-9l-6-4 5-5-5 1zm102 8l-2 9h4v-4l7-5h-9zm19 0l9 7v-7h-9zm-156 3c-3 3-1 4 2 4 2 0 5-1 5-4h-7zm1366-2v4c0 2 2 2 3 1 3-2 0-7-3-5zm349-2l-8 1v1l-1 2 12 2v-6h-3zm654 2h2v1c-1 2-2 2-2-1zm-386 0l1 2 1-1c1-1 1-2-2-1zm-1329-7c0 4 2 5 5 7l9 2c-4-4-8-9-14-9zm1606 7c4-1 7-4 10-6v-10c-2 6-8 10-10 16zm-278-9l5 3v5c9 0 9-10 11-16-6 2-12 3-16 8zm194 3v4h4c1-4 0-5-4-4zm-1940-2c2 1 3 3 4 6l11-2 1-10c-5 1-11 3-16 6zm-207-2l14-5 2 11 11 1 6-5-22-8c-5-1-9 1-11 6zm40-1l-3 7 10 1 1-2-8-3 7-4-7 1zm153-1l4 3-6 6 10-2-1-6-7-1zm1704 0l3 8c4-1 9-2 11-6l-14-2zm-1263 1l-1 5 6 1 4-6h-9zm1557-6l1 4c4 3 9 9 14 5 0-4 2-8-1-10l-14 1zm-2207 3c-2 1-3 2-3 4s2 3 4 2c3-1 3-7-1-6zm267 1v4h3c3-2-1-6-3-4zm1904 0c-1 0-2 1-1 3 0 1 1 2 3 2 3-1 2-6-2-5zm-451 3c6 1 11 2 17 1l-3-4-14 3zm67-4l-2 2 2 2c3-1 3-2 0-4zm-1417-6l-4 3v4c3 2 7-6 4-7zm1791 6a71 71 0 002-8c-5 0-7 6-2 8zm-2236-7c1 3 5 4 7 5v-6l-7 1zm408 1v3h4c1-3 0-4-4-3zm1631-2c-1 2 0 3 1 3h3c2-3-3-5-4-3zm-1591-6v5c1 2 2 3 4 3 1-3 2-9-4-8zm-554 5l8 3-2-6-6 3zm802-4l8 5c3 1 6 0 8-4-5-2-11-1-16-1zm1604 0v4c2 1 4 2 5 0 3-3-2-7-5-4zm-61 1v3h3c0-3-1-4-3-3zm-1520 0v3l2-2c1-1 0-2-2-1zm-239-2l1 4h3c1-3 0-4-4-4zm1762-8l4 11c5-1 3-7 5-12l-9 1zm-406 10c3 0 8 3 9-2l-4-4-5 6zm-1919-6l-4 2 1 3c4 2 9-5 3-5zm398 1v3c1 1 3 1 4-1 2-3-3-5-4-2zm-217 0l8 3-2-6-6 3zm2199-1l1 3 3-1c0-3-2-3-4-2zm-2455-3v5c7-1 13-5 16-11-5 2-10 7-16 6zm2476 0l-12 1h-1v3l-1 1c6-1 12-2 15-5h-1zm-29-1c-1 2 0 3 1 4h4c2-3-3-6-5-4zm-2508-2c6 2 12 8 18 4-3-5-8-7-11-12-4-1-5 5-7 8zm2443 1v3h3c1-3 0-4-3-3zm-2103-3l-4 2 1 3c4 2 9-5 3-5zm235-7c3 6 9 9 16 10l-1-3-15-7zm1100 2c-5 2 0 10 5 8 6 0 9-4 13-8-6 2-12 1-18 0zm-992-11l2 6-3 4 3 8h6c0-5-2-9-5-13l8 1-2-8-9 2zm-48 12c-2 1-3 2-2 4 0 1 2 3 4 2 4-1 1-7-2-6zm1893-11c-3 4-8 7-13 8 9-1 15 6 23 9v-7c3-3 5-7 5-11l6-4c-7 2-14 6-21 5zM886 558v4h4c1-4-1-5-4-4zm2059-2c-2 0-3 2-4 3-1 2 0 3 2 3 4 0 7-6 2-6zm-1395 1v5c7-1 13-5 16-11-5 2-10 7-16 6zm-298-31c-7 0-13 2-19 6 8 1 16-2 23 2l-1 5-27 7c6 7 15 9 24 11-1-6 3-10 7-14l-3-3c3-4 5-8 6-13l-7-1 2-8-5 8zm791 20l-1 6c4 1 9 3 14 3-2-4-4-9-3-14l-10 5zm1673 8l3-3 1-5c-4 1-7 5-4 8zm-2435-11l-4 10 11-3-1-5-6-2zm652-1l1 10 8-2-9-8zm-718 5v3h7v-4l-7 1zm2553-13c1 5 2 10 5 15l8 1v-11c-4-4-8-7-13-5zm-1844 12v3h4c1-3 0-4-4-3zm1808-3l-2 2 2 3c3 0 3-5 0-5zm-2517-1c4 2 9 3 12-1l8-1-5-3c-6 0-13-2-15 5zm-7-1v2h2c1-1 1-2-2-2zm2347-7c2 2 1 3 0 4-2 2-4 2-5 2-7 0 3-5 5-6zm-2359 2v3l3 1c1-4 0-5-3-4zm2102-2l-2 3c0 1 0 2 2 3 4 1 5-8 0-6zm-1314-4c-5 2-13-1-15 6 3 4 8 3 12 4l2-5 9 1c-2-3-5-8-8-6zm-24 6v3h2c1-1 2-2-2-3zm-626-1l-1 3 3 1c2-2 1-4-2-4zm2498-47c-10-5-18 4-27 7l-1 3 22-2 15 4-2 9c-7 1-16 2-19 9l-10-5-1 9c-5 1-10-6-15-2 1 5 5 5 9 6l2 7c8 5 18 7 28 4v-7c6-4 10-10 15-15l-7-3c2-8 10-13 11-22l-12-3c-1 2-1 6-3 7-1-7 3-11 7-16-5 3-9 6-12 10zm-898 43l8 5-5-7-3 2zm-984 5a123 123 0 010-8c-6-1-6 9 0 8zm-637-4v3l2-1c1-2 1-3-2-2zm2408 1c4 0 9 0 13-2-5-3-8-7-11-11-3 4-2 9-2 13zm-2628-23h-18l4 7-4-2c0-3 0-6-2-8h-11l-1 4c1 4 5 8 10 8v5l4 1-3 3c7 2 15 4 23 4v-3h-9l16-5c-4-4-7-8-8-13l11 3-2-11c-4 1-7 4-10 7zm2677 13l1 6 15 3-3-12-13 3zm112-11v13l-1 1-3 2-1 1 2 2c7 1 13-2 19-4l-2-10c-5-1-11 0-14-5zm-1962 10l-2 8 3 1 3-7-4-2zm1780 6c4 3 9 4 14 2l-4-12c-5 2-7 6-10 10zm-2162-1l-1 3 3 1c2-2 1-4-2-4zm-21-3v3l2-1c1-2 1-3-2-2zm-265-34c-4 4-7 8-12 10 1 5 2 9 1 13-8 2-17 1-24-4v17l9-2-4-4 18 2c5-3 9-9 15-7 5 1 8-3 9-7l-4-1c0-5-6-12-1-17-2-1-5-3-7 0zm688 23l-4-3-10 10c8 1 16 5 24 5l15-6-1-6c-6 1-10 4-14 7-4 1-11 2-10-3l11-2c4 0 5-4 2-6-4-3-11-1-13 4zm1756 7l-1 1-1 2c2 7 10-4 2-3zm-2724-5c4 0 7 3 10 6 4 2 7 4 11 1-6-5-13-7-21-7zm-78 3c-1 0-2 2-1 3 0 1 1 2 3 2 3-1 1-7-2-5zm2864 0c2 0 3-1 4-3l1-4c-4 0-4 4-5 7zm-2423-10v9h4l3-7-7-2zm2454-1c-3-1-6-5-10-2-4 1-9 5-5 9 4 3 8 4 13 3 2-2 4-5 4-8l10 4c0-2 1-3 3-4l-10-7c-3 0-4 3-5 5zm-1877-19l-1 5 1 1h3l1 1-9 8 3 3-10 11c5-2 11-2 16-3l24-10c-6-1-11-2-16 0l-12-16zm-892 22l-11-1-11 4 25 4 9-15c-4 3-7 7-12 8zm2316 2l-2 2 2 2c3-1 3-2 0-4zm-1456-8c1 3 0 10 5 9l2-7-7-2zm1859-1l-1 7 6 2c1-3 2-7 0-10l-5 1zm-2200-2a219 219 0 011 8h3l3-7-7-2v1zm1399 1v4c1 2 2 2 4 1 2-2 0-7-4-5zm-1959 2v3h3c1-3 0-4-3-3zm238-4l1 6c6 1 11-1 14-5l-15-1zm-11 1v3h3c1-3 0-4-3-3zm-215-1v3l2-1c1-2 1-3-2-2zm-233-5l-2 6 10 1-3-7h-5zm1564-16c2 6 3 13-3 16 6 1 13-2 19-3l-4-8c-5 0-9-2-12-5zm-350 7c0 3 0 8 4 8 6 1 10-3 14-7l-18-1zm-1046-4c0 4 2 6 5 5l7-4-12-1zm2914-60l-3 1c-5 4-13 7-10 14-5 1-11 1-13 6-3 4 3 8 5 11-2 3-2 6-2 10-4 0-8 1-11 4l-9-6-4 6c-6-4-12-10-19-11-1 7-2 14 1 20l-3 7c5 5 16 4 18-4l-8-4 20 2c4 1 9 2 13 0l18-13c3-1 5 3 7 4 7-3 13-8 17-14-5-2-10 0-15 1l8-5-2-7-6 1c2-3 4-7 3-10l-5-5v-1l2-2h7c-3-2-6-5-9-5zm-2641 57v4l4 1c1-3-2-6-4-5zm-554 1c-1 2 1 3 3 4 1 0 4 0 4-2-1-3-5-4-7-2zm3194-5v2h4c2-3-3-5-4-3zm-3174-1l1 3 3-1c0-3-2-4-4-2zm-30-9l1 8h7l-1-9-7 1zm3089 0v3h3c1-3 0-4-3-3zm-1773-4h-1l-1 1-1 1 8 5-5-7zm1617-11l-4 10c7 1 14 6 22 3-7-3-8-11-5-17-3 4-8 5-13 4zm178 7v3h3c1-3 0-4-3-3zm-3249-5c-1 1 0 3 1 4h3c2-3-2-6-4-4zm3278-11c-1 6 2 13 9 12 8 0 13-6 18-10-9 1-18-1-27-2zm-3117 4l-20-3v5c8-2 16 0 23 5v-14l-3 7zm3094 4v2h1c2-1 2-2-1-2zm-50-1v3h2c1-1 2-3-2-3zm54-3c-1 1 0 2 1 3h4c2-3-3-6-5-3zm-3239 1v3l2-1c1-2 1-3-2-2zm1435-11v4c1 1 2 2 3 1 3-2 0-8-3-5zm-1414-1c-1 1-2 2-1 3 0 1 1 2 3 2 3-1 1-6-2-5zm65-35l-10 8v2l-1 3v1l11-4c1 5-3 8-6 11l2 8c-2 4-7 6-9 10 5-1 9-5 13-8l-2-4c3-4 8-8 5-14l6-9-9-4zm-216 29v4h4c2-3-2-6-4-4zm111-1v2h2c1-1 1-2-2-2zm-129-7v8c5 0 7-4 7-8h-7zm209-8l1 9c5-1 8-6 5-10l-6 1zm3170-1v3c1 2 2 2 4 1 3-2-1-7-4-4zM380 394l-1 13c5 1 9-1 13-3l-3 10 7-1 1-9-17-10zm24 14l-2 2 2 2c3-1 3-2 0-4zm3339-1v4c1 1 3 1 4-1 3-2-2-6-4-3zM297 394c-1 2-1 3 1 4 1 1 2 1 3-1 3-2-2-5-4-3zm134-8v8c5 0 8-5 5-9l-5 1zm-158-9v7l-7 3c6 0 12 2 17 5l9-5-11-1 12-4c-3-7-13-7-20-5zm44 9v4h3c1-4 0-5-3-4zm3471 1v2h1c2-1 3-2-1-2zm-3456-8v2h2c1-1 2-2-2-2zm101-1v3l2-1c1-2 1-3-2-2zm-130-8c3 2 2 7 2 10 6-1 4-8 4-12-3-2-4 1-6 2zm28-3l-4 2c-1 2-1 3 1 4 4 1 6-5 3-6zm3426 1l1 2 1-1c1-1 1-3-2-1zM200 350c3 7 7 13 12 18l2-7-14-11zm98 9l-2 3c4 1 10 6 12 0-1-4-6-2-10-3zm23 0v3h3c1-3 0-5-3-3zM26 348c-3 1-3 5-4 8 5 0 7-4 9-8l7 3 2-4c-5 0-10-1-14 1zm12-18c4 4 8 8 8 13l3-2-1-8-10-3zm-34 7l-1 5c3-1 7-2 9-5H4zm149-2c-1 2 0 3 2 3 2 1 4 0 4-2 0-3-5-3-6-1zm145-3c0 6 6 3 9 4v-5l-9 1zM51 319c1 4-1 9 2 12l11 2 6-6-19-8zm26 4v8h10l-8-6 7-3-9 1zm-58-3c-2 0-3 1-4 3-1 1-1 3 1 3 4 1 7-5 3-6zm143-3l-2 3c0 2 0 3 2 4 4 0 5-8 0-7zm4-9l1 4h5l2-5-8 1zm-121-8c-1 2 1 4 2 4 2 1 4 0 5-2-1-3-5-4-7-2zM0 254l2 2-2 2v-4z" style="fill: var(--c8);"/>
        <path d="M810 628l7-3c15-7 33-9 45-20 4-4 5-8 0-12l-22-13c10 0 20 3 29 7l8 3c11 6 15 15 5 21-14 11-34 13-47 25l-25-8z" style="fill: var(--c4);"/>
      </svg>
    </div>
  </div>
  
  <!-- landscape layer 9 - foreground 2 -->
  <div class="landscape__layer landscape__layer--9" style="--offset:0.2">
    <div class="landscape__image">
      <svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
        <path d="M3954 700l46 14v286H0V480l22-1c12 0 24-4 36-5 11-1 21-4 31-7 16-5 33-2 49-4 15 0 30-7 45-2 17 5 33 16 43 31 4 6 11 7 18 8 15 2 29 1 44 0s27 12 42 11c21 1 43-8 64-1 15 4 25 15 37 23 7 4 11 10 17 15 11 4 24 3 35 7 10 3 20 7 30 8 13 3 25 0 37 1 15 1 31-5 45 1 16 6 33 5 49 7 12 1 22 7 32 12 6 3 10 9 16 11h22c7 1 13 6 20 6 13 1 25 1 37 6 11 3 20 9 30 13 11 3 23 4 34 9 8 4 14 11 21 15 15 5 31 7 45 15 10 6 21 6 31 10 12 4 24 4 36 4 3-5 5-10 9-14 4-3 10-5 15-7 6-3 11-7 17-9 8-2 18-1 26-4 11-2 23-4 34-2 8 2 14 8 22 10 7 2 15 1 23 1 12-1 24 0 36-4 19-6 40-9 59-3 11 5 23 11 31 21l8 8 19-1c8-3 16-9 25-8 16 3 26 16 40 22 12-1 25-5 36-1 10 2 16 10 23 15 11 4 23 2 35 6l24 3c11 0 21 5 32 9 8-7 17-12 28-13 11-2 23 0 34 2 5-2 10-6 14-9 4-7 6-15 12-19 11-9 26-8 40-6 20 4 41 10 58 22 8 4 13 11 16 19h30c4 1 6-2 9-4 9-8 23-10 34-6 14 5 28 2 42 6 8 2 14-4 20-6 18-6 37-3 54 0 7 2 13-3 20-4 14-2 27 1 41 3 9 1 18 2 27 5 5 2 9 7 14 9l19 4c9 3 17 8 25 13 6 4 13-1 20-2 23-2 47 6 66 20 2 2 5 5 9 4l24-3c6 0 10-6 16-8 12-7 27-5 41-5 11 2 23 1 34 2 11 2 20 9 27 16 14-2 27-4 40-1 27 3 47 22 72 28l33 9c3 1 8 2 11-1 8-6 14-13 23-18 6-3 14-3 22-5 7-5 12-12 19-15 23-11 52-6 71 11 11 7 16 19 28 24s25 9 38 12c8 2 14-5 22-6l27-4c29 0 54 17 82 21 22 3 44-6 66-5 25 0 49 3 74 2 41-2 80 11 119 22 21 7 43 12 64 20 6 3 12 5 19 6l72 3c10 1 18-7 27-9 10-4 22-2 31-9l27-17c10-7 22-14 35-13 11 0 21 7 32 8 13 0 26-2 38-7 7-4 16-3 23-6l4-13-15-1c-1 5-3 8-7 10v-11c-5 2-9 5-11 11l-9-2c6-5 6-14 9-20 4-8 14-2 20-5 10-5 20-6 30-9-1-3-3-6-6-8l12-1-5-7v-5c5 0 10 1 15-2 4-5 5-12 10-17l-6-8-11 4c-4-2-8-6-11-2-3 6-3 12-4 17-4 2-9 3-14 2 5-2 11-4 13-10v-11c-4 4-7 9-12 12l-13-8-14 5c5-6 13-7 19-12l-3-7-4 6c-5-3-13-7-11-15 6-6 15-3 23-4l-1-5-9-4 1-6c13-1 26-4 38 2l1-12-22 4c9-15 30-3 39-17-5-5-10-10-17-12l2-9-7 1 3-6-6-2c12-5 22 5 34 3 4-5-4-5-7-6l2-19c-4 6-11 6-17 6l-3 11c-11 1-22 1-31-5l2-9 10-1c3-4 9-7 8-13-4 1-8 4-11 7-6-4-4-10-2-16l15 2 5-6c-3-3-6-6-6-11 5-1 11-1 17 2 8 4 17 0 26 0l-2-15 5-13c-6-6-12-11-17-18 7-2 14-5 18-12l-9 1c2-8 4-17 0-24 6 4 15 9 20 1l-7-10 8 3 8-8 12-1 2 9-6 9c4-1 8 0 12 1-5 5-14 11-8 18l-7 10 11 8c-7 1-13-4-20-2 3 9 12 13 19 18 3 2 1 7 2 11l22 2v5c-4 2-8 5-10 9l-8-8 1 15-5-7c-5-1-13-2-13 5 1 10 10 16 13 26l-8 4c5 8 11 15 19 20l-2 8-7-3c3 7 10 11 16 14v8l7 5c-1 5-2 10-1 14 5 4 11 6 17 7l3 8 7 2-8 5c5 5 10 10 13 16 0 5-1 10-6 11h-20c-11-3-18-14-24-23 0 5-1 10 3 14l17 23c4 6 12 5 18 8l8 11 2-14c5 3 11 8 18 7 8-4 15-9 22-15-11 0-19-8-27-14l1-1 1-2h1c6 3 12 6 19 7-4-6-7-13-13-17-4-4-8-8-8-14 9 1 15 9 23 13 2-3 5-5 5-8-1-4-4-6-6-9-4-5-2-12-3-18 8 2 16 3 24 1l-1-7-12-9h15l15-5 3-6 18 6c7 2 12 7 18 10h14s83 4 144 5c23 0 59 7 70 11 16 8 44 11 64 16l20 5z" style="fill: var(--c9);"/>
      </svg>
    </div>
  </div>
  
  <!-- landscape layer 10 - empty -->
  <div class="landscape__layer" style="--offset:0">
    <div class="landscape__image">
      <svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
        <path d="M190 55l11 1c3 1 4 5 4 8-1 9 2 19-1 28l5-8c3 1 5 4 7 7l12-2c-3 8-11 16-6 25l9-9c2 5 5 12 1 17-4 6-11 8-17 11h8c2 4 3 7 6 10l12 3-12 25-10 1 15 4-1 8c3-8 12-10 19-7l-4 17-8 4-2-10 7 3-4-11c-4 7-8 14-8 23-10 2-19 5-28 11l-2-4-14-1c6 8 16 7 25 9l12-8 7 4 9-15v12c4-5 10-8 16-9l-3 9c-2 5-7 7-11 10h14l-3 9c-4 1-9 1-13 4l-21 20c-4 4-10 2-15 2-6 0-12 3-18 5l2 2 12-1c4 0 7 5 10 7l3-6 7-3 22 18 1-5c6-1 13-3 18-7l4 5 7-5 3 7h8c-2 5-5 9-8 12-6 5-3 14-4 21l-7 4-10-4-3 5 11 2-8 12c6 0 12 3 17 1 4-1 3-4 4-7 0-5 3-9 5-13 14 4 28 3 41 3-4 6-7 12-13 16-4 1-9 0-14-1l5 9-13 5 4-12c-5 5-12 6-19 5l6 9-2 2-15-8c-12-1-23 2-34 3-8 1-16 4-23 6-5 2-11 3-14 8-2 8 0 16 0 24l8-1-6-1c-1-5 6-4 10-4 7 2 14-1 21-3l-4 7c3 2 6 5 10 4 5-1 11-3 17-1l4-2h17l4 8 10-2 2 6-16-1 3 9c-8 4-13 12-21 17v3l-6 4c7 5 15 7 23 8-3 7-12 6-19 6l4 8-4 4c-3-4-7-8-13-9l2 11c-12-5-18-18-29-24l-11 4 3 4c6 1 10 5 14 8h-20c0 18-1 36 1 54l2 40 46 11c16 7 35 7 52 10 13 4 26 9 34 20 5 6 7 15 15 17 16 6 33 12 47 23 11 7 16 20 26 29 5 4 10 9 17 11 8 2 17 5 23 12 8 9 8 23 15 33 8 2 17 3 25 7 8 5 12 13 20 18l16 14c9 13 20 25 35 31 16 7 34 5 51 8 6 1 10-3 15-6 16-11 33-22 51-28l47-16c6-2 12-5 18-5h17c13-4 24-12 36-16 6-1 11-4 16-7 13 0 25-2 37-6 15-3 28 4 41 9 10 1 21 0 31 3 16 5 32-4 48-4 8 0 16 2 24 5 8 2 17-2 26-2 20-1 38 6 56 13 37 1 71 15 106 22 10 2 20-2 31-3 24-2 47 4 70 10 20 6 40 13 61 11 14-1 28 0 42 2 20 4 38 18 54 30 11 9 23 16 35 23 7 5 17 6 25 9 8 4 16 9 23 15 12 8 25 14 37 21 8 4 16 9 24 10 16 1 32-3 48-5 17-2 33 7 48 13 8 3 16 2 24 1 19-1 38 0 57 2 13 1 24 5 36 8 13 4 26 1 39 3 11 1 21 5 32 5 10-2 19-5 29-6 9-1 17-7 27-8l16 2h32c9 0 15-7 24-7 13-2 24 5 36 8 16 4 32 3 48 6 27 3 51 16 76 22 35 8 67 21 100 34l29 11c9 3 19 2 29 3 12 2 24-4 36-3 21 1 39 13 59 18 22 6 46 7 69 4 19-2 39-3 59-2 18 2 36-3 55-2 18 1 36-2 54-1 17 0 35-3 52-2 26 1 52-8 78-7 25 0 50 3 75 4 46 3 92 8 139 8 27-1 49-18 74-25 13-4 27-4 41-3 23 2 47 2 71 0 9-1 17-4 25-7 18-8 37-12 54-18 13-5 25-8 38-11 9-2 15-11 22-16 20-15 41-30 65-36 11-3 20-12 30-15 8-2 16-4 23-9 13-9 27-17 43-21 8-3 16 2 24 3 5 0 10-1 14-3l-4-9 13 3c1 3-1 9 3 10 5 3 11 3 17 4v-5c-5 0-9-2-14-3 10-12 13-28 24-39 9-4 23 1 29-9 4-10 3-24 12-32 5-6 15-8 16-16l5-18c-1-6-6-9-9-14 1-6 5-12 5-18l-1-15c8 2 14 5 21 9 9 4 19 0 27-6-6-7-14-11-21-16l7-11c5 4 10 9 17 12 6 2 12 2 18 0 2-3 4-7 1-9-3-4-8-3-13-4l-2-9c-4 2-7 7-11 8-5 1-7-6-11-8l-6 2-1-8-11-10c-2-4-2-9-2-13 17 1 29 19 48 18-1-5-3-10-7-14-5-6-14-7-20-12-3-6-1-13-3-19-4-5-10-1-15 0 0-8-5-15-9-21h11l14-7c6 0 9 5 13 8 9 9 24 11 36 9l-4-7c-9-1-18-2-26-5l6-18-11-6c-4-5-6-12-3-18 10 4 18 11 28 15 8 3 17 2 24-3 2-5-4-7-6-10l4-9-19-3 5-6-2-12c-5 1-10 4-14 8l-6-3c-8-9-13-21-21-30 7-10 0-24 8-34 5 3 9 7 12 12h14c6 4 8 11 13 16l10 1c2-5 0-14 8-15 12-1 25-7 30-19-7-2-14-5-20-9l-11 2c-11-10-25-17-34-29 4-1 8-2 12 0 9 4 17 9 27 10l-11-13v-10c-11-6-21-16-27-27l2-8c6 2 13 5 17 10 6 8 17 8 24 15 5-5 10-12 6-19-6-8-11-17-19-23l-1-4 12-5-8-8-1-8c7 2 15 6 23 7h30c1-13-14-21-25-18l-7-9 6-6c10 2 20 4 30 3 0-11-2-22-1-32 5 6 4 15 7 23 5 5 12 6 18 8l2-23 8 7c2 9 3 18 1 27 4 6 6 12 5 18l-13 12v7l21-14 20-8c-3 8-6 16-12 22-3 4-2 10-3 15h-15c-2 7-5 13-9 20 5 1 11 0 17-2 1 4-1 11 5 12l22-5c0 3 2 6 1 10-3 9-13 14-16 23-3 8-11 12-14 20 5 0 9 1 14-1 8-3 15-11 25-8-5 3-10 5-12 10 0 5 5 6 9 7l4-9c6-2 11-6 15-11 4-1 10-2 13-5 7-4 15-7 24-7-10 8-15 19-18 31-11 0-18 11-27 16l5 9c-9 1-21 1-24 11 0 7 5 11 10 14-3 6-6 12-5 18l-14 1 4 10c-7-3-13-10-19-14-6-2-7 6-9 9l-20-13c-3-2-6-5-9-4l-3 20c-1 4 3 7 6 11l-7 8c1 4 4 5 8 6 7 4 14-3 20-6l-13-11c11 1 23 2 35 5 6 2 14 1 20-1 3-3 4-7 8-9l17-11c6-3 13-2 20-2l-8-9 2-5c13 7 28 6 43 5-1-8-8-14-16-15-5 0-9-4-12-7 3-1 5-5 9-4l22 2c-1-9-3-18 0-27 2 6 2 13 5 19 3 4 9 5 14 7l2-20 7 7 2 22c0 5 3 10 2 15-4 5-13 8-10 16 10-9 22-14 35-19-5 11-13 20-15 32l-10-1-9 16h13c2 3 1 8 5 8l18-2c4 2 2 8-1 11-5 6-11 12-13 20-4 3-12 8-6 12 10 0 18-8 28-10v3c-4 3-8 5-11 9l11 4v20l-8 8c-1 6 4 10 8 13v1c-3 4-5 9-5 13l-11 1 3 9c-6-5-12-10-18-13l-4 9c-8-6-16-12-25-16 0 9-4 20 3 27l-7 7 12 6 13-7-12-8c10 0 20 2 30 4 5 1 10 1 14-1 4 0 5-5 7-8v20l-10 6 1 5 9 3v29l-14-9 2 12-8 1c0 4-2 9 0 12 6 5 13 6 20 10v9l-10-3c-2 4-7 8-4 12l14 10v5l-14 3 5 10h-12v5l13 1-6 15c-6-3-10-7-14-11l-17 3c6 9 18 12 27 18l8-6 10 5v210H0V502l32 11c16-3 34-9 50-3 18 9 39 8 58 7 15 0 29 7 43 11l-2-58-7-1 8-4c-17-8-36-7-54-6l3 7-17 3c-5 1-11-3-16-4-6 3-10 8-15 11-6 2-13-1-20-1v-6l-12 5c-7-4-16-6-25-5 0-7 2-13 4-19l-8-8 2-6c7 2 14 5 20 10a482 482 0 0110-6c-5-3-9-7-13-12l13 5 13-4c-7-2-16 0-21-5-8-6-5-17-5-25-4 0-9 0-13-2l-8-11 4-4 8 1-14-6c1-4 2-8 5-12l14-1 13-7 6 5-5-15-11-2c3-4 4-11 10-12 5-1 10 2 14 3h15l-25 13 11 13 10-5-1-2 7-5-1-11 18 8 8-8-3-5-4 4c-23-4-44-16-67-14l9-9-16-2c-7 0-10-8-16-11l-9-1v-8l4-7 10 7 11-15c8 11 23 10 35 8v-12l-10-3-8 10c-1-8-5-17-2-25l-6-8 15-7 4 5c1-5 4-9 7-12 5 6 12 8 19 10-5-10-9-22-7-33l14-11 2 8 17 3c4-4 8-8 13-9-2-3-6-5-7-9-3-6 0-12 1-17-3 2-6 6-10 7-6 1-7-6-9-10h15l-13-18h7l5-9c6 2 12 5 17 9l8-5 8 6 10-13h-19l3-6-14-2-2-17c1-4 4-6 6-9l-1 17 11-27 17 7c0-5-2-10-4-15l8 2c2-7 5-14 11-19 1-5 4-11 8-15 4 2 4 6 5 9 5-4 9-8 11-13zm3 10c-3 1 0 6 2 4 3-2 0-6-2-4zm-19 8c-2 2 2 6 4 4s-1-6-4-4zm32 30h7l1-6-8 6zm-15 1v13l5-13h-5zm5 4c-3 6 7 1 0 0zm-42 14c-3 1-2 7 1 6 4-1 3-7-1-6zm-3 17l1 4 6-13c-5 1-9 4-7 9zm13-2c-1 3 0 4 4 3 1-3-1-4-4-3zm-15 9l4 13c3-5 2-12-4-13zm-26 16c-1 4-2 8-5 12l10-6v-6h-5zm94 29c5 2 10 2 14 0l-6-11-8 11zm-74 0c-3 0-7-1-8 3h12l2-9-6 6zm-27 1c-1 3 3 6 5 4 2-3-3-6-5-4zm45 25c6 1 12 0 18-1l-3-6c-5 1-10 4-15 7zm-80-3v8c2-2 5-4 6-8-1-2-4 0-6 0zm75-1c-3 2 1 7 4 4 3-1-1-7-4-4zm-41 15l-1 6 5-4 7 8 5-1 1-9h-17zm118-1l-1 4h6v-5l-5 1zm-95 5c-1 3 0 4 3 3 1-3 0-4-3-3zm24 3l8 3-2-5-6 2zm64 5c1 7 6-3 0 0zm-165 4l5 8 3-10-8 2zm77 8c-3 1-1 6 2 5s2-7-2-5zm-51 22l11-4 1-4c-4 2-9 4-12 8zm17-5l-10 15c2 0 4 2 5 3l4-10c10-1 20-5 31-6l-10 13 10-4c-2 7-2 13 0 20 10 2 21 0 30 5l3-5-2-5 14-2c-6-8-17-10-25-5l4-5c-10-4-19-10-28-15-2-1-5 1-7 2l-3-4c-5 3-10 4-16 3zm86 12l5 8c4-4 11-5 11-11l-16 3zm34 0c-3 6 7 0 0 0zm-117 11c5 0 10-2 13-7-5 1-13 0-13 7zm83 0l-1 8c8-2 18-1 25 4 0-3 3-9-2-10-7-2-15-5-22-2zm-88 4c2 5 3 9 6 13h12l-4 7 5 6-7 8c5-3 10-4 13-9 0-6-2-12-4-18-7 1-14-3-21-7zm136 16c-1 3 0 5 4 3 1-3 0-4-4-3zm3500 8c-1 5 4 9 6 13l4-12c-4-1-7-3-10-1zM194 340c4 3 6-2 8-5l6 3-6-5c-4 1-11 2-8 7zm-139 0c0 3 5 4 6 2 1-3-4-4-6-2zm135 2c-1 3 0 4 3 3 1-3 0-4-3-3zm-44 9l15-1-4-5c-4 1-7 4-11 6zm3656-3c-1 4 0 5 4 4 1-4 0-5-4-4zM150 366c-3 2-7 5-5 9 4 3 9 2 13 1 7-1 13 2 20 2 1-4 2-8 0-11-3-4-8-5-12-7-4 4-10 4-16 6zm-8-2c-1 3 1 4 4 3 1-3 0-4-4-3zm-116 7c-2 3 3 6 5 4 2-3-2-6-5-4zm106 2l1 5c4-1 7-4 11-6l-12 1zm27 7c0 7 6-3 0 0zm3573 1c-2 3 3 6 5 3s-3-6-5-3zm-3507 1c-1 3 0 4 3 3 1-3 0-4-3-3zm3515 6c-2 3 3 5 5 3s-3-5-5-3zM45 392c3 3 2 7 1 11l12 3v-11l-8 2-1-4-4-1zm91 6l7-1v-5l-7 6zm12-5l-2 5c5-1 10-2 15-5h-13zm25-1c-4 1-3 8 1 6 3-1 3-7-1-6zm41 0l3 7 6 1 1-6-10-2zm23 2c0 7 6-3 0 0zm-75 6c-3 6 7 1 0 0zm-50 3c-3 2 2 6 4 3 3-2-1-7-4-3zm17 0c-1 4 8 2 10 0-2-3-7-2-10 0zm77 13c4 5 9 8 15 7-1-7-10-6-15-7zm16 1c-2 2 1 6 4 4 2-2-1-5-4-4zm15 7c-3 4 3 6 5 3s-3-6-5-3zm-132 12c6 0 12 1 17 3l-1-11-16 8zm-36-6c-3 3 2 8 4 5 3-3-1-8-4-5zm60 3c1 4 2 8 1 11l-12 11 28-1 35 4 1-18c-6-1-12-3-15-7h-12l-9 7-1-5c-5 1-10 0-16-2zm20 0c1 1 1 1 0 0zm3635 13c3 9 14 7 22 6 6-2 10-8 9-14-8 0-16 0-24-3-6-2-11 6-7 11zm-32-6l1 6c2-1 6 0 7-4l-8-2zm-86 7c-3 6 7 0 0 0zm36 25c-4 1-2 7 1 6 4-1 3-7-1-6zm15 13l-4 13c2 4 6 6 10 5 7-2 15-3 21-7 0-3-1-5-3-7-5-8-16-2-24-4zm161 20l10 1 5 7c3-4 10-8 8-14-1-6-8-9-11-14-5 5-15 11-12 20zm25-16l6 12 3-11-9-1zm-155 13c-4 3-7 8-12 10-9 1-17 0-26 2v5l23 4c6-2 9-9 15-10 6-2 12-3 19-3l-2-11c-6 1-13-2-17 3zm96 12c-4 3-2 8 3 9 6 0 12-3 18-2l15 6 2-6c-7-3-12-12-20-13-6 1-13 2-18 6zm114-1c-3 6 7 0 0 0zm-130 11c3 2 7 1 11 1l1-5c-4-2-13-3-12 4zm-105 17c1 4 5 4 9 5 2-5 3-11-2-16-3 3-8 6-7 11zm83 0c6 3 11 5 16 9l4-7-14-12c-4 1-6 6-5 10zm80-6c0 3 1 4 3 3 1-3 0-4-3-3zm-97 2c-4 1-7 3-10 6-2 4 0 9 4 10 6 2 12 3 18 2 5-2 6-8 2-12-3-4-8-11-14-6zm111 3c1 7 6-3 0 0zm7 4c-5 1-2 7 1 6 5-1 2-7-1-6zm-50 7v9l-20-10c0 4 1 9 3 13l-9 2c-1 5-4 10-2 16l8 2c-1-6-1-13 3-18 4 3 8 6 10 10 4 0 8-2 12 0 4 4 6 9 10 12h9l2-8c4-4 9-3 14-5 6-2 12-7 14-14-5-1-11-3-16-7l-9 2-12-10c-6 1-11 4-17 6zm-99-3c-2 1-1 6 2 4 3-1 1-6-2-4zm59 11c-7 4 3 14 9 9 3-6-4-12-9-9zm-152 11c0 3 1 6 5 7s10 3 13-1c-2-6-3-13-8-17l-10 11zm128-10c-4 1-2 7 1 6 5-1 3-7-1-6zm-137 2v6l5-2 1-4h-6zm41 1l-1 13c-1 3 1 6 4 5 6 1 14 0 14-8l-13-2 1-9-5 1zm78 0c1 4-1 10 4 12l17 4c3-1 2-4 1-6-5-7-13-10-22-10zm-3 21c0 7 3 13 6 19 2 5 8 4 13 4-1-7 3-16-4-20-4-3-11-8-15-3zm173 1l-5 5 6 9c9 1 23 0 23-11l-24-3zm-28 3l-1 6 7-1-6-5zm-7 7c-3 6 7 0 0 0zm-224 16h8l-1-8c-3 2-5 4-7 8zm152-6c-3 2 2 7 5 5 2-3-2-8-5-5zm19 15l-7-1c3 9 13 6 20 6l-3-11c-4 0-8 2-10 6zm17-4c-3 6 7 1 0 0zm13 11l-4 11c9 7 19 0 27-3-2-3-3-9-9-10l-14 2zm-182 6l8 1-1-6c-4-1-5 3-7 5zm33-3l4 18 5-3 1-16-10 1zm112 2l9 4-7 7c4 3 9 6 14 7 5 2 11-1 16-2v-7l-6-1 5-10c-10 4-21 2-31 2zm-37 0c-2 3 2 7 5 4 2-3-3-7-5-4zm90 17c-8 1-17-2-23 3 4 5 11 3 17 5 6 1 9-5 14-7l17-4-2-9h-7c-7 1-10 9-16 12zm-173-2c-3 3 2 7 5 4s-2-7-5-4zm-7 7v9c5 1 6-4 7-8l-7-1zm258 1c-3 4 6 6 6 1 0-2-4-4-6-1zm-179 5l-2 5 15-1-13-4zm90 13c2 3 5 2 8 3 1-4 2-9-2-12-5 0-6 6-6 9zm72-10l-3 9 12 7 5-5-14-11zm-15 4l-12 7c0 10 13 11 21 10 6-6-3-17-9-17zm-206 2c-3 1-1 4-1 6l7-5-6-1zm105 4l1 4 21 2c-5-6-15-3-22-6zm-117 7c0 7 5-3 0 0zm238 6l-1 8h10c0-5-4-8-9-8zm-19 2l-2 3c2 6 9-3 2-3zm-15 3c1 3-1 9 3 9l17 4c-2-9-12-14-20-13zm-293 14l-2 7c2 3 6 6 10 7 6-1 5-6 6-10-5-2-10-4-14-4zm289 3l6 15c2 4 7 5 11 3 1-5 2-13-4-16-3-4-8-5-13-2zm-151 1v4h19c-3-8-13-3-19-4zm-162 23c6 3 12 1 17-2-2 3-4 6-4 10 6-2 11-6 11-13l-14-10c-5 4-7 10-10 15zm26 14c-4 2-2 6-2 10l8-2c2-4 1-8 1-12l-7 4zm260 1l4 14c5-4 6-11 3-17l-7 3zm63 1c0 7 5-3 0 0zm9 4c1 7 6-3 0 0zm-379 4l2 9c6 1 12 0 17-3-5-5-12-5-19-6zm73 3c-2 4 1 6 5 7v-5l-5-2zm43-1c0 7 5-3 0 0zm186 2c0 7 6-3 0 0zm-6 6c-3 3 2 7 4 4s-2-7-4-4zm-296 4c-3 8-1 17 0 25 3 2 7 0 11 0 1-3 2-6 4-7l21 1 5-9c-6-3-14-3-21-2-8 1-14-5-20-8zm311 8c-1 3 0 4 3 3 1-3 0-4-3-3zm-348 7l6 9c4-2 11-2 9-7-2-7-10-3-15-2zm8 16l-9 1c4 2 8 4 12 2l19-8-4-5c-8-1-12 6-18 10zm-4 16h7c0-3 0-6-2-8-5-1-4 5-5 8zm374-5c4 5 12 2 17 2-4-5-11-4-17-2zm-407 21l9-1c1-3 0-6-2-8l-7 9zm-26-27c2-2 4-1 4 2-2 2-4 1-4-2z" style="fill: var(--c10);"/>
      </svg>
    </div>
  </div>
</div>

<!-- for demo -->
<main class="wrap">
  <h1>Demo of Firewatch-style SVG parallax landscape with colour changing</h1>
  
  <h2>Themes</h2>
  <button data-active aria-pressed data-theme="live">Live</button>
  <button data-theme="cycle">Cycle</button>
  <button data-theme="sunrise">Sunrise</button>
  <button data-theme="day">Day</button>
  <button data-theme="sunset">Sunset</button>
  <button data-theme="night">Night</button>
  
  <p>You can find out more info about this at <a href="https://alistairshepherd.uk/writing/parallax-svg-landscape-2/">alistairshepherd.uk/writing/parallax-landscape-1/</a>.</p>
</main>
/**
 * initial colours
 */
html {
  --c0: #fff;
  --c1: #eee;
  --c2: #d2d2d2;
  --c3: #c5c5c5;
  --c4: #a2a2a2;
  --c5: #b1b1b1;
  --c6: #838383;
  --c7: #737373;
  --c8: #393939;
  --c9: #1f1f1f;
  --c10: #000;
}

/**
 * sun
 */
$sun-size: min(4rem, 10vw);
$sun-movement-v: 30%;
$sun-movement-h: 40%;
.landscape {
	&__sunWrap {
		$distance: 10;

		bottom: 10%;
		height: 75%;
		left: 0;
		position: absolute;
		transform: translateY(var(--scrollPos, 0));
		width: 100%;

		@media (prefers-reduced-motion: reduce) {
			display: none;
		}
	}
	
	&__sun {
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		transform:
			translateX(calc(#{$sun-movement-h} * var(--sun-h)))
			translateY(calc(#{$sun-movement-v} * var(--sun-v)));
		width: 100%;
		
		// the actual sun element
		&::before {
			background: #fff;
			border-radius: 50%;
			content: '';
			height: $sun-size;
			left: 50%;
			position: absolute;
			top: 50%;
			transform: translate(-50%, -50%);
			width: $sun-size;
		}
	}
}

/**
 * wrapping landscape, see https://alistairshepherd.uk/writing/parallax-svg-landscape-1/
 * for an explanation of this
 */
// wrapping landscape
.landscape {
  background: var(--c1);
  height: 75vh;
  overflow: hidden;
  position: relative;

  // positioning for each layer and parallax
  &__layer {
    // positioning
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    
    // parallax
    transform: translateY(calc(var(--scrollPos, 0) * var(--offset, 0)));

    @media (prefers-reduced-motion: reduce) {
      transform: translateY(0);
    }
  }

  // svg wrapper
  &__image {
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: 50%;
    max-height: 100%;
    max-width: 300%;
    min-width: 100%;
    position: absolute;
    transform: translateX(-50%);
    width: 2500px;

    svg {
      display: block;
      height: auto;
      max-width: 100%;
    }
  }
}

/**
 * Styles for demo
 */
// typography styles and ensure body is long enough to scroll
body {
  background: var(--c10);
  color: #fff;
  min-height: 200vh;
}

// content section
.wrap {
  margin: 5rem auto;
  max-width: 70rem;
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
}

a {
  color: inherit;
  text-decoration-color: var(--c6);
}

button {
  font-weight: 900;
  background: var(--c4);
  border: 2px solid transparent;
  color: var(--c10);
  cursor: pointer;
  display: inline-block;
  padding: .5rem 2rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .2s;
  
  &[data-active] {
    background: var(--c1);
  }
}
View Compiled
/**
 * colour changing
 */
// Configuration of colours and animation states
const config = {
  anims: {
    live: {
      interval: 60000,
      getProgress: now => {
        const time = (now.getHours() * 3600) + (now.getMinutes() * 60) + now.getSeconds()
        return time / 86400
      }
    },
    cycle: {
      interval: 50,
      getProgress: now => {
        const time = (now.getSeconds() * 1000) + now.getMilliseconds()
        return time / 60000
      }
    }
  },
  states: [
    {
      at: 0,
      name: 'night',
      colours: {
        c0: '#bed8f8',
        c1: '#7da5d5',
        c2: '#3078bf',
        c3: '#1860a5',
        c4: '#155798',
        c5: '#0c4e8f',
        c6: '#073866',
        c7: '#042b50',
        c8: '#02213f',
        c9: '#021a32',
        c10: '#00101f'
      }
    },
    {
      at: 6,
      name: 'sunrise',
      colours: {
        c0: '#f5e5e5',
        c1: '#fed4d5',
        c2: '#dcbed9',
        c3: '#c8aed9',
        c4: '#b19fcc',
        c5: '#a496c4',
        c6: '#7d88bd',
        c7: '#6371a9',
        c8: '#555986',
        c9: '#404364',
        c10: '#2e2c3f'
      }
    },
    {
      at: 12,
      name: 'day',
      colours: {
        c0: '#feebe2',
        c1: '#ffe2a6',
        c2: '#ffb06d',
        c3: '#ff9d60',
        c4: '#ff8f4c',
        c5: '#fc813a',
        c6: '#f04f30',
        c7: '#d2353a',
        c8: '#8b1036',
        c9: '#620a38',
        c10: '#2f1121'
      }
    },
    {
      at: 18,
      name: 'sunset',
      colours: {
        c0: '#ffc348',
        c1: '#ffad39',
        c2: '#f29a14',
        c3: '#ed8d14',
        c4: '#c86f11',
        c5: '#e17b17',
        c6: '#c0531a',
        c7: '#b04717',
        c8: '#70211a',
        c9: '#3c0b0e',
        c10: '#1e0000'
      }
    }
  ]
}

const root = document.documentElement

// This changes the interval and progress calculation between
// our dynamic animations 'live' and 'cycle'.
let animMode = 'live'

// Add first element of states to end so we have a seamless loop:
// night > sunrise > day > sunset > night
config.states.push({
	...config.states[0],
	name: 'end',
	at: 24
})

// Declaring our animation loop in a variable allows us to end it when needed.
let animation
function startAnim() {
	// Run our update loop immediately after starting.
	updateAnim()

	// setInterval runs our update loop with a predetermined interval
	// based on the animation mode we are using.
	animation = setInterval(updateAnim, config.anims[animMode].interval)
}

// If we need to end the animation, this function will stop it
// running again using clearInterval
function endAnim() {
	clearInterval(animation)
}

// This runs every update cycle, getting the progress, calculating
// the right colours and applying them to the root element
function updateAnim() {
	// Get the progress through the animation. getProgress returns a number between 0 and 1.
	// To simplify working with time, we multiply this by 24 to get progress through the day.
	const progress = getProgress() * 24

	// Find the next 'state' we are transitioning to based on the 'at' property.
	// The 'at' property sets at what hour that state should be at.
	const nextIndex = config.states.findIndex(frame => {
		return frame.at !== 0 && progress < frame.at
	})
	// The previous 'state' is the one before the next one, so we remove 1.
	const lastIndex = nextIndex - 1

	// Get the onjects for the last and next states
	const lastState = config.states[lastIndex]
	const nextState = config.states[nextIndex]

	// Calculate the difference between the 'at' values of the previous and last states,
	// so we can get our progress between them based on the progress we got above.
	const diff = nextState.at - lastState.at
	const progressCurr = (progress - lastState.at) / diff

	// Loop through all the colours. 'key' is the cutsom property name
	Object.keys(lastState.colours).forEach(key => {
		// We use hex codes for colours for convenience, but it's a lot easier to transition
		// seperate Red, Green, Blue values so we convert them to a [R, G, B] array
		const lastRGB = hexToRgb(lastState.colours[key])
		const nextRGB = hexToRgb(nextState.colours[key])

		// Get the new RGB by using 'lerping' to find the value between the last and next
		// colours based on how far we are through the current animation.
		// The lerp function doesn't necessarily return an int so we round it.
		const currRGB = [
			Math.round(lerp(lastRGB[0], nextRGB[0], progressCurr)),
			Math.round(lerp(lastRGB[1], nextRGB[1], progressCurr)),
			Math.round(lerp(lastRGB[2], nextRGB[2], progressCurr))
		]

		// Apply the custom property to root using the name and our new RGB value.
		applyColour(key, currRGB)
	})
  
  sunPos(progress)
}

// As we have two different animation 'modes', we change the function used to work
// out the progress depending on that mode. See the config above for how they work.
function getProgress() {
	const d = new Date()
	const progress = config.anims[animMode].getProgress(d)

	return progress
}

// A slightly bewildering regular expression that turns a hex code into [R, G. B] array.
// Well-tested though so I don't need to touch it!
function hexToRgb(hex) {
	var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
	return result ? [
		parseInt(result[1], 16),
		parseInt(result[2], 16),
		parseInt(result[3], 16)
	] : null
}

// Using 'linear interpolation' gets the value between the start and end values based on progress
function lerp(start, end, progress) {
	return (1 - progress) * start + progress * end
}

// Uses name of custom property 'key' and [R, G, B] array and applies to root element
function applyColour(key, colour) {
	const colourString = 'rgb(' + colour.join(',') + ')'
	root.style.setProperty('--' + key, colourString)
}

// Round number to 'places' number of figures after decimal.
function round(num, places) {
	const power = Math.pow(10, places)
	return Math.round(num * power) / power
}

// Initialise and start animation.
function init() {
	startAnim()
}
init()


/**
 * theme picker
 */
const themes = document.querySelectorAll('[data-theme]')
if (themes) {
	themes.forEach(function(theme) {
		theme.addEventListener('click', function(e) {
			// remove active state from old theme buttons
			themes.forEach(theme => {
				theme.removeAttribute('data-active')
				theme.removeAttribute('aria-pressed')
			})
			
			// add active state to clicked button
			this.setAttribute('data-active', '')
			this.setAttribute('aria-pressed', '')

			// get slug for current theme
			const themeSlug = this.getAttribute('data-theme')

			// end animation
			endAnim()

			// if dynamic theme, set animMode, start animation and return
			if (themeSlug === 'live' || themeSlug === 'cycle') {
				animMode = themeSlug
				startAnim()
				return
			}

			// find theme state and apply the colours
			const state = config.states.find(item => item.name === themeSlug)
			Object.keys(state.colours).forEach(key => {
				applyColour(key, hexToRgb(state.colours[key]))
			})
      sunPos(state.at)
		})
	})
}

/**
 * sun
 */
function sunPos(progress) {
	const sunWrap = document.querySelector('.landscape__sunWrap')
	if (sunWrap) {
		const sunH = -Math.sin(2 * Math.PI * progress / 24)
		const sunV = -Math.sin(2 * Math.PI * (progress - 6) / 24)
		sunWrap.style.setProperty('--sun-h', round(sunH, 3))
		sunWrap.style.setProperty('--sun-v', round(sunV, 3))
	}
}


/**
 * parallax
 */
// constant elements: your main scrolling element; html element
const scrollEl = document.documentElement

let scrollPos

// update css property on scroll
function parallax() {
  // check the scroll position has changed
  if (scrollPos !== scrollEl.scrollTop) {
    // reset the seen scroll position
    scrollPos = scrollEl.scrollTop
    // update css property --scrollPos with scroll position in pixels
    root.style.setProperty('--scrollPos', scrollPos + 'px')
  }

  // call animation again on next animation frame
  window.requestAnimationFrame(parallax)
}

// start animation on next animation frame
window.requestAnimationFrame(parallax)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.