/* Faces for the site book. Self-hosted so the app does not request the
   marketing origin. SIL Open Font License: OFL-instrument-serif.txt and
   OFL-ibm-plex.txt beside the files. */
@import "book-ribbon.css";
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/ibm-plex-mono-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/ibm-plex-mono-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Today's loading book. Same clock as the login sequence: 1.2s closed
   cover, the cover opens over 1.8s, each curl is 2.2s, then a 1.05s fade.
   The page is a paper curl. The cover is one rigid board. Leather, gold,
   and ox only. No purple. */

.bbflip {
  --bbflip-cover: 1200ms;
  --bbflip-open: 1800ms;
  --bbflip-turn: 2200ms;
  --bbflip-fade: 1050ms;
  --bbflip-paper: oklch(0.968 0.005 95);
  --bbflip-ink: oklch(0.23 0.01 60);
  --bbflip-ink2: oklch(0.42 0.014 60);
  --bbflip-gold: oklch(0.83 0.09 82);
  --bbflip-leather: oklch(0.19 0.012 50);
  --bbflip-leather-2: oklch(0.25 0.014 50);
  --bbflip-ox: oklch(0.47 0.13 32);
  --bbflip-ox-d: oklch(0.41 0.12 32);
  --bbflip-end: oklch(0.93 0.012 85);
  --bbflip-serif: "Instrument Serif", "Serif Fallback", Georgia, serif;
  --bbflip-mono: "Plex Mono", ui-monospace, Menlo, monospace;
  --bw: min(780px, 42vw, calc(78vh * 220 / 300));
  --bh: calc(var(--bw) * 300 / 220);
  --paper: var(--bbflip-paper);
  --end: var(--bbflip-end);
  position: fixed;
  inset: 0;
  z-index: 40;
  color: var(--bbflip-ink);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  /* layout+style only. paint containment flattens the 3D turn, so the
     page was repainted every frame instead of rotating on the compositor. */
  contain: layout style;
}

.bbflip-behind {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--bw) * 2);
  height: var(--bh);
  transform: translate(-50%, -50%);
  background:
    linear-gradient(90deg, oklch(0.45 0.02 70 / .14), transparent 8%),
    var(--bbflip-paper);
  box-shadow: none;
}

.bbflip-mask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(90% 60% at 70% 0%, var(--bbflip-leather-2), oklch(0.205 0.01 55) 70%);
}

.bbflip.is-fade .bbflip-mask {
  -webkit-animation: bbflip-fade var(--bbflip-fade) var(--ds-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)) forwards;
  animation: bbflip-fade var(--bbflip-fade) var(--ds-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)) forwards;
}

/* The curl is done. Flatten the 3D tree and freeze it so the fade is one
   opacity on a layer that was rasterized while the book was still opaque.
   Fading a live preserve-3d scene repainted the desktop book every frame. */
.bbflip.is-settled .bbflip-scene,
.bbflip.is-settled .bbflip-book,
.bbflip.is-settled .bbflip-leaf,
.bbflip.is-settled .bbflip-leaf-slot,
.bbflip.is-fade .bbflip-scene,
.bbflip.is-fade .bbflip-book,
.bbflip.is-fade .bbflip-leaf,
.bbflip.is-fade .bbflip-leaf-slot {
  -webkit-transform-style: flat;
  transform-style: flat;
}
.bbflip.is-settled .bbflip-leaf,
.bbflip.is-settled .bbflip-cover,
.bbflip.is-settled .bbflip-shade,
.bbflip.is-fade .bbflip-leaf,
.bbflip.is-fade .bbflip-cover,
.bbflip.is-fade .bbflip-shade {
  -webkit-animation: none !important;
  animation: none !important;
}
.bbflip.is-settled .bbflip-mask {
  will-change: opacity;
}

.bbflip.is-out .bbflip-mask {
  -webkit-animation: bbflip-fade 180ms linear forwards;
  animation: bbflip-fade 180ms linear forwards;
}

@-webkit-keyframes bbflip-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes bbflip-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

.bbflip-scene {
  position: relative;
  width: calc(var(--bw) * 2);
  height: var(--bh);
  -webkit-perspective: 1600px;
  perspective: 1600px;
  perspective-origin: 50% 50%;
  /* No contain here.  Paint containment clips and flattens the 3D turn,
     so the page slid flat inside the book instead of lifting off it. */
}

.bbflip-book {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--bw);
  height: var(--bh);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* Sheets, edges, and the landed page are one plane. Only the leaf
   that is curling stays a separate 3D layer. */
.bbflip-rest {
  position: absolute;
  inset: 0;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* The paper spread sits under an opaque leather mask. Leaving it
   promoted a full-spread texture on every desktop frame. */
.bbflip.is-app .bbflip-behind {
  display: none;
}

.bbflip-edges {
  position: absolute;
  z-index: 0;
  top: 2.3%;
  bottom: 2.3%;
  left: 3.6%;
  right: -4.5%;
  background: linear-gradient(90deg, var(--bbflip-paper), oklch(0.88 0.008 90) 55%, var(--bbflip-paper));
  border-radius: 3px 6px 6px 3px;
  box-shadow: none;
}

.bbflip-sheet,
.bbflip-leaf,
.bbflip-face,
.bbflip-landed,
.bbflip-probe {
  position: absolute;
  inset: 0;
}

.bbflip-leaf-slot {
  position: absolute;
  inset: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.bbflip-leaf {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

.bbflip-face {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bbflip-front {
  -webkit-transform: rotateY(0deg) translateZ(0.6px);
  transform: rotateY(0deg) translateZ(0.6px);
  border-radius: 3px 8px 8px 3px;
}

.bbflip-back {
  -webkit-transform: rotateY(180deg) translateZ(0.6px);
  transform: rotateY(180deg) translateZ(0.6px);
  border-radius: 8px 3px 3px 8px;
}

.bbflip-sheet,
.bbflip-probe {
  background-color: var(--bbflip-paper);
  background-image: linear-gradient(90deg, oklch(0.45 0.02 70 / .14), transparent 16%);
  color: var(--bbflip-ink);
  box-shadow: inset 0 0 0 1px oklch(0.45 0.012 60 / .16);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12% 11%;
  border-radius: 3px 8px 8px 3px;
}

.bbflip-sheet { z-index: 1; }

.bbflip-kicker {
  font: 600 calc(var(--bw) * 0.03804) / 1.4 var(--ds-font-label);
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--bbflip-ink2);
  margin: 0 0 0.8em;
}

.bbflip-sheet p,
.bbflip-probe p {
  margin: 0;
  font: 400 calc(var(--bw) * 0.09) / 1.15 var(--bbflip-serif);
  color: var(--bbflip-ink);
}

.bbflip em {
  font-style: italic;
  color: var(--bbflip-ox);
}

.bbflip-landed {
  z-index: 2;
  right: auto;
  left: -100%;
  width: 100%;
  border-radius: 8px 3px 3px 8px;
  background:
    linear-gradient(270deg, oklch(0.45 0.02 70 / .16), transparent 18%),
    var(--bbflip-paper);
  box-shadow: inset 0 0 0 1px oklch(0.45 0.012 60 / .16);
  display: none;
}

.bbflip-landed.on {
  display: block;
  z-index: 7;
}

.bbflip-probe {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.bbflip-shadow,
.bbflip-curl {
  position: absolute;
  z-index: 4;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  pointer-events: none;
}

.bbflip-cover { z-index: 6; }

.bbflip-board {
  background: radial-gradient(120% 90% at 30% 20%, var(--bbflip-leather-2), var(--bbflip-leather));
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / .05);
  border-radius: 3px 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bbflip-frame {
  position: absolute;
  z-index: 0;
  inset: 5.5%;
  border: 1px solid oklch(0.83 0.09 82 / .2);
  border-radius: 3px;
}

.bbflip-board b {
  position: relative;
  z-index: 1;
  padding: 0 8%;
  font: 400 calc(var(--bw) * 0.093) / 1.05 var(--bbflip-serif);
  color: oklch(0.8 0.07 80);
}

.bbflip-board i {
  position: relative;
  z-index: 1;
  margin-top: 0.55em;
  font: 600 calc(var(--bw) * 0.0408) / 1 var(--ds-font-label);
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: oklch(0.7 0.06 80);
}

/* Cover bookmark: .bbflip-band, shared with .bb-book-ribbon in book-ribbon.css. */

.bbflip-endpaper {
  background:
    linear-gradient(90deg, oklch(0.55 0.02 70 / .18), transparent 14%),
    var(--bbflip-end);
  border-radius: 8px 3px 3px 8px;
}

.bbflip-endpaper.flat {
  background:
    linear-gradient(270deg, oklch(0.55 0.02 70 / .18), transparent 14%),
    var(--bbflip-end);
}

.bbflip-edge {
  position: absolute;
  z-index: 5;
  top: 0;
  width: 3px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, #6b5344, #e6d9c4 45%, #f6f1e6);
  box-shadow: 0 0 0 1px oklch(0.32 0.02 55 / .45);
}

.bbflip.is-app { z-index: 1100; }

.bbflip.is-playing .bbflip-cover {
  -webkit-animation: bbflip-cover-open var(--bbflip-open) cubic-bezier(.42, 0, .58, 1) var(--bbflip-cover) both;
  animation: bbflip-cover-open var(--bbflip-open) cubic-bezier(.42, 0, .58, 1) var(--bbflip-cover) both;
  will-change: transform;
}

@-webkit-keyframes bbflip-cover-open {
  from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
  to { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
}

@keyframes bbflip-cover-open {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-180deg); }
}

.bbflip.is-open .bbflip-cover { z-index: 1; }

.bbflip-page {
  z-index: 5;
  opacity: 0;
}

.bbflip-page.is-on { opacity: 1; }

/* A parked leaf and the spare leaf sit under the landed page. They
   were still in the 3D tree for every later curl. */
.bbflip-page:not(.is-on),
.bbflip-page.is-parked {
  display: none;
}

.bbflip-page.is-parked {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  opacity: 1;
  -webkit-animation: none;
  animation: none;
}

.bbflip.is-read .bbflip-cover {
  display: none;
}

.bbflip.is-turning .bbflip-front-sheet {
  display: none;
}

.bbflip-page.is-curl {
  -webkit-animation: bbflip-page-turn var(--bbflip-turn) cubic-bezier(.42, 0, .58, 1) forwards;
  animation: bbflip-page-turn var(--bbflip-turn) cubic-bezier(.42, 0, .58, 1) forwards;
  will-change: transform;
}

@-webkit-keyframes bbflip-page-turn {
  from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
  to { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
}

@keyframes bbflip-page-turn {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-180deg); }
}

.bbflip-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 3px 8px 8px 3px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent 42%, rgba(40, 24, 16, 0.22) 72%, transparent 100%);
  -webkit-transform: translateZ(1.2px);
  transform: translateZ(1.2px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bbflip-page.is-curl .bbflip-shade {
  /* A per-frame opacity on the turning leaf kept the curl on the main
     thread. The shade stays a flat layer and fades once, with the book. */
  opacity: 0.45;
  -webkit-animation: none;
  animation: none;
}

@-webkit-keyframes bbflip-shade {
  0% { opacity: 0; }
  40% { opacity: 0.9; }
  100% { opacity: 0; }
}

@keyframes bbflip-shade {
  0% { opacity: 0; }
  40% { opacity: 0.9; }
  100% { opacity: 0; }
}

.bbflip.is-fade .bbflip-mask { will-change: opacity; }

.bbflip.is-still .bbflip-leaf {
  -webkit-animation: none !important;
  animation: none !important;
}

.bbflip .bb-reveal-wait {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  bottom: 9vh;
  text-align: center;
  pointer-events: auto;
}

@media (max-width: 720px) {
  .bbflip { --bw: min(168px, 42vw, calc(46vh * 220 / 300)); }
}

@media (prefers-reduced-motion: reduce) {
  .bbflip { display: none !important; }
}

@media print {
  .bbflip { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bbflip.is-app {
    display: block !important;
  }
  .bbflip.is-app .bbflip-leaf {
    -webkit-animation: none !important;
    animation: none !important;
  }
}