/* regrowth.studio · the Pond · your guild, the city (guild-city.js draws it; this file is its whole look). The plate's line art:
   hairline ink on paper, one yellow (your lotus, keyed in ink), dashed for what is not built yet. Tokens only: --paper, --ink,
   --muted, --line, --sheet, --yellow, --focus and the font variables; #1F1C16 keys the yellow, by day and by night. */
.gc-city{--gc-delay:0ms}
.gc-city path,.gc-city polygon,.gc-city line,.gc-city ellipse{vector-effect:non-scaling-stroke}

/* your lotus, the plinth: the petals, their veins, and the seed pod as a paper drum */
.gc-petal{fill:var(--yellow);stroke:#1F1C16;stroke-width:1;stroke-linejoin:round}
.gc-vein{fill:none;stroke:#1F1C16;stroke-width:.6;stroke-opacity:.45}
.gc-drum{fill:var(--line);fill:color-mix(in srgb,var(--line) 50%,var(--paper));stroke:var(--ink);stroke-width:1;stroke-linejoin:round}
.gc-pod{fill:var(--paper);stroke:var(--ink);stroke-width:1}
.gc-plot{fill:none;stroke:var(--ink);stroke-width:.5;stroke-opacity:.45}

/* the buildings: the roof and the right face in paper, the left face in the line tone, ink edges */
.gc-face{stroke:var(--ink);stroke-width:1;stroke-linejoin:round;transition:fill .2s}
.gc-top,.gc-right{fill:var(--paper)}
.gc-left{fill:var(--line);fill:color-mix(in srgb,var(--line) 50%,var(--paper))}
.gc-dash{stroke-dasharray:3 2;stroke-opacity:.6}
.gc-rest{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:3 2;stroke-opacity:.6}
.gc-mark path{fill:var(--paper);stroke:var(--ink);stroke-width:1;stroke-linejoin:round}

/* the names: mono capitals on a paper halo, a hairline leader to the roof; a seed adds "in the making" */
.gc-lead{stroke:var(--ink);stroke-width:.7;stroke-opacity:.5}
.gc-name,.gc-pname{font-family:var(--mono,ui-monospace,"SF Mono",Consolas,monospace);font-weight:500;letter-spacing:.08em;fill:var(--ink)}
.gc-making{font-family:var(--serif,Georgia,serif);font-style:italic;fill:var(--muted)}
.gc-name,.gc-pname,.gc-making{paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round;pointer-events:none;user-select:none}

/* a room is a button: the hit shape and the name take the tap; hover and focus lift the roof */
.gc-room{cursor:pointer;outline:none}
.gc-hit{fill:transparent;stroke:none}
/* a name stands on paper, knocked out of whatever is behind it (a petal of your lotus, a plot's hairline), as the plate's labels do */
.gc-tagbg{fill:var(--paper);stroke:none}
.gc-room:hover .gc-top,.gc-room:focus-visible .gc-top{fill:var(--sheet);stroke-width:1.6}
/* focus: an ink ring round the building (3:1 and more on paper, by day and by night; the day's --focus would not reach it) */
.gc-room:focus-visible .gc-hit{stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
/* a building behind another keeps part of its ring hidden: its name and leader say it too */
.gc-room:hover .gc-lead{stroke-opacity:1}
.gc-room:focus-visible .gc-lead{stroke:var(--ink);stroke-width:2;stroke-opacity:1}
.gc-room:focus-visible .gc-name{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}

/* assembling, once: each building rises from its lot, the dashed rest and the names come 400 ms later */
@keyframes gc-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes gc-fade{from{opacity:0}}
.gc-anim .gc-rise{transform-box:fill-box;transform-origin:50% 100%;animation:gc-rise 560ms cubic-bezier(.2,.7,.1,1) calc(var(--gc-delay) + var(--i,0) * 80ms) backwards}
.gc-anim .gc-rest,.gc-anim .gc-tag{animation:gc-fade 400ms ease-out calc(var(--gc-delay) + var(--i,0) * 80ms + 400ms) backwards}
/* (no control holds motion: the ♪ left the header on 4 Oct, so html[data-anthem] is never written and the rule that read it is gone) */
@media (prefers-reduced-motion:reduce){.gc-anim .gc-rise,.gc-anim .gc-rest,.gc-anim .gc-tag{animation:none}.gc-face{transition:none}}