* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body { background: #F5EFE6; color: #221E1B; font-family: 'Noto Sans JP', sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #7C2B3C; color: #F5EFE6; }
a { color: inherit; }
input, select, textarea { font-family: 'Noto Sans JP', sans-serif; }

@keyframes kh-rise   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes kh-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes kh-reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes kh-pop    { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* Scroll-driven reveals use animation-timeline:view() (native CSS, set inline).
   Where that's unsupported, the 0s default duration lands the element on its
   end state immediately, so content is always visible. */