@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;600&family=Inter:wght@300;400;500;600&display=swap');

:root {
--black: #0a0a0a;
--white: #fafafa;
--red: #c41e3a;
--red-dark: #8b0000;
}

* {
font-family: 'Inter', sans-serif;
}

h1, h2, h3, .font-japanese {
font-family: 'Noto Serif JP', serif;
}

.fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up.visible {
opacity: 1;
transform: translateY(0);
}

.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.mobile-menu {
transform: translateX(100%);
transition: transform 0.3s ease;
}

.mobile-menu.open {
transform: translateX(0);
}

.modal-overlay {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
opacity: 1;
visibility: visible;
}

.success-checkmark {
animation: scaleIn 0.5s ease forwards;
}

@keyframes scaleIn {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}

.line-decoration {
width: 60px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--red), transparent);
}

html {
scroll-behavior: smooth;
}