:root { 
  --primary: #FAFAF8; 
  --accent: #D4AF87; 
  --text: #2C2C2C; 
}

body { 
  background-color: #FAFAF8; 
  color: #2D2D2D; 
  -webkit-font-smoothing: antialiased; 
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  margin: 0;
}

#progress-bar { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 0%; 
  height: 1px; 
  background: var(--accent); 
  z-index: 200; 
}

.reveal { 
  opacity: 0; 
  transform: translateY(24px); 
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); 
}

.reveal.active { 
  opacity: 1; 
  transform: translateY(0); 
}

.paper-texture { 
  background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png"); 
}

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #E5E5E0;
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #D4AF87;
}

/* Animations that were likely in the Tailwind config but work better as classes */
@keyframes slotIn {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes pulseBlob {
  0%, 100% { transform: scale(1) translate(0, 0); }
  33% { transform: scale(1.1) translate(20px, -20px); }
  66% { transform: scale(0.9) translate(-20px, 20px); }
}

@keyframes maskReveal {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}