/* Home -> writing: hanging stars retract, then the same coordinates are released from above. */
@view-transition {
  navigation: auto;
}

.writing-site-avatar-source,
.writing-site-avatar-target {
  view-transition-name: writing-site-avatar;
}

.writing-site-name-source,
.writing-site-name-target {
  view-transition-name: writing-site-name;
}

.writing-planet-source {
  view-transition-name: writing-keke-planet;
}

::view-transition-group(writing-site-avatar),
::view-transition-group(writing-site-name) {
  z-index: 998;
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(.2, .74, .18, 1);
  animation-fill-mode: both;
}

::view-transition-group(writing-keke-planet) {
  z-index: 997;
  animation: none;
}

::view-transition-image-pair(writing-site-avatar),
::view-transition-image-pair(writing-site-name),
::view-transition-image-pair(writing-keke-planet) {
  isolation: auto;
}

::view-transition-old(writing-site-avatar),
::view-transition-new(writing-site-avatar),
::view-transition-old(writing-site-name),
::view-transition-new(writing-site-name),
::view-transition-old(writing-keke-planet) {
  mix-blend-mode: normal;
  filter: none;
}

::view-transition-old(writing-keke-planet) {
  animation: writing-planet-recede 580ms cubic-bezier(.18, .66, .2, 1) both;
  transform-origin: center;
}

html:has(body.is-entering-writing-archive)::view-transition-old(root) {
  animation: writing-world-settle-out 440ms cubic-bezier(.36, 0, .2, 1) both;
}

html:has(body.is-arriving-writing-archive)::view-transition-new(root) {
  animation: writing-archive-world-in 520ms cubic-bezier(.2, .72, .2, 1) both;
}

html:has(body.is-entering-writing-note)::view-transition-old(root) {
  animation: writing-focus-world-out 400ms cubic-bezier(.36, 0, .2, 1) both;
}

html:has(body.is-arriving-writing-note)::view-transition-new(root) {
  animation: writing-note-world-in 500ms cubic-bezier(.2, .72, .2, 1) both;
}

body[data-page="home"] .garden-current,
body[data-page="home"] .garden-trace,
body[data-page="home"] .project-orbit,
body[data-page="home"] .orbit-icon-shell,
body[data-page="home"] .orbit-tooltip,
body[data-page="home"] .decorative-stars,
body[data-page="home"] .cosmos-center time,
body[data-page="home"] .all-writing-link,
body[data-page="home"] .site-header .brand {
  transition-duration: 420ms;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

body[data-page="home"].is-writing-pressed .all-writing-link,
body[data-page="home"].is-writing-pressed .note-star:active {
  opacity: .76;
  scale: .985;
}

body[data-page="home"].is-preparing-writing-archive .garden-current,
body[data-page="home"].is-entering-writing-archive .garden-current,
body[data-page="home"].is-preparing-writing-note .garden-current,
body[data-page="home"].is-entering-writing-note .garden-current {
  scale: 1 var(--writing-flow-spread, 1);
  filter: blur(var(--writing-flow-blur, 19px)) saturate(.9) brightness(1.02);
}

body[data-page="home"].is-preparing-writing-archive .garden-trace,
body[data-page="home"].is-entering-writing-archive .garden-trace,
body[data-page="home"].is-preparing-writing-note .garden-trace,
body[data-page="home"].is-entering-writing-note .garden-trace {
  opacity: .52;
  filter: none;
}

body[data-page="home"].is-preparing-writing-archive .project-orbit,
body[data-page="home"].is-entering-writing-archive .project-orbit,
body[data-page="home"].is-preparing-writing-note .project-orbit,
body[data-page="home"].is-entering-writing-note .project-orbit {
  opacity: .12;
}

body[data-page="home"].is-preparing-writing-archive .orbit-project,
body[data-page="home"].is-entering-writing-archive .orbit-project,
body[data-page="home"].is-preparing-writing-note .orbit-project,
body[data-page="home"].is-entering-writing-note .orbit-project {
  opacity: 1 !important;
  pointer-events: none;
}

body[data-page="home"].is-preparing-writing-archive .orbit-icon-shell,
body[data-page="home"].is-entering-writing-archive .orbit-icon-shell,
body[data-page="home"].is-preparing-writing-note .orbit-icon-shell,
body[data-page="home"].is-entering-writing-note .orbit-icon-shell {
  opacity: .9;
  transform: scale(.94);
}

body[data-page="home"].is-preparing-writing-archive .orbit-tooltip,
body[data-page="home"].is-entering-writing-archive .orbit-tooltip,
body[data-page="home"].is-preparing-writing-note .orbit-tooltip,
body[data-page="home"].is-entering-writing-note .orbit-tooltip {
  opacity: 0 !important;
}

body[data-page="home"].is-preparing-writing-archive .decorative-stars,
body[data-page="home"].is-entering-writing-archive .decorative-stars,
body[data-page="home"].is-preparing-writing-note .decorative-stars,
body[data-page="home"].is-entering-writing-note .decorative-stars {
  opacity: .24;
}

body[data-page="home"].is-preparing-writing-archive .cosmos-center time,
body[data-page="home"].is-entering-writing-archive .cosmos-center time,
body[data-page="home"].is-preparing-writing-note .cosmos-center time,
body[data-page="home"].is-entering-writing-note .cosmos-center time {
  opacity: 0;
}

body[data-page="home"].is-preparing-writing-archive .site-header .brand,
body[data-page="home"].is-entering-writing-archive .site-header .brand,
body[data-page="home"].is-preparing-writing-note .site-header .brand,
body[data-page="home"].is-entering-writing-note .site-header .brand {
  opacity: 0;
  transform: translateY(-4px);
}

body[data-page="home"].is-preparing-writing-archive .note-star-label,
body[data-page="home"].is-entering-writing-archive .note-star-label,
body[data-page="home"].is-preparing-writing-note .note-star-label,
body[data-page="home"].is-entering-writing-note .note-star-label {
  opacity: 0 !important;
}

body[data-page="home"].is-preparing-writing-archive .writing-retract-source,
body[data-page="home"].is-entering-writing-archive .writing-retract-source,
body[data-page="home"].is-preparing-writing-note .writing-retract-source,
body[data-page="home"].is-entering-writing-note .writing-retract-source {
  pointer-events: none;
  animation: writing-home-star-retract 360ms var(--writing-retract-delay, 0ms) cubic-bezier(.52, 0, .48, .16) both !important;
}

body[data-page="home"].is-preparing-writing-archive .writing-retract-thread,
body[data-page="home"].is-entering-writing-archive .writing-retract-thread,
body[data-page="home"].is-preparing-writing-note .writing-retract-thread,
body[data-page="home"].is-entering-writing-note .writing-retract-thread {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: writing-home-thread-retract 360ms var(--writing-retract-delay, 0ms) cubic-bezier(.52, 0, .48, .16) both !important;
}

body[data-page="home"].is-preparing-writing-note .writing-retract-bystander,
body[data-page="home"].is-entering-writing-note .writing-retract-bystander {
  opacity: .08;
  scale: .8;
  transition: opacity 240ms ease, scale 300ms cubic-bezier(.22, 1, .36, 1);
}

body[data-page="home"].is-preparing-writing-archive .all-writing-link,
body[data-page="home"].is-entering-writing-archive .all-writing-link,
body[data-page="home"].is-preparing-writing-note .all-writing-link,
body[data-page="home"].is-entering-writing-note .all-writing-link {
  opacity: 0;
}

html[data-writing-arrival-pending="archive"] body[data-page="notes"]:not(.is-arriving-writing-archive) .note-kind-marker,
html[data-writing-arrival-pending="note"] body[data-page="note"]:not(.is-arriving-writing-note) .article-meta-line .note-kind-marker {
  opacity: 0;
}

.writing-drop-thread {
  position: fixed;
  left: var(--writing-thread-x);
  top: var(--writing-thread-top);
  z-index: 1002;
  width: 1px;
  height: var(--writing-thread-height);
  pointer-events: none;
  color: color-mix(in srgb, var(--text) 36%, transparent);
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, currentColor 72%, transparent) 18%, currentColor 100%);
  opacity: 0;
  transform: translateX(-.5px) scaleY(.04);
  transform-origin: top center;
}

body.is-arriving-writing-archive .writing-drop-thread,
body.is-arriving-writing-note .writing-drop-thread {
  animation: writing-thread-drop 520ms var(--writing-drop-delay, 0ms) cubic-bezier(.22, .74, .16, 1) both;
}

.writing-drop-target {
  position: relative;
  z-index: 1003;
  opacity: 0;
}

body.is-arriving-writing-archive .writing-drop-target,
body.is-arriving-writing-note .writing-drop-target {
  animation: writing-coordinate-drop 520ms var(--writing-drop-delay, 0ms) cubic-bezier(.22, .74, .16, 1) both !important;
}

body[data-page="notes"].is-arriving-writing-archive .archive-list::before {
  transform-origin: top center;
  animation: writing-archive-path-grow 560ms 260ms cubic-bezier(.2, .72, .2, 1) both;
}

body[data-page="notes"].is-arriving-writing-archive .archive-row-v2::before {
  animation: writing-archive-branch-grow 330ms calc(330ms + var(--writing-arrival-delay, 0ms)) cubic-bezier(.22, 1, .36, 1) both;
}

body[data-page="notes"].is-arriving-writing-archive .archive-row-meta time,
body[data-page="notes"].is-arriving-writing-archive .archive-row-v2 h2,
body[data-page="notes"].is-arriving-writing-archive .archive-row-v2 p,
body[data-page="notes"].is-arriving-writing-archive .archive-row-arrow {
  animation: writing-archive-copy-open 420ms calc(370ms + var(--writing-arrival-delay, 0ms)) cubic-bezier(.2, .72, .2, 1) both;
}

body[data-page="notes"].is-arriving-writing-archive .site-footer {
  animation: writing-quiet-content-in 400ms 560ms ease both;
}

body[data-page="note"].is-arriving-writing-note .back-link,
body[data-page="note"].is-arriving-writing-note .article-meta-line time,
body[data-page="note"].is-arriving-writing-note .article-meta-line::after,
body[data-page="note"].is-arriving-writing-note .note-article header h1,
body[data-page="note"].is-arriving-writing-note .article-source,
body[data-page="note"].is-arriving-writing-note .article-body,
body[data-page="note"].is-arriving-writing-note .note-navigation,
body[data-page="note"].is-arriving-writing-note .site-footer {
  animation: writing-note-copy-open 500ms var(--writing-note-delay, 280ms) cubic-bezier(.2, .72, .2, 1) both;
}

body[data-page="note"].is-arriving-writing-note .note-article header h1 { --writing-note-delay: 250ms; }
body[data-page="note"].is-arriving-writing-note .article-source { --writing-note-delay: 320ms; }
body[data-page="note"].is-arriving-writing-note .article-body { --writing-note-delay: 390ms; }
body[data-page="note"].is-arriving-writing-note .note-navigation { --writing-note-delay: 520ms; }
body[data-page="note"].is-arriving-writing-note .site-footer { --writing-note-delay: 590ms; }

body[data-page="note"].is-arriving-writing-note .reading-path {
  animation: writing-reading-path-grow 580ms 470ms cubic-bezier(.2, .72, .2, 1) both;
}

@keyframes writing-home-star-retract {
  0% { opacity: 1; }
  74% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(var(--writing-retract-x), var(--writing-retract-y)) scale(.72);
  }
}

@keyframes writing-home-thread-retract {
  0% { opacity: 1; transform: scaleY(1); }
  78% { opacity: .72; }
  100% { opacity: 0; transform: scaleY(.015); }
}

@keyframes writing-thread-drop {
  0% { opacity: 0; transform: translateX(-.5px) scaleY(.04); }
  20% { opacity: .68; }
  78% { opacity: .76; transform: translateX(-.5px) scaleY(1); }
  100% { opacity: 0; transform: translateX(-.5px) scaleY(1); }
}

@keyframes writing-coordinate-drop {
  0% { opacity: 0; translate: 0 var(--writing-drop-y); scale: .72; }
  18% { opacity: 1; }
  82% { opacity: 1; translate: 0 0; scale: 1.06; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes writing-planet-recede {
  0% {
    opacity: .9;
    transform: translate(0, 0) scale(.94);
    filter: blur(0) saturate(1);
  }
  48% {
    opacity: .7;
    filter: blur(.5px) saturate(.86);
  }
  100% {
    opacity: 0;
    transform: translate(var(--writing-planet-drift-x, 68px), var(--writing-planet-drift-y, -22px)) scale(.36);
    filter: blur(5px) saturate(.58);
  }
}

@keyframes writing-world-settle-out {
  from { opacity: 1; transform: scale(1); filter: saturate(1); }
  to { opacity: .28; transform: scale(1.003); filter: saturate(.86); }
}

@keyframes writing-archive-world-in {
  from { opacity: .56; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes writing-focus-world-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: .2; transform: scale(1.003); }
}

@keyframes writing-note-world-in {
  from { opacity: .52; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes writing-archive-path-grow {
  from { opacity: 0; transform: scaleY(0) skewY(-1.6deg); }
  to { opacity: .9; transform: scaleY(1) skewY(-1.6deg); }
}

@keyframes writing-archive-branch-grow {
  from { opacity: 0; transform: rotate(var(--archive-branch-angle, -2deg)) scaleX(0); }
  to { opacity: 1; transform: rotate(var(--archive-branch-angle, -2deg)) scaleX(1); }
}

@keyframes writing-archive-copy-open {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes writing-quiet-content-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes writing-note-copy-open {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes writing-reading-path-grow {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; clip-path: inset(0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(writing-site-avatar),
  ::view-transition-group(writing-site-name),
  ::view-transition-group(writing-keke-planet),
  ::view-transition-old(writing-keke-planet),
  html:has(body.is-entering-writing-archive)::view-transition-old(root),
  html:has(body.is-arriving-writing-archive)::view-transition-new(root),
  html:has(body.is-entering-writing-note)::view-transition-old(root),
  html:has(body.is-arriving-writing-note)::view-transition-new(root) {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }

  .writing-drop-thread,
  .writing-drop-target,
  .writing-retract-source,
  .writing-retract-thread {
    animation: none !important;
    transition: none !important;
  }
}