@import "../custom/zmobile adaptation/mobile-global.css";

/* ==========================================================================
   MAERS Space - Core Stylesheet
   ========================================================================== */

/* 2. Basic Resets & Performance */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    background-color: var(--bg-base);
    transition: background-color 1.2s ease;
}

html.light-mode {
    background-color: var(--bg-light-base);
}

body {
    font-family: var(--font-main);
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    background: transparent;
    transition: color 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}


/* 3. Theme Mask (Animated Background) */
#theme-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    background-color: #141417;
    background-image:
        url('data:image/svg+xml;charset=utf-8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noise)" opacity="0.02"/%3E%3C/svg%3E'),
        radial-gradient(80% 80% at 50% -20%, rgba(40, 40, 55, 0.4) 0%, transparent 60%),
        linear-gradient(180deg, #141417 0%, #0a0a0c 100%);
    clip-path: circle(150% at 100% 0%);
    transition: clip-path 1.6s cubic-bezier(0.22, 1, 0.36, 1);
    /* GPU 硬件加速 */
    transform: translateZ(0);
    will-change: clip-path;
}

#theme-mask::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 100px 150px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.2px 1.2px at 200px 80px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 300px 250px, rgba(255, 255, 255, 0.7), transparent);
    background-size: 400px 400px;
    animation: stars-random-flicker 50s infinite linear;
}

@keyframes stars-random-flicker {
    0% {
        opacity: 0.5;
    }

    3% {
        opacity: 0.2;
    }

    18% {
        opacity: 0.6;
    }

    22% {
        opacity: 0.15;
    }

    41% {
        opacity: 0.55;
    }

    47% {
        opacity: 0.25;
    }

    63% {
        opacity: 0.65;
    }

    68% {
        opacity: 0.18;
    }

    84% {
        opacity: 0.45;
    }

    91% {
        opacity: 0.3;
    }

    100% {
        opacity: 0.5;
    }
}

/* 内联CSS的 !important 会覆盖这个，允许动画正常工作 */
html.light-mode #theme-mask {
    clip-path: circle(0% at 100% 0%);
}

html.light-mode #theme-mask::after {
    display: none;
}

/* 4. Core Layout */
.container {
    width: 100%;
    min-height: 104.5vh;
    height: auto;
    padding: 40px 20px 60px 20px;
    display: flex;
    flex-direction: column;
}


/* 7. Special View States (Shrink/Zoom) */
html.shrink-view body {
    overflow: hidden !important;
    transform: none !important;
    border-radius: 0;
    box-shadow: none;
}

html.shrink-view .container {
    cursor: zoom-out;
    height: 100vh;
    overflow: hidden;
}

/* Global Image Hover Effects */
.vditor-reset img,
.markdown-body img {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    cursor: zoom-in;
}

.vditor-reset img:hover,
.markdown-body img:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

html.shrink-view .main-card,
html.shrink-view .home-container {
    transform: scale(0.65);
    /* Slightly larger for better visibility */
    transform-origin: center center;
    border-radius: 40px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.5s, box-shadow 0.5s;
    cursor: auto;
    pointer-events: auto;
}

html.shrink-view .zoom-trigger-icon,
html.shrink-view .zoom-trigger-whole {
    z-index: 9999;
    /* filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)) !important; Removed glow */
}

html.shrink-view::after {
    display: none;
}

.zoom-trigger-icon,
.zoom-trigger-whole {
    cursor: pointer;
    display: inline-block;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    user-select: none;
    position: relative;
    z-index: 10;
}

.zoom-trigger-icon:hover,
.zoom-trigger-whole:hover {
    transform: scale(1.15);
    /* filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)) !important; Removed glow */
    cursor: pointer;
}

/* 8. Lightbox State */
body.is-viewing .theme-switch-wrapper,
body.is-viewing .auto-mode-btn {
    opacity: 0.1 !important;
    filter: grayscale(100%) !important;
    transform: scale(0.9);
    transition: all 0.5s ease;
    pointer-events: auto !important;
    z-index: 10001 !important;
}

body.is-viewing .theme-switch-wrapper:hover,
body.is-viewing .auto-mode-btn:hover {
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1);
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* Helper class for SVG icons in Navigation Cards */
.nav-icon-img {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    object-fit: contain;
    display: inline-block;
}

/* ==========================================================================
   Fixed Layout Utility - Photos Model
   ========================================================================== */
/* Standardizes layout: fixed 100vh container + hidden card overflow */
/* Content areas (.photo-grid, .folder-grid, etc.) handle their own scrolling */
/* Page itself remains scrollable (NO overflow:hidden on html/body) */

html.fixed-layout-page .container {
    height: 100vh !important;
    padding: 15px !important;
    display: flex;
    flex-direction: column;
}

html.fixed-layout-page .main-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: none !important;
}

/* ==========================================================================
   Global Custom Scrollbar
   ========================================================================== */
/* Unified scrollbar styles for all scrollable containers */

.photo-grid,
.folder-grid,
.drawer-body,
.reader-view,
.reader-scroll-area,
.gallery-content,
.admin-content {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

.photo-grid::-webkit-scrollbar,
.folder-grid::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar,
.reader-view::-webkit-scrollbar,
.reader-scroll-area::-webkit-scrollbar,
.gallery-content::-webkit-scrollbar,
.admin-content::-webkit-scrollbar {
    display: block;
    width: 6px;
    height: 6px;
    background-color: transparent;
}

.photo-grid::-webkit-scrollbar-track,
.folder-grid::-webkit-scrollbar-track,
.drawer-body::-webkit-scrollbar-track,
.reader-view::-webkit-scrollbar-track,
.reader-scroll-area::-webkit-scrollbar-track,
.gallery-content::-webkit-scrollbar-track,
.admin-content::-webkit-scrollbar-track {
    background-color: transparent;
}

.photo-grid::-webkit-scrollbar-thumb,
.folder-grid::-webkit-scrollbar-thumb,
.drawer-body::-webkit-scrollbar-thumb,
.reader-view::-webkit-scrollbar-thumb,
.reader-scroll-area::-webkit-scrollbar-thumb,
.gallery-content::-webkit-scrollbar-thumb,
.admin-content::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 10px;
}

.photo-grid::-webkit-scrollbar-thumb:hover,
.folder-grid::-webkit-scrollbar-thumb:hover,
.drawer-body::-webkit-scrollbar-thumb:hover,
.reader-view::-webkit-scrollbar-thumb:hover,
.reader-scroll-area::-webkit-scrollbar-thumb:hover,
.gallery-content::-webkit-scrollbar-thumb:hover,
.admin-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

/* Light mode overrides specific to these classes */
html.light-mode .photo-grid::-webkit-scrollbar-thumb,
html.light-mode .folder-grid::-webkit-scrollbar-thumb,
html.light-mode .gallery-content::-webkit-scrollbar-thumb,
html.light-mode .admin-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.6);
}

html.light-mode .photo-grid::-webkit-scrollbar-thumb:hover,
html.light-mode .folder-grid::-webkit-scrollbar-thumb:hover,
html.light-mode .gallery-content::-webkit-scrollbar-thumb:hover,
html.light-mode .admin-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.8);
}