/* Home — magical book (page-specific; design-system holds shared tokens) */
:root {
  --book-cover: #2e1065;
  --book-spine: #1e0a4a;
  --book-page: #f5f0e8;
  --book-gold: var(--color-gold, #e8d5a3);
}

.book-stage {
  position: relative;
  width: min(280px, 70vw);
  height: 220px;
  margin: 2.5rem 0 0.5rem;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-glow {
  position: absolute;
  inset: 10% 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(167, 139, 250, 0.35), transparent 70%);
  filter: blur(18px);
  animation: glow-pulse 3.5s ease-in-out infinite;
  pointer-events: none;
}

.book {
  position: relative;
  width: 140px;
  height: 180px;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-18deg);
  animation: book-float 4.5s ease-in-out infinite;
  cursor: pointer;
}

.book-cover,
.book-back,
.book-spine,
.book-pages,
.book-page-left,
.book-page-right {
  position: absolute;
  transform-style: preserve-3d;
}

.book-spine {
  width: 22px;
  height: 180px;
  left: 0;
  background: linear-gradient(90deg, #1a0840, var(--book-spine), #3b1a6e);
  transform: rotateY(-90deg) translateZ(11px) translateX(-11px);
  border-radius: 2px 0 0 2px;
  box-shadow: inset -2px 0 6px rgba(0, 0, 0, 0.4);
}

.book-back {
  width: 140px;
  height: 180px;
  background:
    linear-gradient(145deg, rgba(232, 213, 163, 0.12), transparent 40%),
    linear-gradient(180deg, #3b1a6e, var(--book-cover));
  transform: translateZ(-11px);
  border-radius: 2px 6px 6px 2px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.book-pages {
  width: 128px;
  height: 172px;
  left: 8px;
  top: 4px;
  background: linear-gradient(90deg, #e8e0d4, var(--book-page) 8%, #efe8dc);
  transform: translateZ(0);
  border-radius: 0 4px 4px 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.06);
}

.book-cover {
  width: 140px;
  height: 180px;
  background:
    radial-gradient(circle at 50% 42%, rgba(232, 213, 163, 0.25), transparent 55%),
    linear-gradient(160deg, #4c1d95, var(--book-cover) 55%, #1e0a4a);
  transform-origin: left center;
  transform: translateZ(11px);
  border-radius: 2px 6px 6px 2px;
  box-shadow:
    0 0 0 1px rgba(232, 213, 163, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.4);
  transition: transform 1.4s cubic-bezier(0.4, 0.05, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.book-cover::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(232, 213, 163, 0.45);
  border-radius: 2px 4px 4px 2px;
  pointer-events: none;
}

.book-emblem {
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--book-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--book-gold);
  font-size: 1.35rem;
  text-shadow: 0 0 12px rgba(232, 213, 163, 0.6);
  box-shadow:
    0 0 16px rgba(167, 139, 250, 0.4),
    inset 0 0 12px rgba(232, 213, 163, 0.15);
  animation: emblem-shine 3s ease-in-out infinite;
}

.book.open .book-cover {
  transform: translateZ(11px) rotateY(-145deg);
}

.book-page-left,
.book-page-right {
  width: 64px;
  height: 172px;
  top: 4px;
  background: var(--book-page);
  opacity: 0;
  transition: opacity 0.6s ease 0.35s, transform 1.1s cubic-bezier(0.4, 0.05, 0.2, 1);
}

.book-page-left {
  left: 8px;
  transform-origin: right center;
  transform: translateZ(2px) rotateY(0deg);
  background: linear-gradient(90deg, #ddd5c8, var(--book-page));
  border-radius: 3px 0 0 3px;
  box-shadow: inset -4px 0 8px rgba(0, 0, 0, 0.06);
}

.book-page-right {
  left: 72px;
  transform-origin: left center;
  transform: translateZ(2px) rotateY(0deg);
  background: linear-gradient(270deg, #ddd5c8, var(--book-page));
  border-radius: 0 3px 3px 0;
  box-shadow: inset 4px 0 8px rgba(0, 0, 0, 0.06);
}

.book-page-left .lines,
.book-page-right .lines {
  padding: 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.book-page-left .lines span,
.book-page-right .lines span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: rgba(46, 16, 101, 0.18);
}

.book-page-left .lines span:nth-child(1) { width: 78%; }
.book-page-left .lines span:nth-child(2) { width: 92%; }
.book-page-left .lines span:nth-child(3) { width: 65%; }
.book-page-left .lines span:nth-child(4) { width: 88%; }
.book-page-left .lines span:nth-child(5) { width: 70%; }
.book-page-right .lines span:nth-child(1) { width: 85%; margin-left: auto; }
.book-page-right .lines span:nth-child(2) { width: 70%; margin-left: auto; }
.book-page-right .lines span:nth-child(3) { width: 90%; margin-left: auto; }
.book-page-right .lines span:nth-child(4) { width: 60%; margin-left: auto; }
.book-page-right .lines span:nth-child(5) { width: 80%; margin-left: auto; }

.book.open .book-page-left,
.book.open .book-page-right {
  opacity: 1;
}

.book.open .book-page-left {
  transform: translateZ(2px) rotateY(12deg);
}

.book.open .book-page-right {
  transform: translateZ(2px) rotateY(-8deg);
}

.sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--book-gold);
  box-shadow: 0 0 8px 2px rgba(232, 213, 163, 0.8);
  opacity: 0;
  pointer-events: none;
  animation: sparkle 3.2s ease-in-out infinite;
}

.sparkle:nth-child(1) { top: 18%; left: 12%; animation-delay: 0s; }
.sparkle:nth-child(2) { top: 28%; right: 8%; animation-delay: 0.7s; }
.sparkle:nth-child(3) { bottom: 22%; left: 18%; animation-delay: 1.4s; }
.sparkle:nth-child(4) { top: 8%; left: 48%; animation-delay: 2.1s; }
.sparkle:nth-child(5) { bottom: 12%; right: 20%; animation-delay: 1s; }

.book-hint {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--color-text-subtle, #64748b);
  letter-spacing: 0.04em;
  opacity: 0.85;
  transition: opacity 0.5s ease;
}

.book-hint.hidden {
  opacity: 0;
}

@keyframes book-float {
  0%, 100% { transform: rotateX(8deg) rotateY(-18deg) translateY(0); }
  50% { transform: rotateX(10deg) rotateY(-14deg) translateY(-10px); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes emblem-shine {
  0%, 100% { box-shadow: 0 0 16px rgba(167, 139, 250, 0.35), inset 0 0 12px rgba(232, 213, 163, 0.12); }
  50% { box-shadow: 0 0 28px rgba(167, 139, 250, 0.7), inset 0 0 16px rgba(232, 213, 163, 0.25); }
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.4) translateY(0); }
  40% { opacity: 1; transform: scale(1) translateY(-6px); }
  70% { opacity: 0.4; transform: scale(0.7) translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .book,
  .book-glow,
  .book-emblem,
  .sparkle {
    animation: none;
  }

  .book-cover,
  .book-page-left,
  .book-page-right {
    transition-duration: 0.01ms;
  }
}