/* rational.group -- Surreal Metaphysical Think-Tank */
:root {
    --twilight: #2C2A35;
    --stone: #E8E4DF;
    --lavender: #A78BBA;
    --plum-body: #4A4655;
    --lilac-body: #B8B2C0;
    --slate: #7B8794;
    --amber: #D4A857;
    --coral: #C97B6B;
    --blue-wash: #B8D4E3;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--plum-body); background: var(--stone); overflow-x: hidden; }

/* Sidebar nav */
.sidebar-nav {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}
.sidebar-nav.visible { opacity: 1; }
.nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--slate);
    cursor: pointer;
    transition: transform 0.2s, background 0.2s, border-color 0.2s;
}
.nav-dot:hover { transform: scale(1.4); background: rgba(167,139,186,0.3); }
.nav-dot.active { background: var(--lavender); border-color: var(--lavender); animation: dot-pulse 2s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* Scenes */
.scene {
    min-height: 90vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 80px 80px 80px 100px;
}
.scene-light { background: var(--stone); }
.scene-dark { background: var(--twilight); }

.scene-content {
    max-width: 680px;
    position: relative;
    z-index: 5;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.scene-content.visible { opacity: 1; transform: scale(1); }

/* Labels */
.section-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lavender);
    display: block;
    margin-bottom: 12px;
}

/* Headings */
.hero-heading {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-style: italic;
    font-size: 56px;
    color: var(--twilight);
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin-bottom: 20px;
}
.section-heading {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 36px;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin-bottom: 20px;
    transition: font-weight 0.3s;
}
.heading-light { color: var(--twilight); }
.heading-dark { color: var(--stone); }

/* Body text */
.body-light { color: var(--plum-body); }
.body-dark { color: var(--lilac-body); }

/* Content cards */
.content-card {
    padding: 32px;
    border-radius: 8px;
    margin-bottom: 24px;
    position: relative;
}
.card-light {
    background: rgba(255,255,255,0.5);
    box-shadow: 0 24px 64px rgba(44,42,53,0.12);
    transition: box-shadow 0.3s;
}
.card-light:hover { box-shadow: 0 32px 80px rgba(44,42,53,0.16); }
.card-dark {
    background: rgba(255,255,255,0.04);
    box-shadow: 0 24px 64px rgba(0,0,0,0.2);
    transition: box-shadow 0.3s;
}
.card-dark:hover { box-shadow: 0 32px 80px rgba(0,0,0,0.25); }

/* Shadow planes */
.shadow-plane {
    position: absolute;
    background: rgba(184,212,227,0.15);
    box-shadow: 0 16px 48px rgba(44,42,53,0.1);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.shadow-plane.visible { opacity: 1; }
.sp-1 { width: 120px; height: 80px; top: 15%; right: 10%; transform: rotate(3deg) translateX(80px); }
.sp-1.visible { transform: rotate(3deg) translateX(0); }
.sp-2 { width: 90px; height: 60px; bottom: 20%; left: 8%; transform: rotate(-4deg) translateY(60px); }
.sp-2.visible { transform: rotate(-4deg) translateY(0); }
.sp-3 { width: 100px; height: 70px; top: 20%; left: 15%; transform: rotate(5deg) translateX(-80px); }
.sp-3.visible { transform: rotate(5deg) translateX(0); }
.sp-4 { width: 80px; height: 100px; bottom: 15%; right: 12%; transform: rotate(-2deg) translateY(60px); }
.sp-4.visible { transform: rotate(-2deg) translateY(0); }

/* Collage fragments */
.collage-frag {
    position: absolute;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.collage-frag.visible { opacity: 1; }
.frag-1 { width: 60px; height: 40px; top: 25%; right: 5%; background: rgba(201,123,107,0.2); transform: rotate(20deg); clip-path: polygon(5% 0%, 100% 3%, 97% 100%, 0% 95%); }
.frag-1.visible { transform: rotate(8deg); }
.frag-2 { width: 50px; height: 60px; bottom: 15%; left: 5%; background: rgba(167,139,186,0.15); transform: rotate(-18deg); clip-path: polygon(3% 0%, 100% 5%, 95% 100%, 0% 97%); }
.frag-2.visible { transform: rotate(-5deg); }
.frag-3 { width: 70px; height: 45px; top: 10%; right: 8%; background: rgba(201,123,107,0.2); transform: rotate(15deg); clip-path: polygon(0% 2%, 97% 0%, 100% 98%, 4% 100%); }
.frag-3.visible { transform: rotate(6deg); }
.frag-4 { width: 55px; height: 55px; bottom: 20%; left: 10%; background: rgba(167,139,186,0.15); transform: rotate(-20deg); clip-path: polygon(2% 0%, 100% 4%, 96% 100%, 0% 95%); }
.frag-4.visible { transform: rotate(-7deg); }

/* Window frames */
.window-frame {
    position: absolute;
    border: 1px solid var(--slate);
    width: 200px;
    height: 280px;
    z-index: 3;
    pointer-events: none;
}
.wf-1 { top: 10%; right: -40px; }
.wf-2 { bottom: 5%; left: -60px; }

/* Candle */
.candle {
    position: absolute;
    width: 20px;
    z-index: 4;
}
.candle-top { top: 20px; right: 60px; }
.candle-bottom { bottom: 20px; right: 80px; }
.flame { animation: flicker 1.5s ease-in-out infinite alternate; transform-origin: center bottom; }
@keyframes flicker {
    0% { transform: scaleY(0.95) translateX(-1px); }
    50% { transform: scaleY(1.05) translateX(1px); }
    100% { transform: scaleY(0.98) translateX(-0.5px); }
}
.candle-glow {
    position: absolute;
    top: -40px;
    left: -50px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,168,87,0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Constellation */
.constellation {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.constellation svg { width: 100%; height: 100%; }
.const-dot { opacity: 0; transition: opacity 0.3s ease-out; }
.const-line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 0.6s ease-out;
}
.constellation.visible .const-dot { opacity: 0.4; }
.constellation.visible .const-line { stroke-dashoffset: 0; }

@media (max-width: 768px) {
    .scene { padding: 60px 24px 60px 24px; }
    .sidebar-nav { display: none; }
    .hero-heading { font-size: 36px; }
    .section-heading { font-size: 28px; }
    .window-frame { display: none; }
    .content-card { padding: 24px; }
}