* {
  margin: 0;
  padding: 0;
  font-size: 10px;
  list-style-type: none;
  box-sizing: border-box;
  transition: all 2s 500ms;

}

body {
  position: relative;
  height: 100vh;

  font-family: "circe", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 10px !important;

  background-color: rgba(200, 205, 210, 1);
  color: var(--primary-color-d);
  overflow: hidden;
}
  .active {
    color: var(--primary-color-l);
  }

.season--winter {
  background:
    radial-gradient(ellipse at top, var(--primary-winter-color), transparent),
    radial-gradient(ellipse at bottom, var(--secondary-winter-color), #fff);
}
  .season-gradient {
    position: absolute;
    z-index: 0;
    right: -150px;
    opacity: .6;
    bottom: -150px;
    background-color: var(--accent-winter-color);
    display: block;
    width: 400px;
    height: 400px;
    border-radius: 300px;
    filter: blur(100px);
    pointer-events: none;
  }

  /* *** TYPOGRAPHY *** */
  h1 {
    font-size: 200px;
    color: var(--accent-winter-color);
    font-weight: 900;
    line-height: 0;
    transform: scaleX(0.5);
  }
  h2 {
    font-size: var(--medium-size);
  }
  h3 {
    font-size: var(--medium-normal-size)
  }
  h4, sup, header li {
    display: block;
    width: 100%;
    font-size: var(--small-size);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--secindary-winter-color);
    margin-bottom: var(--ten-spacing);
  }
  p, strong {
    font-size: var(--normal-size);
    opacity: .6;
    margin: var(--ten-spacing) 0;
  }
  strong {
    font-weight: bold;
  }
    article p:first-child {
      text-indent: 0;
    }
  a.btn {
    display: inline-block;
    margin-top: var(--twentySpacing);
    padding: var(--fiveSpacing) var(--tenSpacing);

    font-size: var(--smallSize);
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;

    transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1) ;
    border-radius:  2px;
    cursor: pointer;
    pointer-events: all;
  }

    a.btn.btn--primary,
    a.btn.btn--primary-alt {
      text-decoration: none;

      background-color: #c9c1b1;
      color: var(--primaryColorD);
      padding: 8px 25px;
      border-radius:  9999px;
    }
      a.btn.btn--primary:hover {
        background: #df5627;
        color: var(--primaryColorD);
      }

    .view a.btn.btn--primary {
        width: 60px;
        height: 60px;
        padding: 15px;
        box-shadow: 0px 0px 10px var(--primaryColorD);
    }
    .view a.btn.btn--primary:hover {
      padding: 10px;
      fill: var(--primaryColorL);
    }
    a.btn.btn--tertiary {
      font-weight: 900;
      color: var(--primary-color-l);
    }
  /* *** LAYOUT *** */
  main {
    position: relative;
    display: flex;
    align-items: center;
    height: 100vh;
    width: 100%;
    overflow: hidden;
  }

  main section {  
    position: relative;
    min-height: 94vh;
    flex-basis: var(--full);
    align-items: center;

  }

  .outside {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    padding: var(--ten-spacing) var(--thirty-spacing);
  }
    .arafolk__logo {
      width: 50px;
      margin-bottom: var(--ten-spacing);
    }
    .plant-pattern {
      position: absolute;
      top: 0;
      left: 0;
      
      opacity: 0.1;
      z-index: -1;

      fill: url(#linear-gradient1);
      stroke-width: 5;
    }
      .view .plant-pattern {
        display: none;
      }

  .card-experience {
    flex: 0 0 480px;
    flex: 0 0 400px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--ten-spacing);

    box-shadow: 0 0 60px var(--accent-winter-color-tint);
    animation: glow 5s linear infinite alternate;
  }
  
  .card-experience article {
    width: var(--full);
  }

    .foreground, .background {
      position: absolute;
    }

    /* header */
    .header {
      display: none;
      align-items: center;
      position: absolute;
      z-index: 99;
      width: var(--full);
      height: 40px;
      text-transform: uppercase;
      background-color: var(--primary-color-l-tint);
      backdrop-filter: blur(10px);
    }
      header div {
        flex-basis: var(--full);
      }
      .header .identity {
        flex-basis: 90px;
        display: flex;
        align-items: center;
        margin-left: var(--twenty-spacing);
      }
        .header .identity img {
          width: 25px;
        }

      .header .dash {
        height: 1px;
        width: 40%;
        margin-left: var(--five-spacing);
        margin-right: var(--ten-spacing);
        border: 0;

        background-color: var(--primaryColorM);
      }
        .active .header .dash {
          background-color: var(--primary-color-l);
        }
      .header #location {
        text-align: center;
      }
      
      .header .menu {
        display: flex;
        justify-content: flex-end;
        flex-basis: 180px;

      }
        .header .menu span {
          margin-right: var(--twenty-spacing);
        }
        .header .menu__open {
          display: none;
          position: absolute;
          top: 40px;
          width: var(--full);

          list-style-type: none;
          backdrop-filter: blur(10px);
        }
        
          .header .menu__open li {
            font-size: var(--small-size);
            width: var(--full);
            margin: 0;
            padding: var(--five-spacing) var(--twenty-spacing);
                        
            background-color: rgba(255,255,255,.8);
            border-bottom: 1px dotted var(--primaryColorM);
          }
            .header .menu__open li:last-child {
              border-bottom: 0;
              margin: 0 auto;
              padding-top: var(--thirty-spacing);
              padding-bottom: var(--ten-spacing);
              text-align: center;
            }
        .view header {
          display: flex;
        }
  /* *** envelope *** */
  .card-experience .envelope {
    position: absolute;
    z-index: 80;

    font-size: var(--normal-size);
    text-align: center;
    pointer-events: none;
  }
  .card-experience .envelope .envelope__intro__text {
    font-size: var(--medium-normal-size);
    color: var(--primary-color-l);
  }
    .view .card-experience .envelope .envelope__intro__text { 
      display: none;
    }

  .card-experience .envelope .envelope__foreground {
    z-index: 82;
    
    display: flex;
    width: 100%;
    height: 94vh;
    flex-direction: column-reverse;
    justify-content: flex-start;
  }
    .card-experience .envelope .envelope__foreground nav .card-btn a {
      margin-bottom: 100px;
    }

      .view .card-experience .envelope .envelope__foreground nav .card-btn a {
        animation: grow--vertically 1000ms ease-out forwards;
        animation-delay: 300ms;
      }
      .view .card-experience .envelope .envelope__foreground nav .card-btn .envelope__enter {
        animation: disappear 500ms 1.5s forwards;
      }

    .card-experience .envelope .envelope__foreground .card-btn svg {
      display: none;    
    }
      .view .card-experience .envelope .envelope__foreground .card-btn svg {
        display: block;
        width: var(--thirty-spacing);
        animation: appear 500ms 1
        2.5s forwards;    
      }
    .view .card-experience .envelope .envelope__foreground .give-btn svg {
      animation: show 500ms 1.5s forwards;
    }

  nav ul {
      display: flex;
    }
    nav ul li {
      flex-basis: var(--full);
    }
      nav ul li.mssg-btn,
      nav ul li.give-btn {
        padding-top: var(--thirty-spacing);
        pointer-events: all;
        cursor: pointer;
      }
      nav ul li.mssg-btn svg,
      nav ul li.give-btn svg {
        width: var(--thirty-spacing);
        opacity: 0;
      }
      .view nav ul li.mssg-btn svg {
        animation: show 500ms ease 3.25s forwards;
      }
    
      .view nav ul li.give-btn svg {
        animation: show 500ms ease 4s forwards;
      }

      nav ul li.mssg-btn h4,
      nav ul li.give-btn h4 {
        color: var(--primary-color-l);
        opacity: 0;
      }
        .view nav ul li.mssg-btn h4 {
          animation: show 500ms ease 3.75s forwards;
        }
        .view nav ul li.give-btn h4 {
          animation: show 500ms ease 4.5s forwards;
        }

    nav svg {
      fill: none;
      stroke: var(--accent-winter-color-tint);
      stroke-width: 10px;
      width: 50px;
    }
      nav svg:hover {
        fill: var(--accent-winter-color);
        stroke: var(--accent-winter-color);
      }
 
      #card--foreground, #card--background {
        fill: var(--accent-winter-color);
        stroke: none;
      }
      .card-btn:hover #card--foreground, .card-btn:hover #card--background {
        fill: var(--primary-color-d);
        stroke: none;
      }


  .card-experience .envelope .envelope__background {
    z-index: 81;
    display: flex;
    width: 100%;
    height: 94vh;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    
    overflow: visible;
    pointer-events: none;
  }
    .card-experience .envelope .envelope__background svg {
      transform: scale(2.25);
      transform-origin: center;
      padding-top: 160px;
    }
    .view .card-experience .envelope .envelope__background svg {
      animation: envelope-appear 500ms ease-out forwards;
    }


    .envelope__cover {
      fill: var(--secondary-winter-color);
    }
    #envelope__texture {
      fill: var(--primary-color-d);
    }

  /* *** MESSAGE *** */
  .card-experience .message,
  .card-experience .give
   {
    position: absolute;
    z-index: 40;

    width: 0;
    height: 100vh;
    padding: 0;
    background-color: var(--primary-color-d);
    overflow: hidden;
  }
  .active .card-experience .message {
    padding: var(--thirty-spacing);
    animation: grow-to-right 500ms ease-out forwards;

  }
    .message__top,
    .give__top {
      display: flex;
      justify-content: flex-end;
      flex-direction: column;
      height: 40vh;
      padding-bottom: var(--thirty-spacing);
    }
      .message__top h4,
      .give__top h4 {
        animation: show 500ms .5s forwards;
      }
      .message__top h3,
      .give__top h3 {
        animation: show 500ms .75s forwards;
      }

    .message hr,
    .give hr {
      height: var(--ten-spacing);
      background-color: var(--primary-color-l);
      margin-bottom: var(--thirty-spacing);
      
      animation: show 500ms .85s forwards;
    }
    .message__bottom,
    .give__bottom {
      height: 60vh;
      padding-bottom: 100px;
      overflow: scroll;
    }    
      .message__bottom p,
      .give__bottom p {
        font-size: var(--medium-normal-size);
        margin-bottom: 100px;
        animation: show 500ms 1s forwards;
      } 

  /* *** CARD *** */
  .card-experience .card {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: flex-end;
  }
    .card-experience .card img {
      width: 105%;
      filter: blur(60px);
    }
      .view .card-experience .card img {
        filter: blur(0);
      }

  /* *** GIVE *** */
  .card-experience .give {
    position: absolute;
    z-index: 60;

    width: 0;
    height: 100vh;
    background-color: var(--primary-color-d);
    overflow: hidden;
  }
    .active .card-experience .give {
      padding: var(--thirty-spacing);;
      animation: grow-to-left 500ms ease-out forwards;
    }

/***  media query ***/
@media only screen and (max-width: 900px) {
  .outside {
    display: none;
  }
}
@media only screen and (max-width: 600px) {
  .card-experience {
    box-shadow: none;
  }
}

/*** animation ***/

@keyframes breathe {
    from  { box-shadow: 0px 0px 40px rgba(200, 205, 210,  .5)}
    to    { box-shadow: 0px 0px 120px rgba(200, 205, 210, 1)
  }
}
@keyframes disappear {
  0% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  100% {
    display: none;
  }
}
@keyframes envelope-appear {
  from {
    transform: scale(2);
    transform-origin: center;
    padding-top: 160px;
  }
  to {
    transform: scale(3.3);
    transform-origin: center;
    padding-top: 56vh;
  }

}
      
@keyframes appear {
  0% {
    display: block;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }

}
@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes show-hide {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes glow {
  from {
    box-shadow: 0 0 0px var(--accent-winter-color-tint);
  }
  to {
    box-shadow: 0 0 60px var(--accent-winter-color-tint);
  }
}
@keyframes grow--vertically {
    0% {
      height: 60px;
      margin-bottom: 100px;
    }
    65% {
      height: 40vh;
      margin-bottom: 40px;
      background-color: var(--accent-winter-color);
    }

    70% {
      height: 60px;
      margin-bottom: 40px;
    }
    75% {
      height: 120px;
      margin-bottom: 40px;
    }

    80% {
      height: 50px;
      margin-bottom: 40px;
    }
    85% {
      height: 80px;
      margin-bottom: 40px;
    }

    90% {
      height: 50px;
      margin-bottom: 40px;
    }
    95% {
      height: 60px;
      margin-bottom: 40px;
    }
    100% {
      margin-bottom: 40px;
    }

}

@keyframes grow-to-right {
  0% {
    width: 0;
    border-radius: 0;
  }
  65% {
    width: 50%;
    border-radius: 0 9999px 9999px 0 ;
  }
  100% {
    width: 100%;
    border-radius: 0;
  }
} 

  
@keyframes grow-to-left {
  0% {
    width: 0;
    border-radius: 0;
  }
  65% {
    width: 50%;
    border-radius: 9999px 0 0 9999px;

  }
  100% {
    width: 100%;
    border-radius: 0;
  }
  
}