/* The pebble stack micro-animation, shared by /trace and the homepage Trace band.
   Hover, keyboard focus or a tap on a [data-pk] host EXPANDS the stack (the stones lift apart
   a few px, top stone first), brightens the glow and pulses the trace lines; leaving COMPACTS
   it back. Transform and opacity only, 300-600 ms, and nothing at all under reduced motion.
   Distances are in each drawing's own units (--pk2/--pk3), sized so the lift is ~2-5 px. */
svg.lk,svg.pkb{display:block;overflow:visible}
svg.lk{width:auto;aspect-ratio:var(--lk-ar,6.8)}
.pk .st,.pk .st-k,.pk .pk-halo,.lk .lk-div,.pk-line{transform-box:fill-box;transform-origin:50% 100%}
.pk .st{transition:transform .46s cubic-bezier(.22,.61,.36,1)}
.pk .st2{transition-delay:.06s}
.pk .st-k{transition:opacity .3s ease}
.pk .pk-halo{opacity:0;transition:opacity .5s ease}
.lk .lk-div{transition:opacity .4s ease}
.pk-line{opacity:0}
.lk-f{--pk2:-3.4;--pk3:-7.2}
.lk-s{--pk2:-5;--pk3:-10.5}
.pkb-s{--pk2:-6;--pk3:-12.5}
.pk-svg{--pk2:-3;--pk3:-6.5}
.pk-open .pk .st3{transform:translateY(calc(var(--pk3) * 1px))}
.pk-open .pk .st2{transform:translateY(calc(var(--pk2) * 1px));transition-delay:.06s}
.pk-open .pk .st3{transition-delay:0s}
.pk .st3{transition-delay:.08s}
.pk-open .pk .st-k{opacity:0}
.pk-open .pk .pk-halo{opacity:1}
.pk-open .lk .lk-div{opacity:.7}
.pk-open .pk-line{animation:pk-pulse .6s cubic-bezier(.22,.61,.36,1) both}
@keyframes pk-pulse{0%{opacity:0}35%{opacity:.95}100%{opacity:0}}
@media (hover:hover){
  [data-pk]:hover .pk .st3{transform:translateY(calc(var(--pk3) * 1px));transition-delay:0s}
  [data-pk]:hover .pk .st2{transform:translateY(calc(var(--pk2) * 1px));transition-delay:.06s}
  [data-pk]:hover .pk .st-k{opacity:0}
  [data-pk]:hover .pk .pk-halo{opacity:1}
  [data-pk]:hover .lk .lk-div{opacity:.7}
  [data-pk]:hover .pk-line{animation:pk-pulse .6s cubic-bezier(.22,.61,.36,1) both}
}
[data-pk]:focus-visible .pk .st3,[data-pk]:focus-within .pk .st3{transform:translateY(calc(var(--pk3) * 1px));transition-delay:0s}
[data-pk]:focus-visible .pk .st2,[data-pk]:focus-within .pk .st2{transform:translateY(calc(var(--pk2) * 1px))}
[data-pk]:focus-visible .pk .pk-halo,[data-pk]:focus-within .pk .pk-halo{opacity:1}
[data-pk]:focus-visible .pk .st-k,[data-pk]:focus-within .pk .st-k{opacity:0}
/* the thinking indicator: the stack breathes open and shut while Trace reads */
@keyframes pk-breathe3{0%,100%{transform:none}50%{transform:translateY(calc(var(--pk3) * 1px))}}
@keyframes pk-breathe2{0%,100%{transform:none}50%{transform:translateY(calc(var(--pk2) * 1px))}}
@keyframes pk-glow{0%,100%{opacity:0}50%{opacity:1}}
.thinking.show .pk .st3{animation:pk-breathe3 1.5s cubic-bezier(.45,.05,.25,1) infinite}
.thinking.show .pk .st2{animation:pk-breathe2 1.5s cubic-bezier(.45,.05,.25,1) .08s infinite}
.thinking.show .pk .pk-halo{animation:pk-glow 1.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .pk .st,.pk .st-k,.pk .pk-halo,.lk .lk-div,.pk-line{transition:none!important;animation:none!important;transform:none!important}
  .pk .pk-halo,.pk-line{opacity:0!important}
  .pk .st-k{opacity:1!important}
  .lk .lk-div{opacity:.32!important}
}
