/* nhaajt studio: motion and plotted drawings */

/* ---------- page pull (new sheet) ---------- */

@view-transition {
  navigation: auto;
}
.paper { view-transition-name: sheet-paper; }
.frame { view-transition-name: sheet-frame; }
.top { view-transition-name: sheet-top; }
.strip { view-transition-name: sheet-strip; }
::view-transition-old(root) {
  animation: 460ms cubic-bezier(0.6, 0, 0.9, 0.4) both vt-out;
}
::view-transition-new(root) {
  animation: 680ms cubic-bezier(0.2, 0.7, 0.2, 1) both vt-in;
}
@keyframes vt-out {
  to {
    transform: translateY(-9vh) scale(0.97);
    opacity: 0;
  }
}
@keyframes vt-in {
  from {
    clip-path: inset(100% 0 0 0);
    transform: translateY(7vh);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

.pull {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background:
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 96px 96px,
    var(--paper-2);
  border-top: 3px solid var(--redline);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.3, 1);
  pointer-events: none;
  font-family: var(--display);
  font-size: clamp(28px, 6vw, 56px);
  color: var(--ink-dim);
}
.pull.go {
  transform: none;
  pointer-events: auto;
}
html.arriving::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  background:
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 96px 96px,
    var(--paper-2);
  border-bottom: 3px solid var(--redline);
  pointer-events: none;
  animation: arrive 0.65s cubic-bezier(0.7, 0, 0.3, 1) 0.08s forwards;
}
@keyframes arrive {
  to {
    transform: translateY(-101%);
  }
}

/* ---------- pencil, crosshair, parallax drafting layers ---------- */

#ink {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 64;
  pointer-events: none;
}
.px {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 200vh;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
.px > svg {
  display: block;
  width: 100%;
  height: 100vh;
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  opacity: 0.11;
}
.px--2 > svg {
  opacity: 0.09;
}
.px--3 > svg {
  opacity: 0.1;
}
.static .px,
.lite .px,
.static #ink,
.lite #ink {
  display: none;
}

.icon-btn--pen {
  display: none;
}
.icon-btn--pen[aria-pressed="false"] {
  opacity: 0.55;
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .icon-btn--pen {
    display: grid;
  }
}
.nav {
  gap: 18px;
}
@media (min-width: 1100px) {
  .nav {
    gap: 22px;
  }
}

/* ---------- buttons as rubber stamps ---------- */

.btn,
.icon-btn {
  position: relative;
  translate: var(--mx, 0) var(--my, 0);
}
.btn {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, translate 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.icon-btn {
  transition: translate 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.18s;
}
.btn:active {
  transform: translate(1px, 2px) scale(0.955) rotate(-0.8deg);
  box-shadow: none;
  transition-duration: 0.06s;
}
.print {
  position: absolute;
  inset: -7px;
  border: 2px solid var(--redline);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  animation: print 0.7s ease-out forwards;
}
@keyframes print {
  0% {
    opacity: 0.95;
    transform: scale(0.82) rotate(-2deg);
  }
  35% {
    opacity: 0.8;
    transform: scale(1) rotate(-1deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.12) rotate(-1deg);
  }
}

/* ---------- folded sheets that unfold on scroll ---------- */

.js .sheet:not(.pin),
.js .foot {
  --unf: 1;
}
.js .sheet:not(.pin)::before,
.js .foot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 140px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(rgba(2, 20, 36, 0.5), transparent);
  opacity: calc((1 - var(--unf)) * 0.9);
}
:root[data-theme="light"] .sheet:not(.pin)::before,
:root[data-theme="light"] .foot::before {
  background: linear-gradient(rgba(10, 53, 88, 0.25), transparent);
}
.js .fold-on > .wrap {
  transform: perspective(1500px) rotateX(calc((1 - var(--unf)) * -34deg));
  transform-origin: 50% 0;
  opacity: calc(0.2 + 0.8 * var(--unf));
  backface-visibility: hidden;
}
.static .fold-on > .wrap {
  transform: none;
  opacity: 1;
}

/* ---------- plotted headings, pen ---------- */

.js .ptext {
  position: relative;
}
.js .pw {
  display: inline-block;
  white-space: nowrap;
}
.js .pc {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--line);
  opacity: 0;
  transform: translateY(0.1em);
}
.js .pc.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.15s, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: inkfill 0.5s ease 0.2s forwards;
}
.js .ptext.done .pc {
  color: var(--ink);
  -webkit-text-stroke-color: transparent;
}
.static .pc,
.static .ptext.done .pc {
  color: var(--ink);
  -webkit-text-stroke-color: transparent;
  opacity: 1;
  transform: none;
  animation: none;
}
.pen {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.pen::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid var(--redline);
  border-radius: 50%;
}
.pen::after {
  content: "";
  position: absolute;
  left: 7px;
  top: -4px;
  width: 2px;
  height: 24px;
  background: var(--redline);
  transform: rotate(35deg);
  opacity: 0.8;
}
.pen.on {
  opacity: 1;
}
.static .pen {
  display: none;
}

.dimfly {
  overflow: hidden;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 14px;
  margin-top: -4px;
  font-size: 11px;
  color: var(--ink-dim);
  line-height: 1;
}
.dimfly i {
  flex: 1;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: center;
}
.dimfly s {
  width: 1px;
  height: 14px;
  background: var(--line);
  opacity: 0;
  transform: translateX(-90px);
}
.dimfly s:last-child {
  transform: translateX(90px);
}
.dimfly b {
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
}
.dimfly.on s {
  opacity: 1;
  transform: none;
  transition: transform 0.75s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.3s;
}
.dimfly.on i {
  transform: scaleX(1);
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}
.dimfly.on b {
  opacity: 1;
  transition: opacity 0.4s 0.7s;
}
.static .dimfly s,
.static .dimfly i,
.static .dimfly b {
  opacity: 1;
  transform: none;
}
.pin .dimfly {
  display: none;
}

/* hero: compass, flying dimension lines */

.js .compass {
  opacity: 0;
  transform-origin: 320px 310px;
}
.js.ready .compass {
  animation: compass-rot 1.5s cubic-bezier(0.55, 0, 0.2, 1) 0.1s both, compass-vis 1.7s linear 0.1s both;
}
@keyframes compass-rot {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes compass-vis {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.static .compass {
  display: none;
}
.js .flyin {
  opacity: 0;
}
.js.ready .flyin--l {
  animation: fly-l 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) var(--d, 0s) both;
}
.js.ready .flyin--r {
  animation: fly-r 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) var(--d, 0s) both;
}
@keyframes fly-l {
  from {
    opacity: 0;
    transform: translateX(-140px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fly-r {
  from {
    opacity: 0;
    transform: translateX(140px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.static .flyin {
  opacity: 1 !important;
  animation: none !important;
  transform: none;
}
.js.ready .hero__dim {
  animation: dim-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.1s both;
}
@keyframes dim-in {
  from {
    clip-path: inset(0 50% 0 50%);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.static .hero__dim {
  animation: none !important;
}

/* ---------- command list, ticks ---------- */

.cmdlist {
  margin: 22px 0 0;
  display: grid;
  max-width: 600px;
  border-top: 1px solid var(--line-dim);
}
.cmdlist > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-dim);
  font-size: 13.5px;
  line-height: 1.55;
}
.cmdlist dt,
.cmdlist dd {
  margin: 0;
}
@media (max-width: 520px) {
  .cmdlist > div {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ticks {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  max-width: 560px;
}
.ticks li {
  position: relative;
  padding: 9px 0 9px 26px;
  border-top: 1px solid var(--line-dim);
  font-size: 14px;
  line-height: 1.55;
}
.ticks li:last-child {
  border-bottom: 1px solid var(--line-dim);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 17px;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--line);
  transform: rotate(45deg);
}
.lib-fig {
  max-width: 460px;
  justify-self: center;
  width: 100%;
}
.copy .legend--keys {
  margin-top: 18px;
}
.legend--cols {
  max-width: none;
  margin-top: 26px;
}
@media (min-width: 800px) {
  .legend--cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }
  .legend--cols li:nth-last-child(2) {
    border-bottom: 1px solid var(--line-dim);
  }
}

/* ---------- effects: shake, rings, easter egg ---------- */

html.shake main,
html.shake .foot {
  animation: shake 0.34s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 1px, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, -1px, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 1px, 0);
  }
}
.ring {
  position: fixed;
  z-index: 90;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 2px solid var(--redline);
  border-radius: 50%;
  pointer-events: none;
  animation: ringout 0.7s ease-out forwards;
}
@keyframes ringout {
  to {
    transform: scale(9);
    opacity: 0;
  }
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 74px;
  z-index: 95;
  transform: translate(-50%, 20px);
  opacity: 0;
  max-width: min(92vw, 520px);
  padding: 12px 18px;
  background: var(--paper-2);
  border: 1.5px dashed var(--redline);
  font-family: var(--hand);
  font-size: 22px;
  line-height: 1.2;
  text-align: center;
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.noteRain {
  position: fixed;
  top: -40px;
  z-index: 80;
  pointer-events: none;
  font-family: var(--display);
  font-size: 34px;
  color: var(--line);
  opacity: 0.8;
  animation: rain var(--t, 4s) linear var(--w, 0s) forwards;
}
@keyframes rain {
  to {
    transform: translate3d(var(--dx, 0), 115vh, 0) rotate(var(--r, 40deg));
    opacity: 0;
  }
}
html.encore .paper {
  animation: beat 0.5s ease-in-out infinite;
}
@keyframes beat {
  50% {
    transform: scale(1.025);
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .wave i,
  .caret,
  .xv.is-playing.is-live .cv-disc,
  .vc__bot.restarting i {
    animation: none !important;
  }
  .toast,
  .pull {
    transition: none;
  }
}
.static .wcard,
.static .btn,
.static .icon-btn {
  transform: none;
  translate: none;
}