/* digotech/golden-drawing — --dg-golden-p goes 0 → 1 with the scroll (view.js); 1 = fully drawn (no script, reduced motion).
   A section can move the drawing with --dg-golden-shift (e.g. translateY(-50%) when it is centred absolutely). */
.dg-golden{--dg-golden-p:1;--dg-golden-shift:translate(0);--dg-golden-slide:var(--s-8);--dg-golden-cap-track:.12em;position:relative;pointer-events:none}
.dg-golden svg{display:block;width:100%;height:auto;transform:var(--dg-golden-shift) translateX(calc((1 - var(--dg-golden-p)) * var(--dg-golden-slide))) rotate(calc((1 - var(--dg-golden-p)) * -6deg));transform-origin:29% 72%}
/* the point of the spiral where each part appears */
.dg-golden__at1{--dg-golden-t:.39}
.dg-golden__at2{--dg-golden-t:.632}
.dg-golden__at3{--dg-golden-t:.781}
.dg-golden__at4{--dg-golden-t:.873}
.dg-golden__at5{--dg-golden-t:.93}
.dg-golden__grid{stroke:color-mix(in srgb, var(--ink) 20%, transparent);opacity:calc(.45 + var(--dg-golden-p) * .55)}
.dg-golden__spiral{stroke:var(--accent-fill);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--dg-golden-p))}
.dg-golden__node,.dg-golden__handle circle{fill:var(--paper);stroke:var(--accent-fill)}
.dg-golden__handle path{stroke:var(--accent-fill)}
.dg-golden__node,.dg-golden__handle{opacity:clamp(0, calc((var(--dg-golden-p) - var(--dg-golden-t)) * 25), 1)}
/* a web page laid out on the golden squares: each block appears as the spiral reaches its square */
.dg-golden__ui{opacity:clamp(0, calc((var(--dg-golden-p) - var(--dg-golden-t)) * 12), 1);transform:translateY(calc((1 - clamp(0, calc((var(--dg-golden-p) - var(--dg-golden-t)) * 12), 1)) * var(--s-5)))}
.dg-golden__blk{fill:color-mix(in srgb, var(--accent-fill) 6%, transparent);stroke:color-mix(in srgb, var(--ink) 18%, transparent);stroke-width:2}
.dg-golden__img{fill:color-mix(in srgb, var(--accent-fill) 16%, transparent)}
.dg-golden__bar{fill:color-mix(in srgb, var(--ink) 14%, transparent)}
.dg-golden__acc{fill:color-mix(in srgb, var(--ink) 30%, transparent)}
.dg-golden__btn{fill:var(--accent-fill)}
.dg-golden__cap{fill:var(--ink-3);font-family:var(--font-mono);letter-spacing:var(--dg-golden-cap-track);opacity:clamp(0, calc((var(--dg-golden-p) - .95) * 20), 1)}