/* voting.wiki — Geometry of Democracy */

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

:root{
  --bg:#0a0a0f;
  --bg-alt:#111118;
  --cyan:#00ffd5;
  --magenta:#ff00ff;
  --lime:#aaff00;
  --orange:#ff6b2b;
  --text:#e8e8f0;
  --text-secondary:#8888aa;
  --font-display:'Josefin Sans',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

html{scroll-behavior:auto}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overflow-x:hidden;
}

/* Delaunay background canvas */
#delaunay-bg{
  position:fixed;
  top:0;left:0;
  width:100vw;height:100vh;
  z-index:0;
  opacity:0.15;
  pointer-events:none;
}

/* Progress bar */
#progress-bar{
  position:fixed;
  top:0;right:0;
  width:2px;height:0%;
  background:var(--magenta);
  z-index:100;
  transition:height 0.1s linear;
}

/* Proposition sections */
.proposition{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:4rem 2rem;
  background:var(--bg);
}
.proposition[data-bg="alt"]{
  background:var(--bg-alt);
}

.prop-text{
  width:55%;
  padding-left:12vw;
  padding-right:2rem;
}
.prop-visual{
  width:40%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.prop-visual .construction{
  width:100%;
  max-width:400px;
}

.prop-number{
  display:block;
  font-family:var(--font-mono);
  font-size:0.85rem;
  letter-spacing:0.04em;
  color:var(--text-secondary);
  margin-bottom:0.75rem;
}

.prop-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.5rem,5vw,4.5rem);
  letter-spacing:0.06em;
  text-transform:uppercase;
  line-height:1.1;
  color:var(--text);
  margin-bottom:1.5rem;
}

.prop-text p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(1rem,1.8vw,1.25rem);
  line-height:1.72;
  letter-spacing:0.01em;
  max-width:60ch;
  margin-bottom:1.25rem;
  color:var(--text);
}

/* Geometric labels */
.geo-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.04em;
}

/* Q.E.D. marker */
.qed{
  display:block;
  text-align:right;
  color:var(--magenta);
  font-size:14px;
  margin-top:1rem;
  opacity:0;
  transition:opacity 0.8s ease 2s;
}
.proposition.visible .qed{
  opacity:1;
}
.qed-final{
  font-size:40px;
  text-align:center;
  margin-top:2rem;
}

/* SVG draw animation */
.draw-path{
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  transition:stroke-dashoffset 2s ease-in-out;
}
.proposition.visible .draw-path{
  stroke-dashoffset:0;
}

/* stagger draw paths */
.proposition.visible .draw-path:nth-child(1){transition-delay:0s}
.proposition.visible .draw-path:nth-child(2){transition-delay:0.3s}
.proposition.visible .draw-path:nth-child(3){transition-delay:0.6s}
.proposition.visible .draw-path:nth-child(4){transition-delay:0.9s}
.proposition.visible .draw-path:nth-child(5){transition-delay:1.2s}
.proposition.visible .draw-path:nth-child(6){transition-delay:1.5s}
.proposition.visible .draw-path:nth-child(7){transition-delay:1.8s}
.proposition.visible .draw-path:nth-child(8){transition-delay:2.1s}
.proposition.visible .draw-path:nth-child(9){transition-delay:2.4s}
.proposition.visible .draw-path:nth-child(10){transition-delay:2.7s}

/* Fill shapes */
.fill-shape{
  opacity:0;
  transition:opacity 0.8s ease;
}
.proposition.visible .fill-shape{
  opacity:1;
  transition-delay:2.5s;
}

/* Vertex glow */
.vertex-glow{
  opacity:0;
  filter:drop-shadow(0 0 6px currentColor);
  transition:opacity 0.6s ease;
}
.proposition.visible .vertex-glow{
  opacity:1;
  transition-delay:3s;
}

/* Interstitials */
.interstitial{
  position:relative;
  z-index:1;
  height:50vh;
  background:var(--bg);
  display:flex;
  align-items:center;
}
.interstitial-line{
  width:100%;
  height:2px;
}
.interstitial-line line{
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  transition:stroke-dashoffset 2s ease-in-out;
}
.interstitial.visible .interstitial-line line{
  stroke-dashoffset:0;
}

/* Opening */
.opening{
  justify-content:center;
  text-align:center;
  flex-direction:column;
}
.opening-content{
  position:relative;
  z-index:1;
}
.opening-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(4rem,10vw,8rem);
  letter-spacing:0.06em;
  color:var(--text);
  line-height:1.1;
}
.opening-subtitle{
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(1rem,2vw,1.5rem);
  color:var(--text-secondary);
  margin-top:1rem;
}

/* Closing */
.closing{
  justify-content:center;
  text-align:center;
  flex-direction:column;
}
.closing-content{
  position:relative;
  z-index:1;
}
.closing-text{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(1.5rem,3vw,2.5rem);
  color:var(--text);
  line-height:1.6;
  letter-spacing:0.03em;
}

/* Responsive */
@media(max-width:768px){
  .proposition{
    flex-direction:column-reverse;
    padding:3rem 1.5rem;
  }
  .prop-text{
    width:100%;
    padding-left:1.5rem;
    padding-right:1.5rem;
  }
  .prop-visual{
    width:90vw;
    margin-bottom:2rem;
  }
  .prop-text p{
    max-width:100%;
  }
}