/* --- Japanese Modern Aesthetic --- */
:root {
    --gold: #C5A059;
    --black: #1A1A1A;
    --white: #FFFFFF;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--black);
    line-height: 1.8;
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
}

/* =============================================
   Scroll Animations
   ============================================= */

/* Default hidden state for animated elements */
.anim-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.anim-fade-in {
    opacity: 0;
    transition: opacity 0.8s ease;
}
.anim-slide-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.anim-slide-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Visible state (added by IntersectionObserver) */
.anim-fade-up.in-view,
.anim-fade-in.in-view,
.anim-slide-left.in-view,
.anim-slide-right.in-view {
    opacity: 1;
    transform: none;
}

/* Staggered delays for child elements */
.anim-stagger > *:nth-child(1) { transition-delay: 0.0s; }
.anim-stagger > *:nth-child(2) { transition-delay: 0.15s; }
.anim-stagger > *:nth-child(3) { transition-delay: 0.30s; }
.anim-stagger > *:nth-child(4) { transition-delay: 0.45s; }
.anim-stagger > *:nth-child(5) { transition-delay: 0.60s; }
.anim-stagger > *:nth-child(6) { transition-delay: 0.75s; }

/* Section Spacing (As requested) */
section {
    position: relative;
    /* margin-bottom is handled by tailwind classes in index.html as per specific requirements per section */
}

/* Header Glassmorphism */
header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

/* First View (FV) Swiper */
.fv-swiper {
    width: 100%;
}

/* picture element must also be block to remove inline gap */
.fv-swiper .swiper-slide picture {
    display: block;
    line-height: 0;
}

.fv-img {
    width: 100%;
    height: auto;         /* natural aspect ratio – no cropping */
    display: block;
}

/* Vertical Align Bottom for images as requested */
img {
    vertical-align: bottom;
}

/* Parallax Background */
.bg-fixed {
    background-attachment: fixed;
}
@media (max-width: 1024px) {
    .bg-fixed {
        background-attachment: scroll; /* Mobile doesn't support fixed background well */
    }
}

/* Broken Grid / Asymmetry Accents */
.broken-grid-image {
    position: relative;
    padding-left: 20px;
}
.broken-grid-image::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gray-100);
    z-index: -1;
}

/* Swiper Pagination */
.swiper-pagination-bullet-active {
    background: var(--gold) !important;
}

/* Hamburger Transition */
#menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
#menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
#menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* SP Full Screen Menu Links */
.sp-link {
    position: relative;
    padding: 10px 0;
    overflow: hidden;
}
.sp-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width 0.3s ease;
}
.sp-link:hover::after {
    width: 100%;
}

/* Gallery Hover effect (minimal as requested) */
.gallery-item {
    display: block;
    overflow: hidden;
    position: relative;
}
.gallery-item img {
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.gallery-item:hover img {
    transform: scale(1.05);
}

/* Section headings are now handled in index.html with plain text and borders */

/* --- Voice Section (Google Maps Style) --- */
.voice-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.voice-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.initial-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.review-content {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

.review-content.expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

.read-more-btn {
    color: #4285F4; /* Google Blue */
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 4px;
    display: inline-block;
}

.read-more-btn.hidden {
    display: none;
}

/* Swiper Navigation Custom */
.swiper-button-next, .swiper-button-prev {
    color: var(--gold) !important;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 1.5rem !important;
    font-weight: bold;
}
@media (max-width: 768px) {
    .swiper-button-next, .swiper-button-prev {
        display: none !important; /* Hide on small screens to save space */
    }
}

/* Fixed CTA SP Bottom */
@media (max-width: 1023px) {
    body {
        padding-bottom: 72px; /* For the fixed CTA */
    }
}

/* Utility: Custom Vertical Gap */
.mb-sp { margin-bottom: 80px; }
.mb-pc { margin-bottom: 120px; }

/* Text Selection/Right Click Prevention hints */
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}