/* layer-2.report -- watercolor blockchain report */

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

:root{
    --coral:#E8917A;
    --terracotta:#C97B5D;
    --sage:#8DAA91;
    --sand:#E8D5B5;
    --paper:#FAF7F2;
    --text:#3A3228;
    --muted:#8A7E74;
    --soft:#E0D5C8;
}

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

body{
    background:var(--paper);
    color:var(--text);
    font-family:'Quicksand',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.1rem);
    line-height:1.75;
    overflow-x:hidden;
}

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

.wc-dot{
    width:12px;height:12px;
    border-radius:50%;
    cursor:pointer;
    opacity:0.5;
    transition:opacity 0.3s,transform 0.3s;
}

.wc-dot.active{
    opacity:1;
    transform:scale(1.3);
}

/* Report sections */
.report-section{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,6vw,6rem) clamp(4rem,8vw,8rem);
    position:relative;
    overflow:hidden;
}

/* Watercolor wash backgrounds */
.wash-bg{
    position:absolute;
    inset:0;
    opacity:0.15;
    pointer-events:none;
}

.wash-coral{
    background:radial-gradient(ellipse at 40% 50%,var(--coral),transparent 70%);
}

/* Botanical frame */
.botanical-frame{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    pointer-events:none;
}

.fern-path{
    stroke-dasharray:500;
    stroke-dashoffset:500;
    animation:drawFern 3s ease-out forwards;
}

@keyframes drawFern{
    to{stroke-dashoffset:0}
}

/* Cover */
.cover-content{
    text-align:center;
    position:relative;
    z-index:2;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

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

.cover-title{
    font-family:'Quicksand',sans-serif;
    font-weight:700;
    font-size:clamp(2.5rem,6vw,5rem);
    color:var(--text);
    letter-spacing:0.03em;
    line-height:1.2;
}

.cover-subtitle{
    font-family:'Quicksand',sans-serif;
    font-weight:500;
    font-size:clamp(1.1rem,1.8vw,1.5rem);
    color:var(--terracotta);
    margin-top:0.75rem;
}

.cover-note{
    font-family:'Caveat',cursive;
    font-size:clamp(0.9rem,1.2vw,1.2rem);
    color:var(--muted);
    display:block;
    margin-top:0.5rem;
}

/* Finding blocks */
.finding-block{
    max-width:600px;
    width:100%;
    padding:clamp(1.5rem,3vw,2.5rem);
    margin-bottom:3rem;
    position:relative;
    overflow:hidden;
    border-radius:4px;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

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

.block-offset-left{align-self:flex-start;margin-left:5%}
.block-offset-right{align-self:flex-end;margin-right:5%}

.wash-accent{
    position:absolute;
    inset:0;
    opacity:0.12;
    pointer-events:none;
    border-radius:4px;
}

.wash-sage{background:var(--sage)}
.wash-coral-light{background:var(--coral)}
.wash-sand{background:var(--sand)}

.finding-heading{
    font-family:'Quicksand',sans-serif;
    font-weight:700;
    font-size:clamp(1.3rem,2.5vw,2rem);
    color:var(--text);
    margin-bottom:0.75rem;
    position:relative;
}

.finding-text{
    color:var(--text);
    line-height:1.75;
    position:relative;
}

.finding-annotation{
    font-family:'Caveat',cursive;
    font-size:clamp(0.85rem,1vw,1rem);
    color:var(--muted);
    display:block;
    margin-top:1rem;
    font-style:italic;
    position:relative;
}

/* Root diagram */
.root-diagram{
    width:clamp(200px,40%,300px);
    margin:2rem auto 0;
    display:block;
}

.root-path{
    stroke-dasharray:200;
    stroke-dashoffset:200;
    transition:stroke-dashoffset 1.5s ease;
}

.analysis-block.revealed .root-path{
    stroke-dashoffset:0;
}

.analysis-block{
    max-width:600px;
    width:100%;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

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

/* Conclusion */
.conclusion-block{
    text-align:center;
    max-width:500px;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

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

.conclusion-text{
    color:var(--text);
    line-height:1.8;
    margin-bottom:2rem;
}

.conclusion-domain{
    font-family:'Quicksand',sans-serif;
    font-weight:700;
    font-size:clamp(1.2rem,2vw,1.8rem);
    color:var(--terracotta);
    letter-spacing:0.03em;
}

/* Responsive */
@media(max-width:768px){
    .watercolor-nav{display:none}
    .report-section{padding:2rem 1.5rem}
    .block-offset-left,.block-offset-right{margin-left:0;margin-right:0;align-self:center}
}

@media(prefers-reduced-motion:reduce){
    .fern-path{stroke-dashoffset:0;animation:none}
    .cover-content,.finding-block,.analysis-block,.conclusion-block{opacity:1;transform:none;transition:none}
}