.cairn-transition {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: block;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  color: var(--c-paper);
}

.cairn-transition-slabs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.cairn-transition .cairn-transition-slab {
  position: relative;
  background: #142127;
  border-right: 1px solid rgba(233, 228, 218, 0.17);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}
.cairn-transition .cairn-transition-slab:nth-child(2),
.cairn-transition .cairn-transition-slab:nth-child(4) { background: #1a292e; }
.cairn-transition .cairn-transition-slab:nth-child(3) { background: #945938; }

.cairn-transition-grid {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: linear-gradient(rgba(233,228,218,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(233,228,218,.13) 1px,transparent 1px);
  background-size: 6.25vw 6.25vw;
  transition: opacity .32s ease;
}
.cairn-transition-axis { position: absolute; inset: 32px; }
.cairn-transition-axis span { position: absolute; background: rgba(233,228,218,.62); transform: scale(0); }
.cairn-transition-axis span:first-child { top: 50%; right: 0; left: 0; height: 1px; transform-origin: left; }
.cairn-transition-axis span:last-child { top: 0; bottom: 0; left: 50%; width: 1px; transform-origin: top; }
.cairn-transition-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(84px, 9vw, 138px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  font: 300 clamp(52px, 6vw, 92px)/1 var(--c-serif);
  transform: translate(-50%,-50%) rotate(-45deg) scale(.65);
}
.cairn-transition-mark span {
  display: block;
  transform: translate(-.045em, var(--cairn-glyph-optical-y));
}
.cairn-transition-copy { position: absolute; right: 32px; bottom: 30px; left: 32px; display: flex; justify-content: space-between; align-items: end; margin: 0; overflow: hidden; }
.cairn-transition-copy small { opacity: 0; font: 8px var(--c-mono); letter-spacing: .16em; }
.cairn-transition-copy strong { opacity: 0; font: 300 clamp(42px, 7vw, 108px)/.8 var(--c-serif); letter-spacing: -.05em; transform: translateY(110%); }

.cairn-leaving .cairn-transition,
.cairn-arriving .cairn-transition { visibility: visible; }
.cairn-leaving .cairn-transition .cairn-transition-slab { transform: scaleX(1); transition: transform .62s var(--c-ease); }
.cairn-leaving .cairn-transition-slab:nth-child(2) { transition-delay: .05s; }
.cairn-leaving .cairn-transition-slab:nth-child(3) { transition-delay: .1s; }
.cairn-leaving .cairn-transition-slab:nth-child(4) { transition-delay: .15s; }
.cairn-leaving .cairn-transition-slab:nth-child(5) { transition-delay: .2s; }
.cairn-leaving .cairn-transition-grid { opacity: 1; transition-delay: .3s; }
.cairn-leaving .cairn-transition-axis span { transform: scale(1); transition: transform .5s var(--c-ease) .28s; }
.cairn-leaving .cairn-transition-mark { opacity: 1; transform: translate(-50%,-50%) rotate(0) scale(1); transition: opacity .25s ease .34s,transform .72s var(--c-ease) .3s; }
.cairn-leaving .cairn-transition-copy small { opacity: .72; transition: opacity .28s ease .42s; }
.cairn-leaving .cairn-transition-copy strong { opacity: 1; transform: none; transition: opacity .25s ease .4s,transform .65s var(--c-ease) .38s; }

.cairn-arriving .cairn-transition-slab { transform: scaleX(1); }
.cairn-arriving .cairn-transition-grid { opacity: 1; }
.cairn-arriving .cairn-transition-axis span { transform: scale(1); }
.cairn-arriving .cairn-transition-mark { opacity: 1; transform: translate(-50%,-50%) rotate(0) scale(1); }
.cairn-arriving .cairn-transition-copy small { opacity: .72; }
.cairn-arriving .cairn-transition-copy strong { opacity: 1; transform: none; }
.cairn-arriving.cairn-arrived .cairn-transition-slab { transform: translateY(-105%) scaleX(1); transition: transform .76s var(--c-ease); }
.cairn-arriving.cairn-arrived .cairn-transition-slab:nth-child(2) { transition-delay: .05s; }
.cairn-arriving.cairn-arrived .cairn-transition-slab:nth-child(3) { transition-delay: .1s; }
.cairn-arriving.cairn-arrived .cairn-transition-slab:nth-child(4) { transition-delay: .15s; }
.cairn-arriving.cairn-arrived .cairn-transition-slab:nth-child(5) { transition-delay: .2s; }
.cairn-arriving.cairn-arrived .cairn-transition-grid,
.cairn-arriving.cairn-arrived .cairn-transition-axis,
.cairn-arriving.cairn-arrived .cairn-transition-mark,
.cairn-arriving.cairn-arrived .cairn-transition-copy { opacity: 0; transition: opacity .3s ease .12s; }

@media (max-width: 700px) {
  .cairn-transition-slabs { grid-template-columns: repeat(3, 1fr); }
  .cairn-transition-slab:nth-child(n+4) { display: none; }
  .cairn-transition-copy { right: 20px; bottom: 22px; left: 20px; }
  .cairn-transition-copy strong { font-size: 14vw; }
}

@media (prefers-reduced-motion: reduce) {
  .cairn-transition { display: none !important; }
}