/* martiallaw.wiki -- Y2K futurism knowledge sphere */
/* Palette: #C2603D terracotta, #D4A04A ochre, #A04030 clay, #1E1A17 titanium, #2A2420 bronze, #C8C0B4 silver, #E8E0D4 pearl, #EDE4D6 parchment, #8A7B6C copper, #D4C4A0 sepia */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --terracotta:#C2603D;
    --ochre:#D4A04A;
    --clay:#A04030;
    --titanium:#1E1A17;
    --bronze:#2A2420;
    --silver:#C8C0B4;
    --pearl:#E8E0D4;
    --parchment:#EDE4D6;
    --copper:#8A7B6C;
    --sepia:#D4C4A0;
    --bubble-tint:#D4A04A;
}

html{font-size:16px;scroll-behavior:smooth}

body{
    background:var(--titanium);
    color:var(--parchment);
    font-family:'Lora',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.1rem);
    line-height:1.8;
    letter-spacing:0.005em;
    overflow-x:hidden;
}

/* Bubbles */
.bubbles{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    overflow:hidden;
}

.bubble{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%,rgba(212,160,74,0.15),rgba(194,96,61,0.05));
    border:1px solid rgba(212,160,74,0.12);
    pointer-events:none;
}

.bubble::after{
    content:'';
    position:absolute;
    width:6px;height:6px;
    border-radius:50%;
    background:rgba(255,255,255,0.3);
    top:25%;left:25%;
}

/* Sections */
.section{
    position:relative;
    z-index:2;
}

/* Section 1: Hero */
.section-hero{
    min-height:120vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:linear-gradient(160deg,var(--titanium) 0%,#2A2018 50%,var(--titanium) 100%);
    opacity:0;
    animation:heroFadeIn 2s ease-out 0.3s forwards;
}

@keyframes heroFadeIn{
    to{opacity:1}
}

.hero-sphere{
    width:60vw;height:60vw;
    max-width:600px;max-height:600px;
    border-radius:50%;
    background:radial-gradient(circle at 40% 35%,rgba(232,224,212,0.12) 0%,rgba(194,96,61,0.06) 40%,rgba(30,26,23,0.02) 70%,transparent 100%);
    border:1px solid rgba(200,192,180,0.15);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    opacity:0;
    transition:opacity 1s ease;
}

.hero-sphere.revealed{opacity:1}

.sphere-highlight{
    position:absolute;
    top:15%;left:20%;
    width:40%;height:30%;
    border-radius:50%;
    background:radial-gradient(ellipse,rgba(232,224,212,0.08),transparent);
    pointer-events:none;
}

.hero-title{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(3.5rem,7vw,7rem);
    letter-spacing:0.02em;
    line-height:1.15;
    color:var(--parchment);
    text-align:center;
    position:relative;
    z-index:2;
}

.kinetic-letter{
    display:inline-block;
    transition:transform 0.6s ease-out;
}

.hero-subtitle{
    font-family:'Noto Serif KR',serif;
    font-weight:700;
    font-size:clamp(1.5rem,2.5vw,2.5rem);
    color:var(--terracotta);
    margin-top:2rem;
    opacity:0;
    transition:opacity 0.8s ease 0.5s;
}

.hero-subtitle.revealed{opacity:1}

/* Section 2: Index bar */
.index-bar{
    position:sticky;
    top:0;
    z-index:10;
    background:rgba(30,26,23,0.9);
    backdrop-filter:blur(12px);
    padding:16px 0;
    border-bottom:1px solid rgba(200,192,180,0.1);
    display:flex;
    justify-content:center;
    gap:1rem;
    flex-wrap:wrap;
}

.gel-btn{
    display:inline-flex;
    padding:8px 20px;
    border-radius:20px;
    background:rgba(194,96,61,0.12);
    border:1px solid rgba(194,96,61,0.2);
    color:var(--parchment);
    font-family:'Outfit',sans-serif;
    font-weight:400;
    font-size:0.85rem;
    letter-spacing:0.04em;
    text-decoration:none;
    box-shadow:inset 0 1px 2px rgba(255,255,255,0.08);
    transition:background 0.3s ease,box-shadow 0.3s ease;
}

.gel-btn:hover{
    background:rgba(194,96,61,0.25);
    box-shadow:inset 0 1px 3px rgba(255,255,255,0.12),0 0 8px rgba(194,96,61,0.15);
}

/* Section 3: Panels */
.section-panels{
    padding:clamp(4rem,8vw,8rem) clamp(1.5rem,3vw,3rem);
}

.panels-column{
    max-width:800px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:48px;
}

.knowledge-panel{
    border-radius:16px;
    background:rgba(255,240,225,0.04);
    backdrop-filter:blur(8px);
    border:1px solid rgba(200,192,180,0.08);
    overflow:hidden;
    opacity:0;
    transition:opacity 0.8s ease-out;
}

.knowledge-panel.revealed{opacity:1}

.chrome-bar{
    height:8px;
    background:linear-gradient(135deg,#C8C0B4 0%,#E8E0D4 40%,#C8C0B4 60%,#A8A098 100%);
}

.panel-content{
    padding:40px;
}

.panel-heading{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1.6rem,2.5vw,2.5rem);
    letter-spacing:0.02em;
    line-height:1.15;
    color:var(--parchment);
    margin-bottom:1rem;
}

.panel-body{
    font-family:'Lora',serif;
    font-weight:400;
    line-height:1.8;
    color:var(--parchment);
    margin-bottom:1rem;
}

.panel-body:last-child{margin-bottom:0}

/* Section 4: Archive */
.section-archive{
    padding:clamp(4rem,8vw,8rem) clamp(1.5rem,3vw,3rem);
}

.archive-panel{
    max-width:800px;
    margin:0 auto;
    border-radius:16px;
    overflow:hidden;
    position:relative;
    opacity:0;
    transition:opacity 0.8s ease-out;
}

.archive-panel.revealed{opacity:1}

.archive-texture{
    position:absolute;
    inset:0;
    background:
        repeating-linear-gradient(0deg,rgba(212,196,160,0.02),rgba(212,196,160,0.02) 2px,transparent 2px,transparent 4px),
        rgba(212,196,160,0.04);
    pointer-events:none;
}

.archive-content{
    position:relative;
    padding:clamp(2rem,4vw,4rem);
    z-index:2;
}

.archive-heading{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1.6rem,3vw,2.5rem);
    color:var(--parchment);
    margin-bottom:1rem;
}

.archive-body{
    font-family:'Lora',serif;
    font-weight:400;
    font-style:italic;
    font-size:clamp(1rem,1.5vw,1.3rem);
    line-height:1.8;
    color:var(--parchment);
}

/* Scroll orb */
.scroll-orb{
    position:fixed;
    bottom:1.5rem;right:1.5rem;
    width:24px;height:24px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 35%,rgba(212,160,74,0.3),rgba(194,96,61,0.15));
    border:1px solid rgba(212,160,74,0.2);
    cursor:pointer;
    z-index:100;
    animation:orbPulse 3s ease-in-out infinite;
}

@keyframes orbPulse{
    0%,100%{transform:scale(1);opacity:0.6}
    50%{transform:scale(1.15);opacity:0.9}
}

/* Responsive */
@media(max-width:768px){
    .hero-sphere{width:80vw;height:80vw}
    .index-bar{gap:0.5rem;padding:12px 1rem}
    .gel-btn{padding:6px 14px;font-size:0.75rem}
    .panel-content{padding:24px}
}

@media(prefers-reduced-motion:reduce){
    .section-hero{opacity:1;animation:none}
    .hero-sphere,.hero-subtitle,.knowledge-panel,.archive-panel{
        opacity:1;transition:none;
    }
    .kinetic-letter{transition:none}
    .bubble{display:none}
    .scroll-orb{animation:none;opacity:0.6}
}