/*
 * 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.
 */

/* Application styles */

/*
 *= require actiontext
 */

/* Font Configuration */
:root {
  --font-pretendard: 'IBM Plex Sans KR', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-tossface: 'Tossface', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* Base typography */
body, html {
  font-family: var(--font-pretendard);
  font-feature-settings: 'cv01', 'cv02', 'cv03', 'cv04';
}

/* Emoji-specific styling */
.emoji,
[class*="emoji"],
.tossface,
.font-emoji,
.font-tossface {
  font-family: var(--font-tossface);
  font-variation-settings: normal;
  font-feature-settings: normal;
}

/* Hero section emoji */
h1:contains("📚") {
  font-family: var(--font-pretendard);
}

h1 .emoji {
  font-family: var(--font-tossface);
}

/* Blob animation */
@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* Performance optimization */
.animate-blob {
  will-change: transform;
}

/* Lazy loading optimization */
img {
  loading: lazy;
}

/* Focus states for accessibility */
button:focus-visible:not(.accordion-button),
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #0E0E0C;
  outline-offset: 2px;
}

/* Accordion buttons - no focus outline */
.accordion-button:focus {
  outline: none;
}


/* Infinite scroll loading animations */
.infinite-scroll-loading {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.infinite-scroll-loading.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Smooth transitions for new content */
.infinite-scroll-item {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.4s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered animation for multiple items */
.infinite-scroll-item:nth-child(1) { animation-delay: 0.1s; }
.infinite-scroll-item:nth-child(2) { animation-delay: 0.2s; }
.infinite-scroll-item:nth-child(3) { animation-delay: 0.3s; }
.infinite-scroll-item:nth-child(4) { animation-delay: 0.4s; }
.infinite-scroll-item:nth-child(5) { animation-delay: 0.5s; }

/* Hide ActionText attachment filenames */
.attachment figcaption,
.attachment .attachment-metadata,
action-text-attachment figcaption,
action-text-attachment .attachment-caption,
figure.attachment figcaption,
figure.attachment .attachment-metadata {
  display: none !important;
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }

  .print-break {
    page-break-before: always;
  }
}