/* Mobile Specific Styles (768px and below) */
@media screen and (max-width: 768px) {
    /* Logo adjustments: Three-stage sequence V5 (Logic & Visual separation) */
    .logo-container {
        width: fit-content;
        left: 50%;
        top: 50vh;
        transform: translate(-50%, -50%) scale(1.0);
        opacity: 0;
        transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                    top 1.2s cubic-bezier(0.65, 0, 0.35, 1), 
                    opacity 1s ease-out;
    }

    .logo-container.is-oversized {
        transform: translate(-50%, -50%) scale(2.5); /* Stage 1: Massive */
    }

    .logo-container:not(.fade-out) {
        opacity: 1;
    }

    .logo-container.is-captured {
        /* Stage 2: Fit within screen at center */
        transform: translate(-50%, -50%) scale(1.0); 
    }

    .logo-container.at-corner {
        /* Stage 3: Move to top WITHOUT changing scale (already 1.0 from Stage 2) */
        top: 64px;
        transform: translate(-50%, 0) scale(1.0); 
        transform-origin: center center;
    }

    /* Hamburger Menu Button (Removed in V8) */

    /* Main Navigation for Mobile (No full-screen background) */
    #main-nav {
        position: fixed;
        inset: auto 24px 100px auto; /* Float from bottom-right area */
        width: auto;
        height: auto;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        padding: 0;
        gap: 1rem;
        z-index: 40;
        opacity: 0;
        pointer-events: none;
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transform: translateX(20px);
    }

    #main-nav.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }

    .menu-item {
        font-size: 1.25rem;
        text-align: right;
        width: fit-content;
        opacity: 1;
        font-family: 'Noto Serif JP', serif;
        font-weight: 700;
        letter-spacing: 0.1em;
        padding: 0.75rem 1.5rem;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 99px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #1a1a1a;
        transition: all 0.3s ease;
    }

    .dark .menu-item {
        background: rgba(30, 30, 30, 0.7);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        color: #f0f0f0;
    }

    /* Company Info (Content Panel) on Mobile - Immersive V9 */
    #company-info {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        margin: 0;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.4); /* Highly transparent */
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        border: none;
        z-index: 3000;
    }

    .dark #company-info {
        background: rgba(10, 10, 10, 0.4);
    }

    #main-nav.is-compact {
        opacity: 0;
        pointer-events: none;
        transform: translateX(20px);
    }

    #company-info .px-12 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    #company-info .pb-24 {
        padding-bottom: 8rem;
    }

    #company-info h2 {
        font-size: 2.25rem;
        line-height: 1.3;
        margin-bottom: 2rem;
    }

    #company-info .text-xl {
        font-size: 1.25rem;
        line-height: 1.6;
    }

    /* Back Button Area */
    #company-info .sticky {
        padding: 1.5rem;
        background: transparent;
    }

    /* Sections adjustment */
    .space-y-16 > * + * {
        margin-top: 2.5rem;
    }

    /* Footer adjustments */
    footer {
        bottom: 24px;
        left: 24px;
        transform: none;
        width: auto;
        text-align: left;
    }

    /* Instagram Feed (Mobile-specific top-left scaling) */
    #instagram-feed {
        position: fixed;
        top: 160px;
        left: 12px;
        margin: 0;
        transform: scale(0.55);
        transform-origin: top left;
        z-index: 1000;
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: opacity 1.5s ease-out;
    }

    #instagram-feed.is-visible {
        opacity: 1;
        pointer-events: auto;
        transform: scale(0.55); /* Keep scale fixed for SP */
    }

    #instagram-feed.is-expanded {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        width: min-content;
        max-width: 95vw;
        max-height: 92vh;
        padding: 2px;
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.7);
        background: white;
        z-index: 2000;
        overflow-y: auto; /* Only for small screen safety */
    }

    .dark #instagram-feed.is-expanded {
        background: #1a1a1a;
    }

    #instagram-feed.is-expanded .news-trigger-badge {
        display: none;
    }
}