:root {
    --bg-color: #f8f7f5;
    --text-primary: #1a1a1a;
    --text-secondary: #555555;
    --accent-color: #dcdcdc;
    --font-vogue: 'Bodoni Moda', serif; 
    --font-serif-zh: 'Noto Serif TC', serif;
    --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body { touch-action: manipulation; }

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-serif-zh), var(--font-vogue);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    line-height: 1.6;
}

/* Lock Screen */
.lock-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-color); z-index: 999; display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; }
.masthead { font-family: var(--font-vogue); font-size: 4.5rem; font-weight: 700; letter-spacing: 0.2em; margin-bottom: 5px; color: var(--text-primary); line-height: 1; }
.issue-no { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 2px; color: var(--text-secondary); margin-bottom: 50px; text-transform: uppercase; }
.lock-title { font-family: var(--font-vogue); font-size: 1.2rem; font-weight: 600; margin-bottom: 40px; color: var(--text-primary); letter-spacing: 2px; text-transform: uppercase; }
.input-group { display: flex; flex-direction: column; gap: 25px; width: 100%; max-width: 320px; margin: 0 auto; }
#access-code { background: transparent; border: none; border-bottom: 1px solid var(--text-primary); color: var(--text-primary); text-align: center; padding: 15px; font-size: 1.2rem; letter-spacing: 4px; outline: none; transition: 0.3s; border-radius: 0; font-family: var(--font-vogue); }
#access-code:focus { border-bottom-width: 2px; }
#access-code::placeholder { color: #bbb; font-size: 0.8rem; letter-spacing: 2px; font-family: var(--font-sans); }
.primary-btn { background: var(--text-primary); color: var(--bg-color); border: none; padding: 18px; font-family: var(--font-sans); font-weight: 600; cursor: pointer; letter-spacing: 3px; transition: 0.3s; text-transform: uppercase; font-size: 0.8rem; }
.primary-btn:hover { background: #333; }
.error-msg { color: #c24f4f; font-size: 0.8rem; height: 20px; margin-top: 15px; font-family: var(--font-sans); }
.lock-footer { margin-top: 60px; font-family: var(--font-sans); font-size: 0.75rem; color: var(--text-secondary); letter-spacing: 1px; }
.text-link { color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--accent-color); margin-left: 10px; padding-bottom: 2px; transition: 0.3s;}
.text-link:hover { border-bottom-color: var(--text-primary); }

/* Main App */
.container { width: 100%; padding: 20px 0; display: flex; flex-direction: column; gap: 30px; align-items: center; overflow-x: hidden; } 
.header { text-align: center; margin-bottom: 10px; width: 100%; }
.brand { font-family: var(--font-vogue); font-size: 0.9rem; letter-spacing: 2px; color: var(--text-primary); font-weight: 700; }
.upload-zone { width: 100%; max-width: 375px; height: 350px; border: 1px solid var(--accent-color); padding: 15px; cursor: pointer; transition: 0.3s; background: #fff; box-sizing: border-box; }
.upload-zone:hover { border-color: var(--text-primary); }
.upload-frame { width: 100%; height: 100%; background: var(--bg-color); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.plus-icon { font-size: 3rem; font-weight: 100; color: var(--accent-color); margin-bottom: 20px; }
.instruction { font-size: 1rem; margin-bottom: 10px; color: var(--text-primary); letter-spacing: 2px; }
.sub-instruction { font-family: var(--font-sans); color: var(--text-secondary); font-size: 0.7rem; letter-spacing: 1px; }
input[type="file"] { display: none; }

/* Loader */
.loader { text-align: center; padding: 80px 20px; font-family: var(--font-sans); display: flex; flex-direction: column; align-items: center; gap: 20px; }
.loading-text-container { height: 20px; overflow: hidden; }
.loading-text { font-size: 0.7rem; letter-spacing: 3px; color: var(--text-secondary); text-transform: uppercase; margin: 0; white-space: nowrap; }
.loading-bar { width: 200px; height: 1px; background: var(--accent-color); position: relative; overflow: hidden; }
.loading-progress { position: absolute; left: 0; top: 0; height: 100%; width: 30%; background: var(--text-primary); animation: progress-bar 1.5s infinite ease-in-out; }
@keyframes progress-bar { 0% { left: -30%; } 100% { left: 100%; } }

/* Magazine Cover - [移除 3D 變形] */
.magazine-cover-wrapper { 
    opacity: 0; 
    display: flex; justify-content: center; 
    /* 移除 perspective 以免影響截圖 */
}
.magazine-cover {
    background: #fff; padding: 0; border: none;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1), 0 4px 10px -5px rgba(0,0,0,0.05);
    overflow: hidden; position: relative; display: flex; flex-direction: column;
    width: 375px; height: 667px; min-width: 375px; min-height: 667px;
    /* 移除 scale(1.03)，保持 1:1 */
    transform-origin: center bottom;
}

.cover-header { position: absolute; top: 25px; left: 25px; right: 25px; display: flex; justify-content: space-between; font-family: var(--font-sans); font-size: 0.6rem; color: rgba(255,255,255,0.9); z-index: 10; letter-spacing: 2px; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 12px; font-weight: 600; }
.cover-image-container { position: relative; width: 100%; height: 62%; overflow: hidden; background: #e0e0e0; }

/* [乾淨] 移除 filter */
.image-layer { 
    width: 100%; height: 100%; 
    background-size: cover; background-position: center center; background-repeat: no-repeat; 
    transition: opacity 1s ease;
    opacity: 0; /* 進場前隱藏 */
}
.image-layer.developed { opacity: 1; }

/* [乾淨] 移除 mix-blend-mode */
.texture-overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.65) 100%); 
    pointer-events: none; 
}

.mask-reveal { overflow: hidden; position: relative; }
.cover-title-en { position: relative; z-index: 5; font-family: var(--font-vogue); font-size: 2.8rem; line-height: 0.9; color: #fff; margin: 0; font-weight: 700; letter-spacing: -0.02em; text-shadow: 0 2px 10px rgba(0,0,0,0.3); word-wrap: break-word; transform: translateY(100%); transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.cover-title-zh { position: relative; z-index: 5; font-family: var(--font-serif-zh); font-size: 1.1rem; color: rgba(255,255,255,0.95); margin: 0; font-weight: 300; letter-spacing: 0.1em; transform: translateY(100%); transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.cover-image-container .mask-reveal:nth-child(3) { position: absolute; bottom: 55px; left: 25px; right: 25px; z-index: 5; }
.cover-image-container .mask-reveal:nth-child(4) { position: absolute; bottom: 25px; left: 28px; z-index: 5; }

.editorial-content { padding: 30px 25px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; background: #fff; position: relative; z-index: 25; }
.section-title { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 2px; color: var(--text-secondary); text-transform: uppercase; margin: 0 0 12px 0; font-weight: 600; display: flex; align-items: center; gap: 10px; transform: translateY(100%); transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.section-title::before { content: ''; width: 20px; height: 1px; background: #000; display: block; }
.article-text { font-family: var(--font-serif-zh); font-size: 0.85rem; line-height: 1.8; color: var(--text-primary); margin-bottom: 15px; text-align: justify; font-weight: 300; transform: translateY(100%); transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.specs-container { display: flex; border-top: 1px solid var(--accent-color); padding-top: 15px; margin-bottom: 15px; transform: translateY(20px); opacity: 0; transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.spec-col { flex: 1; }
.spec-label { display: block; font-family: var(--font-sans); font-size: 0.6rem; color: var(--text-secondary); letter-spacing: 1px; margin-bottom: 4px; text-transform: uppercase;}
.spec-value { display: block; font-family: var(--font-vogue); font-size: 0.9rem; font-weight: 600; color: var(--text-primary); letter-spacing: 0.5px; line-height: 1.3; }
.zh-sub { display: block; font-family: var(--font-serif-zh); font-size: 0.7em; font-weight: normal; color: var(--text-secondary); margin-top: 2px; letter-spacing: 1px; }
.palette-section { margin-bottom: 5px; transform: translateY(20px); opacity: 0; transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.color-chips { display: flex; gap: 8px; margin-top: 5px;}
.chip { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }
.cover-footer { border-top: 1px solid var(--accent-color); padding-top: 15px; text-align: center; }
.signature { font-family: var(--font-vogue); font-style: italic; font-size: 0.75rem; color: var(--text-secondary); letter-spacing: 1px; }

/* Action Panel (置中) */
.action-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
    opacity: 0;
    transition: opacity 1s ease 1.5s;
}

.cta-guide { 
    font-size: 0.8rem; 
    color: var(--text-secondary); 
    margin-bottom: 15px; 
    font-family: var(--font-serif-zh); 
    letter-spacing: 1px;
    text-align: center;
}

.cta-btn { 
    display: block; width: 100%; max-width: 375px; 
    background: var(--text-primary); color: var(--bg-color); border: 1px solid var(--text-primary); 
    text-decoration: none; padding: 18px; 
    font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 2px; font-weight: 600; 
    margin-bottom: 12px; transition: 0.3s; text-transform: uppercase; cursor: pointer; 
    box-sizing: border-box; text-align: center;
}
.cta-btn:hover { background: #333; border-color: #333; }

.secondary-btn { 
    display: block; width: 100%; max-width: 375px; 
    background: transparent; border: 1px solid var(--text-primary); color: var(--text-primary); 
    padding: 18px; text-decoration: none; 
    font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 2px; cursor: pointer; 
    transition: 0.3s; text-transform: uppercase; box-sizing: border-box; text-align: center;
}
.secondary-btn:hover { background: var(--text-primary); color: var(--bg-color); }

.hidden { display: none !important; }

/* Animation - [移除所有 3D scale] */
.animate-in .magazine-cover-wrapper { opacity: 1; }
/* 改為單純的透明度變化，移除 paper-land 3D 動畫 */
.animate-in .magazine-cover { 
    opacity: 1; 
    transform: translateY(0);
    transition: opacity 1s ease, transform 1s ease;
}
.animate-in .cover-title-en, .animate-in .cover-title-zh, .animate-in .section-title, .animate-in .article-text { transform: translateY(0); }
.animate-in .specs-container, .animate-in .palette-section { transform: translateY(0); opacity: 1; }
.animate-in .action-panel { opacity: 1; }
.delay-1 * { transition-delay: 0.1s; } .delay-2 * { transition-delay: 0.2s; } .delay-3 * { transition-delay: 0.3s; } .delay-4 { transition-delay: 0.5s; } .delay-5 { transition-delay: 0.6s; }