/* ============================================
   Custom styles layered on top of Tailwind
   Keep this file intentionally small.
   ============================================ */

html { scroll-behavior: smooth; }

body {
  /* Subtle pattern under the gradient hero */
  font-feature-settings: "ss01", "cv11";
}

/* Korean text gets a slightly looser line-height for readability */
html[lang="ko"] body { line-height: 1.7; }

/* ---------- Fade-in on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Image placeholder texture ---------- */
.placeholder {
  background-image:
    linear-gradient(135deg, rgba(0,0,0,0.02) 25%, transparent 25%),
    linear-gradient(225deg, rgba(0,0,0,0.02) 25%, transparent 25%),
    linear-gradient(45deg,  rgba(0,0,0,0.02) 25%, transparent 25%),
    linear-gradient(315deg, rgba(0,0,0,0.02) 25%, transparent 25%);
  background-position: 10px 0, 10px 0, 0 0, 0 0;
  background-size: 20px 20px;
  background-repeat: repeat;
}

/* ---------- Anchor offset so sticky nav doesn't cover headings ---------- */
section[id] { scroll-margin-top: 5rem; }

/* ---------- Language modal pop-in ---------- */
.modal-pop {
  animation: modalPop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes modalPop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ---------- Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}