/**
 * 📚 THE LIBRARY - Personal Shrine / Sanctuary
 * Warm, contemplative, YOUR sacred collection space
 * 
 * Architectural Metaphor: Library of Alexandria / Buddhist Shrine / Record Collector's Den
 * - Wood shelves, candlelight warmth
 * - Everything has its place
 * - Safe, personal, home
 */

/* ==================== SHRINE VARIABLES ==================== */
:root {
  /* Fibonacci Spacing (shared) */
  --fib-1: 8px;
  --fib-2: 13px;
  --fib-3: 21px;
  --fib-4: 34px;
  --fib-5: 55px;
  --fib-6: 89px;
  
  /* Library Palette - Warm wood & candlelight */
  --library-dark: #1a1410;
  --library-wood: #2d2318;
  --library-wood-light: #3d3020;
  --library-shelf: #4a3c2a;
  
  /* Candlelight */
  --candle-flame: #ff9f1c;
  --candle-glow: rgba(255, 159, 28, 0.15);
  --candle-warm: #ffb347;
  
  /* Parchment/Cream */
  --parchment: #f5f0e8;
  --parchment-dark: #e8dcc8;
  
  /* Accent */
  --library-burgundy: #722f37;
  --library-gold: #c9a227;
  
  /* Text */
  --library-text: #f0e6d8;
  --library-text-muted: #a89880;
}

/* ==================== WELCOME HOME ANIMATION ==================== */
/* Jobs audit: Simplified animations, no flicker effects */
@keyframes library-welcome {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* candle-flicker - REMOVED (ambient) */

@keyframes shelf-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==================== LIBRARY ZONE BASE ==================== */
.zone-library {
  --zone-bg: var(--library-dark);
  --zone-accent: var(--candle-warm);
}

.zone-library .dig-space {
  background: var(--library-dark);
  animation: library-welcome 0.15s ease-out;
}

/* Warm ambient glow - static, no animation (Jobs audit) */
.zone-library .dig-space::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 30%,
    var(--candle-glow) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

/* Side glows - static (Jobs audit: removed animation) */
.zone-library .dig-space::after {
  content: '';
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(ellipse 150px 300px at 5% 40%, var(--candle-glow) 0%, transparent 70%),
    radial-gradient(ellipse 150px 300px at 95% 50%, var(--candle-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* ==================== SHELF STYLING ==================== */
/* Library uses a shelf/bookcase metaphor */
.zone-library .card-space {
  background: 
    /* Wood grain texture simulation */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 2px,
      rgba(74, 60, 42, 0.1) 2px,
      rgba(74, 60, 42, 0.1) 4px
    );
}

/* Shelf dividers between rows */
.zone-library .library-section {
  position: relative;
  padding-bottom: var(--fib-4);
  margin-bottom: var(--fib-4);
  animation: shelf-appear 0.15s ease-out;
  /* Jobs audit: removed stagger delays */
}

.zone-library .library-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 5%;
  right: 5%;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--library-shelf) 10%,
    var(--library-wood-light) 50%,
    var(--library-shelf) 90%,
    transparent 100%
  );
  border-radius: 2px;
}

/* ==================== COLLECTION ITEMS ==================== */
.zone-library .library-item,
.zone-library .sample-card {
  background: var(--library-wood);
  border: 1px solid var(--library-shelf);
  transition: all 0.3s ease;
  position: relative;
}

/* Warm hover glow */
.zone-library .library-item:hover,
.zone-library .sample-card:hover {
  border-color: var(--candle-warm);
  box-shadow: 
    0 0 20px var(--candle-glow),
    0 8px 30px rgba(0, 0, 0, 0.4);
  transform: translateY(-4px);
}

/* "Pulling from shelf" effect */
.zone-library .library-item:active,
.zone-library .sample-card:active {
  transform: translateY(-2px) scale(1.02);
}

/* ==================== SECTION HEADERS ==================== */
.zone-library .library-section-header,
.zone-library .section-title {
  color: var(--parchment);
  font-weight: 600;
  letter-spacing: 0.05em;
  position: relative;
  padding-left: var(--fib-3);
}

/* Decorative bookmark */
.zone-library .library-section-header::before {
  content: '📖';
  position: absolute;
  left: 0;
  font-size: 16px;
}

/* ==================== EMPTY STATE - AWAITING TREASURES ==================== */
.zone-library .library-empty {
  background: var(--library-wood);
  border: 2px dashed var(--library-shelf);
  border-radius: var(--fib-2);
  padding: var(--fib-6);
  text-align: center;
  color: var(--library-text-muted);
}

.zone-library .library-empty-icon {
  font-size: 64px;
  margin-bottom: var(--fib-3);
  filter: drop-shadow(0 0 20px var(--candle-glow));
}

/* ==================== STATS BAR ==================== */
.zone-library .library-stats {
  background: var(--library-wood);
  border-bottom: 1px solid var(--library-shelf);
  padding: var(--fib-2) var(--fib-4);
}

.zone-library .library-stat {
  color: var(--candle-warm);
  font-weight: 600;
}

/* ==================== FILTERS/SORT ==================== */
.zone-library .library-filters button {
  background: var(--library-wood-light);
  border: 1px solid var(--library-shelf);
  color: var(--library-text-muted);
  transition: all 0.2s ease;
}

.zone-library .library-filters button:hover,
.zone-library .library-filters button.active {
  background: var(--candle-warm);
  color: var(--library-dark);
  border-color: var(--candle-warm);
}

/* ==================== ZONE TITLE ==================== */
.zone-library .float-zone-title {
  color: var(--candle-warm);
}

/* ==================== BYTE MASCOT ==================== */
.zone-library .byte-mascot {
  filter: drop-shadow(0 0 10px var(--candle-glow));
}

.zone-library .byte-speech {
  background: var(--library-wood);
  border: 1px solid var(--candle-warm);
  color: var(--parchment);
}

/* ==================== SEARCH BAR ==================== */
.zone-library .float-search input:focus {
  border-color: var(--candle-warm);
  box-shadow: 0 0 15px var(--candle-glow);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  .zone-library .dig-space::before,
  .zone-library .dig-space::after {
    opacity: 0.7;
  }
  
  .zone-library .library-section::after {
    left: 2%;
    right: 2%;
  }
}