/* Bridge Book of Knowledge — shared visual system (obsidian / gold / cyan) */
:root {
  --bok-cyan: #20e7ff;
  --bok-blue: #168cff;
  --bok-gold: #ffc75a;
  --bok-violet: #9d58ff;
  --mx: 0;
  --my: 0;
  --energy: 1;
}

.knowledge-book {
  position: relative;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 3 / 2;
  isolation: isolate;
  perspective: 1200px;
  cursor: pointer;
  user-select: none;
  filter: saturate(1.08);
  outline: none;
  margin: 0 auto;
}

.knowledge-book:focus-visible {
  box-shadow: 0 0 0 2px #020406, 0 0 0 4px var(--bok-cyan);
}

.knowledge-book .book-shell {
  position: absolute;
  inset: 4%;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--my) * -7deg)) rotateY(calc(var(--mx) * 8deg)) translateY(-1%);
  transition: transform 0.22s ease-out, filter 0.6s;
  animation: bok-float 5.5s ease-in-out infinite;
}

.knowledge-book .book,
.knowledge-book .book-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2.2rem 2.8rem #000c) drop-shadow(0 0 1.1rem #21cfff66);
  z-index: 3;
}

.knowledge-book .book-fallback {
  display: none;
}

.knowledge-book.bok-no-bitmap .book {
  display: none;
}

.knowledge-book.bok-no-bitmap .book-fallback {
  display: block;
}

.knowledge-book .aura,
.knowledge-book .pulse,
.knowledge-book .rays,
.knowledge-book .shimmer,
.knowledge-book .particles,
.knowledge-book .orbits {
  position: absolute;
  pointer-events: none;
}

.knowledge-book .aura {
  inset: 10% 9% 4%;
  z-index: 0;
  background: radial-gradient(
    ellipse at 50% 51%,
    #19e8ff4d 0 9%,
    #9857ff26 23%,
    #ffc04c18 40%,
    transparent 70%
  );
  filter: blur(22px);
  animation: bok-breathe 3.4s ease-in-out infinite;
}

.knowledge-book .pulse {
  left: 50%;
  top: 47%;
  width: 12%;
  aspect-ratio: 1;
  border: 2px solid #62f4ffab;
  border-radius: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px #13dbff, inset 0 0 20px #13dbff;
  animation: bok-pulse 2.4s ease-out infinite;
}

.knowledge-book .rays {
  left: 50%;
  top: 47%;
  width: 42%;
  aspect-ratio: 1;
  z-index: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg,
    #56efff00 0 8deg,
    #56efff18 9deg,
    #56efff00 12deg 24deg
  );
  mask: radial-gradient(circle, transparent 0 12%, #000 23%, transparent 71%);
  animation: bok-spin 28s linear infinite;
}

.knowledge-book .shimmer {
  inset: 16% 10% 17%;
  z-index: 5;
  background: linear-gradient(
    108deg,
    transparent 29%,
    #fff0 42%,
    #fff9 49%,
    #6df5ff66 52%,
    transparent 59%
  );
  mix-blend-mode: screen;
  clip-path: polygon(11% 18%, 48% 36%, 52% 36%, 89% 18%, 86% 73%, 52% 87%, 48% 87%, 14% 73%);
  transform: translateX(-75%);
  animation: bok-shimmer 5.2s ease-in-out infinite;
}

.knowledge-book .orbits {
  left: 50%;
  top: 41%;
  width: 29%;
  aspect-ratio: 1;
  z-index: 6;
  transform: translate(-50%, -50%);
  border: 1px solid #52eeff52;
  border-radius: 50%;
  animation: bok-spin 12s linear infinite;
}

.knowledge-book .orbits:before,
.knowledge-book .orbits:after {
  content: '';
  position: absolute;
  width: 9px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 3px var(--bok-cyan), 0 0 22px 6px var(--bok-blue);
}

.knowledge-book .orbits:before {
  left: 9%;
  top: 16%;
}

.knowledge-book .orbits:after {
  right: 4%;
  bottom: 28%;
  box-shadow: 0 0 8px 3px var(--bok-gold), 0 0 22px 6px #ff8a00;
}

.knowledge-book .particles {
  inset: 0;
  z-index: 7;
}

.knowledge-book .particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #dffcff;
  box-shadow: 0 0 8px 2px var(--bok-cyan);
  opacity: 0;
  animation: bok-rise var(--d) ease-in infinite;
  animation-delay: var(--delay);
  left: var(--x);
  top: var(--y);
}

.knowledge-book .sigil {
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: 8;
  width: 7.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, #fff 0 4%, #28e7ff 12%, #1270a0 28%, transparent 62%);
  mix-blend-mode: screen;
  filter: blur(1px);
  animation: bok-sigil 1.8s ease-in-out infinite;
}

.knowledge-book .status {
  position: absolute;
  left: 50%;
  bottom: 3%;
  z-index: 9;
  translate: -50% 0;
  color: #d8fbff;
  font-size: clamp(9px, 1.1vw, 14px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-shadow: 0 0 10px #00dcff;
  opacity: 0.82;
  transition: 0.35s;
  white-space: nowrap;
}

.knowledge-book.active {
  --energy: 1.5;
}

.knowledge-book.active .book-shell {
  filter: brightness(1.16) saturate(1.25);
}

.knowledge-book.active .pulse {
  animation-duration: 0.95s;
}

.knowledge-book.active .aura {
  filter: blur(17px);
  transform: scale(1.13);
}

.knowledge-book.active .status {
  color: #ffe5a2;
  text-shadow: 0 0 12px #ffb52e;
}

/* Compact embed (onboarding left panel) */
.knowledge-book.knowledge-book--embed {
  max-width: none;
  width: min(92%, 280px);
  aspect-ratio: 3 / 2;
  margin: 0 auto 0.5rem;
}

.bok-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 4, 6, 0.72);
  backdrop-filter: blur(6px);
  padding: 1rem;
}

.bok-overlay.is-open {
  display: flex;
}

.bok-overlay .knowledge-book {
  width: min(100%, 520px);
}

@keyframes bok-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -1.8%;
  }
}

@keyframes bok-breathe {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.96);
  }
  50% {
    opacity: calc(0.86 * var(--energy));
    transform: scale(1.08);
  }
}

@keyframes bok-pulse {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.45);
  }
  80%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.8);
  }
}

@keyframes bok-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes bok-shimmer {
  0%,
  20% {
    transform: translateX(-85%);
    opacity: 0;
  }
  42% {
    opacity: 0.75;
  }
  67%,
  100% {
    transform: translateX(85%);
    opacity: 0;
  }
}

@keyframes bok-rise {
  0% {
    opacity: 0;
    translate: 0 25px;
    scale: 0.4;
  }
  20% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    translate: var(--drift) -130px;
    scale: 1.4;
  }
}

@keyframes bok-sigil {
  0%,
  100% {
    opacity: 0.55;
    scale: 0.9;
  }
  50% {
    opacity: 1;
    scale: 1.18;
  }
}

@media (prefers-reduced-motion: reduce) {
  .knowledge-book *,
  .knowledge-book *:before,
  .knowledge-book *:after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
  .knowledge-book .book-shell {
    transform: none;
  }
}