/* Mobile Swipe Navigation */
/* Horizontal swipe between sections on mobile (<768px) */
/*
 * Architecture:
 * - All sections use white background (no theme switching)
 * - Each section is full viewport height, starts at top:0
 * - Section content is pushed below nav with padding-top
 * - Visualizations create their own wrapper inside the container
 */

/* ============================================
   DESKTOP: Hide mobile elements
   ============================================ */
.mobile-swipe-container {
    display: none;
}

.page-indicators {
    display: none;
}

/* ============================================
   MOBILE: Swipe Navigation
   ============================================ */
@media (max-width: 767px) {

    /* ============================================
       GLOBAL MOBILE STYLES
       Everything is white - no theme switching needed
       ============================================ */
    html {
        background-color: #FFFFFF;
    }

    body {
        background-color: #FFFFFF;
    }

    /* Remove pseudo-element overscroll colors - not needed with white */
    body::before,
    body::after {
        display: none !important;
    }

    /* ============================================
       NAVIGATION
       ============================================ */
    nav {
        background-color: #FFFFFF !important;
        transition: none !important;
    }

    .nav-links,
    .hamburger,
    .nav-dao {
        display: none !important;
    }

    .nav-container {
        justify-content: flex-start;
        gap: 8px;
        padding: 0 16px;
    }

    .nav-home {
        flex-shrink: 0;
    }

    .nav-home a:first-child {
        font-size: 13px;
        padding: 6px 12px;
        min-width: auto;
        /* Override tan text color - use white on black */
        color: #FFFFFF !important;
    }

    /* Remove hover effects on nav badge for mobile */
    .nav-home a:first-child:hover,
    .nav-home a:first-child:active {
        color: #FFFFFF !important;
    }

    .nav-home a:first-child::before {
        display: none !important;
    }

    .music-toggle {
        display: none !important;
    }

    /* Hide desktop sections */
    .main-content-area {
        display: none !important;
    }

    /* ============================================
       SWIPE CONTAINER & SECTIONS
       ============================================ */
    .mobile-swipe-container {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        background-color: #FFFFFF;
        z-index: 50;
    }

    .swipe-sections {
        display: flex;
        width: 100%;
        height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .swipe-sections::-webkit-scrollbar {
        display: none;
    }

    /* Base section styles - all sections use this */
    .swipe-section {
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: #FFFFFF;
        overscroll-behavior-y: contain;
        position: relative;
        /* iOS safe areas */
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* Standard content wrapper - pushed below nav */
    .swipe-section .section-content {
        padding: calc(var(--nav-height, 80px) + 20px) 20px 40px 20px;
        max-width: 100%;
    }

    /* ============================================
       PAGE INDICATORS
       ============================================ */
    .page-indicators {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        padding: 0;
        background: transparent;
    }

    .page-indicators .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: transparent;
        border: 1.5px solid var(--black, #000);
        transition: background-color 0.15s ease;
        cursor: pointer;
    }

    .page-indicators .dot.active {
        background: var(--black, #000);
    }

    /* ============================================
       CONTENT SECTIONS (questions, projects, blog)
       These just use the base .section-content padding
       ============================================ */
    .swipe-section .section-title {
        font-family: var(--font-heading);
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 20px;
        color: var(--color-text);
    }

    .swipe-section .souls-explainer {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 20px;
        max-width: 100%;
    }

    .swipe-section .souls-quotes {
        padding: 0 0 0 20px;
        margin: 0;
    }

    .swipe-section .souls-quotes li {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 12px;
    }

    #mobile-blog-content {
        font-size: 14px;
        line-height: 1.6;
    }

    #mobile-blog-content h3 {
        font-size: 18px;
        margin-bottom: 16px;
    }

    #mobile-blog-content h4 {
        font-size: 15px;
        margin-top: 20px;
        margin-bottom: 12px;
    }

    #mobile-blog-content p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 12px;
    }

    /* ============================================
       VISUALIZATION SECTIONS (exponential, home)
       Container keeps its class, viz creates wrapper inside
       ============================================ */
    #mobile-exponential,
    #mobile-home {
        overflow: hidden !important;
        /* Visualizations have their own background inside the wrapper */
    }

    .mobile-viz-container {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        /* Push content below nav */
        padding-top: var(--nav-height, 80px);
        box-sizing: border-box;
    }

    /* The wrapper created by JS - fills remaining space */
    /* Add extra 12px top offset to prevent cell clipping during birth animation */
    .mobile-viz-container .agi-life-canvas-container {
        position: absolute !important;
        top: calc(var(--nav-height, 80px) + 12px) !important;
        left: 0;
        right: 0;
        bottom: 0;
        /* Override JS-injected height: 100% */
        height: auto !important;
    }

    /* Wireframe canvas positioning */
    .mobile-viz-container .homepage-wireframe-canvas {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

    /* Badge positioning and styling */
    .mobile-viz-container .year-display-canvas {
        bottom: 32px !important;
        left: 20px !important;
        /* Override tan background - use white */
        background: #FFFFFF !important;
    }

    /* Allow swipe gestures through visualizations */
    .mobile-viz-container,
    .mobile-viz-container * {
        touch-action: pan-x !important;
    }

    .agi-life-canvas-container,
    .agi-life-canvas-container *,
    .grid-canvas-container,
    .grid-canvas-container * {
        pointer-events: none !important;
    }

    .year-display-canvas {
        pointer-events: auto !important;
    }

    /* ============================================
       CATS SECTION
       Same white background as everything else
       ============================================ */
    #mobile-cats {
        /* Uses default white background */
    }

    #mobile-cats-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 20px;
    }

    #mobile-cats .cats-button-container {
        margin-bottom: 0;
    }

    #mobile-cats-gallery .cat-wrapper {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
    }

    #mobile-cats-gallery picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    #mobile-cats-gallery img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    /* Button styling - static black bg, white text, no hover/active effects */
    .cats-refresh-btn {
        color: #FFFFFF !important;
        transition: none !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .cats-refresh-btn::after {
        background: var(--black) !important;
        transition: none !important;
    }

    /* Hide the hover overlay entirely */
    .cats-refresh-btn::before {
        display: none !important;
    }

    /* No color changes on any interaction */
    .cats-refresh-btn:hover,
    .cats-refresh-btn:active,
    .cats-refresh-btn:focus {
        color: #FFFFFF !important;
    }

    .cats-modal {
        z-index: 10000 !important;
    }

    /* ============================================
       DAO SECTION
       Has sub-header (language toggle) + scrollable reader
       ============================================ */
    #mobile-dao {
        display: flex !important;
        flex-direction: column !important;
        padding-top: var(--nav-height, 80px) !important;
        overflow: hidden !important;
    }

    .dao-mobile-header {
        flex-shrink: 0;
        background: #FFFFFF;
        padding: 12px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        z-index: 10;
    }

    .dao-language-toggle {
        display: flex;
        gap: 8px;
    }

    .dao-language-toggle .lang-btn {
        padding: 6px 12px;
        font-size: 12px;
        font-family: var(--font-heading);
        background: transparent;
        border: 1.5px solid var(--black, #000);
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s, color 0.2s;
        color: var(--black, #000);
        text-decoration: none;
    }

    .dao-language-toggle .lang-btn.active {
        background: var(--black, #000);
        color: #FFFFFF;
    }

    .dao-progress {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 12px;
        color: var(--color-text);
        opacity: 0.7;
    }

    .dao-mobile-reader {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        padding: 20px;
        padding-bottom: calc(40px + env(safe-area-inset-bottom, 0));
    }

    .dao-chapter {
        margin-bottom: 60px;
    }

    .dao-chapter:last-child {
        margin-bottom: 20px;
    }

    .dao-chapter h2 {
        font-family: 'IBM Plex Mono', 'Noto Sans SC', monospace;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 16px;
        color: var(--color-text);
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .dao-chapter .chapter-content {
        font-family: var(--font-body);
        font-size: 15px;
        line-height: 1.8;
        white-space: pre-wrap;
        color: var(--color-text);
    }

    /* ============================================
       DISABLE ALL TRANSITIONS
       ============================================ */
    body,
    html,
    nav,
    .swipe-section,
    .mobile-swipe-container {
        transition: none !important;
    }
}