/* -------------------------------------------
   Global Utilities
------------------------------------------- */
body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #2F3A4F;
    /* cb-dark fallback */
    background-color: #DCE4EA;
    /* cb-bg fallback */
}

.font-en {
    font-family: 'Montserrat', sans-serif;
}

/* Custom Selection Color */
::selection {
    background-color: #A8CFC4;
    /* cb-teal */
    color: #2F3A4F;
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* -------------------------------------------
   Animations
------------------------------------------- */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: none;
}

/* -------------------------------------------
   Components
------------------------------------------- */

/* Hero Image Overlay */
.hero-bg {
    background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* cb-dark と cb-gray-text を混ぜたような深いオーバーレイ */
    background: linear-gradient(135deg, rgba(47, 58, 79, 0.85), rgba(74, 93, 115, 0.7));
    backdrop-filter: blur(1px);
}

/* Page Header Background (for Subpages) */
.page-header-bg {
    background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop');
    background-size: cover;
    background-position: center 30%;
    position: relative;
}

.page-header-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(47, 58, 79, 0.9), rgba(74, 93, 115, 0.8));
    backdrop-filter: blur(2px);
}

/* Glassmorphism for Cards & Forms */
.glass-card,
.glass-form {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-form {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Custom Input Styles (No Shadow, Flat) */
.custom-input {
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.custom-input:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.9);
    border-color: #A8CFC4;
    /* cb-teal */
}

/* Image Grayscale & Blend */
.soft-img {
    filter: grayscale(20%) contrast(90%);
    transition: filter 0.5s ease;
}

.soft-img:hover {
    filter: grayscale(0%) contrast(100%);
}