/* martialaw.quest -- swiss immersive dossier */
/* Palette: #C0C4CC chrome, #E040A0 magenta, #39FF8B green, #0B0E1F navy, #161A2E slate, #2A2E40 wire, #E4E6EC white, #6A6E82 gray, #1A4A5E cyan, #8888AA noise */

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

:root{
    --chrome:#C0C4CC;
    --magenta:#E040A0;
    --green:#39FF8B;
    --navy:#0B0E1F;
    --slate:#161A2E;
    --wire:#2A2E40;
    --doc-white:#E4E6EC;
    --redact-gray:#6A6E82;
    --trace:#1A4A5E;
    --noise:#8888AA;
}

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

body{
    background:var(--navy);
    color:var(--doc-white);
    font-family:'Source Serif 4',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.1rem);
    line-height:1.8;
    letter-spacing:0.005em;
    overflow-x:hidden;
}

/* Progress line */
.progress-line{
    position:fixed;
    top:0;left:0;
    height:2px;
    background:var(--magenta);
    width:0%;
    z-index:1000;
    transition:width 0.1s linear;
}

/* Grain overlay */
.grain-overlay{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9998;
    opacity:0.03;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size:150px;
}

.grain-dense{
    position:absolute;
    z-index:1;
    opacity:0.08;
}

/* Circuit background */
.circuit-bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0.05;
    background:
        repeating-linear-gradient(90deg,transparent,transparent 59px,var(--trace) 59px,var(--trace) 60px),
        repeating-linear-gradient(0deg,transparent,transparent 59px,var(--trace) 59px,var(--trace) 60px);
    background-size:60px 60px;
}

.circuit-dense{opacity:0.08}

/* Swiss grid */
.swiss-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:24px;
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
    position:relative;
}

/* Swiss grid structural lines (subtle) */
.swiss-grid::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        repeating-linear-gradient(90deg,transparent,transparent calc(100%/12 - 2px),rgba(42,46,64,0.08) calc(100%/12 - 2px),rgba(42,46,64,0.08) calc(100%/12));
    pointer-events:none;
}

/* Sections */
.section{
    min-height:100vh;
    position:relative;
    padding:clamp(4rem,8vw,8rem) 0;
}

/* Section 1: Hero */
.section-hero{
    display:flex;
    align-items:center;
}

.hero-grid{
    align-items:end;
    min-height:60vh;
}

.hero-martial{
    grid-column:1/7;
    font-family:'Inter',sans-serif;
    font-weight:800;
    font-size:clamp(4rem,9vw,9rem);
    letter-spacing:-0.02em;
    line-height:0.95;
    text-transform:uppercase;
    color:var(--doc-white);
    opacity:0;
    transform:translateY(12px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.hero-martial.revealed{
    opacity:1;
    transform:translateY(0);
}

.hero-rule{
    grid-column:1/-1;
    height:1px;
    background:var(--chrome);
    margin:1rem 0;
}

.hero-korean{
    grid-column:5/9;
    font-family:'Noto Sans KR','IBM Plex Mono',monospace;
    font-size:clamp(1rem,1.5vw,1.3rem);
    letter-spacing:0.06em;
    color:var(--chrome);
    display:flex;
    align-items:center;
    gap:4px;
}

.tw-cursor{
    display:inline-block;
    animation:blink 0.53s step-start infinite;
    color:var(--magenta);
}

@keyframes blink{50%{opacity:0}}

.hero-law{
    grid-column:7/13;
    text-align:right;
    font-family:'Inter',sans-serif;
    font-weight:800;
    font-size:clamp(4rem,9vw,9rem);
    letter-spacing:-0.02em;
    line-height:0.95;
    text-transform:uppercase;
    color:var(--doc-white);
    opacity:0;
    transform:translateY(12px);
    transition:opacity 0.6s ease 0.3s,transform 0.6s ease 0.3s;
}

.hero-law.revealed{
    opacity:1;
    transform:translateY(0);
}

/* Section 2: Chronology */
.section-chronology{
    padding-top:clamp(6rem,10vw,10rem);
}

.timeline-axis{
    position:absolute;
    left:50%;
    top:0;bottom:0;
    width:1px;
    background:var(--wire);
    transform:translateX(-50%);
}

.timeline-event{
    padding:clamp(1.5rem,3vw,2.5rem);
    margin-bottom:clamp(2rem,4vw,4rem);
    opacity:0;
    transform:translateY(12px);
    transition:opacity 0.5s ease-out,transform 0.5s ease-out;
}

.timeline-event.revealed{
    opacity:1;
    transform:translateY(0);
}

.event-left{grid-column:2/6}
.event-right{grid-column:8/12}

.event-date{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.8rem;
    letter-spacing:0.06em;
    color:var(--magenta);
    display:block;
    margin-bottom:0.5rem;
}

.event-heading{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:1.2rem;
    letter-spacing:0.01em;
    color:var(--doc-white);
    margin-bottom:0.5rem;
    visibility:hidden;
}

.event-heading.typed{visibility:visible}

.event-body{
    font-family:'Source Serif 4',serif;
    font-size:clamp(0.9rem,1vw,1rem);
    line-height:1.8;
    color:var(--doc-white);
    opacity:0;
    transition:opacity 0.6s ease-out 0.5s;
}

.timeline-event.revealed .event-body{
    opacity:1;
}

/* Section 3: Evidence Wall */
.section-evidence{
    background:var(--slate);
}

.evidence-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:8px;
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
}

.evidence-block{
    background:var(--slate);
    border:1px solid var(--wire);
    padding:24px;
    opacity:0;
    transform:translateY(12px);
    transition:opacity 0.4s ease-out,transform 0.4s ease-out;
}

.evidence-block.revealed{
    opacity:1;
    transform:translateY(0);
}

.eb-wide{grid-column:span 5}
.eb-standard{grid-column:span 4}
.eb-narrow{grid-column:span 3}
.eb-redacted{
    grid-column:span 3;
    background:var(--wire);
    min-height:150px;
    clip-path:polygon(0 0,100% 5%,95% 100%,5% 95%);
}

.evidence-title{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:1rem;
    letter-spacing:0.01em;
    color:var(--doc-white);
    margin-bottom:0.5rem;
}

.evidence-text{
    font-family:'Source Serif 4',serif;
    font-size:clamp(0.85rem,1vw,0.95rem);
    line-height:1.7;
    color:var(--doc-white);
}

/* Section 4: Resolution */
.section-resolution{
    display:flex;
    align-items:center;
}

.resolution-grid{
    align-items:center;
    min-height:60vh;
}

.resolution-content{
    grid-column:5/9;
    opacity:0;
    transform:translateY(12px);
    transition:opacity 0.6s ease-out,transform 0.6s ease-out;
}

.resolution-content.revealed{
    opacity:1;
    transform:translateY(0);
}

.resolution-text{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:clamp(1.2rem,2vw,1.8rem);
    letter-spacing:0.01em;
    line-height:1.5;
    color:var(--doc-white);
    visibility:hidden;
}

.resolution-text.typed{visibility:visible}

/* Responsive */
@media(max-width:768px){
    .swiss-grid{grid-template-columns:1fr;gap:16px}
    .hero-martial,.hero-law{grid-column:1;text-align:left;font-size:clamp(3rem,12vw,6rem)}
    .hero-korean{grid-column:1}
    .event-left,.event-right{grid-column:1}
    .timeline-axis{display:none}
    .evidence-grid{grid-template-columns:1fr}
    .eb-wide,.eb-standard,.eb-narrow,.eb-redacted{grid-column:1}
    .resolution-content{grid-column:1}
}

@media(prefers-reduced-motion:reduce){
    .hero-martial,.hero-law,.timeline-event,.evidence-block,.resolution-content{
        opacity:1;transform:none;transition:none;
    }
    .event-heading,.resolution-text{visibility:visible}
    .event-body{opacity:1;transition:none}
    .tw-cursor{animation:none;opacity:0}
}