/* Home: the painting is the cover of a book; the name opens it, and the first page is the About page */

/* the book sits on a stage that the camera zooms into when it opens */
.stage {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  transform-origin: 0 0;
  transition: transform 1.2s cubic-bezier(.66, 0, .2, 1);
}

/* the book: cover on top, first page underneath; opening swings the cover around the spine
   and slides the book over so the open spread is centred */
.book {
  --turn: 1.4s cubic-bezier(.62, .03, .24, 1);
  --cast: 0 1px 2px rgb(30 33 37 / .14), 0 10px 24px rgb(30 33 37 / .12), 0 28px 60px rgb(30 33 37 / .1);
  position: relative;
  perspective: 3000px;
  transform: translateX(0) scale(1);
  transition: transform var(--turn);
}
.book.open { transform: translateX(var(--shift, 50%)) scale(var(--scale, 1)); }

.cover {
  position: relative;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform var(--turn);
}
.book.open .cover { transform: rotateY(-180deg); }
/* hovering the name lifts the cover's edge a little: it opens */
@media (hover: hover) { .book:not(.open) .cover:has(.name:hover) { transform: rotateY(-8deg); transition-duration: .6s; } }
.book:not(.open) .cover:has(.name:focus-visible) { transform: rotateY(-8deg); transition-duration: .6s; }

.cover > .painting,
.cover > .back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cover > .back { position: absolute; inset: 0; transform: rotateY(180deg); }

/* hinge along the spine of the cover */
.cover > .painting::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgb(0 0 0 / .34), rgb(0 0 0 / .08) .8%, rgb(255 255 255 / .1) 1.6%, rgb(0 0 0 / .06) 2.6%, transparent 4%);
}
.cover .name { z-index: 1; }

/* paper */
.paper {
  background-color: #faf3e7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* first page: the About page itself, laid out at full window width and scaled down to fit (set by the script),
   so zooming into it lands exactly on about.html. The page block's edges show along the right and bottom. */
.page {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #f9f1e2;          /* the museum wall colour of the inner pages */
  box-shadow:
    1px 1px 0 #ebe4d5, 2px 2px 0 #dcd3c0, 3px 3px 0 #e7e0cf, 4px 4px 0 #d4cab5, 5px 5px 0 #c4b9a2,
    var(--cast);
}
.page iframe {
  position: absolute; left: 0; top: 0;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
  background: #f9f1e2;
}
/* gutter by the spine, and the shadow of the cover that lifts away as the book opens */
.page::before,
.page::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.page::before { background: linear-gradient(to right, rgb(70 48 26 / .2), transparent 7%); transition: opacity .6s ease; }
.page::after {
  background: linear-gradient(to right, rgb(0 0 0 / .5), rgb(0 0 0 / .18) 45%, rgb(0 0 0 / .06));
  transition: opacity var(--turn);
}
.book.open .page::after { opacity: 0; }

/* inside of the cover: endpaper with the painting credit */
.back {
  display: flex; align-items: flex-end;
  padding: 8% 9%;
  /* no sideways offset and a negative spread: an open page lying flat doesn't shade its neighbour across the spine */
  box-shadow: 0 10px 24px -10px rgb(30 33 37 / .16), 0 28px 60px -26px rgb(30 33 37 / .12);
  transition: box-shadow .5s ease;
}
.zooming .back { box-shadow: none; }
.back::before,
.back::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.back::before { background: linear-gradient(to left, rgb(70 48 26 / .2), transparent 7%); }
.back::after { background: rgb(0 0 0 / .35); transition: opacity var(--turn); }
.book.open .back::after { opacity: 0; }
.credit { margin: 0; max-width: 28em; font-size: .75rem; line-height: 1.25rem; color: var(--rurikon-300); }
@media (max-width: 30rem) { .back { padding: 1.5rem 1.4rem; } }

/* zooming into the first page: the gutter shading goes, so the last frame is exactly about.html */
.zooming .page::before { opacity: 0; }
.zooming .page { transition: bottom 1.2s cubic-bezier(.66, 0, .2, 1); }   /* in step with the stage's zoom */

.book.instant, .book.instant *, .instant .stage, .instant .book, .instant .book * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .book, .book * { transition: none !important; }
}
@view-transition { navigation: auto; }