/* Литературные эффекты для книжного магазина */

/* Эффект перелистывания страниц */
.page-flip {
  position: relative;
  overflow: hidden;
}

.page-flip::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
  animation: pageFlip 3s ease-in-out infinite;
}

@keyframes pageFlip {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* Эффект чернил */
.ink-effect {
  position: relative;
}

.ink-effect::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--ink-black), var(--book-red));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.ink-effect:hover::after {
  transform: scaleX(1);
}

/* Эффект пергамента */
.parchment-effect {
  background: linear-gradient(135deg, #F5F5DC, #F0E68C);
  border: 1px solid #D2B48C;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
}

.parchment-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23D2B48C" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23D2B48C" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23D2B48C" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23D2B48C" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  pointer-events: none;
}

/* Эффект книжной полки */
.bookshelf-effect {
  background: linear-gradient(90deg, #8B4513, #A0522D);
  border: 2px solid #654321;
  position: relative;
}

.bookshelf-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #654321, #8B4513, #654321);
}

/* Эффект старой книги */
.old-book-effect {
  background: linear-gradient(135deg, #8B4513, #A0522D);
  border: 1px solid #654321;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.old-book-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(139, 69, 19, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(160, 82, 45, 0.3) 0%, transparent 50%);
  pointer-events: none;
}

/* Эффект печатной машинки */
.typewriter-effect {
  overflow: hidden;
  border-right: 2px solid var(--gold);
  white-space: nowrap;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--gold); }
}

/* Эффект чернильного пятна */
.ink-blot {
  position: relative;
}

.ink-blot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, var(--ink-black) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.3s ease;
}

.ink-blot:hover::before {
  opacity: 1;
  width: 40px;
  height: 40px;
}

/* Эффект свитка */
.scroll-effect {
  background: linear-gradient(135deg, #F5F5DC, #F0E68C);
  border: 1px solid #D2B48C;
  position: relative;
  overflow: hidden;
}

.scroll-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: scrollReveal 2s ease-in-out infinite;
}

@keyframes scrollReveal {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* Эффект книжного запаха */
.book-scent {
  position: relative;
}

.book-scent::after {
  content: "📚";
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 1.5rem;
  opacity: 0;
  transition: all 0.3s ease;
  animation: float 2s ease-in-out infinite;
}

.book-scent:hover::after {
  opacity: 1;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Эффект библиотеки */
.library-effect {
  background: 
    radial-gradient(circle at 20% 80%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(220, 20, 60, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(42, 42, 42, 0.9));
  position: relative;
}

.library-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="books" width="20" height="20" patternUnits="userSpaceOnUse"><rect width="2" height="20" fill="%23D2B48C" opacity="0.1"/><rect x="18" width="2" height="20" fill="%23D2B48C" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23books)"/></svg>');
  pointer-events: none;
}

/* Эффект книжного магазина */
.bookstore-effect {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.05), rgba(220, 20, 60, 0.05));
  border: 1px solid rgba(255, 215, 0, 0.2);
  position: relative;
}

.bookstore-effect::before {
  content: "🏪";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.2rem;
  opacity: 0.3;
}

/* Эффект чтения */
.reading-effect {
  position: relative;
}

.reading-effect::before {
  content: "👓";
  position: absolute;
  top: -5px;
  left: -5px;
  font-size: 1rem;
  opacity: 0;
  transition: all 0.3s ease;
}

.reading-effect:hover::before {
  opacity: 1;
  transform: rotate(10deg);
}

/* Эффект книжного клуба */
.book-club-effect {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(220, 20, 60, 0.1));
  border: 2px solid var(--gold);
  position: relative;
}

.book-club-effect::before {
  content: "📖";
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 1.5rem;
  opacity: 0.5;
}

/* Эффект литературного салона */
.literary-salon {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.1), rgba(65, 105, 225, 0.1));
  border: 1px solid var(--literary-blue);
  position: relative;
}

.literary-salon::before {
  content: "☕";
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 1.2rem;
  opacity: 0.4;
}

/* Адаптивные эффекты для мобильных устройств */
@media (max-width: 768px) {
  .literary-decoration::before,
  .literary-decoration::after {
    display: none;
  }
  
  .book-glow {
    animation: none;
  }
  
  .page-flip::before {
    animation: none;
  }
}

/* Эффекты для темной темы */
@media (prefers-color-scheme: dark) {
  .parchment-effect {
    background: linear-gradient(135deg, #2A2A2A, #1A1A1A);
    border-color: var(--gold);
  }
  
  .old-book-effect {
    background: linear-gradient(135deg, #1A1A1A, #2A2A2A);
    border-color: var(--gold);
  }
}