@layer components {
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
  @keyframes marquee { to { transform: translateX(calc(-100% - var(--gap))); } }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
  @keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
  @keyframes scroll-cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

  /* 스크롤 리빌: JS(html.js)가 있을 때만 숨겼다가 보여요. JS가 없으면 처음부터 보여요. */
  html.js [data-reveal] { opacity: 0; transform: translate3d(0, var(--reveal-y, 28px), 0); }
  html.js [data-reveal="sm"] { --reveal-y: 14px; }
  html.js [data-reveal="lg"] { --reveal-y: 48px; }
  html.js [data-reveal="fade"] { --reveal-y: 0px; }
  html.js [data-reveal="scale"] { transform: translate3d(0, 24px, 0) scale(.96); }
  html.js [data-reveal].is-in {
    opacity: 1; transform: none;
    transition: opacity var(--d-5) var(--ease-out), transform var(--d-6) var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * 80ms + var(--reveal-delay, 0ms));
  }

  /* 이미지 가림막 리빌 */
  /* 대상 자체에 clip-path 를 걸면 IntersectionObserver 가 못 봐서, 안쪽 이미지에 걸어요 */
  html.js [data-mask-reveal] img { clip-path: inset(100% 0 0 0); transform: scale(1.18); }
  html.js [data-mask-reveal].is-in img { clip-path: inset(0 0 0 0); transform: scale(1); transition: clip-path 1.25s var(--ease-inout), transform 1.8s var(--ease-out); }

  /* 줄 단위 제목 리빌 (SplitText가 .line 으로 감싸요) */
  .split-line { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
  html.js [data-split]:not(.is-split) { opacity: 0; }

  /* 단어가 차례로 진해지는 문단 */
  /* 아직 밝아지지 않은 단어도 4.5:1 이상으로 읽혀요(회갈색 → 짙은 갈색) */
  .lit-word { color: var(--text-sub); transition: color var(--d-3) linear; }
  .lit-word.is-lit { color: inherit; }

  .scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; font-family: var(--font-serif); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; }
  .scroll-cue__line { width: 1px; height: 56px; background: rgba(250, 248, 245, .25); position: relative; overflow: hidden; }
  .scroll-cue__line::after { content: ""; position: absolute; inset: 0; background: currentColor; animation: scroll-cue 2.2s var(--ease-inout) infinite; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    html.js [data-reveal], html.js [data-split]:not(.is-split) { opacity: 1 !important; transform: none !important; }
    html.js [data-mask-reveal] img { transform: none !important; clip-path: none !important; }
    .lit-word { color: inherit; }
    .marquee__track { animation: none; }
  }
}