/* The home artwork stays readable as a still composition. */
.hero h1 > * { display: inline-block; }

.reading-progress {
  position: fixed;
  z-index: 8;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, #ad708b, #d27e96 65%, #d9a882);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}

.hero-art {
  background: radial-gradient(ellipse at 53% 51%, #fff6f4 4%, #f8dfe8 57%, #eddaeb 100%);
  box-shadow: inset 0 0 32px #fff9, 0 20px 46px #935e7421;
}

.hero-art::before {
  position: absolute;
  z-index: -1;
  inset: 11px;
  border: 1px solid #fff9;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.hero-light {
  position: absolute;
  z-index: -1;
  inset: -22%;
  background:
    radial-gradient(ellipse at var(--spot-x, 63%) var(--spot-y, 43%), #fffaf7 0%, #fbdde900 46%),
    radial-gradient(ellipse at 36% 73%, #dbb6e399 2%, #e5bfd800 51%);
  pointer-events: none;
  transform: translate(var(--drift-x, 0px), var(--drift-y, 0px));
  transition: transform 650ms cubic-bezier(.2,.8,.25,1);
}

.hero-art .orbit {
  border-color: #a55a8140;
  pointer-events: none;
  translate: calc(var(--drift-x, 0px) * -.45) calc(var(--drift-y, 0px) * -.45);
  transition: translate 650ms cubic-bezier(.2,.8,.25,1);
}

.constellation {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: #bb6383;
  opacity: .66;
  pointer-events: none;
  transition: color 250ms, opacity 250ms;
}

.constellation-trail {
  stroke-width: 1.45;
  vector-effect: non-scaling-stroke;
}

.hero-art[data-heart-active] .constellation { color: #9d3158; opacity: 1; }

.hero-art .portrait {
  z-index: 2;
  translate: var(--drift-x, 0px) var(--drift-y, 0px);
  transition: translate 650ms cubic-bezier(.2,.8,.25,1), transform 500ms cubic-bezier(.2,.8,.25,1);
}

.hero-art .qian {
  translate: calc(var(--drift-x, 0px) * -.7) calc(var(--drift-y, 0px) * -.7);
}

.hero-art[data-heart-active] .xuan { transform: rotate(-6deg); }
.hero-art[data-heart-active] .qian { transform: rotate(7deg); }

.art-spark {
  position: absolute;
  z-index: 2;
  left: var(--spark-x, 78%);
  top: var(--spark-y, 24%);
  color: #b76b8c;
  font: clamp(1rem, 2.2vw, 1.5rem)/1 Georgia, serif;
  opacity: .66;
  pointer-events: none;
}

.art-caption { z-index: 3; }

.heart-button {
  position: absolute;
  z-index: 4;
  top: 13%;
  right: 8%;
  display: grid;
  place-items: center;
  width: clamp(44px, 5vw, 56px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  color: var(--accent);
  background: #fff7f9;
  box-shadow: 0 6px 18px #8e526132, inset 0 0 0 3px #f9e5ee;
  transform: rotate(13deg);
  transition: transform 360ms cubic-bezier(.17,.9,.3,1.4), box-shadow 250ms, color 250ms, background-color 250ms;
}

.heart-button svg {
  width: 47%;
  height: 47%;
  stroke-width: 1.5;
}

.heart-button:hover, .heart-button:focus-visible {
  transform: rotate(0) scale(1.08);
  box-shadow: 0 9px 20px #8e52614b, inset 0 0 0 3px #f9e5ee;
}

.heart-button:active { transform: scale(.9); }

.hero-art[data-heart-active] .heart-button {
  color: #fff;
  background-color: #a54a68;
  transform: rotate(0) scale(1.12);
}

.hero-art[data-heart-active] .heart-button svg { fill: currentColor; }

.heart-particle {
  position: fixed;
  z-index: 9;
  display: grid;
  place-items: center;
  color: #bc597c;
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}

.heart-particle:nth-of-type(even) { color: #a571ab; }
.heart-particle svg { fill: currentColor; stroke: none; }

.collection-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}

.collection-controls button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #e0cdd7;
  border-radius: 50%;
  color: var(--accent);
  background: var(--paper);
  transition: color 200ms, background-color 200ms, border-color 200ms;
}

.collection-controls button:not(:disabled):hover {
  border-color: #c594a8;
  background-color: #f5e4eb;
}

.collection-controls button:disabled {
  color: #9e8a95;
  background: #faf5f7;
  cursor: default;
  opacity: .7;
}

.strip-prev svg { rotate: 180deg; }

.tiles {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 32px) / 3);
  overflow-x: auto;
  padding: 6px 0 13px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #cf9bb0 #f1e4eb;
}

.tile {
  isolation: isolate;
  overflow: hidden;
  margin-top: 0;
  scroll-snap-align: start;
  transition: translate 350ms cubic-bezier(.2,.8,.25,1), scale 200ms, box-shadow 350ms, border-color 350ms;
}

.tile:nth-child(3n + 2) { margin-top: 8px; }
.tile:nth-child(3n + 3) { margin-top: 16px; }
.tile-notes { background: #f4e7ee; }
.tile-places { background: #eee9e5; }
.tile:focus-visible { outline-offset: -4px; }

.tile::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at var(--spot-x, 45%) var(--spot-y, 25%), #fffaf7 0, #fff0 71%);
  opacity: 0;
  content: "";
  pointer-events: none;
  transition: opacity 300ms;
}

.tile:is(:hover, :focus-visible) {
  border-color: #cfadb9;
  box-shadow: 0 12px 30px #5338491c;
}

.tile:hover { transform: none; translate: 0 -4px; }
.tile:is(:hover, :focus-visible)::before { opacity: 1; }
.tile:is(:hover, :focus-visible) .tile-arrow, .text-link:hover svg { transform: translateX(3px); }
.tile:is(:hover, :focus-visible) .tile-icon { transform: rotate(-7deg) scale(1.06); }
.tile-arrow, .tile-icon, .text-link svg { transition: transform 360ms cubic-bezier(.2,.8,.25,1); }
.tile:active { translate: 0 -1px; scale: .99; }

nav { position: relative; isolation: isolate; }

.nav-marker {
  position: absolute;
  z-index: -1;
  inset: 5px auto 5px 0;
  width: var(--marker-width, 0px);
  border-radius: 99px;
  background: #f2e4eb;
  opacity: 0;
  transform: translateX(var(--marker-left, 0px));
  transition: transform 390ms cubic-bezier(.2,.8,.25,1), width 390ms cubic-bezier(.2,.8,.25,1), opacity 180ms;
  pointer-events: none;
}

nav[data-motion-marker] .nav-marker { opacity: 1; }
nav[data-motion-marker] a:not(.home-link)[aria-current] { background: transparent; }
nav a { transition: color 200ms, background-color 200ms; }
nav a svg { transition: transform 320ms cubic-bezier(.2,.8,.25,1); }
nav a:is(:hover, :focus-visible) svg { transform: translateY(-2px) scale(1.08); }

.digits > div {
  display: grid;
  justify-items: center;
  align-content: center;
  overflow: hidden;
}

.digits strong { max-width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .is-opening .hero-copy > :not(h1), .is-opening h1 > * {
    animation: opening-copy 700ms cubic-bezier(.18,.68,.2,1) backwards;
  }

  .is-opening h1 > * { animation-delay: 90ms; }
  .is-opening h1 > :nth-child(2) { animation-delay: 155ms; }
  .is-opening h1 > :nth-child(3) { animation-delay: 220ms; }
  .is-opening .hero-copy > :nth-child(3) { animation-delay: 170ms; }
  .is-opening .hero-copy > :nth-child(4) { animation-delay: 235ms; }
  .is-opening .hero-copy > :nth-child(5) { animation-delay: 300ms; }

  .is-opening .hero-art {
    animation: opening-art 840ms 65ms cubic-bezier(.18,.68,.2,1) backwards;
  }

  .is-opening .portrait {
    animation: opening-portrait 850ms 120ms cubic-bezier(.16,.78,.29,1.13) backwards;
  }

  .is-opening .xuan { --opening-x: -26px; --opening-rotate: -23deg; }
  .is-opening .qian { --opening-x: 26px; --opening-rotate: 24deg; animation-delay: 215ms; }

  .is-opening .constellation-trail {
    stroke-dasharray: 1;
    animation: draw-constellation 1200ms 170ms cubic-bezier(.34,.02,.22,1) backwards;
  }

  .is-opening .heart-button {
    animation: opening-art 610ms 475ms cubic-bezier(.2,.8,.25,1.2) backwards;
  }

  .is-opening .art-spark {
    animation: opening-spark 2.25s clamp(250ms, var(--spark-delay, 350ms), 800ms) ease-out backwards;
  }

  .is-opening .art-spark:nth-of-type(even) { animation-duration: 2.75s; }
  .is-opening .hero-light { animation: opening-light 3.7s ease-out; }

  ::view-transition-old(site-panel) {
    animation: chapter-out 190ms ease-in both;
    mix-blend-mode: normal;
  }

  ::view-transition-new(site-panel) {
    animation: chapter-in 425ms 40ms cubic-bezier(.18,.74,.23,1) both;
    mix-blend-mode: normal;
  }
}

@keyframes opening-copy {
  from { opacity: 0; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes opening-art {
  from { opacity: 0; scale: .94; }
  to { opacity: 1; scale: 1; }
}

@keyframes opening-portrait {
  from { opacity: 0; translate: var(--opening-x) 23px; rotate: var(--opening-rotate); }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}

@keyframes draw-constellation {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes opening-spark {
  0% { opacity: 0; scale: .55; }
  34% { opacity: 1; scale: 1.2; }
  68% { opacity: .45; scale: .88; }
  100% { opacity: .66; scale: 1; }
}

@keyframes opening-light {
  from { opacity: .38; scale: .94; }
  36% { opacity: 1; scale: 1.08; }
  to { opacity: 1; scale: 1; }
}

@keyframes chapter-out {
  to { opacity: 0; transform: translateY(-8px) scale(.995); }
}

@keyframes chapter-in {
  from { opacity: 0; transform: translateY(12px) scale(.995); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .hero-art::before { inset: 8px; }
  .heart-button { right: 9%; top: 11%; }
  .tiles { grid-auto-columns: calc((100% - 8px) / 2.25); }
}

@media (max-width: 480px) {
  .collection-head { display: flex; flex-wrap: wrap; align-items: center; }
  .collection-controls { margin-left: auto; }
  .tiles { grid-auto-columns: 66%; }
  .tile:nth-child(n) { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-light, .hero-art .orbit, .hero-art .portrait, nav a svg { translate: none; }
  .hero-light { transform: none; }
  .tile:is(:hover, :active) { translate: none; scale: 1; }
  .tile:is(:hover, :focus-visible) :is(.tile-arrow, .tile-icon),
  .text-link:hover svg, nav a:is(:hover, :focus-visible) svg { transform: none; }
  .heart-button:is(:hover, :focus-visible, :active), .hero-art[data-heart-active] .heart-button { transform: rotate(13deg); }
  .hero-art[data-heart-active] .xuan { transform: rotate(-11deg); }
  .hero-art[data-heart-active] .qian { transform: rotate(12deg); }
}