/* Editorial interactions inspired by, but independently implemented from,
   Goodpatch's large-type rhythm and tactile transition language. */

html .collection-intro nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 14px;
  padding-bottom: 8px;
  transition: opacity .3s ease, translate .4s cubic-bezier(.16,1,.3,1);
}
html .collection-intro nav a::after {
  content: '↗';
  font-size: 19px;
  line-height: 1;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
html .collection-intro nav a::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
html .collection-intro nav a:hover,
html .collection-intro nav a:focus-visible { opacity: 1; translate: 5px 0; }
html .collection-intro nav a:hover::before,
html .collection-intro nav a:focus-visible::before { transform: scaleX(1); }
html .collection-intro nav a:hover::after,
html .collection-intro nav a:focus-visible::after { transform: translate(3px,-3px) rotate(8deg); }

.gp-cover-follower {
  position: fixed;
  z-index: 38;
  left: 0;
  top: 0;
  width: 174px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.75) rotate(-8deg);
  transform-origin: center;
  filter: drop-shadow(0 18px 22px #22050766);
  transition: opacity .28s ease, transform .42s cubic-bezier(.16,1,.3,1);
  visibility: hidden;
}
.gp-cover-follower.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%,-50%) scale(1) rotate(5deg);
}
.gp-cover-follower__image {
  width: 100%;
  aspect-ratio: 1;
  padding: 7px;
  background: #fff;
  overflow: hidden;
}
.gp-cover-follower__image img { width: 100%; height: 100%; object-fit: cover; }
.gp-cover-follower__caption {
  display: block;
  margin-top: 7px;
  color: #fff;
  font: 11px/1.35 ui-monospace,monospace;
  letter-spacing: .08em;
  text-shadow: 0 1px 7px #26050d;
}

html #community { position: relative; isolation: isolate; }
.gp-community-runner {
  position: absolute;
  z-index: 0;
  top: 145px;
  left: 0;
  width: 100%;
  height: 73px;
  overflow: hidden;
  display: flex;
  align-items: center;
  pointer-events: none;
  border-bottom: 1px solid #e72b3626;
  mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.gp-community-runner__track {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  animation: gp-runner 23s linear infinite;
  animation-play-state: paused;
}
.gp-near .gp-community-runner__track { animation-play-state: running; }
.gp-community-runner__track span {
  flex: 0 0 auto;
  white-space: nowrap;
  font: 900 clamp(38px,5.4vw,76px)/1 Arial,sans-serif;
  letter-spacing: -.07em;
  color: transparent;
  -webkit-text-stroke: 1px #e72b3660;
  padding-right: .3em;
}
@keyframes gp-runner { to { transform: translateX(-50%); } }

html #connections { position: relative; isolation: isolate; overflow: hidden; }
html #connections > .section-top,
html #connections > .connection-layout { position: relative; z-index: 1; }
.gp-connections-sweep {
  position: absolute;
  z-index: 0;
  left: 82%;
  top: 52%;
  width: min(72vw,1000px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at center,#77111f 0%,#aa1329 47%,#d91c32 67%,#ef233700 76%);
  opacity: .9;
  transform: translate(-50%,-50%) scale(var(--gp-sweep-scale,.18));
  will-change: transform;
}
.gp-connections-sweep::after {
  content: '';
  position: absolute;
  inset: 22%;
  border: 1px solid #ffffff31;
  border-radius: 50%;
  box-shadow: 0 0 0 45px #ffffff08,0 0 0 90px #ffffff05;
}
.gp-node-ripple {
  position: absolute;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 2px solid #fff8;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%,-50%);
  animation: gp-node-ping 1.05s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes gp-node-ping {
  0% { opacity: .9; transform: translate(-50%,-50%) scale(.4); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(7); }
}

@media (max-width: 800px) {
  .gp-cover-follower { display: none; }
  .gp-community-runner { display: none; }
  .gp-connections-sweep { width: 120vw; left: 78%; top: 60%; opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .gp-cover-follower { display: none !important; }
  .gp-community-runner__track { animation: none !important; }
  .gp-node-ripple { display: none !important; }
  html .collection-intro nav a,
  html .collection-intro nav a::before,
  html .collection-intro nav a::after { transition: none !important; }
}
html body.motion-paused .gp-cover-follower { display: none !important; }
html body.motion-paused .gp-community-runner__track { animation-play-state: paused !important; }
html body.motion-paused .gp-node-ripple { display: none !important; }
