/* ============================================================
   KEYFRAMES
   ============================================================ */

/* Base fade in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Drop cap gold glow pulse */
@keyframes goldGlow {
  0%, 100% {
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 20px rgba(201,168,76,0.15), 0 2px 8px rgba(0,0,0,0.2);
  }
  50% {
    text-shadow: 0 0 20px rgba(201,168,76,0.6), 0 2px 8px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 30px rgba(201,168,76,0.3), 0 2px 12px rgba(201,168,76,0.3);
  }
}

/* Candle-like flicker for margin spots */
@keyframes candleFlicker {
  0%   { opacity: 0.08; transform: scale(1); }
  15%  { opacity: 0.14; transform: scale(1.05); }
  30%  { opacity: 0.06; transform: scale(0.98); }
  50%  { opacity: 0.16; transform: scale(1.02); }
  65%  { opacity: 0.09; transform: scale(1); }
  80%  { opacity: 0.18; transform: scale(1.04); }
  100% { opacity: 0.08; transform: scale(1); }
}

/* Gentle bob for interest badges */
@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Ornamental divider symbol scale */
@keyframes dividerPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* SVG vine stroke drawing */
@keyframes vineGrow {
  from { stroke-dashoffset: var(--vine-length, 1000); }
  to { stroke-dashoffset: 0; }
}

/* Nav button shimmer sweep */
@keyframes shimmerSweep {
  from { left: -100%; }
  to { left: 100%; }
}

/* ============================================================
   PAGE TRANSITIONS
   ============================================================ */

/* Slide out to left */
.page-transition-out {
  animation: slideOutLeft 0.35s ease forwards;
}
@keyframes slideOutLeft {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-60px); opacity: 0; }
}

/* Slide in from right */
.page-transition-in {
  animation: slideInRight 0.35s ease forwards;
}
@keyframes slideInRight {
  from { transform: translateX(60px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ============================================================
   ANIMATION UTILITY CLASSES
   ============================================================ */
.animate-in {
  animation: fadeIn 0.5s ease forwards;
}
.delay-1 { animation-delay: 0.1s; opacity: 0; }
.delay-2 { animation-delay: 0.2s; opacity: 0; }
.delay-3 { animation-delay: 0.3s; opacity: 0; }

/* Shimmer spot (margin illustrations) */
.shimmer-spot {
  animation: candleFlicker 5s ease-in-out infinite;
}

/* Gold glow on drop cap frames */
.glow-cap {
  animation: goldGlow 4.5s ease-in-out infinite;
}

/* Floating badges */
.float-badge,
.interest-badge {
  animation: floatBadge 3s ease-in-out infinite;
}

/* Divider pulse */
.pulse-divider {
  animation: dividerPulse 3s ease-in-out infinite;
}

/* SVG vine draw */
.vine-draw {
  stroke-dasharray: var(--vine-length, 1000);
  stroke-dashoffset: var(--vine-length, 1000);
  animation: vineGrow 2s ease forwards;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .page.active {
    opacity: 1;
  }
  .animate-in,
  .delay-1,
  .delay-2,
  .delay-3 {
    opacity: 1 !important;
    animation: none !important;
  }
  .shimmer-spot {
    animation: none !important;
    opacity: 0.1;
  }
  #particles-canvas {
    display: none !important;
  }
}