:root {
  /* DESIGN TOKENS: coordinates Interaction language structural—pour */
  --ochre: #8F3F25;
  --paper: #F4F0E6;
  --night: #111418;
  --concrete: #B8B1A6;
  --hazard: #FF6A21;
  --blueprint: #172A45;
  --cyan: #37C8FF;
  --lantern: #FFD166;
  --title-font: "Black Han Sans", sans-serif;
  --body-font: "Noto Sans KR", "Inter", sans-serif;
  --mono-font: "IBM Plex Mono", monospace;
  --poem-font: "Gowun Batang", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--paper);
  background: var(--night);
  font-family: var(--body-font);
  overflow-x: hidden;
}

.site-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .18;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 209, 102, .18) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 60%, rgba(244, 240, 230, .12) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 47%, rgba(184, 177, 166, .08) 48% 52%, transparent 53% 100%);
  background-size: 13px 17px, 19px 23px, 180px 180px;
}

.scroll-depth {
  position: fixed;
  left: 24px;
  top: 24px;
  bottom: 24px;
  width: 4px;
  z-index: 40;
  background: rgba(184, 177, 166, .18);
  border-radius: 99px;
}

.scroll-depth span {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(var(--cyan), var(--hazard), var(--lantern));
  border-radius: inherit;
  box-shadow: 0 0 24px rgba(55, 200, 255, .7);
}

.site-nav {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 40;
  display: flex;
  gap: 8px;
  font: 700 11px/1 var(--mono-font);
  letter-spacing: .14em;
}

.site-nav a {
  color: var(--paper);
  text-decoration: none;
  padding: 10px 12px;
  border: 1px solid rgba(244, 240, 230, .2);
  background: rgba(17, 20, 24, .52);
  backdrop-filter: blur(8px);
  transition: color .35s ease, border-color .35s ease, background .35s ease;
}

.site-nav a.is-active {
  color: var(--night);
  border-color: var(--lantern);
  background: var(--lantern);
}

.stage {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: 7vw;
}

.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(120deg, rgba(55, 200, 255, .07) 1px, transparent 1px),
    linear-gradient(30deg, rgba(255, 106, 33, .08) 1px, transparent 1px);
  background-size: 96px 96px, 148px 148px;
  transform: skewY(-6deg) scale(1.2);
}

.stage-ground {
  background:
    radial-gradient(circle at 68% 9%, rgba(55, 200, 255, .25), transparent 22%),
    radial-gradient(circle at 26% 76%, rgba(143, 63, 37, .55), transparent 28%),
    linear-gradient(180deg, #111418 0%, #172A45 72%, #111418 100%);
}

.coordinate-strip {
  position: absolute;
  left: 7vw;
  top: 6.4rem;
  color: var(--concrete);
  font: 500 clamp(10px, 1vw, 13px)/1.4 var(--mono-font);
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}

.crane-system {
  position: absolute;
  width: 62vw;
  height: 62vh;
  right: -9vw;
  top: -11vh;
  transform-origin: 92% 18%;
  transition: transform .5s ease-out;
}

.crane-boom {
  position: absolute;
  width: 100%;
  height: 18px;
  right: 0;
  top: 22%;
  background: repeating-linear-gradient(115deg, var(--lantern) 0 18px, var(--night) 18px 28px);
  box-shadow: 0 0 32px rgba(255, 209, 102, .25);
  transform: rotate(-18deg);
}

.crane-cable {
  position: absolute;
  width: 2px;
  height: 48%;
  left: 33%;
  top: 19%;
  background: var(--concrete);
  box-shadow: 0 0 10px rgba(184, 177, 166, .5);
}

.crane-hook {
  position: absolute;
  left: calc(33% - 13px);
  top: 65%;
  width: 34px;
  height: 48px;
  border: 7px solid var(--hazard);
  border-top: 0;
  border-radius: 0 0 28px 28px;
  filter: drop-shadow(0 0 14px rgba(255, 106, 33, .7));
  animation: hookSwing 4.8s ease-in-out infinite;
}

.plan-svg {
  position: absolute;
  inset: 5vh 4vw;
  width: 92vw;
  height: 90vh;
  z-index: -1;
  opacity: .92;
}

.chalk-line, .orange-line {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
}

.chalk-line { stroke: var(--cyan); filter: drop-shadow(0 0 9px rgba(55, 200, 255, .85)); }
.orange-line { stroke: var(--hazard); filter: drop-shadow(0 0 9px rgba(255, 106, 33, .7)); }
.stage-ground.in-view .draw-line { animation: drawChalk 2.2s cubic-bezier(.2, .8, .1, 1) forwards; }
.stage-ground.in-view .draw-line:nth-child(2) { animation-delay: .22s; }
.stage-ground.in-view .draw-line:nth-child(3) { animation-delay: .44s; }
.stage-ground.in-view .draw-line:nth-child(4) { animation-delay: .66s; }

.ground-plane {
  position: absolute;
  left: -8vw;
  right: -8vw;
  bottom: -16vh;
  height: 38vh;
  background:
    linear-gradient(90deg, rgba(255, 209, 102, .18) 1px, transparent 1px),
    linear-gradient(rgba(244, 240, 230, .1) 1px, transparent 1px),
    linear-gradient(7deg, rgba(143, 63, 37, .8), rgba(17, 20, 24, .98));
  background-size: 70px 70px, 70px 70px, auto;
  transform: perspective(700px) rotateX(58deg);
}

.survey-flags span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 4px;
  height: 68px;
  background: var(--concrete);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .5s ease var(--d), transform .5s ease var(--d);
}

.survey-flags span::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 36px solid var(--hazard);
  filter: drop-shadow(0 0 12px rgba(255, 106, 33, .7));
}

.stage-ground.in-view .survey-flags span { opacity: 1; transform: translateY(0); }

.site-board {
  width: min(980px, 82vw);
  margin: 18vh auto 0;
  padding: clamp(24px, 4vw, 54px);
  border: 2px solid rgba(244, 240, 230, .2);
  background: linear-gradient(135deg, rgba(17, 20, 24, .8), rgba(23, 42, 69, .7));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .45), inset 0 0 0 8px rgba(184, 177, 166, .04);
  transform: rotate(-1.3deg);
}

.stamp, .inspection-card, .stage-label, .measure, .load-plate, .completion-stamp {
  font-family: var(--mono-font);
  text-transform: uppercase;
  letter-spacing: .13em;
}

h1, h2 { font-family: var(--title-font); font-weight: 400; margin: 0; }

h1 {
  font-size: clamp(64px, 15vw, 210px);
  line-height: .78;
  color: var(--paper);
  text-shadow: 8px 8px 0 var(--ochre), 0 0 28px rgba(255, 209, 102, .18);
}

.lead {
  max-width: 760px;
  margin: 28px 0 0 auto;
  color: var(--concrete);
  font-size: clamp(18px, 2vw, 27px);
  line-height: 1.55;
}

.inspection-card {
  position: absolute;
  right: 10vw;
  bottom: 10vh;
  max-width: 310px;
  padding: 16px;
  color: var(--night);
  background: var(--lantern);
  transform: rotate(4deg);
  box-shadow: 10px 12px 0 var(--hazard);
}

.inspection-card b { display: block; font-size: 15px; margin-bottom: 8px; }
.inspection-card span { display: block; font-size: 10px; }

.stage-pile {
  min-height: 112vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 106, 33, .22), transparent 24%),
    linear-gradient(160deg, #172A45 0%, #111418 45%, #8F3F25 140%);
}

.stage-label {
  position: relative;
  z-index: 4;
  display: inline-flex;
  gap: 14px;
  align-items: center;
  color: var(--cyan);
  font-size: 13px;
}

.stage-label span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--night);
  background: var(--cyan);
  border-radius: 50%;
}

.rebar-field {
  position: absolute;
  inset: 16vh 2vw 0;
  transform: perspective(900px) rotateX(62deg) rotateZ(-12deg);
  transform-origin: center bottom;
}

.rebar-field::before, .rebar-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 54px, rgba(184, 177, 166, .85) 55px 62px, transparent 63px 118px);
}

.rebar-field::after {
  transform: rotate(90deg);
  background: repeating-linear-gradient(90deg, transparent 0 42px, rgba(55, 200, 255, .5) 43px 48px, transparent 49px 96px);
}

.rebar-field i {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--hazard);
  box-shadow: 0 0 22px var(--hazard);
  animation: sparkBlink 1.5s infinite alternate;
}
.rebar-field i:nth-child(1){left:12%;top:24%;}.rebar-field i:nth-child(2){left:28%;top:42%;animation-delay:.2s}.rebar-field i:nth-child(3){left:48%;top:22%;animation-delay:.4s}.rebar-field i:nth-child(4){left:68%;top:58%;animation-delay:.6s}.rebar-field i:nth-child(5){left:86%;top:32%;animation-delay:.8s}.rebar-field i:nth-child(6){left:38%;top:72%;animation-delay:1s}.rebar-field i:nth-child(7){left:58%;top:45%;animation-delay:1.2s}.rebar-field i:nth-child(8){left:77%;top:78%;animation-delay:1.4s}

.concrete-core, .frame-copy, .topping-copy {
  position: relative;
  z-index: 3;
  max-width: 620px;
}

.concrete-core {
  margin: 18vh 0 0 8vw;
  padding: 34px;
  background: rgba(17, 20, 24, .68);
  border-left: 10px solid var(--hazard);
}

h2 {
  font-size: clamp(48px, 8.6vw, 128px);
  line-height: .86;
  color: var(--paper);
}

.concrete-core p, .frame-copy p, .topping-copy p {
  color: var(--concrete);
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.75;
}

.stamp-block {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 15px;
  color: var(--hazard);
  border: 3px solid var(--hazard);
  font: 900 20px/1 var(--body-font);
  transform: rotate(-5deg);
}

.mesh-panel {
  position: absolute;
  border: 1px solid rgba(255, 209, 102, .38);
  background: repeating-linear-gradient(45deg, rgba(255, 106, 33, .18) 0 8px, transparent 8px 18px);
}
.mesh-one { width: 260px; height: 410px; right: 14vw; top: 18vh; transform: skew(-13deg) rotate(9deg); }
.mesh-two { width: 420px; height: 170px; right: -4vw; bottom: 14vh; transform: skew(18deg) rotate(-8deg); }

.measure { position: absolute; color: var(--lantern); font-size: 12px; }
.measure-a { left: 54vw; top: 30vh; transform: rotate(90deg); }
.measure-b { right: 9vw; bottom: 24vh; }

.stage-frame {
  min-height: 118vh;
  background:
    radial-gradient(circle at 75% 28%, rgba(255, 209, 102, .2), transparent 28%),
    linear-gradient(180deg, #111418 0%, #172A45 55%, #111418 100%);
}

.frame-elevation {
  position: absolute;
  left: 10vw;
  right: 10vw;
  bottom: 5vh;
  height: 76vh;
  border-bottom: 18px solid var(--concrete);
  transform: skewX(-4deg);
}

.beam, .column, .diagonal {
  position: absolute;
  background: linear-gradient(90deg, var(--concrete), var(--paper), var(--concrete));
  box-shadow: 0 0 28px rgba(184, 177, 166, .16);
}
.beam { left: 0; right: 0; height: 24px; transform-origin: left center; transform: scaleX(0); transition: transform 1s ease; }
.beam-top { top: 8%; }.beam-mid { top: 42%; transition-delay:.18s; }.beam-low { top: 72%; transition-delay:.36s; }
.column { width: 28px; top: 8%; bottom: 0; transform-origin: bottom; transform: scaleY(0); transition: transform .9s ease .25s; }
.column-a { left: 12%; }.column-b { left: 48%; }.column-c { left: 82%; }
.diagonal { width: 22px; height: 82%; top: 8%; transform-origin: center; opacity: 0; transition: opacity .9s ease .8s; }
.diagonal-a { left: 31%; transform: rotate(27deg); }.diagonal-b { right: 31%; transform: rotate(-27deg); }
.stage-frame.in-view .beam { transform: scaleX(1); }
.stage-frame.in-view .column { transform: scaleY(1); }
.stage-frame.in-view .diagonal { opacity: 1; }

.load-plate {
  position: absolute;
  right: 18vw;
  top: 24vh;
  width: 210px;
  padding: 22px;
  color: var(--night);
  background: var(--hazard);
  box-shadow: 14px 14px 0 var(--blueprint), 0 0 40px rgba(255, 106, 33, .38);
  transform: translateY(0) rotate(-2deg);
}
.load-plate span, .load-plate em { display: block; font-size: 11px; font-style: normal; }
.load-plate strong { display: block; font: 400 64px/.9 var(--title-font); }

.bolt-cloud span {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 8px solid var(--lantern);
  border-radius: 50%;
  opacity: .8;
}
.bolt-cloud span:nth-child(1){left:62%;top:59%;}.bolt-cloud span:nth-child(2){left:70%;top:70%;}.bolt-cloud span:nth-child(3){left:79%;top:47%;}.bolt-cloud span:nth-child(4){left:86%;top:63%;}.bolt-cloud span:nth-child(5){left:55%;top:78%;}.bolt-cloud span:nth-child(6){left:91%;top:37%;}

.frame-copy { margin: 26vh 0 0 auto; padding: 28px; background: rgba(17, 20, 24, .62); }

.stage-lantern {
  min-height: 110vh;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 209, 102, .34), transparent 22%),
    radial-gradient(circle at 18% 80%, rgba(55, 200, 255, .18), transparent 24%),
    linear-gradient(180deg, #172A45 0%, #111418 65%);
}

.stage-lantern .stage-label { position: absolute; left: 7vw; top: 7vw; }

.lantern-grid {
  position: absolute;
  top: 12vh;
  left: 12vw;
  right: 12vw;
  display: flex;
  justify-content: space-between;
  transform: perspective(600px) rotateX(12deg);
}

.lantern {
  width: clamp(42px, 5vw, 74px);
  height: clamp(80px, 9vw, 132px);
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(var(--lantern), #FF6A21);
  box-shadow: 0 0 38px rgba(255, 209, 102, .48);
  opacity: .55;
  animation: lanternSway 5s ease-in-out infinite;
}
.lantern:nth-child(2){animation-delay:.6s}.lantern:nth-child(3){animation-delay:1.2s}.lantern:nth-child(4){animation-delay:1.8s}.lantern:nth-child(5){animation-delay:2.4s}
.lantern.active { opacity: 1; }

.topping-copy {
  max-width: 800px;
  margin-top: 12vh;
}

.poem {
  font-family: var(--poem-font);
  color: var(--lantern) !important;
  font-size: clamp(24px, 3vw, 42px) !important;
  line-height: 1.45 !important;
}

.ritual-button {
  position: relative;
  z-index: 4;
  border: 0;
  margin-top: 22px;
  padding: 18px 28px;
  color: var(--night);
  background: var(--lantern);
  font: 900 18px/1 var(--body-font);
  box-shadow: 8px 8px 0 var(--hazard);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ritual-button:active { transform: translate(5px, 5px); box-shadow: 3px 3px 0 var(--hazard); }

.completion-stamp {
  position: absolute;
  right: 12vw;
  bottom: 15vh;
  padding: 18px 24px;
  color: var(--hazard);
  border: 6px solid var(--hazard);
  font-size: clamp(34px, 6vw, 86px);
  font-weight: 700;
  opacity: .18;
  transform: rotate(12deg) scale(.88);
  transition: opacity .35s ease, transform .35s ease;
}
.completion-stamp.is-struck { opacity: .95; transform: rotate(-8deg) scale(1); }

.spark-field span {
  position: absolute;
  width: 5px;
  height: 5px;
  left: 50%;
  top: 58%;
  background: var(--lantern);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--lantern);
  animation: burst .85s ease-out forwards;
}

@keyframes drawChalk { to { stroke-dashoffset: 0; } }
@keyframes hookSwing { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes sparkBlink { from { opacity: .3; transform: scale(.75); } to { opacity: 1; transform: scale(1.35); } }
@keyframes lanternSway { 0%,100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(4deg) translateY(14px); } }
@keyframes burst { to { transform: translate(var(--sx), var(--sy)) scale(.2); opacity: 0; } }

@media (max-width: 760px) {
  .site-nav { right: 12px; top: 12px; flex-wrap: wrap; width: 250px; justify-content: flex-end; }
  .scroll-depth { left: 10px; top: 12px; bottom: 12px; }
  .stage { padding: 88px 26px; }
  .site-board { width: 100%; margin-top: 14vh; }
  h1 { font-size: clamp(56px, 24vw, 104px); }
  .coordinate-strip { display: none; }
  .inspection-card, .load-plate, .completion-stamp { right: 28px; }
  .concrete-core, .frame-copy { margin-left: 0; margin-right: 0; }
  .frame-elevation { left: -22vw; right: -18vw; opacity: .7; }
  .lantern-grid { left: 4vw; right: 4vw; }
}