/* 19 · the infinite aperture (js/cycle.js): an endless loop where every step of a crop is a step of a brand, ridden by a
   lightbulb with a plant growing inside it. Its left lobe sits over "Plant + cultivate", its right over "Harvest + reseed". */
.cycle{position:relative;margin:40px 0 0;height:clamp(280px,32vw,420px)}
.cycle+.duo{margin-top:22px}
.cycle canvas{position:absolute;inset:0;width:100%;height:100%}
.cy-chip,.cy-lobe{position:absolute;left:50%;top:50%;translate:-50% -50%}
.cy-chip{display:grid;justify-items:center;gap:.15em;padding:.42em .6em .45em;background:#fff;color:#0b0b0c;border:2px solid #0b0b0c;box-shadow:4px 4px 0 #0b0b0c;
  font:700 clamp(10px,.95vw,13px)/1.1 var(--mono);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;
  transition:background-color .35s ease,scale .35s cubic-bezier(.3,1.6,.5,1)}
.cy-chip i{font-style:normal;font-weight:400;text-transform:none;letter-spacing:.02em;color:#55554f}
.cy-chip.on{background:var(--lime);scale:1.12}
.cy-lobe{font:700 clamp(9px,.85vw,12px)/1.25 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute);text-align:center;white-space:nowrap}
@media (prefers-reduced-motion:reduce){ .cy-chip{transition:none} }