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

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #374151; /* text-gray-700 */
}

.font-serif {
    font-family: 'Noto Serif JP', serif;
}

.hero-section {
    height: 100vh;
    position: relative;
    color: white;
    display: grid;
    place-items: center;
}

#header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px; /* Adjust height of the shadow area */
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
    z-index: -1;
    transition: opacity 0.3s ease;
}

#header.scrolled::before {
    opacity: 0;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* Set z-index lower than header shadow */
}

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-content {
    grid-area: 1 / 1 / 2 / 2;
    position: relative;
    z-index: 1;
}

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

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Visibility Improvement Styles ===== */

.hero-content h1, .hero-content p {
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

#header:not(.scrolled) #header-logo {
    filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    transition: filter 0.3s ease;
}

#header.scrolled #header-logo {
    filter: none;
}

/* ===== NANO MINELIA Page Specific Styles ===== */
.nanominelia-page {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 100%);
}

.lp-image-container {
    /* Remove vertical space between images */
    font-size: 0; 
    line-height: 0;
}

/* ===== Purchase Bar Styles ===== */
.purchase-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 40;
}

.pb-purchase-bar {
    padding-bottom: 90px;
}