/* craft signature "pebbles" (Rock Painting): stones roll along a driftwood shelf and settle, an egg drops into a twig nest, then get painted as birds / cacti / clownfish.
   Compositor-only: transform + opacity on HTML boxes (SVG layers are separate <svg> elements, never animated inside). <=6 moving boxes, one-shot; will-change only before the intro starts. */
.pb-stage{position:relative;width:min(100%,540px);aspect-ratio:1/.9;margin:0 auto}
.pb-wall{position:absolute;inset:3% 3% 2%;border-radius:46% 54% 50% 50%/52% 48% 52% 48%;background:var(--sig-bg,#DCE8E6)}
.pb-shelf{position:absolute;left:1%;width:98%;height:8%;display:block;overflow:visible}
.pb-shelf-1{top:40%}.pb-shelf-2{top:82%}
.pb-nest{position:absolute;left:38%;width:44%;height:19.6%;top:63.5%;display:block;overflow:visible}
.pb-nest-f{pointer-events:none;z-index:2}
.pb-s{position:absolute;left:var(--l);bottom:var(--b);width:var(--w);aspect-ratio:100/84;cursor:pointer;-webkit-tap-highlight-color:transparent;--d:calc(var(--i)*.3s)}
.pb-s::after{content:"";position:absolute;left:8%;right:8%;bottom:-3%;height:9%;border-radius:50%;background:rgba(63,74,82,.22);z-index:-1}
.pb-in,.pb-spin{position:relative;width:100%;height:100%}
.pb-s svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.pb-egg{z-index:1}
.pb-t{opacity:0;transform:scale(.9);transform-origin:50% 80%;transition:opacity .45s ease var(--td,0s),transform .55s var(--bounce,cubic-bezier(.34,1.56,.64,1)) var(--td,0s)}
.pb-stage[data-t="0"] .pb-t0,.pb-stage[data-t="1"] .pb-t1,.pb-stage[data-t="2"] .pb-t2{opacity:1;transform:none}
.pb-s .pb-t{--td:calc(var(--i)*40ms)}
/* one-shot intro: JS-gated (html.cf-js), so no-JS / failed JS / reduced motion shows the painted scene */
.cf-js .pb-stage:not(.pb-go) .pb-s{opacity:0;will-change:transform}
.cf-js .pb-stage:not(.pb-go) .pb-t{opacity:0;transform:scale(.9)}
.cf-js .pb-intro.pb-go .pb-t{--td:calc(1.35s + var(--d))}
.pb-go .pb-s{animation:pb-tx 1.35s cubic-bezier(.22,.7,.3,1) var(--d) both}
.pb-go .pb-s .pb-spin{animation:pb-rot 1.35s cubic-bezier(.22,.7,.3,1) var(--d) both}
.pb-go .pb-egg{animation:pb-drop 1s cubic-bezier(.5,0,.6,1) 1.6s both}
.pb-go .pb-egg .pb-spin{animation:none}
@keyframes pb-tx{0%{transform:translateX(var(--from));opacity:0}5%{opacity:1}70%{transform:translateX(2.4%)}86%{transform:translateX(-.9%)}100%{transform:none;opacity:1}}
@keyframes pb-rot{0%{transform:rotate(var(--r0))}70%{transform:rotate(9deg)}86%{transform:rotate(-3deg)}100%{transform:none}}
@keyframes pb-drop{0%{transform:translateY(-170%) rotate(-24deg);opacity:0}8%{opacity:1}55%{transform:translateY(0) rotate(4deg)}72%{transform:translateY(-14%)}88%{transform:translateY(0)}100%{transform:none;opacity:1}}
/* repaint hop */
.pb-hop .pb-in{animation:pb-hop .6s cubic-bezier(.3,.7,.4,1) calc(var(--i)*70ms) both}
@keyframes pb-hop{0%,100%{transform:none}38%{transform:translateY(-20%) scaleY(1.05)}68%{transform:translateY(0) scaleY(.93)}85%{transform:scaleY(1.02)}}
/* controls */
.pb-ctl{margin-top:20px;text-align:center}
.pb-q{margin:0 0 10px;font:600 13px/1.3 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.pb-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pb-btn{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:6px 18px 6px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--paper,#fff);color:var(--ink);font:600 16px/1 var(--f-disp);cursor:pointer;transition:transform .15s var(--ease,ease)}
.pb-btn[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.pb-btn:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}
.pb-dot{width:22px;height:22px;border-radius:50% 46% 54% 50%/52% 50% 48% 52%;border:2px solid currentColor;flex:none}
.pb-dot0{background:#F26B4F}.pb-dot1{background:#6E8B5E}.pb-dot2{background:#F2873A}
.pb-replay{border-style:dashed;padding-left:14px}
.pb-cap{margin:14px auto 0;min-height:1.6em;max-width:40ch;font:600 18px/1.4 var(--f-disp);color:var(--ink)}
.pb-cap2{margin:6px auto 0;max-width:44ch;font-size:14px;color:var(--mute)}
@media (prefers-reduced-motion:reduce){
  .cf-js .pb-stage:not(.pb-go) .pb-s,.pb-go .pb-s,.pb-go .pb-s .pb-spin,.pb-go .pb-egg,.pb-hop .pb-in{animation:none!important;opacity:1!important;transform:none!important;will-change:auto}
  .pb-t{transition:none!important}
}