@charset "utf-8";
/*===== # hero =====*//*#region*/
section#hero > *:not(.hero__background) {
  animation: opening 2s ease 0s forwards;
}
section#hero .hero__navigation li {
  opacity: 0;
  --delay-interval: 0.2s;
  animation: opening 2s ease-in-out forwards;
  animation-delay: calc((var(--sibling-index) - 1) * var(--delay-interval));
}
@keyframes opening {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*===== / hero =====*//*#endregion*/

/*===== # header =====*//*#region*/
header {
  transform: translateY(-100px);
  transition: transform 1s ease-in-out;
}
header.animation {
  transform: translateY(-100px);
}
header.inview {
  transform: translateY(0);
}
/*===== / header =====*//*#endregion*/

/*===== # heading =====*//*#region*/
h2.animation::before {
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
}
h2.inview::before {
  animation: brush-draw 0.7s ease-in-out forwards;
  animation-delay: 0s;
}

@keyframes brush-draw {
  100%{
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
}
/*===== / heading =====*//*#endregion*/

/*===== # hover =====*//*#region*/
a[role="button"] {
  transition: filter 0.5s ease, transform 0.5s ease;
}
a[role="button"]:hover {
  transform: scale(1.1);
  filter: drop-shadow(0px 0px 10px var(--color_pale));
}
section#blog .blog__search a {
  transition: background 0.5s ease;
}
section#blog .blog__search a:hover {
  background: var(--color_pale);
}
/*===== / hover =====*//*#endregion*/

/*===== # =====*//*#region*/
#member ul {
  --case-duration: 4s;
  animation: member-marquee calc(var(--case-duration) * var(--case-visible-count)) linear infinite;
}
@keyframes member-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/*===== / =====*//*#endregion*/

/*===== # =====*//*#region*/
/*===== / =====*//*#endregion*/