/* 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. */
@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;
}

/* Marketing-site intro, used as Today's loading book. Timing is the
   site sequence: 1.2s closed cover, each turn 1.35s, then a 1.05s fade.
   The app keeps adding turns until the front page is painted.
   Leather, gold, and ox only. No purple. */

.bbflip {
  --bbflip-cover: 1200ms;
  --bbflip-turn: 1350ms;
  --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-ox: oklch(0.47 0.13 32);
  --bbflip-ox-d: oklch(0.41 0.12 32);
  --bbflip-serif: "Instrument Serif", "Serif Fallback", Georgia, serif;
  --bbflip-mono: "Plex Mono", ui-monospace, Menlo, monospace;
  --bb-h: min(400px, 62vh, 42vw * 300 / 220);
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(90% 60% at 70% 0%, oklch(0.25 0.014 50), oklch(0.205 0.01 55) 70%);
  color: var(--bbflip-ink);
  user-select: none;
  -webkit-user-select: none;
}

.bbflip.is-fade {
  -webkit-animation: bbflip-fade var(--bbflip-fade) linear forwards;
  animation: bbflip-fade var(--bbflip-fade) linear forwards;
}

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

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

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

.bbflip-stage {
  -webkit-perspective: 1600px;
  perspective: 1600px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bbflip-book {
  position: relative;
  height: var(--bb-h);
  width: calc(var(--bb-h) * 220 / 300);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.bbflip-edges {
  position: absolute;
  inset: 7px -10px 7px 8px;
  background: repeating-linear-gradient(90deg, var(--bbflip-paper) 0 2px, oklch(0.85 0.006 90) 2px 3px);
  border-radius: 3px 6px 6px 3px;
  box-shadow: 0 34px 60px -24px #0009;
  z-index: 0;
}

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

.bbflip-sheet {
  z-index: 1;
  background: var(--bbflip-paper);
  border-radius: 3px 8px 8px 3px;
  box-shadow: inset 0 0 0 1px oklch(0.45 0.012 60 / .18);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12% 11%;
}

.bbflip-leaf {
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.bbflip-leaf-1 {
  z-index: 5;
  -webkit-animation:
    bbflip-turn var(--bbflip-turn) cubic-bezier(.42, 0, .58, 1) var(--bbflip-cover) both,
    bbflip-z-a var(--bbflip-turn) linear var(--bbflip-cover) both;
  animation:
    bbflip-turn var(--bbflip-turn) cubic-bezier(.42, 0, .58, 1) var(--bbflip-cover) both,
    bbflip-z-a var(--bbflip-turn) linear var(--bbflip-cover) both;
}

.bbflip-leaf-2 {
  z-index: 4;
  -webkit-animation:
    bbflip-turn var(--bbflip-turn) cubic-bezier(.42, 0, .58, 1) calc(var(--bbflip-cover) + var(--bbflip-turn)) both,
    bbflip-z-b var(--bbflip-turn) linear calc(var(--bbflip-cover) + var(--bbflip-turn)) both;
  animation:
    bbflip-turn var(--bbflip-turn) cubic-bezier(.42, 0, .58, 1) calc(var(--bbflip-cover) + var(--bbflip-turn)) both,
    bbflip-z-b var(--bbflip-turn) linear calc(var(--bbflip-cover) + var(--bbflip-turn)) both;
}

.bbflip-face {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 3px 8px 8px 3px;
}

.bbflip-front {
  -webkit-transform: rotateY(0deg) translateZ(1px);
  transform: rotateY(0deg) translateZ(1px);
}

.bbflip-back {
  -webkit-transform: rotateY(180deg) translateZ(1px);
  transform: rotateY(180deg) translateZ(1px);
}

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

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

.bbflip-board b {
  position: relative;
  font: 400 clamp(1.15rem, 2.2vw, 1.7rem)/1.05 var(--bbflip-serif);
  color: oklch(0.8 0.07 80);
  padding: 0 16px;
}

.bbflip-board i {
  position: relative;
  font: 500 .62rem var(--bbflip-mono);
  letter-spacing: .28em;
  color: oklch(0.7 0.06 80);
  font-style: normal;
  margin-top: 8px;
}

.bbflip-band {
  position: absolute;
  top: -6px;
  right: 18%;
  width: 18px;
  height: calc(100% + 42px);
  background: linear-gradient(90deg, var(--bbflip-ox-d), var(--bbflip-ox));
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%);
}

.bbflip-endpaper {
  background:
    linear-gradient(90deg, oklch(0.55 0.02 70 / .18), transparent 14%),
    oklch(0.93 0.012 85);
}

.bbflip-paper,
.bbflip-sheet {
  background-color: var(--bbflip-paper);
  background-image: linear-gradient(90deg, oklch(0.45 0.02 70 / .14), transparent 16%);
  color: var(--bbflip-ink);
}

.bbflip-paper {
  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%;
}

.bbflip-kicker {
  font: 500 .58rem/1.4 var(--bbflip-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bbflip-ink2);
  margin-bottom: .8em;
}

.bbflip p {
  margin: 0;
  max-width: none;
  font: 400 clamp(1.15rem, 2.4vw, 1.65rem)/1.15 var(--bbflip-serif);
  color: var(--bbflip-ink);
}

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

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

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

@-webkit-keyframes bbflip-z-a {
  0%, 49.9% { z-index: 5; }
  50%, 100% { z-index: 1; }
}

@keyframes bbflip-z-a {
  0%, 49.9% { z-index: 5; }
  50%, 100% { z-index: 1; }
}

@-webkit-keyframes bbflip-z-b {
  0%, 49.9% { z-index: 4; }
  50%, 100% { z-index: 2; }
}

@keyframes bbflip-z-b {
  0%, 49.9% { z-index: 4; }
  50%, 100% { z-index: 2; }
}

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

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

/* App host. The book above is the site intro. This only lifts the mask
   over the dashboard, stacks further 1.35s turns while Today is still
   loading, and keeps a closed book when motion is reduced. */
.bbflip.is-app {
  z-index: 1100;
}

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

.bbflip-leaf-extra {
  z-index: 6;
}

.bbflip-leaf-extra.is-turning {
  z-index: 6;
  -webkit-animation:
    bbflip-turn var(--bbflip-turn) cubic-bezier(.42, 0, .58, 1) both,
    bbflip-z-extra var(--bbflip-turn) linear both;
  animation:
    bbflip-turn var(--bbflip-turn) cubic-bezier(.42, 0, .58, 1) both,
    bbflip-z-extra var(--bbflip-turn) linear both;
}

@-webkit-keyframes bbflip-z-extra {
  0%, 49.9% { z-index: 6; }
  50%, 100% { z-index: 3; }
}

@keyframes bbflip-z-extra {
  0%, 49.9% { z-index: 6; }
  50%, 100% { z-index: 3; }
}

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

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