/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 @import "tailwindcss";

/* ===== Shared Utilities ===== */

/* Hide scrollbar but keep scroll functionality */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Image loading shimmer skeleton */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.img-skeleton {
  background: linear-gradient(90deg, #e8e0cb 25%, #fbf7e8 50%, #e8e0cb 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Bottom safe area for gesture-bar phones */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

/* Fade edges for horizontal scroll containers */
.scroll-fade-edges {
  mask-image: linear-gradient(to right, transparent, black 1rem, black calc(100% - 1rem), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 1rem, black calc(100% - 1rem), transparent);
}

/* ===== Content-Length-Based Font Sizing ===== */
/* Mirrors BookReader's determineOptimalFontSize: <350 chars = large, 350-499 = medium, 500+ = small */

/* Mobile font sizes */
.scene-font-small  { font-size: 0.95rem; line-height: 1.85; }
.scene-font-medium { font-size: 1.1rem;  line-height: 1.9; }
.scene-font-large  { font-size: 1.25rem; line-height: 1.95; }

/* Tablet (sm+) */
@media (min-width: 640px) {
  .scene-font-small  { font-size: 1.0rem;  line-height: 1.85; }
  .scene-font-medium { font-size: 1.15rem; line-height: 1.9; }
  .scene-font-large  { font-size: 1.35rem; line-height: 1.95; }
}

/* Desktop (lg+) */
@media (min-width: 1024px) {
  .scene-font-small  { font-size: 1.05rem; line-height: 1.85; }
  .scene-font-medium { font-size: 1.2rem;  line-height: 1.9; }
  .scene-font-large  { font-size: 1.4rem;  line-height: 2.0; }
}

/* ===== Mobile Scene Slide/Snap Feel ===== */
/* Vertical scroll-snap on mobile gives page-turning feel without affecting SEO */
.scene-snap-container {
  scroll-snap-type: y proximity;  /* proximity = snaps when close, doesn't fight scroll */
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 1024px) {
  .scene-snap-container { scroll-snap-type: none; }
}

.scene-snap-item {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* Scene entrance animation — fade-in-up on scroll */
@keyframes sceneSlideIn {
  from {
    opacity: 0.3;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.scene-animate-in {
  animation: sceneSlideIn 0.4s ease-out both;
}