/* The first screen: the dot portrait and the name fill it. Once the page opens, the portrait shrinks
   to a small one beside the name at the top. */
.top {
  display: flex;
  align-items: center;
  gap: 20px;
}

.is-hero .top {
  height: 100%;
  flex-direction: column;
  justify-content: center;
  gap: clamp(36px, 8svh, 84px);
  padding-block: 24px;
  text-align: center;
}

.is-open .top {
  padding-block: 40px 0;
}

#app[data-view="detail"] .top,
#app[data-view="note"] .top,
#app[data-view="login"] .top,
#app[data-view="resume"] .top {
  display: none;
}

.stage {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  display: block;
  position: relative;
  cursor: pointer;
  flex: none;
  color: inherit;
}

.is-hero .stage {
  width: min(88vw, 58svh, 600px);
  aspect-ratio: 1;
  max-width: 100%;
}

.is-open .stage {
  width: 96px;
  height: 96px;
}

.stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
}

/* while the dissolve runs on its own layer the portrait is hidden at once (it is being resized, and a half-visible
   resize shows a grid), and fades back in at the end under the dissolve's last frame, so the hand-over doesn't jump */
.stage canvas {
  transition: opacity 0.22s ease;
}

.fxing .stage canvas {
  opacity: 0;
  transition: none;
}

.who {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.is-hero .who {
  align-items: center;
  pointer-events: none;
  animation: inA 0.9s 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.is-open .who {
  animation: inB 0.8s 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

/* inA and inB are the same; two names restart the animation when the page opens or closes */
@keyframes inA {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes inB {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

h1 {
  margin: 0;
  font: 400 calc(0.9 * clamp(42px, 7vw, 72px))/1 var(--display);
  letter-spacing: 0.01em;
  text-wrap: balance;
  animation: flick 11s infinite;
}

.is-open h1 {
  font-size: calc(0.9 * clamp(30px, 4.6vw, 44px));
}

@keyframes flick {
  0%, 90.9%, 91.5%, 92.3%, 100% {
    opacity: 1;
  }
  91% {
    opacity: 0.5;
  }
  91.9% {
    opacity: 0.8;
  }
  92.1% {
    opacity: 0.35;
  }
}

.role {
  margin: 0;
  font-size: 15px;
  color: var(--dim);
}

.role a {
  color: var(--ink);
}

.role a:hover {
  color: var(--cyan-ink);
}

.nw {
  white-space: nowrap;
}

.is-hero .role {
  display: none;
}

@media (max-width: 480px) {
  .is-open .top {
    gap: 16px;
  }

  .is-open .stage {
    width: 76px;
    height: 76px;
  }
}

/* "Kaiel", written by hand once, then it stays */
.role a.kaiel {
  font: 500 1.42em/1 "Caveat", "Segoe Script", "Bradley Hand", cursive;
  color: var(--ink);
  display: inline-block;
  padding: 0 0.1em 0 0.04em;
  margin-left: 0.14em; /* the cursive K leans left, so it needs room after "at" */
  vertical-align: -0.05em;
  clip-path: inset(-25% 100% -25% 0);
}

.role a.kaiel.write {
  animation: write 1.3s 1.1s cubic-bezier(0.55, 0.1, 0.35, 1) forwards;
}

.role a.kaiel.written {
  clip-path: none;
}

.role a.kaiel:hover,
.role a.kaiel:focus-visible {
  color: var(--cyan-ink);
}

@keyframes write {
  to {
    clip-path: inset(-25% -8% -25% 0);
  }
}