/* Chapter Card Animations - AI Fortiori */
/* Namespaced with .manuscript-page to work with your existing cards */

/* Enhanced hover effects for existing cards */
.manuscript-page {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 1. Soft sheen sweep on hover */
.manuscript-page::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg,
    rgba(212, 175, 55, 0) 20%,
    rgba(212, 175, 55, 0.15) 35%,
    rgba(212, 175, 55, 0) 50%);
  transform: translateX(-60%) rotate(8deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 4;
}

.manuscript-page:hover::after {
  animation: manuscript-sheen 0.8s ease-out forwards;
  opacity: 1;
}

@keyframes manuscript-sheen {
  from { transform: translateX(-60%) rotate(8deg); }
  to { transform: translateX(60%) rotate(8deg); }
}

/* 2. Gentle ambient shimmer (always active, very subtle) */
.manuscript-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 110% -10%, rgba(212, 175, 55, 0.06), transparent 60%),
    linear-gradient(90deg, rgba(244, 229, 194, 0.04), transparent 40%, rgba(184, 115, 51, 0.03) 70%, transparent);
  mix-blend-mode: soft-light;
  animation: manuscript-ambient 15s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  border-radius: 12px;
}

@keyframes manuscript-ambient {
  0% { transform: translate3d(-4%, -2%, 0); }
  50% { transform: translate3d(4%, 3%, 0); }
  100% { transform: translate3d(-4%, -2%, 0); }
}

/* 3. Gold foil border accent (subtle glint) */
.page-border {
  transition: opacity 0.4s ease;
}

.page-border::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(120deg,
    var(--gold-deep) 0%, 
    var(--gold) 25%, 
    var(--copper) 50%, 
    var(--gold) 75%, 
    var(--gold-deep) 100%);
  background-size: 200% 100%;
  animation: foil-shift 10s linear infinite;
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0) padding-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  opacity: 0.3;
  pointer-events: none;
}

.manuscript-page:hover .page-border::after {
  opacity: 0.6;
  animation-duration: 5s;
}

@keyframes foil-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* 4. Enhanced medallion glow */
.page-medallion {
  transition: all 0.4s ease;
}

.manuscript-page:hover .page-medallion {
  transform: scale(1.05);
  box-shadow: 
    0 4px 12px rgba(212, 175, 55, 0.3),
    0 0 20px rgba(212, 175, 55, 0.2);
}

/* Parchment texture enhancement (optional) */
.manuscript-page .page-grain {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: 
    repeating-linear-gradient(45deg, 
      transparent, 
      transparent 2px, 
      rgba(244, 241, 232, 0.03) 2px, 
      rgba(244, 241, 232, 0.03) 4px);
  opacity: 0.4;
  mix-blend-mode: multiply;
  border-radius: 12px;
  z-index: 1;
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .manuscript-page,
  .manuscript-page::before,
  .manuscript-page::after,
  .page-border::after,
  .page-medallion {
    animation: none !important;
    transition: opacity 0.3s ease !important;
  }
  
  .manuscript-page:hover {
    transform: none;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  /* Disable hover animations on touch devices */
  .manuscript-page::after {
    display: none;
  }
  
  /* Keep only subtle ambient animation */
  .manuscript-page::before {
    animation-duration: 20s;
    opacity: 0.5;
  }
  
  /* Simplify foil effect */
  .page-border::after {
    animation: none;
    opacity: 0.2;
  }
}