/* ==========================================================================
   Habitus Concept, catalog reader
   A 3D page turn in the DearFlip idiom, built on CSS transforms.
   ========================================================================== */

:root {
  --fb-bg-1: #0A2C40;
  --fb-bg-2: #04151F;
  --fb-chrome: rgba(4, 21, 31, 0.82);
  --fb-fg: #E4EEF3;
  --fb-fg-dim: #9FB9C7;
  --fb-line: rgba(255, 255, 255, 0.16);
  --fb-flip: 640ms;
}

html, body.fb { height: 100%; }
body.fb {
  margin: 0;
  overflow: hidden;
  background: var(--fb-bg-2);
  color: var(--fb-fg);
  overscroll-behavior: none;
}

.fb-app {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(120% 90% at 50% 38%, var(--fb-bg-1) 0%, var(--fb-bg-2) 72%);
}

/* --- top bar -------------------------------------------------------------- */

.fb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px clamp(14px, 2.4vw, 30px);
  border-bottom: 1px solid var(--fb-line);
  background: var(--fb-chrome);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  z-index: 6;
}
/* The same lockup as the landing header, in its reverse colourway because
   the reader chrome is always dark. Sized against the compact top bar rather
   than the landing page's, so it sits between the landing header's scrolled
   and unscrolled heights. */
.fb-top .brand { text-decoration: none; flex: none; }
.fb-top .brand img { height: clamp(32px, 3.4vw, 46px); width: auto; }
.fb-title {
  font-family: var(--sans);
  font-size: var(--step-label);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--fb-fg-dim);
  text-align: center;
  line-height: 1.4;
}
.fb-title b { display: block; color: var(--fb-fg); font-weight: 400; }
@media (max-width: 760px) { .fb-title { display: none; } }

.fb-back-link {
  font-family: var(--sans);
  font-size: var(--step-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fb-fg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 8px 2px;
}
.fb-back-link:hover { color: var(--blue); }

/* --- stage ---------------------------------------------------------------- */

.fb-main { position: relative; overflow: hidden; }

.fb-viewport {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: pan-y;
}
.fb-viewport[data-zoomed="true"] { overflow: auto; cursor: grab; touch-action: none; }
.fb-viewport[data-zoomed="true"].dragging { cursor: grabbing; }

.fb-scaler {
  transform: scale(var(--zoom, 1));
  transform-origin: center center;
  transition: transform 0.45s var(--ease);
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vh, 38px) clamp(14px, 3vw, 48px) clamp(62px, 10vh, 92px);
}

.fb-stage {
  position: relative;
  perspective: 2600px;
  perspective-origin: 50% 42%;
  width: var(--bw);
  height: var(--ph);
}

.fb-book {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateX(var(--shift, 0px));
  transition: transform var(--fb-flip) var(--ease-io);
}
.fb-book > .fb-edge { z-index: 0; }
.fb-book.no-anim { transition: none; }

/* soft ground shadow, grows while a leaf is in the air */
.fb-ground {
  position: absolute;
  left: 6%; right: 6%;
  bottom: -24px;
  height: 34px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 72%);
  filter: blur(7px);
  transform: translateX(var(--shift, 0px)) scaleX(var(--gs, 1));
  transition: opacity 0.5s linear, transform var(--fb-flip) var(--ease-io);
  pointer-events: none;
}
.fb-app[data-flipping="true"] .fb-ground { --gs: 1.05; opacity: 0.85; }

/* stacked page edges left and right of the block */
.fb-edge {
  position: absolute;
  top: 1.2%;
  bottom: 1.2%;
  width: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.92) 0 1px, rgba(160,150,140,0.55) 1px 2px);
  transition: width 0.5s var(--ease), opacity 0.4s linear;
  pointer-events: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.fb-edge--l { right: 100%; border-radius: 2px 0 0 2px; }
.fb-edge--r { left: 100%;  border-radius: 0 2px 2px 0; }

/* --- leaves --------------------------------------------------------------- */

.fb-leaf {
  position: absolute;
  top: 0;
  left: var(--leafx, 0px);
  width: var(--pw);
  height: var(--ph);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform var(--fb-flip) var(--ease-io);
  will-change: transform;
}
.fb-leaf[hidden] { display: none; }
.fb-leaf.no-anim { transition: none; }
.fb-leaf.flipped { transform: rotateY(-180deg); }

.fb-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #FFFFFF;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}
.fb-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.fb-front { transform: rotateY(0deg) translateZ(0.2px); }
.fb-back  { transform: rotateY(180deg) translateZ(0.2px); }

/* gutter shading, baked per face so the spine always reads as a fold */
.fb-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fb-front::after {
  background: linear-gradient(to right,
    rgba(20, 24, 27, 0.30) 0%, rgba(20, 24, 27, 0.07) 5%, rgba(20, 24, 27, 0) 14%);
}
.fb-back::after {
  background: linear-gradient(to left,
    rgba(20, 24, 27, 0.30) 0%, rgba(20, 24, 27, 0.07) 5%, rgba(20, 24, 27, 0) 14%);
}

/* the travelling shadow that sells the turn */
.fb-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0) 62%);
}
.fb-back .fb-shade { background: linear-gradient(to left, rgba(0,0,0,0.55), rgba(0,0,0,0) 62%); }
.fb-leaf.turning .fb-front .fb-shade { animation: shadeOut var(--fb-flip) var(--ease-io); }
.fb-leaf.turning .fb-back  .fb-shade { animation: shadeIn  var(--fb-flip) var(--ease-io); }
@keyframes shadeOut { 0% { opacity: 0; } 42% { opacity: 0.62; } 100% { opacity: 0; } }
@keyframes shadeIn  { 0% { opacity: 0.62; } 55% { opacity: 0.42; } 100% { opacity: 0; } }

.fb-blank { background: #F4F1EC; }

/* cover invite: a single lift, once, to say the book opens */
.fb-leaf.hint { animation: hint 2000ms var(--ease) 1; }
@keyframes hint {
  0%, 100% { transform: rotateY(0deg); }
  38%      { transform: rotateY(-13deg); }
  64%      { transform: rotateY(-4deg); }
}

/* --- click and drag zones --------------------------------------------------- */

.fb-zone {
  position: absolute;
  top: 0; bottom: 0;
  width: 22%;
  z-index: 3;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.35s linear;
}
.fb-zone--prev { left: 0; }
.fb-zone--next { right: 0; }
.fb-main:hover .fb-zone:not(:disabled) { opacity: 0.55; }
.fb-zone:hover:not(:disabled) { opacity: 1 !important; }
.fb-zone:disabled { cursor: default; }
.fb-zone i {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border: 1px solid var(--fb-line);
  border-radius: 50%;
  background: rgba(4, 21, 31, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.4s var(--ease), background-color 0.3s linear;
}
.fb-zone:hover:not(:disabled) i { background: rgba(4, 21, 31, 0.85); }
.fb-zone--prev:hover:not(:disabled) i { transform: translateX(-4px); }
.fb-zone--next:hover:not(:disabled) i { transform: translateX(4px); }
@media (max-width: 760px) { .fb-zone { display: none; } }

/* --- bottom bar -------------------------------------------------------------- */

.fb-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 12px);
  padding: 10px clamp(10px, 2vw, 24px);
  border-top: 1px solid var(--fb-line);
  background: var(--fb-chrome);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  z-index: 6;
  flex-wrap: wrap;
}
.fb-btn {
  appearance: none;
  border: 1px solid transparent;
  background: none;
  color: var(--fb-fg);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 0.25s linear, color 0.25s linear, opacity 0.25s linear;
}
.fb-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.fb-btn[aria-pressed="true"] { background: var(--blue); color: #04151F; }
.fb-btn:disabled { opacity: 0.3; cursor: default; }
.fb-sep { width: 1px; height: 24px; background: var(--fb-line); margin-inline: clamp(2px, 0.8vw, 10px); }

.fb-count {
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: var(--step-label);
  letter-spacing: 0.12em;
  color: var(--fb-fg-dim);
  padding-inline: 6px;
}
.fb-count input {
  width: 62px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--fb-line);
  color: var(--fb-fg);
  font: inherit;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 8px 4px;
  border-radius: 2px;
}
.fb-count input::-webkit-outer-spin-button,
.fb-count input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- drawers -------------------------------------------------------------- */

.fb-drawer {
  position: absolute;
  z-index: 8;
  background: rgba(4, 21, 31, 0.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--fb-line);
  transition: transform 0.55s var(--ease), opacity 0.35s linear, visibility 0.35s;
}
.fb-drawer[hidden] { display: block; visibility: hidden; opacity: 0; }

/* contents, left */
.fb-outline {
  left: 0; top: 0; bottom: 0;
  width: min(340px, 84vw);
  border-left: 0;
  padding: clamp(20px, 3vw, 32px);
  overflow-y: auto;
  transform: translateX(0);
}
.fb-outline[hidden] { transform: translateX(-100%); }
.fb-outline h2 {
  font-family: var(--sans);
  font-size: var(--step-label);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--fb-fg-dim);
  margin: 0 0 20px;
  font-weight: 400;
}
.fb-outline ol { list-style: none; margin: 0; padding: 0; }
.fb-outline li { border-bottom: 1px solid var(--fb-line); }
.fb-outline button {
  width: 100%;
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  background: none; border: 0; cursor: pointer;
  color: var(--fb-fg);
  text-align: left;
  padding: 15px 2px;
  font-family: var(--display);
  font-size: 1.05rem;
  transition: color 0.25s linear, padding-left 0.35s var(--ease);
}
.fb-outline button:hover { color: var(--blue); padding-left: 8px; }
.fb-outline button span {
  font-family: var(--sans);
  font-size: var(--step-label);
  letter-spacing: 0.1em;
  color: var(--fb-fg-dim);
  flex: none;
}

/* thumbnails, bottom sheet */
.fb-thumbs {
  left: 0; right: 0; bottom: 0;
  max-height: min(46vh, 420px);
  border-inline: 0; border-bottom: 0;
  padding: 18px clamp(14px, 2.4vw, 28px) 22px;
  overflow-y: auto;
  transform: translateY(0);
}
.fb-thumbs[hidden] { transform: translateY(100%); }
.fb-thumbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 14px;
}
.fb-thumb {
  border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; gap: 6px; justify-items: center;
  color: var(--fb-fg-dim);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.fb-thumb .sh {
  width: 100%;
  aspect-ratio: 612 / 792;
  background: rgba(255,255,255,0.07);
  outline: 1px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.25s linear, transform 0.35s var(--ease);
  overflow: hidden;
}
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fb-thumb:hover .sh { transform: translateY(-3px); outline-color: var(--fb-line); }
.fb-thumb[aria-current="true"] { color: var(--fb-fg); }
.fb-thumb[aria-current="true"] .sh { outline-color: var(--blue); }

/* --- loader ---------------------------------------------------------------- */

.fb-loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 9;
  background: var(--fb-bg-2);
  transition: opacity 0.6s linear, visibility 0.6s;
}
.fb-loader[hidden] { display: grid; opacity: 0; visibility: hidden; }
.fb-loader img { width: 54px; animation: pulse 1.7s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* --- hint toast ------------------------------------------------------------- */
.fb-hint {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 5;
  font-family: var(--sans);
  font-size: var(--step-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fb-fg-dim);
  background: rgba(4, 21, 31, 0.7);
  border: 1px solid var(--fb-line);
  padding: 9px 16px;
  pointer-events: none;
  transition: opacity 0.6s linear;
}
.fb-hint[hidden] { display: block; opacity: 0; }

/* phones: one row of controls, the rest is pinch and swipe */
@media (max-width: 620px) {
  .fb-bar { flex-wrap: nowrap; gap: 2px; padding-inline: 8px; }
  .fb-btn { width: 40px; height: 40px; }
  .fb-sep { margin-inline: 4px; }
  #fb-first, #fb-last, #fb-zoom-in, #fb-zoom-out { display: none; }
  .fb-count { padding-inline: 2px; gap: 5px; font-size: 12px; letter-spacing: 0.06em; }
  .fb-count input { width: 54px; padding-inline: 2px; }
  .fb-thumbs-grid { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 10px; }
  .fb-scaler { padding: 14px 12px clamp(46px, 7vh, 62px); }
}

@media (prefers-reduced-motion: reduce) {
  .fb-book, .fb-leaf, .fb-drawer, .fb-scaler { transition-duration: 0.01ms !important; }
  .fb-leaf.hint { animation: none; }
}