/* ================= RESET ================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* ================= ROOT ================= */

:root{

  --bg-main:#3F2E2F;

  --bg-soft:#362627;

  --text-main:#D8DADD;

  --text-dim:#BFC3C9;

  --accent:#D8DADD;

  --transition:
  cubic-bezier(0.22, 1, 0.36, 1);
}

/* ================= BODY ================= */

body{

  background-color:var(--bg-main);

  background-image:
  url('assets/textures/main-texture.png');

  background-repeat:repeat;

  background-size:700px;

  background-attachment:fixed;

  color:var(--text-main);

  font-family:'Oswald',sans-serif;

  line-height:1.8;

  letter-spacing:0.3px;

  overflow-x:hidden;

  animation:pageFade 0.45s ease;
}

@keyframes pageFade{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

/* ================= PAGE ================= */

.page{

  max-width:900px;

  margin:auto;

  padding:
  180px
  20px
  40px
  20px;
}

/* ================= BLOCK ================= */

.block{
  margin-bottom:60px;
}

/* ================= INTRO TEXT ================= */

.block:first-child p{

  font-family:'Homemade Apple',cursive;

  font-size:18px;

  line-height:1;

  letter-spacing:0.5px;

  margin-bottom:-50px;

  color:var(--text-dim);
}

/* ================= HEADINGS ================= */

h1{

  font-family:'Bebas Neue',sans-serif;

  font-size:72px;

  font-weight:400;

  line-height:1.02;

  letter-spacing:2px;

  margin-bottom:24px;

  opacity:0;

  transform:
  translateX(-60px);

  animation:
  headingReveal 0.85s forwards;

  animation-timing-function:
  cubic-bezier(0.22, 1, 0.36, 1);

  word-break:break-word;
}

@keyframes headingReveal{

  to{
    opacity:1;
    transform:translateX(0);
  }
}

/* ================= PARAGRAPHS ================= */

p{

  font-family:'Oswald',sans-serif;

  font-size:24px;

  font-weight:300;

  line-height:1.9;

  letter-spacing:0.6px;

  color:var(--text-dim);

  opacity:0;

  transform:
  translateX(40px);

  animation:
  paragraphReveal 0.75s forwards;

  animation-delay:0.12s;

  animation-timing-function:
  cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes paragraphReveal{

  to{
    opacity:1;
    transform:translateX(0);
  }
}

/* ================= LINKS ================= */

a{
  text-decoration:none;
  color:inherit;
}

/* ================= IMAGES ================= */

img{

  width:100%;

  display:block;

  border-radius:4px;

  opacity:0;

  transform:
  translateY(35px)
  scale(1.05);

  animation:
  imageReveal 1s forwards;

  animation-delay:0.18s;

  transition:
  transform 1s var(--transition),
  opacity 0.8s ease;
}

@keyframes imageReveal{

  to{

    opacity:1;

    transform:
    translateY(0)
    scale(1);
  }
}

img:hover{
  transform:scale(1.02);
}

/* ================= HAMBURGER ================= */

.hamburger{

  position:fixed;

  top:18px;

  left:20px;

  z-index:1200;

  font-size:38px;

  color:var(--text-main);

  cursor:pointer;

  transition:
  transform 0.5s var(--transition),
  opacity 0.4s ease,
  color 0.4s ease;
}

.hamburger:hover{
  transform:scale(1.05);
}

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

.menu{

  position:fixed;

  inset:0;

  width:100%;

  height:100vh;

  background-color:
  rgba(63,46,47,0.96);

  background-image:
  url('assets/textures/main-texture.png');

  background-repeat:repeat;

  background-size:700px;

  backdrop-filter:blur(14px);

  padding:
  92px
  22px
  40px
  22px;

  display:flex;

  flex-direction:column;

  gap:14px;

  z-index:1100;

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transform:translateY(-10px);

  overflow-y:auto;

  -webkit-overflow-scrolling:touch;

  transition:
  opacity 0.55s var(--transition),
  transform 0.55s var(--transition),
  visibility 0.55s;
}

.menu.active{

  opacity:1;

  visibility:visible;

  pointer-events:auto;

  transform:translateY(0);
}

/* ================= MENU ITEMS ================= */

.menu a{

  font-family:'Oswald',sans-serif;

  font-size:34px;

  font-weight:400;

  letter-spacing:1px;

  line-height:1.2;

  color:var(--text-main);

  opacity:0;

  transform:
  translateX(-90px)
  scale(0.94);

  filter:blur(6px);

  transition:
  transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
  opacity 1s ease,
  filter 1s ease,
  color 0.35s ease;
}

.menu.active a{

  opacity:1;

  transform:
  translateX(0)
  scale(1);

  filter:blur(0px);
}

/* ================= MENU GROUP ================= */

.menu-group{

  display:flex;

  flex-direction:column;
}

/* ================= MENU PARENT ================= */

.menu-parent{

  display:flex;

  align-items:center;

  justify-content:space-between;

  width:100%;

  font-family:'Oswald',sans-serif;

  font-size:34px;

  font-weight:400;

  letter-spacing:1px;

  line-height:1.2;

  color:var(--text-main);

  cursor:pointer;

  opacity:0;

  transform:
  translateX(-90px)
  scale(0.94);

  filter:blur(6px);

  transition:
  transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
  opacity 1s ease,
  filter 1s ease,
  color 0.35s ease;
}

.menu.active .menu-parent{

  opacity:1;

  transform:
  translateX(0)
  scale(1);

  filter:blur(0px);
}

/* ================= SUBMENU ARROW ================= */

.submenu-arrow{

  font-size:18px;

  margin-left:10px;

  opacity:0.72;

  transition:
  transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
  opacity 0.35s ease;
}

.menu-group.active .submenu-arrow{

  transform:rotate(90deg);

  opacity:1;
}

/* ================= SUBMENU ================= */

.submenu{

  max-height:0;

  overflow:hidden;

  display:flex;

  flex-direction:column;

  gap:14px;

  padding-left:18px;

  opacity:0;

  margin-top:0;

  margin-bottom:0;

  transition:
  max-height 0.9s cubic-bezier(0.22, 1, 0.36, 1),
  opacity 0.7s ease,
  margin-top 0.7s ease,
  margin-bottom 0.7s ease;
}

.menu-group.active .submenu{

  max-height:1400px;

  opacity:1;

  margin-top:18px;

  margin-bottom:8px;
}

/* ================= SUBMENU LINKS ================= */

.submenu-link{

  position:relative;

  display:block;

  font-family:'Oswald',sans-serif;

  font-size:20px;

  font-weight:300;

  line-height:1.4;

  letter-spacing:0.5px;

  color:var(--text-dim);

  opacity:0;

  transform:
  translateY(-10px);

  transition:
  opacity 0.8s ease,
  transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
  color 0.35s ease;
}

.menu-group.active .submenu-link{

  opacity:1;

  transform:
  translateY(0);
}

.submenu-link:hover{

  color:var(--text-main);
}

/* ================= DIVIDER ================= */

.divider{

  width:84%;

  height:5px;

  margin:
  90px
  auto
  6px
  auto;

  border-radius:999px;

  background:#BFC3C9;
}

/* ================= FOOTER ================= */

.footer{

  font-family:'Oswald',sans-serif;

  text-align:center;

  padding:
  0
  20px
  40px;

  color:var(--text-dim);

  font-size:28px;

  font-weight:300;

  letter-spacing:3px;

  text-transform:uppercase;
}

/* ================= SMOOTH SCROLL ================= */

html{

  scroll-behavior:smooth;
}

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

@media(max-width:768px){

  .page{
    padding-top:220px;
  }

  .block:first-child p{
    font-size:15px;
    margin-bottom:-42px;
  }

  h1{
    font-size:54px;
    letter-spacing:1px;
    line-height:1.05;
  }

  p{
    font-size:18px;
    line-height:1.8;
  }

  .menu a{
    font-size:24px;
  }

  .menu-parent{
    font-size:24px;
  }

  .submenu-link{
    font-size:16px;
  }

  .submenu-arrow{
    font-size:12px;
  }

  .footer{
    font-size:18px;
    letter-spacing:2px;
  }
}