/* freedom.compare - Cold War Split-Screen Binary */

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

:root{
    --void:#0A0A0A;
    --parchment:#F2F0E8;
    --signal:#C1272D;
    --slate:#1A1A2E;
    --census:#3D3D3D;
    --wire:#E8E6DE;
    --amber:#D4A017;
}

body{
    background:var(--void);
    color:var(--wire);
    font-family:'Source Serif 4',Georgia,serif;
    font-weight:400;
    font-size:clamp(1rem,1.1vw,1.15rem);
    line-height:1.65;
    overflow-x:hidden;
}

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

/* Central dividing line */
.divide-line{
    position:fixed;
    top:0;
    left:50%;
    width:4px;
    height:100vh;
    background:var(--signal);
    z-index:50;
    transform:translateX(-50%);
    box-shadow:0 0 12px rgba(193,39,45,0.3);
    animation:lineGlow 4s ease-in-out infinite;
    transition:opacity 0.6s ease;
}

.divide-line.hidden{opacity:0}

@keyframes lineGlow{
    0%,100%{box-shadow:0 0 8px rgba(193,39,45,0.2)}
    50%{box-shadow:0 0 20px rgba(193,39,45,0.5)}
}

/* Split sections */
.split-section{
    min-height:100svh;
    display:flex;
    align-items:stretch;
}

.panel{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,4vw,4rem);
    min-height:100svh;
}

.panel-dark{background:var(--void)}
.panel-light{background:var(--parchment)}

.panel-inner{
    max-width:400px;
    width:100%;
}

/* Split ratio variants */
.split-60-40 .panel-dark{flex:0 0 60%}
.split-60-40 .panel-light{flex:0 0 40%}
.split-40-60 .panel-dark{flex:0 0 40%}
.split-40-60 .panel-light{flex:0 0 60%}
.split-30-70 .panel-dark{flex:0 0 30%}
.split-30-70 .panel-light{flex:0 0 70%}

/* Hero words */
.hero-word{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(5rem,18vw,20rem);
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--wire);
    line-height:1;
    opacity:0;
    transform:scale(0.95);
    transition:opacity 1.2s ease,transform 1.2s ease;
}

.hero-word-light{color:var(--void)}

.hero-split.is-visible .hero-word{
    opacity:1;
    transform:scale(1);
}

/* Section labels */
.section-label{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1.5rem,4vw,3rem);
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--wire);
    display:block;
    margin-bottom:1.5rem;
}

.section-label-light{color:var(--void)}

/* Panel body text */
.panel-body{
    color:var(--wire);
    margin-bottom:1.5rem;
    max-width:38em;
}

.panel-body-light{color:var(--census)}

/* Bar charts */
.bar-chart{margin-bottom:1.5rem}

.bar-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
}

.bar-name{
    font-family:'JetBrains Mono',monospace;
    font-size:0.75rem;
    font-weight:500;
    color:var(--wire);
    width:80px;
    flex-shrink:0;
    text-align:right;
}

.bar-name-light{color:var(--census)}

.bar{
    height:20px;
    width:0%;
    transition:width 0.8s cubic-bezier(0.23,1,0.32,1);
}

.is-visible .bar{
    width:calc(var(--bar-w,0) * 1%);
}

.bar-val{
    font-family:'JetBrains Mono',monospace;
    font-size:0.8rem;
    font-weight:500;
    color:var(--wire);
    min-width:28px;
}

.bar-val-light{color:var(--census)}

/* Redaction bars */
.redaction-block{
    position:relative;
    margin-bottom:1rem;
    overflow:hidden;
}

.redacted-text{
    font-family:'Source Serif 4',Georgia,serif;
    font-size:clamp(0.9rem,1vw,1rem);
    color:var(--wire);
    display:block;
    padding:4px 0;
}

.redaction-bar{
    position:absolute;
    inset:0;
    background:var(--void);
    background-image:repeating-linear-gradient(90deg,transparent,transparent 0.5px,rgba(255,255,255,0.03) 0.5px,rgba(255,255,255,0.03) 1px);
    transform:translateX(0);
    transition:transform 0.6s ease-out;
}

.redaction-block.revealed .redaction-bar{
    transform:translateX(-105%);
}

/* Pull quotes */
.pull-quote{
    font-family:'Source Serif 4',Georgia,serif;
    font-style:italic;
    font-size:clamp(1rem,1.5vw,1.3rem);
    line-height:1.4;
    color:var(--census);
    border-left:3px solid var(--amber);
    padding-left:1.5rem;
    margin:1.5rem 0;
}

.pull-quote cite{
    display:block;
    font-style:normal;
    font-size:0.8em;
    margin-top:0.5rem;
    color:var(--census);
    opacity:0.7;
}

/* Stamp marks */
.stamp-mark{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1rem,1.5vw,1.3rem);
    letter-spacing:0.08em;
    color:var(--signal);
    border:2px solid var(--signal);
    padding:4px 16px;
    display:inline-block;
    transform:rotate(-12deg);
    margin-top:2rem;
    opacity:0.7;
}

.stamp-light{
    color:var(--slate);
    border-color:var(--slate);
}

/* Wire dividers */
.wire-divider{
    padding:0;
    overflow:hidden;
    height:24px;
    background:var(--void);
}

.wire-svg{
    width:100%;
    height:24px;
}

.wire-path{
    stroke-dasharray:1200;
    stroke-dashoffset:1200;
    transition:stroke-dashoffset 1.5s ease;
}

.wire-divider.drawn .wire-path{
    stroke-dashoffset:0;
}

/* Rupture section */
.rupture-section{
    min-height:100svh;
    background:var(--slate);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,6vw,6rem);
}

.rupture-content{
    max-width:700px;
    text-align:left;
}

.rupture-heading{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(2rem,5vw,4rem);
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--wire);
    margin-bottom:2rem;
}

.rupture-body{
    font-family:'Source Serif 4',Georgia,serif;
    font-size:clamp(1rem,1.2vw,1.2rem);
    color:var(--wire);
    line-height:1.72;
    margin-bottom:2rem;
}

/* Footer split */
.footer-split{min-height:60vh}
.footer-panel{min-height:60vh}

.footer-text{
    font-family:'Source Serif 4',Georgia,serif;
    font-style:italic;
    font-size:clamp(0.95rem,1.1vw,1.1rem);
    color:var(--wire);
    line-height:1.6;
    margin-bottom:1.5rem;
}

.footer-text-light{color:var(--census)}

.footer-domain{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1.2rem,2vw,1.8rem);
    letter-spacing:0.04em;
    color:var(--signal);
}

.stamp-final{
    transform:rotate(-8deg);
}

/* Reveal animation */
.reveal-split{
    opacity:0;
    transition:opacity 0.8s ease;
}

.reveal-split.is-visible{
    opacity:1;
}

/* Responsive */
@media(max-width:768px){
    .split-section{flex-direction:column}
    .panel{min-height:50svh}
    .split-60-40 .panel-dark,.split-40-60 .panel-dark,.split-30-70 .panel-dark{flex:none}
    .split-60-40 .panel-light,.split-40-60 .panel-light,.split-30-70 .panel-light{flex:none}
    .divide-line{
        top:auto;left:0;
        width:100%;height:4px;
        position:relative;
        transform:none;
    }
    .hero-word{font-size:clamp(3rem,15vw,8rem)}
}

@media(prefers-reduced-motion:reduce){
    .hero-word{opacity:1;transform:none;transition:none}
    .divide-line{animation:none}
    .bar{transition:none;width:calc(var(--bar-w,0) * 1%)}
    .redaction-bar{transition:none}
    .wire-path{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
    .reveal-split{opacity:1;transition:none}
}