/* M ENTRY — first screen */
body.pre-entry {
  overflow: visible;
}
body.pre-entry .site-header,
body.pre-entry main,
body.pre-entry .back-to-top {
  opacity: 0;
  pointer-events: none;
}
body.pre-entry.entry-revealing .site-header,
body.pre-entry.entry-revealing main,
body.pre-entry.entry-revealing .back-to-top {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 1.18s ease .18s;
}
.m-entry {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #000;
  color: rgba(255,255,255,.48);
  cursor: crosshair;
  user-select: none;
  overflow: hidden;
  transition: background-color 1.18s cubic-bezier(.2,.7,.16,1), visibility 1.18s ease;
}
.m-entry::before {
  content: "";
  position: absolute;
  inset: -28%;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.18), rgba(255,255,255,.07) 12%, transparent 42%),
    radial-gradient(circle at center, transparent 50%, rgba(0,0,0,.22) 78%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transform: scale(.72);
}
.m-entry::after {
  content: "";
  position: absolute;
  inset: -42%;
  background: radial-gradient(circle at center, rgba(255,255,255,.20), rgba(255,255,255,.075) 18%, transparent 58%);
  opacity: 0;
  pointer-events: none;
  transform: scale(.48);
}
.m-entry-mark {
  position: relative;
  width: clamp(94px, 13vw, 172px);
  aspect-ratio: 1;
  transform: translateY(-8px);
  z-index: 2;
}
.m-entry-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.m-triangle {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity, filter;
}
.m-entry-text {
  position: absolute;
  top: auto;
  bottom: clamp(58px, 11vh, 128px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .38em;
  text-transform: lowercase;
  color: rgba(255,255,255,.38);
  z-index: 3;
  transition: opacity .56s ease, transform .56s ease;
}
.m-entry:hover .m-entry-text {
  color: rgba(255,255,255,.55);
}
.m-entry.exploding {
  background-color: rgba(0,0,0,0);
}
.m-entry.exploding::before {
  animation: entryPageGlow 1.15s cubic-bezier(.2,.7,.16,1) forwards;
}
.m-entry.exploding::after {
  animation: entryBurstGlow 1.05s cubic-bezier(.2,.7,.16,1) forwards;
}
@keyframes entryPageGlow {
  0% { opacity: 0; transform: scale(.72); }
  28% { opacity: .72; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.34); }
}
@keyframes entryBurstGlow {
  0% { opacity: 0; transform: scale(.48); }
  24% { opacity: .95; transform: scale(.92); }
  100% { opacity: 0; transform: scale(1.55); }
}
.m-entry.exploding .m-entry-text {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}
.m-entry.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 768px) {
  .m-entry-mark { width: clamp(108px, 30vw, 150px); }
  .m-entry-text { bottom: 66px; }
}