/* Small, intentional CSS on top of Tailwind for typography feel */
:root{
  --ink:#111;
  --muted:#6b7280;
}

@font-face{
  font-family: "HanSantteutDotum";
  src: url("./fonts/HanSantteutDotum-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "HanSantteutDotum";
  src: url("./fonts/HanSantteutDotum-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "LBRITE";
  src: url("./fonts/LBRITE.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "LBRITE";
  src: url("./fonts/LBRITED.TTF") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "LBRITE";
  src: url("./fonts/LBRITEI.TTF") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "LBRITE";
  src: url("./fonts/LBRITEDI.TTF") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

html { background:#fff; color:var(--ink); }

body{
  font-family: "HanSantteutDotum", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Slight tracking + serif-ish logo if available */
.logo {
  font-family: "LBRITE", ui-serif, Georgia, "Times New Roman", Times, serif;
  letter-spacing: .28em;
}

/* Subtle image hover like the reference */
.shot {
  background:#f6f6f6;
}
.shot img{
  transition: transform .45s ease, filter .45s ease;
  will-change: transform;
}
.shot:hover img{
  transform: scale(1.01);
  filter: saturate(1.02);
}

/* Hide focus ring only when mouse; keep accessibility */
.focus-ring:focus-visible{
  outline: 2px solid rgba(17,17,17,.55);
  outline-offset: 3px;
}

/* Hover KR label for selected nav items */
.swap-kr .kr { display:none; }
.swap-kr .kr { font-size: 10px; letter-spacing: .2em; }
.swap-kr:hover .en { display:none; }
.swap-kr:hover .kr { display:inline; }

/* Subtle reveal on scroll (used in about.html) */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Fade-in animation for gallery images */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#gallery article {
  animation: fadeIn .6s ease-out forwards;
}

#gallery article:nth-child(1) { animation-delay: 0.05s; }
#gallery article:nth-child(2) { animation-delay: 0.1s; }
#gallery article:nth-child(3) { animation-delay: 0.15s; }
#gallery article:nth-child(4) { animation-delay: 0.2s; }
#gallery article:nth-child(5) { animation-delay: 0.25s; }
#gallery article:nth-child(6) { animation-delay: 0.3s; }
#gallery article:nth-child(7) { animation-delay: 0.35s; }
#gallery article:nth-child(8) { animation-delay: 0.4s; }
#gallery article:nth-child(n+9) { animation-delay: 0.45s; }