/* ppzz.lu -- Luxury Art Deco, Gold & Marble */
:root {
    --gold: #C5A258;
    --obsidian: #1B1B1F;
    --calacatta: #F2EDE4;
    --ivory: #E8E0D0;
    --walnut: #2C2826;
    --patina: #8B7332;
    --deep-patina: #6B5722;
    --rosa: #D4A59A;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-snap-type: y mandatory; scroll-behavior: smooth; }
body { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 18px; line-height: 1.75; color: var(--ivory); background: var(--obsidian); overflow-x: hidden; }

.fixed-header { position: fixed; top: 0; left: 0; right: 0; height: 48px; display: flex; align-items: center; justify-content: center; gap: 16px; z-index: 100; background: rgba(27,27,31,0.9); }
.header-logo { font-family: 'Poiret One', cursive; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.header-chevron, .header-diamond { color: var(--gold); font-size: 10px; opacity: 0.6; }

.axis-line { position: fixed; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--gold); opacity: 0.15; z-index: 50; transform: scaleY(0); transform-origin: top; transition: transform 0.6s ease-in-out; pointer-events: none; }
.axis-line.on { transform: scaleY(1); }

.chamber { min-height: 100vh; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 48px; overflow: hidden; }

.chamber-hero { background: var(--obsidian); }
.sunburst-bg { position: absolute; width: 100%; height: 100%; opacity: 0.05; pointer-events: none; }
.sunburst-bg svg { width: 100%; height: 100%; }

.monogram-seal { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.5s, transform 0.5s; }
.monogram-seal.on { opacity: 1; }
.seal-ring-outer { position: absolute; inset: 0; border: 1px solid var(--gold); border-radius: 50%; }
.seal-ring-inner { position: absolute; inset: 4px; border: 1px solid var(--gold); border-radius: 50%; }
.seal-text { font-family: 'Cinzel Decorative', cursive; font-weight: 700; font-size: 36px; color: var(--gold); text-shadow: 0 1px 0 var(--patina), 0 2px 0 var(--deep-patina); }
.seal-small { width: 64px; height: 64px; opacity: 1; }
.seal-small .seal-text { font-size: 18px; }

.hero-title { font-family: 'Poiret One', cursive; font-size: 72px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-top: 24px; opacity: 0; transition: opacity 0.5s; }
.hero-title.on { opacity: 1; }

.chevron-cascade { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 40px; }
.chevron-mark { color: var(--gold); font-size: 18px; opacity: 0; transition: opacity 0.3s; }
.chevron-mark.on { opacity: 0.6; }

.chamber-bilateral { flex-direction: row; flex-wrap: wrap; gap: 0; }
.wing { width: 45%; padding: 40px; }
.wing-left { text-align: right; }
.wing-right { text-align: left; }
.section-title { font-family: 'Poiret One', cursive; font-size: 42px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; opacity: 0; transform: translateY(20px); transition: opacity 0.5s, transform 0.5s; }
.section-title.visible { opacity: 1; transform: translateY(0); }
.dark-title { color: var(--obsidian); }
.body-text { font-weight: 300; opacity: 0; transform: translateY(12px); transition: opacity 0.4s 0.2s, transform 0.4s 0.2s; }
.body-text.visible { opacity: 1; transform: translateY(0); }
.dark-text { color: var(--walnut); }

.marble-band { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--calacatta) 0%, var(--ivory) 30%, var(--rosa) 50%, var(--ivory) 70%, var(--calacatta) 100%); opacity: 0.4; }

.chamber-light { background: var(--calacatta); }
.marble-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, rgba(212,165,154,0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(197,162,88,0.08) 0%, transparent 40%); pointer-events: none; }

.chamber-keystone { background: var(--obsidian); }
.keystone-sunburst { width: 300px; height: 300px; opacity: 0; transform: scale(0.8); transition: opacity 0.6s, transform 0.6s; }
.keystone-sunburst.on { opacity: 1; transform: scale(1); }
.sunburst-svg { width: 100%; height: 100%; animation: slow-rotate 360s linear infinite; }
@keyframes slow-rotate { to { transform: rotate(360deg); } }
.keystone-title { font-family: 'Poiret One', cursive; font-size: 42px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-top: 24px; }

.chamber-footer { background: var(--obsidian); min-height: 50vh; }
.footer-text { font-family: 'Poiret One', cursive; font-size: 14px; letter-spacing: 0.18em; color: var(--gold); margin-top: 16px; opacity: 0.6; }
.ziggurat-border { width: 200px; height: 12px; margin-top: 24px; background: repeating-linear-gradient(90deg, var(--gold) 0px, var(--gold) 2px, transparent 2px, transparent 8px); opacity: 0.3; }

@media (max-width: 768px) {
    .chamber-bilateral { flex-direction: column; }
    .wing { width: 100%; text-align: center; }
    .hero-title { font-size: 36px; }
    .section-title { font-size: 28px; }
    .keystone-sunburst { width: 200px; height: 200px; }
}