/* mysterious.boo */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0a1a0a; color: #b8c8a8; font-family: 'Lato', sans-serif; font-weight: 400; line-height: 1.8; }
.tree-line { position: fixed; width: 2px; height: 100vh; background: rgba(100,120,80,0.15); pointer-events: none; z-index: 0; }
.t1 { left: 8%; }
.t2 { left: 25%; }
.t3 { right: 20%; }
.t4 { right: 7%; }
.hero { min-height: 80vh; display: flex; align-items: center; justify-content: center; position: relative; padding: 4rem 2rem; }
.fog-layer { position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background: linear-gradient(transparent, rgba(180,200,160,0.06)); pointer-events: none; }
.hero-content { text-align: center; position: relative; z-index: 1; }
.brand-container { position: relative; display: inline-block; }
.brand { font-family: 'Cormorant', serif; font-weight: 300; font-size: clamp(2rem, 5vw, 3.5rem); }
.eye-icon { position: absolute; right: -2.5rem; top: 50%; transform: translateY(-50%); width: 1.2rem; height: 0.8rem; border: 1px solid #3a4a3a; border-radius: 50%; opacity: 0.4; }
.eye-icon::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0.3rem; height: 0.3rem; background: #3a4a3a; border-radius: 50%; opacity: 0.6; }
.entry-label { font-family: 'Fira Code', monospace; font-size: 0.5rem; color: #3a4a3a; display: block; margin-top: 0.5rem; }
.tagline { font-size: 0.85rem; color: #4a7a4a; margin-top: 0.5rem; }
.fog-divider { height: 100px; background: radial-gradient(ellipse at center, rgba(180,200,160,0.06), transparent); }
.stories { max-width: 520px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 1; }
.story-panel { background: #111a11; padding: 2.5rem; border-radius: 2px; }
.story-title { font-family: 'Cormorant', serif; font-weight: 300; font-size: 1.3rem; margin-bottom: 0.75rem; }
.story-text { font-size: 0.8rem; color: #8a9a7a; }
.deep { min-height: 40vh; display: flex; align-items: center; justify-content: center; }
.candle-glow { width: 4px; height: 4px; border-radius: 50%; background: #4a7a4a; box-shadow: 0 0 30px rgba(74,122,74,0.3); }
.whisper { text-align: center; padding: 3rem 2rem; }
.whisper-text { font-family: 'Cormorant', serif; font-weight: 300; font-size: 0.45rem; color: #3a4a3a; letter-spacing: 0.2em; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }