/* Google Fonts: Inter & Noto Sans JP are loaded in HTML */
body {
    background-color: #fcfcfc;
    color: #111111;
    overflow-x: hidden;
}

/* Typography Enhancements */
h1, h2, h3, h4, .font-mode {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.05em;
}

/* ===== Animations (Framer-like smooth reveals) ===== */

/* Fade & Slide Up */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* Clip-path reveal (Left to Right) for Images */
.clip-reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(0.7, 0, 0.3, 1);
}
.clip-reveal.active {
    clip-path: inset(0 0 0 0);
}

/* Clip-path reveal (Bottom to Top) for Text/Blocks */
.clip-reveal-up {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.2s cubic-bezier(0.7, 0, 0.3, 1);
}
.clip-reveal-up.active {
    clip-path: inset(0 0 0 0);
}

/* Image scaling effect inside clip-path container */
.img-scale-reveal {
    transform: scale(1.1);
    transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.clip-reveal.active .img-scale-reveal {
    transform: scale(1);
}

/* ===== Layout Utility ===== */

/* Horizontal Scrolling Container */
.horizontal-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding-bottom: 2rem;
    gap: 2rem;
}
.horizontal-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
.horizontal-scroll > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* Custom Scrollbar for entire page */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
    background: #111; 
}
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}