/* Drawing language: existing = ink, proposed = red + hatch, annotation = mono caps.
   Each layer (.lyr) exposes --p (0 → 1). Strokes draw with dashoffset, fills and text fade. */
@property --p { syntax: "<number>"; inherits: true; initial-value: 1; }

.drawing { width: 100%; height: auto; overflow: visible; }
.drawing .lyr { --p: 1; transition: --p var(--dur-draw) var(--ease-draw); }
.drawing .ln {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p));
}
.drawing .ln.ink { stroke: var(--ink); stroke-width: 1.5; }
.drawing .ln.faint { stroke: var(--ink-4); stroke-width: 1.2; }
.drawing .ln.red { stroke: var(--draw-proposed); stroke-width: 1.8; }
.drawing .ln.site { stroke: var(--site-red) !important; }
.drawing .ln.tree { stroke: var(--green); stroke-width: 1.2; }
.drawing .fill-tree { fill: var(--green-wash); stroke: var(--green); stroke-width: 1; opacity: var(--p); }
.drawing .ln.scaf { stroke: var(--ink-2); stroke-width: 1.1; }
.drawing .ln.scaf.board { stroke-width: 2.4; stroke: var(--ink-3); }
.drawing .ln.fine { stroke-width: .9; }
.drawing .ln.heavy { stroke-width: 2.2; }
.drawing .ln.ink.heavy { stroke-width: 1.8; }
.drawing .hatch-line { stroke: var(--amber); stroke-width: 1.4; opacity: .6; }
.drawing .fill-hatch { opacity: calc(var(--p) * .9); }
.drawing .fill-paper { fill: var(--sheet); opacity: var(--p); }
.drawing .fill-ink { fill: var(--ink); opacity: var(--p); }
.drawing text { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; fill: var(--ink-2); opacity: var(--p); }
.drawing text.red-t { fill: var(--amber-ink); }
.drawing text.faint-t { fill: var(--ink-3); }
.drawing .lyr-ground-floor { opacity: 1; transition: opacity var(--dur-enter) var(--ease-out); }
.drawing .stamp-box { fill: none; stroke: var(--green); stroke-width: 2; opacity: var(--p); }
.drawing .stamp-box.fine { stroke-width: 1; }
.drawing .stamp-t { font-family: var(--font-mono); font-weight: 500; font-size: 15px; letter-spacing: .14em; fill: var(--green-ink); }
.drawing .stamp-s { font-size: 8px; letter-spacing: .12em; fill: var(--green-ink); }
.drawing .lyr-stamp { opacity: var(--p); transform-box: fill-box; }

/* Location plan */
.locplan .lp-fp { fill: var(--paper-3); stroke: var(--ink-4); stroke-width: .6; opacity: var(--p); }
.locplan .ln.faint { stroke-width: .8; }
.locplan .ln.faint.fine { stroke-width: .5; }
.locplan .ln.red { stroke-width: 1.2; }
.locplan .ln.red.heavy.site { stroke-width: 1.8; }
.locplan .ln.ink.fine { stroke-width: .7; }
.locplan text { font-size: 7.5px; }

/* Drawing states (set on the <svg> or a parent) */
.st-blank .lyr { --p: 0; }
.st-existing .lyr-proposed-loft, .st-existing .lyr-proposed-ext, .st-existing .lyr-labels, .st-existing .lyr-scaffold, .st-existing .lyr-stamp { --p: 0; }
.st-proposed .lyr-scaffold, .st-proposed .lyr-stamp { --p: 0; }
.st-approved .lyr-scaffold { --p: 0; }

@media (prefers-reduced-motion: reduce) { .drawing .lyr { transition: none; } }

/* hip retires when the gable is proposed */
.drawing .lyr-hip { opacity: calc(1 - var(--loft, 0)); transition: opacity var(--dur-enter) var(--ease-out); }
.drawing:not(.st-existing):not(.st-blank) { --loft: 1; }

/* the alert reaching the house next door */
.drawing .lyr-ping { opacity: var(--p); }
.drawing .ping-dot { fill: var(--red); }
.drawing .ping-ring { fill: none; stroke: var(--red); stroke-width: 1.2; opacity: .35; }
.drawing .ping-env { fill: none; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; }
.drawing .lyr-you { opacity: var(--p); }

/* Site plan (hero backdrop) */
.siteplan { width: 100%; height: 100%; display: block; }
.siteplan .sp-ground { fill: var(--paper-2); }
.siteplan .sp-case { fill: none; stroke: #E4DFD3; stroke-width: 46; stroke-linecap: round; }
.siteplan .sp-road { fill: none; stroke: #FFFFFF; stroke-width: 40; stroke-linecap: round; }
.siteplan .sp-mid { fill: none; stroke: #EDE9DF; stroke-width: 1.2; stroke-dasharray: 10 12; }
.siteplan .sp-house { fill: #E9E4D8; stroke: #D3CCBC; stroke-width: 1; }
.siteplan .sp-house.on { fill: #FFF3D6; stroke: var(--amber-deep); }
.siteplan .sp-tree { fill: #D8EEDC; stroke: #8FCB9E; stroke-width: 1.2; }
.siteplan .sp-patch { fill: rgba(46, 98, 240, .035); stroke: var(--blue); stroke-width: 2.2; stroke-dasharray: 10 8; opacity: .75; }
.siteplan .sp-hl { stroke: var(--amber); stroke-width: 2; }
.siteplan .sp-ext { stroke: var(--amber-deep); stroke-width: 1.4; }
.siteplan .sp-red { fill: none; stroke: var(--site-red); stroke-width: 2.4; }
.siteplan .sp-pin .sp-pin-in { transform: scale(.4) translateY(10px); opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transition: transform 520ms var(--ease-spring), opacity 260ms var(--ease-out); }
.siteplan .sp-pin.on .sp-pin-in { transform: none; opacity: 1; }
.siteplan .sp-tag { fill: #FFFFFF; stroke: rgba(17, 18, 20, .08); stroke-width: 1; filter: drop-shadow(0 4px 10px rgba(17, 18, 20, .12)); }
.siteplan .sp-tag-tip { fill: #FFFFFF; }
.siteplan .sp-dot { fill: var(--amber); }
.siteplan .sp-text { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; fill: var(--ink); letter-spacing: -0.01em; }

/* Street elevation (homepage hero band) */
.street { width: 100%; height: 100%; display: block; }
.street .st-pave { fill: #EDE9E1; }
.street .st-road { fill: #DEDAD1; }
.street .st-lane { stroke: #FFFFFF; stroke-width: 3; stroke-dasharray: 28 22; opacity: .9; }
.street .st-wall { stroke: #CFC7B8; stroke-width: 1.2; }
.street .st-roof { fill: #5B6170; stroke: #4A505D; stroke-width: 1; }
.street .st-chimney { fill: #B9826A; stroke: #8E6150; stroke-width: 1; }
.street .st-win { fill: #FFFFFF; stroke: #8A8F99; stroke-width: 1.4; }
.street .st-bar { stroke: #8A8F99; stroke-width: 1.2; }
.street .st-bay { fill: none; stroke: #8A8F99; stroke-width: 1.4; }
.street .st-door { stroke: rgba(17, 18, 20, .25); stroke-width: 1; }
.street .st-knob { fill: #FFE6A6; }
.street .st-trunk { stroke: #8E6B4E; stroke-width: 4; stroke-linecap: round; }
.street .st-tree { fill: #9FD7AE; stroke: #5FB37A; stroke-width: 1.5; }
.street .st-hl { stroke: var(--amber); stroke-width: 2.2; }
.street .st-dormer { stroke: none; }
.street .st-dormer-line { fill: none; stroke: var(--amber-deep); stroke-width: 2.4; }
.street .st-red { fill: none; stroke: var(--site-red); stroke-width: 3; stroke-dasharray: 2200; stroke-dashoffset: 2200; }
.street .st-post { fill: none; stroke: #3F444C; stroke-width: 4; stroke-linecap: round; }
.street .st-lampshade { fill: #3F444C; }
.street .st-notice-sheet { fill: #FFE45C; stroke: #E0B400; stroke-width: 1; }
.street .st-notice-lines { stroke: rgba(17, 18, 20, .45); stroke-width: 2; stroke-linecap: round; }
.street .st-notice-t { font-family: var(--font-sans); font-size: 7.5px; font-weight: 700; fill: #111214; letter-spacing: .04em; }
.street .st-ping-ring { fill: none; stroke: var(--amber); stroke-width: 2; opacity: .5; transform-box: fill-box; transform-origin: center; animation: stping 2.4s ease-out infinite; }
.street .st-ping-dot { fill: var(--amber); }
.street .st-ping-env { fill: none; stroke: #FFFFFF; stroke-width: 1.6; stroke-linejoin: round; }
.street .st-house { opacity: 0; transform: translateY(18px); transition: opacity 360ms var(--ease-out), transform 480ms var(--ease-spring); transition-delay: calc(var(--d) * 24ms); }
.street-band.instant .st-house, .street-band.instant .st-red, .street-band.instant .st-ping, .street-band.instant .st-lamp { transition: none !important; }
.street-band.on .st-house { opacity: 1; transform: none; }
.street-band.on .st-red { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease-draw) 600ms; }
.street .st-ping, .street .st-lamp { opacity: 0; transition: opacity 300ms var(--ease-out) 900ms; }
.street-band.on .st-ping, .street-band.on .st-lamp { opacity: 1; }
@keyframes stping { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .street .st-house { opacity: 1; transform: none; transition: none; } .street .st-red { stroke-dashoffset: 0; transition: none; } .street .st-ping-ring { animation: none; } }

/* Static mode (motion-gate.ejs): every drawing in its end state, as with reduced motion */
.pw-static .drawing .lyr { transition: none; }
.pw-static .street .st-house { opacity: 1; transform: none; transition: none; } .pw-static .street .st-red { stroke-dashoffset: 0; transition: none; } .pw-static .street .st-ping-ring { animation: none; }