/* p9.rs - Skeuomorphic Puzzle Box */
/* Colors: #E8DCC0, #3E3224, #8A6A40, #C4A050, #8A7A60, #342A1C, #3A2E20, #4A7A9A */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Source Sans 3', sans-serif;
    color: #E8DCC0; background: #3A2E20; overflow-x: hidden;
}

.walnut-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #3A2E20;
    background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(62,50,36,0.02) 10px, rgba(62,50,36,0.02) 12px);
    z-index: -1;
}

.brass-divider {
    position: fixed; left: 45%; top: 0; width: 4px; height: 0;
    background: linear-gradient(180deg, #C4A050, #8A6A40, #C4A050);
    z-index: 10; transform: translateX(-50%);
    transition: height 1.5s ease;
}
.brass-divider.drawn { height: 100%; }

.split-container {
    display: flex; min-height: 100vh; position: relative;
}

.panel {
    display: flex; align-items: center; justify-content: center;
    padding: 60px 40px; position: relative; overflow: hidden;
}
.panel-left { flex: 0 0 45%; background: #342A1C; }
.panel-right { flex: 0 0 55%; background: #3E3224; }

.panel-content { max-width: 400px; width: 100%; }

.mechanism-svg {
    position: absolute; pointer-events: none;
}
.mechanism-svg { top: 20px; right: 20px; width: 80px; height: 80px; }
.mech-right { top: 20px; left: 20px; width: 60px; height: 100px; }

.display-title {
    font-family: 'Source Serif 4', serif;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 700; color: #E8DCC0; margin-bottom: 16px;
    opacity: 0; animation: slideInLeft 0.8s ease 1.5s forwards;
}

.section-heading {
    font-family: 'Source Serif 4', serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700; color: #E8DCC0; margin-bottom: 12px;
}

.accent-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px; color: #C4A050; letter-spacing: 0.1em;
    display: block; margin-bottom: 8px;
}

.body-text {
    font-size: clamp(0.95rem, 1.05vw, 1.1rem);
    line-height: 1.8; color: #8A7A60; margin-bottom: 16px;
}

.brass-toggle {
    display: flex; align-items: center; gap: 12px; margin-top: 16px;
}
.toggle-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; color: #8A6A40; letter-spacing: 0.08em;
}
.toggle-switch {
    width: 44px; height: 22px; border-radius: 11px; cursor: pointer;
    background: linear-gradient(135deg, #8A6A40, #C4A050, #8A6A40);
    position: relative; transition: background 0.3s;
}
.toggle-knob {
    width: 18px; height: 18px; border-radius: 50%; position: absolute;
    top: 2px; left: 2px;
    background: linear-gradient(135deg, #E8DCC0, #C4A050);
    transition: left 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.toggle-switch.active .toggle-knob { left: 24px; }

.glass-viewfinder {
    background: rgba(74, 122, 154, 0.1); border: 1px solid rgba(74, 122, 154, 0.15);
    border-radius: 4px; padding: 8px 12px; margin-top: 12px;
}
.viewfinder-text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; color: #4A7A9A;
}

.code-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px; color: #8A7A60;
}
.code-value { color: #C4A050; }

.reveal {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 768px) {
    .split-container { flex-direction: column; }
    .panel-left, .panel-right { flex: 1; min-height: 50vh; }
    .brass-divider { display: none; }
}