body.loading {
  overflow: hidden;
}
body.loaded {
  overflow: initial;
}
header {
  text-align: center;
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  gap: 40px;
}
header  p {
  max-width: 30ch;
  margin: 0 auto;
}
h1 {
  position: relative;
  font-size: max(10vmin, 54px);
  text-stroke: 1px var(--col-grey);
  -webkit-text-stroke: 1px var(--col-grey);
  line-height: 1;
}
h1 span {
  text-stroke: 1px var(--col-white);
  -webkit-text-stroke: 1px var(--col-white);
  display: inline-block;
  position: relative;
  transition: opacity .5s 2s linear,
              filter .5s 2.1s linear,
              transform .5s 2.1s var(--ease-out-expo);
}
@keyframes hide {
  to {
    opacity: 0;
  }
}
/* Selection */
h1 span:first-child::before {
  content: '';
  position: absolute;
  inset: -0.25em;
  background-color: rgba(3, 152, 85, 0.1);
  border: 1px solid rgb(3, 152, 85);
  transform: scale(0);
  transform-origin: top left;
  transition: transform 1.2s .8s cubic-bezier(0.85, 0, 0.15, 1);
}
.loaded h1 span:first-child::before {
  transform: scale(1);
  animation: hide .1s 1.7s linear forwards;
}
/* Cursor */
h1 span:first-child::after {
  content: '';
  position: absolute;
  left: calc(100% + 0.1em);
  top: calc(100% + 0.1em);
  width: 56px;
  aspect-ratio: 72 / 62;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 73 62'%3E%3Cpath fill='%23039855' stroke='%23fff' stroke-linejoin='round' stroke-width='1.5' d='M5.88 7.49c-.39-1 .6-2 1.61-1.62l17.87 6.62c1.05.38 1.1 1.82.1 2.29l-7.16 3.3-3.27 7.12c-.46 1-1.91.96-2.31-.07L5.88 7.5Z'/%3E%3Crect width='44' height='34' x='27.11' y='26.99' fill='%23039855' rx='3'/%3E%3Crect width='44' height='34' x='27.11' y='26.99' stroke='%23039855' stroke-width='2' rx='3'/%3E%3Cpath fill='%23fff' d='M34.46 38.35h2.38l2.85 5.15h.11l2.85-5.15h2.38l-4.23 7.3v4.34h-2.1v-4.34l-4.24-7.3Zm14.16 11.8c-.86 0-1.6-.18-2.22-.56a3.82 3.82 0 0 1-1.45-1.57 5.17 5.17 0 0 1-.52-2.36c0-.9.17-1.7.52-2.37.34-.68.82-1.2 1.45-1.58a4.23 4.23 0 0 1 2.22-.56c.85 0 1.59.18 2.21.56.63.37 1.11.9 1.45 1.58.35.68.52 1.47.52 2.37 0 .9-.17 1.69-.52 2.36-.34.68-.82 1.2-1.45 1.57-.62.38-1.36.57-2.21.57Zm0-1.64c.47 0 .86-.13 1.17-.38.3-.26.54-.6.69-1.04.15-.43.23-.9.23-1.44 0-.53-.08-1.02-.23-1.45a2.3 2.3 0 0 0-.7-1.04c-.3-.25-.7-.38-1.15-.38-.48 0-.87.13-1.18.38-.32.26-.55.6-.7 1.04-.16.43-.23.92-.23 1.45 0 .53.07 1.01.23 1.44.15.44.38.78.7 1.04.31.25.7.38 1.18.38Zm11.49-2.2v-5.05h2.05v8.73h-2v-1.55h-.08c-.2.48-.52.88-.97 1.2-.45.3-1 .46-1.66.46a2.65 2.65 0 0 1-2.54-1.5 3.95 3.95 0 0 1-.37-1.78v-5.56h2.06v5.24c0 .55.15 1 .45 1.32.3.32.7.49 1.2.49a1.89 1.89 0 0 0 1.58-.89c.18-.3.28-.66.28-1.1Z'/%3E%3C/svg%3E");
  transform: translate(-5.5em, -1.4em);
  opacity: 0;
  transition: transform 1s 1.3s var(--ease-out-expo), opacity .2s 1.1s linear;
}

.loaded h1 span:first-child::after {
  transform: none;
  opacity: 1;
  /* animation: hide .1s 1.5s linear forwards; */
}
h1 span:last-child {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  opacity: 0;
  filter: blur(8px);
  transition: filter .55s 2.2s linear,
              opacity .5s 2.3s linear,
              transform .5s 2.25s var(--ease-out-expo);
}

.loaded h1 span:first-child {
  opacity: 0;
  filter: blur(12px);
  transform: scaleX(0.7) scaleY(0.98);
}
.loaded h1 span:last-child {
  transform: translateX(-50%);
  opacity: 1;
  filter: blur(0);
}
/* Masonry Gallery */
.gallery {
  position: relative;
  column-count: 3;
  column-gap: var(--padding);
  margin: 0 auto;
  margin-top: 6vh;
  background-color: var(--col-black);
}

/* Fade Into Dots */
.gallery::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 6vh;
  background: linear-gradient(to bottom, transparent 0%, #18181B 100%);
  z-index: 3;
  pointer-events: none;
}
.loading main {
  transform: translate3d(0, 10dvh, 0) scale(0.97);
  opacity: 0;
}
.loaded main {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}
main {
  position: relative;
  transition: transform 1.2s .15s cubic-bezier(0.85, 0, 0.15, 1), opacity 1.1s linear;
}
/* Dot grid background */
main::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .08) 10%, transparent 11%) 0 0 / 20px 20px;
}

.gallery__item {
  position: relative;
  z-index: 1;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: var(--padding);
  break-inside: avoid;
  page-break-inside: avoid;
  background: rgba(255, 255, 255, 0.02);
  border: 8px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s var(--ease-out-expo);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.gallery__item::before {
  content: '';
  position: absolute;
  inset: -9px;
  background: linear-gradient(170deg, #767676 0%, #373737 100%);
  border-radius: inherit;
  z-index: -1;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  padding: 1px;
}

.gallery__item video {
  pointer-events: none;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 4px;
}


.showcase {
  background-color: var(--col-black);
}


@media (max-width: 1000px) {
  .gallery {
    column-count: 2;
  }
}
@media (max-width: 600px) {
  .gallery {
    column-count: 1;
  }
  header {
    gap: 32px;
  }
}