@charset "UTF-8";

/* =====================================================
  DRAWER MENU
  fullscreen navigation
===================================================== */

.fd-drawer{
  position:fixed;
  inset:0;
  z-index:300;

  background:rgba(242,242,242,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  color:#222;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .38s ease,
    visibility .38s ease,
    background .38s ease;
}

.fd-drawer.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}


/* =====================================================
  INNER
===================================================== */

.fd-drawer__inner{
  min-height:100%;
  padding-top:120px;

  opacity:0;
  transform:translateY(10px);

  transition:
    opacity .42s ease,
    transform .42s ease;
}

.fd-drawer.is-open .fd-drawer__inner{
  opacity:1;
  transform:translateY(0);
}


/* =====================================================
  HEAD
===================================================== */

.fd-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:40px;
}

.fd-drawer__title{
  color:rgba(0,0,0,.42);
  font-family:var(--fd-serif-en);
  font-size:11px;
  letter-spacing:.20em;
  text-transform:uppercase;
}

.fd-menu-close{
  color:rgba(0,0,0,.72);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:opacity .25s ease;
}

.fd-menu-close:hover{
  opacity:.7;
}


/* =====================================================
  MENU LIST
===================================================== */

.fd-drawer__menu{
  margin:0;
  padding:0;
  list-style:none;
}

.fd-drawer__menu li{
  border-bottom:1px solid rgba(0,0,0,.10);
  opacity:0;
  transform:translateY(8px);
}

.fd-drawer__menu li:first-child{
  border-top:1px solid rgba(0,0,0,.10);
}

.fd-drawer__menu a{
  display:block;
  padding:24px 0;

  color:rgba(0,0,0,.72);

  font-family:var(--fd-serif-en);
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;

  transition:
    color .25s ease,
    transform .25s ease,
    opacity .25s ease;
}

.fd-drawer__menu a:hover{
  color:rgba(0,0,0,.92);
  transform:translateX(4px);
}


/* =====================================================
  STAGGER REVEAL
===================================================== */

.fd-drawer.is-open .fd-drawer__menu li{
  animation:fdDrawerItemReveal .7s cubic-bezier(.22,.61,.36,1) forwards;
}

.fd-drawer.is-open .fd-drawer__menu li:nth-child(1){
  animation-delay:.08s;
}

.fd-drawer.is-open .fd-drawer__menu li:nth-child(2){
  animation-delay:.14s;
}

.fd-drawer.is-open .fd-drawer__menu li:nth-child(3){
  animation-delay:.20s;
}

.fd-drawer.is-open .fd-drawer__menu li:nth-child(4){
  animation-delay:.26s;
}

.fd-drawer.is-open .fd-drawer__menu li:nth-child(5){
  animation-delay:.32s;
}

.fd-drawer.is-open .fd-drawer__menu li:nth-child(6){
  animation-delay:.38s;
}

.fd-drawer.is-open .fd-drawer__menu li:nth-child(7){
  animation-delay:.44s;
}

.fd-drawer.is-open .fd-drawer__menu li:nth-child(8){
  animation-delay:.50s;
}

@keyframes fdDrawerItemReveal{
  0%{
    opacity:0;
    transform:translateY(8px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}


/* =====================================================
  MOBILE
===================================================== */

@media (max-width:767px){

  .fd-drawer__inner{
    padding-top:92px;
  }

  .fd-drawer__head{
    margin-bottom:28px;
  }

  .fd-drawer__title,
  .fd-menu-close{
    font-size:10px;
  }

  .fd-drawer__menu a{
    padding:20px 0;
    font-size:13px;
    letter-spacing:.12em;
  }

}