/* AGROSTASIS demo v3 — sticky canvas (architecture left, hectare right), loop ring, stepping captions. */
.demo-story{height:560vh;position:relative;border-top:1px solid var(--line)}
.demo-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;background:var(--peat)}
.demo-canvas{position:absolute;inset:0}
.demo-canvas canvas{width:100%;height:100%;display:block}
.demo-top{position:relative;z-index:2;display:flex;justify-content:space-between;gap:16px;padding:calc(var(--hd,64px) + 14px) 32px 0;color:var(--bone-2)}
.demo-top .mono{font-size:12px!important;color:var(--bone-2)}

/* loop ring: bottom-right of the field */
.loop-ring{position:absolute;z-index:3;right:32px;bottom:118px;width:132px;height:132px;background:rgba(241,236,223,.9);border-radius:50%;backdrop-filter:blur(6px);box-shadow:0 0 0 1px var(--line)}
.loop-ring svg{width:100%;height:100%;display:block}
.ring-arc{stroke:rgba(26,20,16,.2);transition:stroke .3s}
.ring-arc.on{stroke:var(--moss)}
.ring-hand{transform-origin:60px 60px;transition:transform .12s linear}
.ring-labels span{position:absolute;font:500 11px/1 Archivo,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-2)}
.ring-labels [data-l=sense]{top:-2px;left:50%;transform:translate(6px,-100%)}
.ring-labels [data-l=model]{top:50%;right:-6px;transform:translate(100%,6px)}
.ring-labels [data-l=act]{bottom:-2px;left:50%;transform:translate(-100%,100%) translateX(-6px)}
.ring-labels [data-l=adapt]{top:50%;left:-6px;transform:translate(-100%,-100%) translateY(-6px)}
.ring-centre{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.ring-centre .mono{font-size:12px!important;color:var(--bone-2)}
.ring-centre b{font:300 32px/1 Archivo,sans-serif;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.demo-sticky[data-phase=sense] .ring-labels [data-l=sense],.demo-sticky[data-phase=model] .ring-labels [data-l=model],.demo-sticky[data-phase=act] .ring-labels [data-l=act],.demo-sticky[data-phase=adapt] .ring-labels [data-l=adapt]{color:var(--moss)}

/* beats + progress */
.demo-beats{position:absolute;z-index:3;left:47%;bottom:56px;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(53% - 210px)}
.demo-beats button{font:500 11px/1 Archivo,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:12px 14px;min-height:44px;border:1px solid var(--line-2);background:rgba(241,236,223,.85);color:var(--bone-2);cursor:pointer;backdrop-filter:blur(6px)}
.demo-beats .replay{border-color:var(--ink);color:var(--ink)}
.demo-sticky[data-mode=steps][data-phase=sense] .demo-beats button:nth-child(1),.demo-sticky[data-mode=steps][data-phase=model] .demo-beats button:nth-child(2),.demo-sticky[data-mode=steps][data-phase=act] .demo-beats button:nth-child(3),.demo-sticky[data-mode=steps][data-phase=adapt] .demo-beats button:nth-child(4),.demo-sticky[data-mode=season] .demo-beats button:nth-child(5){background:var(--moss);color:var(--peat);border-color:var(--moss)}
.demo-progress{position:absolute;z-index:3;left:32px;right:32px;bottom:44px;height:1px;background:var(--line)}
.demo-progress i{display:block;height:100%;background:var(--moss);transform-origin:0 50%;transform:scaleX(0)}

/* captions: bottom of the architecture column */
.demo-copy{position:absolute;z-index:2;left:32px;bottom:60px;width:calc(43% - 32px);height:150px;display:grid;align-content:end}
.demo-copy>div{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s;pointer-events:none}
.demo-copy>div.on{opacity:1;transform:none;pointer-events:auto}
.demo-copy .mono{font-size:12px!important}
.demo-copy h2{font-size:clamp(22px,1.8vw,28px)!important;line-height:1.05;margin:6px 0 6px;letter-spacing:-.02em;font-weight:300;color:var(--ink)}
.demo-copy p{font-size:13.5px;line-height:1.4;color:var(--bone-2);max-width:none;margin:0}
.season-stats{display:grid;grid-template-columns:auto 1fr 1fr;gap:18px;margin:4px 0 8px}
.season-stats b{display:block;font:300 28px/1 Archivo,sans-serif;letter-spacing:-.02em;color:var(--ink);margin-top:2px;font-variant-numeric:tabular-nums}
.season-stats .mono{font-size:12px!important}

@media(max-width:900px){
  .demo-story{height:auto}
  .demo-sticky{position:relative;height:auto;display:block;padding-bottom:16px}
  .demo-canvas{position:relative;aspect-ratio:3/4;inset:auto}
  .demo-top{position:relative;padding:14px var(--pad) 8px;flex-wrap:wrap}
  .loop-ring{position:relative;right:auto;bottom:auto;margin:14px auto 0;width:132px;height:132px}
  .demo-beats,.demo-progress{display:none}
  .demo-copy{position:static;width:auto;padding:12px var(--pad) 0;display:block}
  .demo-copy>div{opacity:1;transform:none;pointer-events:auto;border-top:1px solid var(--line);padding:18px 0 6px}
  .demo-copy>div h2{font-size:24px!important}
  .season-stats{grid-template-columns:1fr 1fr 1fr}
}
@media(prefers-reduced-motion:reduce){.demo-copy>div,.ring-hand{transition:none}}