/* ============================================================
   KIRBY PROJECTS — SCROLL STORY + ISOMETRIC CONSTRUCTION SCENE
   Loaded after styles.css; reuses its tokens.
   ============================================================ */

#story{ --seg:118vh; position:relative; height:calc(100vh + 7 * var(--seg)); }

.stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  background:var(--bg);
}
/* Sky moods — warm by default, aqua glow for commissioning/handover */
.stage::before, .stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; transition:opacity 1.6s ease;
}
.stage::before{
  opacity:1;
  background:
    radial-gradient(70% 55% at 72% 6%, color-mix(in srgb, var(--aqua-500) 11%, transparent), transparent 60%),
    radial-gradient(55% 45% at 6% 18%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%);
}
.stage::after{
  opacity:0;
  background:
    radial-gradient(80% 60% at 64% 16%, color-mix(in srgb, var(--aqua-400) 20%, transparent), transparent 62%),
    radial-gradient(60% 50% at 18% 84%, color-mix(in srgb, var(--aqua-300) 12%, transparent), transparent 60%);
}
.stage[data-ch="5"]::after, .stage[data-ch="6"]::after{opacity:1}

/* ============================== ISO SCENE ============================== */
.iso-wrap{
  position:absolute; left:63%; top:54%; width:0; height:0; z-index:1;
  transform:translate(-50%,-50%) translate(var(--ox,0px),var(--oy,0px)) scale(calc(var(--sc,1) * var(--msc,1)));
  transition:transform 1.5s cubic-bezier(.25,.8,.25,1), opacity 1.5s ease;
  pointer-events:none;
}
.stage[data-ch="0"] .iso-wrap{--ox:0vw; --oy:26vh; --sc:.78; opacity:.45}
.stage[data-ch="1"] .iso-wrap{--sc:1}
.stage[data-ch="2"] .iso-wrap{--sc:1.02}
.stage[data-ch="4"] .iso-wrap{--oy:4vh}
.stage[data-ch="5"] .iso-wrap{--oy:4vh}
.stage[data-ch="6"] .iso-wrap{--oy:3vh; --sc:1.04}

.iso{
  position:absolute; left:0; top:0; width:0; height:0;
  transform:rotateX(58deg) rotateZ(var(--rz,45deg));
  transform-style:preserve-3d;
  transition:transform 1.8s cubic-bezier(.25,.8,.25,1);
}
.stage[data-ch="2"] .iso{--rz:42.5deg}
.stage[data-ch="3"] .iso{--rz:47deg}
.stage[data-ch="4"] .iso{--rz:44deg}
.stage[data-ch="5"] .iso{--rz:46.5deg}

/* ---- box primitive: 3 faces (top / +y / +x) ---- */
.b{
  position:absolute; left:0; top:0; pointer-events:none;
  transform:translate3d(var(--x),var(--y),calc(var(--z) + var(--lift,34px)));
  transform-style:preserve-3d;
  opacity:0;
  transition:opacity .9s ease var(--dl,0s), transform 1.15s cubic-bezier(.22,.8,.25,1) var(--dl,0s);
}
.b.on{opacity:1; --lift:0px}
.grp .b{opacity:1; --lift:0px}
.b .f{position:absolute; left:0; top:0; display:block}
.b .ft{width:var(--w); height:var(--d); transform:translateZ(var(--h)); background:var(--c-top)}
.b .fy{width:var(--w); height:var(--h); transform-origin:0 0; transform:translate3d(0,var(--d),var(--h)) rotateX(-90deg); background:var(--c-y)}
.b .fx{width:var(--d); height:var(--h); transform-origin:0 0; transform:translate3d(var(--w),0,var(--h)) rotateX(-90deg) rotateY(-90deg); background:var(--c-x)}

/* ---- material palette (brand only) ---- */
.b.ground{--c-top:#e9e1d1; --c-y:#d3c6ae; --c-x:#bfae90}
.b.pad{--c-top:#f3eee5; --c-y:#ddd2bd; --c-x:#c8b99e}
.b.sand{--c-top:#f0e9dd; --c-y:#ddd1bd; --c-x:#c5b69c}
.b.wood{--c-top:#d8ccba; --c-y:#b8a890; --c-x:#9c8c72}
.b.teal{--c-top:#2a6577; --c-y:#0b4f6c; --c-x:#093f56}
.b.tealdeep{--c-top:#0b4f6c; --c-y:#093f56; --c-x:#072e40}
.b.flr{--c-top:#ece4d4; --c-y:#0b4f6c; --c-x:#093f56}
.b.aqua{--c-top:#6dd3cd; --c-y:#3fb9b3; --c-x:#20a39e}
.b.coral{--c-top:#f37571; --c-y:#ef5b5b; --c-x:#d83c3c}
.b.slate{--c-top:#22384a; --c-y:#15293a; --c-x:#0c1622}
.b.white{--c-top:#ffffff; --c-y:#e9e2d6; --c-x:#d4cabb}
.b.shrub{--c-top:#20a39e; --c-y:#106563; --c-x:#0c4c4b}

/* ---- windows on building floors ---- */
.b.flr .fy::before, .b.flr .fx::before,
.b.flr .fy::after,  .b.flr .fx::after{
  content:""; position:absolute; inset:7px 10px 9px; opacity:0;
  transition:opacity 1.1s ease .25s; pointer-events:none;
}
.b.flr .fy::before, .b.flr .fx::before{
  background:repeating-linear-gradient(90deg, rgba(7,46,64,.78) 0 12px, transparent 12px 27px);
}
.b.flr .fy::after, .b.flr .fx::after{
  background:repeating-linear-gradient(90deg, rgba(109,211,205,.92) 0 12px, transparent 12px 27px);
}
.stage[data-ch="5"] .b.flr .fy::before, .stage[data-ch="5"] .b.flr .fx::before,
.stage[data-ch="6"] .b.flr .fy::before, .stage[data-ch="6"] .b.flr .fx::before{opacity:1}
.stage[data-ch="6"] .b.flr .fy::after, .stage[data-ch="6"] .b.flr .fx::after{opacity:1}

/* ---- flat decals on the ground plane ---- */
.d{
  position:absolute; left:0; top:0; pointer-events:none;
  width:var(--w); height:var(--d);
  transform:translate3d(var(--x),var(--y),var(--z,.6px)) rotateZ(var(--rot,0deg));
  opacity:0; transition:opacity 1.1s ease var(--dl,0s);
}
.d.on{opacity:1}
.d.outline{
  border:2.5px dashed var(--coral-500); border-radius:4px;
  background:color-mix(in srgb, var(--coral-500) 5%, transparent);
}
.d.bp{
  border:2px solid rgba(11,79,108,.55); border-radius:6px;
  background:
    repeating-linear-gradient(0deg, rgba(11,79,108,.22) 0 1.5px, transparent 1.5px 24px),
    repeating-linear-gradient(90deg, rgba(11,79,108,.22) 0 1.5px, transparent 1.5px 24px),
    color-mix(in srgb, var(--aqua-100) 55%, transparent);
}
.d.sheet{
  background:
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(11,79,108,.28) 9px 10.5px) #fff;
  background-size:100% 100%, 100% 100%;
  border-radius:3px; box-shadow:0 3px 10px rgba(7,46,64,.18);
  padding:0; border:1px solid #e3dccd;
}
.d.road{
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.65) 34px 52px) center / 100% 3px no-repeat,
    linear-gradient(rgba(7,46,64,.10), rgba(7,46,64,.10)) top / 100% 2px no-repeat,
    linear-gradient(rgba(7,46,64,.10), rgba(7,46,64,.10)) bottom / 100% 2px no-repeat,
    #d9cdb8;
}
.d.shadow{
  background:radial-gradient(closest-side, rgba(7,46,64,.20), transparent 72%);
  filter:blur(2px);
}
.d.ring{
  background:radial-gradient(closest-side, color-mix(in srgb, var(--aqua-400) 26%, transparent), transparent 72%);
}

/* ---- groups (truck, crane) ---- */
.grp{
  position:absolute; left:0; top:0; pointer-events:none;
  transform:translate3d(var(--gx,0px),var(--gy,0px),var(--gz,0px));
  transform-style:preserve-3d; opacity:0;
  transition:opacity 1.1s ease var(--dl,0s), transform 2.8s cubic-bezier(.3,.65,.25,1);
}
.grp.on{opacity:1}
.grp .d{opacity:1}

/* Truck drive-through */
.grp.truck{--gx:-640px; --gy:182px}
.stage[data-ch="3"] .grp.truck{--gx:-152px}
.stage[data-ch="4"] .grp.truck,
.stage[data-ch="5"] .grp.truck,
.stage[data-ch="6"] .grp.truck{--gx:600px}

/* Crane jib slow swing */
.jib{position:absolute; left:0; top:0; transform-style:preserve-3d;
  animation:jibSwing 26s ease-in-out infinite alternate;}
@keyframes jibSwing{
  from{transform:translate3d(18px,18px,224px) rotateZ(-14deg)}
  to{transform:translate3d(18px,18px,224px) rotateZ(56deg)}
}

/* ---- billboard pins (face the camera) ---- */
.pin{
  position:absolute; left:0; top:0; pointer-events:none;
  transform:translate3d(var(--x),var(--y),var(--z));
  transform-style:preserve-3d; opacity:0;
  transition:opacity .9s ease var(--dl,0s);
}
.pin.on{opacity:1}
.pin .bb{position:absolute; left:0; top:0; transform:rotateZ(-45deg) rotateX(-58deg); transform-style:preserve-3d}
.pin .bb > *{animation:pinBob 4.5s ease-in-out infinite; animation-delay:var(--dl,0s)}
@keyframes pinBob{0%,100%{translate:0 0}50%{translate:0 -7px}}
.pcheck{
  position:absolute; width:38px; height:38px; border-radius:50%;
  transform:translate(-50%,-100%);
  background:#fff; border:1px solid var(--border);
  box-shadow:0 10px 22px -8px rgba(7,46,64,.45);
  display:grid; place-items:center; color:var(--aqua-600);
}
.pcheck svg{width:17px; height:17px}
.pcheck.issue{background:var(--coral-500); color:#fff; border-color:var(--coral-600);
  font:700 17px/1 var(--font-mono)}
.ppill{
  position:absolute; transform:translate(-50%,-100%);
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  padding:11px 18px; border-radius:999px; background:#fff; border:1px solid var(--border);
  box-shadow:0 14px 30px -10px rgba(7,46,64,.45);
  font:600 14.5px/1 var(--font-sans); letter-spacing:-.01em; color:var(--teal-700);
}
.ppill svg{width:16px; height:16px; color:var(--aqua-600)}

/* ============================== PANELS ============================== */
.panel{
  position:absolute; z-index:6;
  left:clamp(28px, 5.5vw, 90px); top:50%;
  width:min(450px, 38vw);
  opacity:0; transform:translateY(calc(-50% + 34px));
  transition:opacity .75s ease, transform .85s cubic-bezier(.22,.8,.25,1);
  pointer-events:none;
}
.panel.on{opacity:1; transform:translateY(-50%); pointer-events:auto}
.panel h3{
  font-size:clamp(24px, 2.3vw, 31px); font-weight:500; letter-spacing:-.025em;
  line-height:1.12; margin:14px 0 0; color:var(--text); text-wrap:pretty;
}
.panel h3 em{font-family:var(--font-serif); font-style:italic; color:var(--accent)}
.panel > p{font-size:15.5px; line-height:1.55; color:var(--text-mute); margin:13px 0 0; text-wrap:pretty}
.p-cta{display:flex; align-items:center; gap:18px; margin-top:20px}

/* Hero (chapter 0) panel */
.panel.heroP{
  left:50%; top:45%; width:min(840px, 92vw); text-align:center;
  transform:translate(-50%, calc(-50% + 26px));
}
.panel.heroP.on{transform:translate(-50%,-50%)}
.panel.heroP .hero-pills{justify-content:center}
.panel.heroP h1{
  font-weight:400; letter-spacing:-.045em; line-height:.98; margin:26px 0 0;
  font-size:clamp(52px, 7.2vw, 96px); color:var(--text);
}
.panel.heroP h1 em, .panel.heroP h1 .flare-check{font-family:var(--font-serif); font-style:italic; color:var(--accent)}
.panel.heroP h1 .flare-plan{font-weight:500}
.panel.heroP h1 .flare-build{font-weight:700; letter-spacing:-.05em}
.panel.heroP .lede{font-size:19px; line-height:1.5; color:var(--text-mute); margin:24px auto 0; max-width:560px}
.panel.heroP .actions{display:flex; gap:12px; justify-content:center; margin-top:32px; flex-wrap:wrap}
.panel.heroP .reassure{display:flex; gap:18px; margin-top:20px; justify-content:center; flex-wrap:wrap; font-size:13.5px; color:var(--text-mute)}
.panel.heroP .reassure span{display:inline-flex; align-items:center; gap:7px}
.panel.heroP .reassure svg{width:15px; height:15px; color:var(--success)}

/* ============================== PANEL MINI-MOCKS ============================== */
.pmock{
  background:var(--bg-elev); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-2); padding:15px 16px; margin-top:20px; font-size:12px;
}
.pm-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--border-soft); margin-bottom:4px}
.pm-title{font-weight:600; font-size:12.5px; color:var(--text); letter-spacing:-.005em}
.pm-title small{display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-top:2px; font-weight:400}
.pm-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border-soft)}
.pm-row:last-of-type{border-bottom:none}
.pm-row .grow{flex:1; min-width:0}
.pm-row b{display:block; font-weight:500; font-size:12px; color:var(--text)}
.pm-row small{display:block; font-size:10.5px; color:var(--text-dim); margin-top:1px}
.pm-av{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
  font:600 9.5px var(--font-mono); letter-spacing:.02em;
  background:var(--accent-soft); color:var(--accent-strong);
}
.pm-num{font-variant-numeric:tabular-nums; font-weight:500; color:var(--text); font-size:12px; white-space:nowrap}
.pm-bar{flex:1; min-width:60px}
.pm-foot{
  display:flex; align-items:flex-start; gap:8px; margin-top:10px; padding-top:10px;
  border-top:1px solid var(--border-soft);
  font-size:11px; color:var(--text-mute); line-height:1.45;
}
.pm-foot svg{width:13px; height:13px; flex-shrink:0; margin-top:1px; color:var(--accent)}
.pm-chip{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.04em;
  padding:6px 11px; border-radius:8px;
  background:var(--accent-soft); color:var(--accent-strong);
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.pm-chip.coral{background:var(--coral-50); color:var(--coral-700); border-color:#f6c7c2}
.pm-chip svg{width:12px; height:12px; flex-shrink:0}

/* Deliverables tag row (procurement tender mock) */
.pm-deliv{display:flex; align-items:baseline; gap:9px; padding:9px 0 4px; flex-wrap:wrap}
.pm-deliv-lbl{font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); flex-shrink:0}
.pm-tagrow{display:flex; flex-wrap:wrap; gap:5px}
.pm-tagrow i{
  font-style:normal; font-size:10px; font-weight:500; line-height:1;
  padding:5px 8px; border-radius:7px;
  background:var(--sand-50); border:1px solid var(--border-soft); color:var(--text-mute);
}

/* BSA badge */
.bsa-chip{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em;
  padding:7px 12px; border-radius:999px;
  background:var(--nav-900); color:var(--aqua-300); border:1px solid #1b2935;
}
.bsa-chip svg{width:13px; height:13px}

/* Phone mock (chapter 5) */
.pm-phone{
  width:212px; margin-top:18px; border-radius:26px;
  background:#fff; border:1px solid var(--border);
  box-shadow:var(--shadow-float);
  padding:12px 12px 14px; position:relative;
  transform:rotate(-1.5deg);
}
.pm-phone .notch{width:64px; height:5px; border-radius:99px; background:var(--sand-200); margin:0 auto 10px}
.pm-phone .pp-head{font-family:var(--font-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim)}
.pm-phone .pp-title{font-weight:600; font-size:13.5px; color:var(--text); margin-top:2px; letter-spacing:-.01em}
.pp-q{padding:9px 0; border-bottom:1px solid var(--border-soft)}
.pp-q .q{font-size:11px; color:var(--text); font-weight:500; margin-bottom:6px}
.pp-opts{display:flex; gap:6px}
.pp-opt{flex:1; text-align:center; font:500 10.5px var(--font-sans); padding:7px 0; border-radius:8px; border:1px solid var(--border); color:var(--text-dim); background:var(--sand-50)}
.pp-opt.yes{background:#e3f5ec; color:var(--success); border-color:#bfe7d0; font-weight:600}
.pp-opt.no-sel{background:var(--coral-50); color:var(--coral-600); border-color:#f6c7c2; font-weight:600}
.pp-photo{
  height:48px; border-radius:9px; margin-top:2px;
  background:repeating-linear-gradient(-45deg, var(--sand-100) 0 8px, var(--sand-200) 8px 16px);
  border:1px dashed var(--sand-300);
  display:grid; place-items:center;
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em; color:var(--text-dim); text-transform:uppercase;
}
.pp-sig{padding-top:10px}
.pp-sig .lbl{font-family:var(--font-mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin-bottom:4px}
.pp-sig svg{width:100%; height:34px; color:var(--teal-700)}
.pp-issue{
  margin-top:10px; display:flex; gap:7px; align-items:center;
  background:var(--coral-50); border:1px solid #f6c7c2; border-radius:9px;
  padding:8px 10px; font-size:10px; line-height:1.35; color:var(--coral-700);
}
.pp-issue .dotp{width:7px; height:7px; border-radius:50%; background:var(--coral-500); flex-shrink:0; animation:livePulse 1.8s ease-in-out infinite}

/* Audit log lines (chapter 6) */
.pm-log{font-family:var(--font-mono); font-size:10px; line-height:1.4; color:var(--text-mute); display:flex; flex-direction:column; gap:6px; padding:10px 0 2px}
.pm-log span{display:flex; gap:9px}
.pm-log .t{color:var(--text-dim); flex-shrink:0}
.pm-log .ok-t{color:var(--success)}
.pm-file{display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--sand-50)}
.pm-file .fic{width:32px; height:38px; border-radius:5px; background:var(--accent); color:#fff; display:grid; place-items:center; font:700 8px var(--font-mono); flex-shrink:0}
.pm-file b{display:block; font-size:11.5px; font-weight:600; color:var(--text)}
.pm-file small{display:block; font-size:9.5px; color:var(--text-dim); margin-top:2px}

/* ============================== RAIL ============================== */
.rail{
  position:absolute; right:clamp(16px,2.5vw,40px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:2px; z-index:7;
  opacity:0; transition:opacity .7s ease; pointer-events:none;
}
.stage:not([data-ch="0"]) .rail{opacity:1; pointer-events:auto}
.rail a{
  display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:9px;
  cursor:pointer; color:var(--text-dim); transition:color .2s, background .2s;
}
.rail a:hover{color:var(--text); background:color-mix(in srgb, var(--text) 5%, transparent)}
.rail .n{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em}
.rail .lbl{font-size:11.5px; font-weight:500; letter-spacing:-.005em}
.rail a.on{color:var(--accent)}
.rail a.on .n{font-weight:700}

/* ============================== SCROLL CUE ============================== */
.cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px; z-index:7;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-mute); cursor:pointer;
  opacity:0; transition:opacity .6s ease; pointer-events:none;
}
.stage[data-ch="0"] .cue{opacity:1; pointer-events:auto}
.cue svg{width:16px; height:16px; animation:cueDip 2.2s ease-in-out infinite}
@keyframes cueDip{0%,100%{transform:translateY(0); opacity:.55}50%{transform:translateY(6px); opacity:1}}

/* ============================== RESPONSIVE ============================== */
@media (max-width:1280px){
  .iso-wrap{--msc:.86; left:65%}
  .panel{width:min(420px, 40vw)}
}
@media (max-width:1060px){
  .iso-wrap{--msc:.74; left:66%}
}
@media (max-width:880px){
  .iso-wrap{--msc:.52; left:50%; top:30%}
  .stage[data-ch="0"] .iso-wrap{--ox:0; --oy:16vh}
  .panel{
    left:16px; right:16px; width:auto; top:auto; bottom:16px;
    transform:translateY(26px);
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border:1px solid var(--border); border-radius:18px; padding:18px 18px 16px;
    box-shadow:var(--shadow-2);
  }
  .panel.on{transform:none}
  .panel h3{font-size:20px}
  .panel > p{font-size:13.5px; margin-top:9px}
  .pmock{padding:12px 13px; margin-top:14px}
  .pm-phone{width:188px; margin:14px auto 0}
  .panel.heroP{
    left:50%; right:auto; bottom:auto; top:42%; width:min(560px,92vw);
    transform:translate(-50%, calc(-50% + 26px));
    background:transparent; border:none; box-shadow:none; backdrop-filter:none; padding:0;
  }
  .panel.heroP.on{transform:translate(-50%,-50%)}
  .rail{display:none}
  .pp-photo{height:38px}
}
@media (max-width:560px){
  .iso-wrap{--msc:.42; top:27%}
  .panel.heroP h1{font-size:15vw}
  .p-cta .feat-link{display:none}
}

/* Short viewports — keep tall panels (esp. ch5 phone mock) clear of the fixed nav */
@media (min-width:881px) and (max-height:850px){
  .panel{top:calc(50% + 26px); max-height:calc(100vh - 104px)}
  .panel h3{font-size:clamp(20px, 2vw, 25px)}
  .panel > p{font-size:14px; line-height:1.5; margin-top:9px}
  .pmock{margin-top:14px; padding:12px 14px}
  .pm-phone{width:182px; margin-top:12px; padding:10px 10px 12px}
  .pm-phone .notch{margin-bottom:7px}
  .pp-q{padding:7px 0}
  .pp-photo{height:34px}
  .pp-sig svg{height:24px}
  .pp-issue{margin-top:8px; padding:6px 9px}
  .bsa-chip{margin-top:10px}
  .p-cta{margin-top:14px}
}

@media (prefers-reduced-motion:reduce){
  .b, .d, .grp, .pin, .panel, .iso, .iso-wrap{transition-duration:.01s !important; transition-delay:0s !important}
  .jib{animation:none}
  .pin .bb > *{animation:none}
  .cue svg{animation:none}
}