/* === Base Reset & Variables === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --warm-linen:#faf6ee;
  --honeycomb:#f0e4c8;
  --walnut-ink:#3b2f20;
  --dusty-cedar:#7a6855;
  --raw-honey:#d4a24e;
  --terracotta:#b8705a;
  --sage-mist:#9aab8e;
  --espresso:#2a1e14;
  --parchment:#e8d9b5;
}

html{scroll-behavior:smooth}
body{
  font-family:'Source Serif 4',Georgia,serif;
  background:linear-gradient(135deg,var(--warm-linen) 0%,var(--honeycomb) 60%,var(--parchment) 100%);
  color:var(--walnut-ink);
  overflow-x:hidden;
  line-height:1.7;
}

/* === Scroll Progress === */
#scroll-progress{
  position:fixed;
  top:0;left:0;
  height:2px;
  width:0%;
  background:var(--raw-honey);
  z-index:1000;
  transition:width 50ms linear;
}

/* === Particle Canvas === */
#particles{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
}

/* === Typography === */
.handwritten{
  font-family:'Caveat',cursive;
  font-weight:700;
  color:var(--walnut-ink);
  line-height:1.1;
  letter-spacing:-0.01em;
}
.annotation{
  font-family:'Kalam',cursive;
  font-weight:300;
  color:var(--dusty-cedar);
}

/* === Sections === */
.act{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}
.act-inner{
  width:90%;
  max-width:960px;
  position:relative;
}

/* === Act I === */
#act1{min-height:100vh}
#act1 .act-inner{text-align:center}
#title-text{
  font-size:clamp(2.8rem,6vw,5rem);
  position:relative;
  display:inline-block;
}
#title-text .char{
  display:inline-block;
  opacity:0;
  animation:charIn 0.3s ease forwards;
}
@keyframes charIn{
  from{opacity:0;transform:translateY(8px) rotate(-2deg)}
  to{opacity:1;transform:translateY(0) rotate(0)}
}

.z-line{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
}
.z-line path{
  transition:stroke-dashoffset 2s ease-out;
}
.z-line.visible path{
  stroke-dashoffset:0;
}

.hex-cluster{
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  pointer-events:none;
}
.hex{
  position:absolute;
  width:var(--size);height:var(--size);
  left:var(--x);top:var(--y);
  background:var(--raw-honey);
  opacity:0;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  animation:hexFade 0.8s ease forwards;
  animation-delay:var(--delay);
}
@keyframes hexFade{
  from{opacity:0;transform:scale(0.5)}
  to{opacity:var(--opacity);transform:scale(1)}
}

.act1-subtitle{
  margin-top:2rem;
  font-size:1.2rem;
  opacity:0;
  animation:fadeUp 1s ease forwards 1.5s;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:0.7;transform:translateY(0)}
}

/* === Act II === */
.z-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
}
.vignette{
  position:relative;
  background:var(--honeycomb);
  padding:2.5rem;
  border-radius:4px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.6s ease,transform 0.6s ease;
  max-width:520px;
}
.vignette.revealed{
  opacity:1;
  transform:translateY(0);
}
.vignette-1{justify-self:start}
.vignette-2{justify-self:end}
.vignette-3{justify-self:start}

.vignette h2{
  font-size:clamp(1.8rem,4vw,2.6rem);
  margin-bottom:0.2rem;
}
.hand-underline{
  width:180px;height:12px;
  display:block;
  margin-bottom:1rem;
}
.vignette.revealed .hand-underline path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 0.8s ease-out 0.3s;
}
.vignette p{
  font-size:1.05rem;
  color:var(--walnut-ink);
  line-height:1.75;
}
.vignette p em{font-style:italic;color:var(--terracotta)}

/* Vignette Icons */
.vignette-icon{
  width:48px;height:48px;
  margin-bottom:1rem;
  transition:transform 0.3s ease;
}
.vignette:hover .vignette-icon{transform:scale(1.1)}
.vignette:hover{transform:perspective(800px) rotateY(1deg)}
.vignette.revealed:hover{transform:perspective(800px) rotateY(1deg)}

.hex-icon{
  width:40px;height:40px;
  background:var(--raw-honey);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  opacity:0.6;
}
.circle-icon{
  width:36px;height:36px;
  border-radius:50%;
  background:var(--terracotta);
  opacity:0.5;
}
.triangle-icon{
  width:0;height:0;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-bottom:35px solid var(--sage-mist);
  opacity:0.6;
}

/* Margin Notes */
.margin-note{
  position:absolute;
  right:var(--note-x,calc(100% + 20px));
  top:var(--note-y,10px);
  font-family:'Kalam',cursive;
  font-size:0.85rem;
  color:var(--dusty-cedar);
  opacity:0.6;
  white-space:nowrap;
  transition:opacity 0.2s ease,transform 0.2s ease;
  transform:scale(0.95);
  pointer-events:auto;
}
.margin-note:hover{
  opacity:1;
  transform:scale(1);
}

/* === Act III — The Map === */
#act3{min-height:100vh}
.map-grid{
  position:relative;
  width:100%;
  height:60vh;
  max-height:500px;
}
.map-hex,.map-circle,.map-triangle,.map-line{
  position:absolute;
  opacity:0;
  transform:translate(calc(var(--mx) - 50%), calc(var(--my) - 50%)) scale(0.3) rotate(15deg);
  transition:opacity 0.8s ease,transform 0.8s ease;
  transition-delay:var(--md);
}
.map-grid.assembled .map-hex,
.map-grid.assembled .map-circle,
.map-grid.assembled .map-triangle,
.map-grid.assembled .map-line{
  opacity:1;
  transform:translate(0,0) scale(1) rotate(0deg);
}

.map-hex{
  left:var(--mx);top:var(--my);
  width:var(--ms);height:var(--ms);
  background:var(--raw-honey);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  opacity:0;
}
.map-grid.assembled .map-hex{opacity:0.35}

.map-circle{
  left:var(--mx);top:var(--my);
  width:var(--ms);height:var(--ms);
  border-radius:50%;
  background:var(--terracotta);
}
.map-grid.assembled .map-circle{opacity:0.4}

.map-triangle{
  left:var(--mx);top:var(--my);
  width:0;height:0;
  border-left:calc(var(--ms) / 2) solid transparent;
  border-right:calc(var(--ms) / 2) solid transparent;
  border-bottom:var(--ms) solid var(--sage-mist);
}
.map-grid.assembled .map-triangle{opacity:0.5}

.map-line{
  left:var(--lx1,0);top:var(--ly1,0);
  width:120px;height:1px;
  background:rgba(59,47,32,0.2);
  transform-origin:left center;
}
.map-grid.assembled .map-line{
  opacity:0.6;
  transform:rotate(25deg) scaleX(1);
}

/* Compass Rose */
.compass-rose{
  position:relative;
  width:48px;height:48px;
  margin:3rem auto 0;
  animation:compassSpin 20s linear infinite;
}
.compass-rose.small{width:32px;height:32px}
@keyframes compassSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.compass-n,.compass-s,.compass-e,.compass-w{
  position:absolute;
  width:0;height:0;
}
.compass-n{
  top:0;left:50%;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-bottom:18px solid var(--terracotta);
}
.compass-s{
  bottom:0;left:50%;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:18px solid var(--dusty-cedar);
}
.compass-e{
  right:0;top:50%;transform:translateY(-50%);
  border-top:6px solid transparent;border-bottom:6px solid transparent;
  border-left:18px solid var(--raw-honey);
}
.compass-w{
  left:0;top:50%;transform:translateY(-50%);
  border-top:6px solid transparent;border-bottom:6px solid transparent;
  border-right:18px solid var(--sage-mist);
}
.compass-rose.small .compass-n,.compass-rose.small .compass-s{
  border-left-width:4px;border-right-width:4px;
}
.compass-rose.small .compass-n{border-bottom-width:12px}
.compass-rose.small .compass-s{border-top-width:12px}
.compass-rose.small .compass-e,.compass-rose.small .compass-w{
  border-top-width:4px;border-bottom-width:4px;
}
.compass-rose.small .compass-e{border-left-width:12px}
.compass-rose.small .compass-w{border-right-width:12px}

/* === Act IV === */
#act4{min-height:100vh}
.pullquote{
  font-size:clamp(2rem,5vw,4rem);
  text-align:center;
  max-width:700px;
  margin:0 auto 3rem;
  line-height:1.3;
}
.pullquote .word{
  display:inline-block;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.5s ease,transform 0.5s ease;
}
.pullquote.revealed .word{
  opacity:1;
  transform:translateY(0);
}

.mark-icons{
  display:flex;
  justify-content:center;
  gap:4rem;
  margin-top:2rem;
}
.mark-icon{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
  cursor:default;
}
.mark-icon .annotation{font-size:0.9rem}

#icon-compass:hover .compass-rose{
  animation:compassHover 0.6s ease forwards;
}
@keyframes compassHover{
  to{transform:rotate(45deg)}
}
#icon-pin:hover .pin-svg{
  animation:pinBounce 0.4s ease;
}
@keyframes pinBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
#icon-path:hover .path-svg path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 0.8s ease;
}

/* === Footer === */
#footer{
  background:var(--espresso);
  color:var(--parchment);
  text-align:center;
  padding:3rem 2rem;
  position:relative;
  z-index:1;
}
#footer .handwritten{
  font-size:1.6rem;
  color:var(--honeycomb);
}
.footer-sub{
  font-family:'Kalam',cursive;
  font-size:0.9rem;
  color:var(--dusty-cedar);
  margin-top:0.5rem;
}

/* === Responsive === */
@media(max-width:768px){
  .vignette-1,.vignette-2,.vignette-3{justify-self:center;max-width:100%}
  .margin-note{display:none}
  .mark-icons{gap:2rem}
  .map-grid{height:40vh}
}