/* martiallaw.quest -- bauhaus timeline */
/* Palette: #FF3E8A pink, #FFD23F yellow, #00D4FF cyan, #FF8C42 orange, #FAFAFA white, #FFFFFF card, #1A1A1A dark, #5A5A5A graphite, #FFE0EC blob */

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

:root{
    --pink:#FF3E8A;
    --yellow:#FFD23F;
    --cyan:#00D4FF;
    --orange:#FF8C42;
    --canvas:#FAFAFA;
    --card:#FFFFFF;
    --dark:#1A1A1A;
    --graphite:#5A5A5A;
    --blob:#FFE0EC;
}

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

body{
    background:var(--canvas);
    color:var(--dark);
    font-family:'Work Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.1rem);
    line-height:1.75;
    letter-spacing:0.005em;
    overflow-x:hidden;
}

/* Organic blobs */
.blobs{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
}

.blob{
    position:absolute;
    border-radius:30% 70% 60% 40% / 50% 30% 70% 50%;
    background:var(--blob);
    opacity:0.08;
    animation:drift 20s ease-in-out infinite alternate;
}

.blob-1{width:300px;height:300px;top:10%;left:-5%;animation-duration:18s}
.blob-2{width:250px;height:250px;bottom:20%;right:-8%;border-radius:60% 40% 30% 70% / 40% 60% 70% 30%;animation-duration:22s}
.blob-3{width:200px;height:200px;top:50%;left:60%;border-radius:40% 60% 50% 50% / 60% 40% 50% 50%;animation-duration:25s}
.blob-4{width:280px;height:280px;bottom:5%;left:20%;border-radius:50% 50% 40% 60% / 30% 70% 50% 50%;animation-duration:15s}

@keyframes drift{
    0%{transform:translate(0,0)}
    100%{transform:translate(30px,-20px)}
}

/* Dot navigation */
.dot-nav{
    position:fixed;
    right:1.5rem;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:1rem;
    z-index:100;
}

.dot{
    width:8px;height:8px;
    cursor:pointer;
    opacity:0.3;
    transition:opacity 0.3s ease;
}

.dot.active{opacity:1}

.dot-circle{
    border-radius:50%;
    background:var(--dot-color);
}

.dot-triangle{
    width:0;height:0;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-bottom:8px solid var(--dot-color);
}

.dot-square{
    background:var(--dot-color);
}

/* Timeline axis */
.timeline-axis{
    position:fixed;
    left:50%;
    top:0;bottom:0;
    width:6px;
    background:linear-gradient(to bottom,var(--yellow),var(--pink));
    transform:translateX(-50%);
    z-index:1;
    opacity:0;
    transition:opacity 0.5s ease;
    pointer-events:none;
}

.timeline-axis.visible{opacity:1}

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

/* Section 1: Thesis */
.section-thesis{
    background:var(--dark);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:100vh;
}

.thesis-shapes{
    position:relative;
    width:300px;height:300px;
    margin-bottom:2rem;
}

.shape{position:absolute}

.shape-circle{
    width:200px;height:200px;
    border-radius:50%;
    background:var(--pink);
    opacity:0.85;
    top:20px;left:50px;
    animation:shapeRotate 120s linear infinite;
}

.shape-triangle{
    width:0;height:0;
    border-left:110px solid transparent;
    border-right:110px solid transparent;
    border-bottom:190px solid var(--yellow);
    opacity:0.85;
    top:30px;left:40px;
    animation:shapeRotate 90s linear infinite reverse;
}

.shape-rect{
    width:180px;height:240px;
    background:var(--cyan);
    opacity:0.85;
    top:10px;left:60px;
    animation:shapeRotate 150s linear infinite;
}

@keyframes shapeRotate{
    from{transform:rotate(0)}
    to{transform:rotate(360deg)}
}

.thesis-title{
    font-family:'Libre Baskerville',serif;
    font-weight:700;
    font-size:clamp(3rem,6vw,6rem);
    color:var(--canvas);
    letter-spacing:0.01em;
    line-height:1.2;
    position:relative;
    z-index:5;
    opacity:0;
    transition:opacity 0.8s ease;
}

.thesis-title.revealed{opacity:1}

.thesis-korean{
    font-family:'Noto Serif KR',serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,3rem);
    color:var(--yellow);
    margin-top:0.5rem;
    position:relative;
    z-index:5;
    opacity:0;
    transition:opacity 0.8s ease 0.3s;
}

.thesis-korean.revealed{opacity:1}

.timeline-start{
    width:24px;height:24px;
    border-radius:50%;
    background:var(--yellow);
    margin-top:3rem;
    position:relative;
    z-index:5;
}

/* Section 2: Arc */
.section-arc{
    padding-top:clamp(4rem,6vw,6rem);
}

.timeline-container{
    max-width:900px;
    margin:0 auto;
    position:relative;
}

.tl-node{
    position:relative;
    margin-bottom:clamp(3rem,5vw,5rem);
    display:flex;
    align-items:flex-start;
    opacity:0;
    transition:opacity 0.5s ease-out,transform 0.5s ease-out;
}

.tl-node.revealed{
    opacity:1;
    transform:translateX(0) !important;
}

.tl-left{
    justify-content:flex-start;
    padding-right:55%;
    transform:translateX(-30px);
}

.tl-right{
    justify-content:flex-end;
    padding-left:55%;
    transform:translateX(30px);
}

.tl-card{
    background:var(--card);
    border-radius:8px;
    padding:32px;
    box-shadow:0 2px 12px rgba(0,0,0,0.06);
    border-top:4px solid var(--dot-color,var(--pink));
    position:relative;
}

.tl-node:nth-child(1) .tl-card{border-top-color:var(--pink)}
.tl-node:nth-child(2) .tl-card{border-top-color:var(--yellow)}
.tl-node:nth-child(3) .tl-card{border-top-color:var(--cyan)}
.tl-node:nth-child(4) .tl-card{border-top-color:var(--orange)}
.tl-node:nth-child(5) .tl-card{border-top-color:var(--pink)}

.bauhaus-illust{
    width:80px;height:80px;
    margin-bottom:1rem;
}

.tl-date{
    font-family:'Work Sans',sans-serif;
    font-weight:600;
    font-size:0.85rem;
    color:var(--graphite);
    display:block;
    margin-bottom:0.25rem;
}

.tl-heading{
    font-family:'Libre Baskerville',serif;
    font-weight:700;
    font-size:clamp(1.3rem,2vw,1.8rem);
    color:var(--dark);
    margin-bottom:0.5rem;
}

.tl-body{
    font-family:'Work Sans',sans-serif;
    font-weight:400;
    line-height:1.75;
    color:var(--dark);
}

.tl-marker{
    position:absolute;
    left:50%;top:40px;
    transform:translateX(-50%);
    width:16px;height:16px;
    z-index:5;
}

.tl-marker-circle{border-radius:50%;background:var(--pink)}
.tl-marker-triangle{
    width:0;height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:16px solid var(--yellow);
    background:transparent;
}
.tl-marker-square{background:var(--cyan)}

.tl-branch{
    position:absolute;
    top:46px;
    width:8%;
    height:2px;
    background:var(--cyan);
}

.tl-left .tl-branch{right:0;left:auto}
.tl-right .tl-branch{left:0}

/* Ripple */
.ripple-container{
    position:absolute;
    top:36px;left:50%;
    transform:translateX(-50%);
    pointer-events:none;
}

.ripple-ring{
    position:absolute;
    border-radius:50%;
    border:1px solid;
    animation:rippleExpand 0.8s ease-out forwards;
}

@keyframes rippleExpand{
    from{width:0;height:0;opacity:0.4;top:0;left:0}
    to{width:120px;height:120px;opacity:0;top:-60px;left:-60px}
}

/* Bauhaus divider */
.bauhaus-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    padding:2rem 0;
}

.orn{width:16px;height:16px;flex-shrink:0}
.orn-circle{border-radius:50%}
.orn-triangle{
    width:0;height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:16px solid var(--yellow);
}
.orn-square{/* colored inline */}
.orn-line{
    width:40px;height:1px;
    background:var(--graphite);
}

/* Section 3: Anatomy */
.section-anatomy{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:80vh;
}

.anatomy-diagram{
    position:relative;
    width:clamp(300px,60vw,500px);
    height:clamp(300px,60vw,500px);
    opacity:0;
    transition:opacity 0.8s ease;
}

.anatomy-diagram.revealed{opacity:1}

.anatomy-center{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:140px;height:140px;
    border-radius:50%;
    border:3px solid var(--dark);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-family:'Libre Baskerville',serif;
    font-weight:700;
    font-size:0.9rem;
    line-height:1.3;
    background:var(--canvas);
    z-index:5;
}

.anatomy-node{
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
}

.an-1{top:50%;right:-10%;transform:translateY(-50%)}
.an-2{top:5%;right:10%}
.an-3{top:5%;left:10%}
.an-4{top:50%;left:-10%;transform:translateY(-50%)}
.an-5{bottom:5%;left:10%}
.an-6{bottom:5%;right:10%}

.anatomy-shape{width:30px;height:30px}
.an-circle{border-radius:50%;background:var(--color)}
.an-triangle{
    width:0;height:0;
    border-left:15px solid transparent;
    border-right:15px solid transparent;
    border-bottom:30px solid var(--color);
    background:transparent;
}
.an-square{background:var(--color)}

.an-label{
    font-family:'Space Mono',monospace;
    font-size:0.65rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--graphite);
}

.anatomy-lines{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    pointer-events:none;
}

/* Section 4: Afterword */
.section-afterword{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(to bottom,var(--canvas),#FFFAF5);
}

.afterword-content{
    max-width:600px;
    opacity:0;
    transition:opacity 0.8s ease;
}

.afterword-content.revealed{opacity:1}

.afterword-text{
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-style:italic;
    font-size:clamp(1.1rem,1.8vw,1.6rem);
    line-height:1.7;
    color:var(--dark);
}

/* Responsive */
@media(max-width:768px){
    .tl-left,.tl-right{padding:0;transform:none}
    .tl-marker,.tl-branch{display:none}
    .thesis-shapes{width:200px;height:200px}
    .shape-circle{width:120px;height:120px;top:30px;left:40px}
    .shape-triangle{border-left-width:60px;border-right-width:60px;border-bottom-width:100px;top:40px;left:40px}
    .shape-rect{width:100px;height:140px;top:20px;left:50px}
    .dot-nav{display:none}
    .anatomy-diagram{width:280px;height:280px}
    .anatomy-node{position:static;flex-direction:row;gap:0.5rem}
    .anatomy-diagram{display:flex;flex-direction:column;align-items:center;gap:1rem;height:auto}
    .anatomy-lines{display:none}
}

@media(prefers-reduced-motion:reduce){
    .blob{animation:none}
    .shape{animation:none}
    .thesis-title,.thesis-korean,.tl-node,.anatomy-diagram,.afterword-content{
        opacity:1;transform:none;transition:none;
    }
    .ripple-ring{animation:none;display:none}
}