/* moral.quest - Zen Philosophical Garden */
/* Colors: #E8E0E0, #D0D0D8, #808890, #1E1C20, #1A1418, #A8A0A0, #A0A0B0, #607050 */
/* Fonts: Playfair Display, Libre Baskerville, Space Mono */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #0E0C10; color: #E8E0E0; font-family: 'Libre Baskerville', serif; overflow-x: hidden; }

#zen-opening { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0E0C10; z-index: 1000; transition: opacity 1s ease 3s; }
#zen-opening.done { opacity: 0; pointer-events: none; }

.zen-stone { position: absolute; background: linear-gradient(135deg, #808890, #A8A0A0); border-radius: 40% 60% 50% 70% / 60% 40% 70% 50%; opacity: 0; animation: stoneFade 2s ease forwards; }
.s1 { width: 60px; height: 45px; top: 25%; left: 20%; animation-delay: 0.3s; }
.s2 { width: 80px; height: 55px; top: 45%; left: 50%; animation-delay: 0.8s; transform: translateX(-50%); }
.s3 { width: 50px; height: 40px; top: 65%; right: 20%; animation-delay: 1.3s; }
@keyframes stoneFade { to { opacity: 0.6; } }

.gravel-lines { position: absolute; bottom: 30%; left: 15%; right: 15%; display: flex; flex-direction: column; gap: 6px; opacity: 0; animation: gravelFade 1s ease 2s forwards; }
.gravel-line { width: 100%; height: 1px; background: #A0A0B0; opacity: 0.2; }
@keyframes gravelFade { to { opacity: 1; } }

#garden-path { position: relative; }

.moral-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; clip-path: polygon(0 0, 100% 3%, 100% 97%, 0 100%); margin-bottom: -60px; padding: 4rem 2rem; }
.dark-section { background: #1A1418; }
.light-section { background: #1E1C20; }

.section-content { max-width: 700px; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
.section-content.visible { opacity: 1; transform: translateY(0); }

.section-label { font-family: 'Space Mono', monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: #607050; display: block; margin-bottom: 1.5rem; }

.dilemma-title { font-family: 'Playfair Display', serif; font-weight: 400; font-style: italic; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: 0.01em; color: #E8E0E0; margin-bottom: 1.5rem; line-height: 1.3; }
.dilemma-title em { font-style: italic; }

.dilemma-body { font-family: 'Libre Baskerville', serif; font-size: 1rem; line-height: 1.85; color: #A8A0A0; }

.zen-stone-accent { position: absolute; width: 50px; height: 35px; background: linear-gradient(135deg, #808890, #A0A0B0); border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%; opacity: 0.15; }

.moral-fork { min-height: 80vh; display: grid; grid-template-columns: 1fr 4px 1fr; gap: 0; background: #1A1418; padding: 4rem 2rem; align-items: center; }
.fork-divider { width: 4px; height: 200px; background: linear-gradient(to bottom, #607050, #A0A0B0); justify-self: center; }
.fork-left, .fork-right { padding: 2rem; text-align: center; }
.fork-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.5rem; color: #D0D0D8; margin-bottom: 1rem; }
.fork-body { font-family: 'Libre Baskerville', serif; font-size: 0.9rem; line-height: 1.8; color: #808890; }

.closing-section { min-height: 60vh; }
.closing-lines { margin-top: 2rem; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.closing-lines .gravel-line { width: 200px; }

@media (max-width: 768px) {
    .moral-fork { grid-template-columns: 1fr; }
    .fork-divider { width: 200px; height: 2px; justify-self: center; margin: 1rem 0; }
}