/* General Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes flyUpFromBottom { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes scaleOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.9); opacity: 0; } }
@keyframes scaleOutCustom { from { transform: scale(1); opacity: 1; } to { transform: scale(1.1); opacity: 0; } }
.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
.animate-fade-out { animation: fadeOut 0.3s ease-in forwards; }
.animate-scale-in { animation: scaleIn 0.3s ease-out forwards; }
.animate-scale-out { animation: scaleOut 0.3s ease-in forwards; }
.animate-scale-out-custom { animation: scaleOutCustom 0.2s ease-in forwards; }
.animate-fade-in-slow { animation: fadeIn 0.5s ease-out 0.4s forwards; opacity: 0; }
.animate-fly-up { opacity: 0; animation: flyUpFromBottom 0.6s ease-out forwards; }

@keyframes flyOutToRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }
.animate-fly-out-right { animation: flyOutToRight 0.3s ease-in forwards; }

@keyframes jiggle {
  0%, 100% { transform: rotate(-0.5deg); }
  50% { transform: rotate(0.5deg); }
}
.jiggle {
    animation: jiggle 0.2s infinite;
}

/* Comment Collapse Transition */
.comment-replies { transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out; max-height: 2500px; opacity: 1; overflow: hidden; }
.comment-replies.collapsed { max-height: 0; opacity: 0; }

/* Swipe to dismiss wrapper */
.swipe-wrapper { transition: max-height 0.4s ease-in-out, margin-bottom 0.4s ease-in-out; max-height: 300px; overflow: hidden; margin-bottom: 0.5rem; }
.swipe-wrapper.dismissed { max-height: 0; margin-bottom: 0; }
.swipe-content { touch-action: pan-y; user-select: none; transition: transform 0.3s ease; }

/* Main View Slider */
.view-container { display: flex; width: 200%; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.view-container.detail-active { transform: translateX(-50%); }
.view-pane { width: 50%; flex-shrink: 0; }

/* Side Menu */
.side-menu { transition: transform 0.3s ease-in-out; }
body.menu-open {
    overflow: hidden;
}

/* Markdown Styles */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { color: white; }
.prose p { color: #d1d5db; margin-top: 0.5em; margin-bottom: 0.5em; }
.prose a { color: #3b82f6; }
.prose blockquote { background-color: #2d3748; border-left: 4px solid #4a5568; color: #a0aec0; padding: 0 1em; margin: 0.5em 0; border-radius: 4px; }
.prose code { color: #f3f4f6; background-color: #374151; padding: 0.2em 0.4em; margin: 0; font-size: 85%; border-radius: 6px; }
.prose pre { background-color: #1f2937; padding: 1em; border-radius: 6px; overflow-x: auto; }
.prose pre code { background-color: transparent; padding: 0; }
.prose ul { list-style-type: disc; padding-left: 1.5em; }
.prose ol { list-style-type: decimal; padding-left: 1.5em; }
.prose li { margin-top: 0.25em; margin-bottom: 0.25em; }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid #4b5563; padding: 0.5em; }
.prose th { background-color: #374151; }
.embedded-image {
    max-width: 100%;
    max-height: 20px;
    border-radius: 8px;
    margin: 0.5em 0;
}
.embedded-gif {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    margin: 0.5em 0;
    border: none;
}
body.modal-open {
    overflow: hidden;
}

.loader {
  animation:spin 1s infinite linear;
  border:solid 2vmin transparent;
  border-radius:50%;
  border-right-color:#3b82f6;
  border-top-color:#3b82f6;
  box-sizing:border-box;
  height:20vmin;
  left:calc(50% - 10vmin);
  position:fixed;
  top:calc(50% - 10vmin);
  width:20vmin;
  z-index:1;
}
.loader:before {
  animation:spin 2s infinite linear;
  border:solid 2vmin transparent;
  border-radius:50%;
  border-right-color:#60a5fa;
  border-top-color:#60a5fa;
  box-sizing:border-box;
  content:"";
  height:16vmin;
  left:0;
  position:absolute;
  top:0;
  width:16vmin;
}
.loader:after {
  animation:spin 3s infinite linear;
  border:solid 2vmin transparent;
  border-radius:50%;
  border-right-color:#93c5fd;
  border-top-color:#93c5fd;
  box-sizing:border-box;
  content:"";
  height:12vmin;
  left:2vmin;
  position:absolute;
  top:2vmin;
  width:12vmin;
}

@keyframes spin {
  100% {
    transform:rotate(360deg);
  }
}