/* The glass-sheet micro-animation for BATech View (the family twin of Trace's pebble pk.css).
   Hover, keyboard focus or a tap on a [data-vk] host FANS the stack: the front sheet slides
   forward along the reading line first, the back sheet slides back a beat later, the middle sheet
   holds, so the stack opens about its own centre and never moves toward the word beside it (8 Oct
   review: the old fan slid every sheet toward the V). The halo rises and one pulse of light runs
   the line once, lighting each sheet as it passes. Leaving compacts the stack.
   Transform and opacity only, ~0.46 s, on the pebbles' own curve (no overshoot); nothing at all under reduced motion.
   Distances are in each drawing's own units (the mark's 100-unit box), set per variant:
     --vk1 / --vk3  how far the back / front sheet slide (sized so each moves ~1.5-4 px)
     --vk-run       how far the pulse travels (from the line's start to its end)
   Markup (generated; one prefix per instance):
     .vk  .vk-halo  .sh.sh1/.sh2/.sh3  .vk-line  .vk-bl  .vk-fl1/2/3  .vk-sweep
   Safe beside Trace's pk.css: no shared hooks except svg.lk / .lk-div, which both set the same way. */
:root{--vk-ease:cubic-bezier(.22,.61,.36,1)}
svg.vlk,svg.vkm,svg.vkb{display:block;overflow:visible}
svg.vlk{width:auto;aspect-ratio:var(--lk-ar)}
.vlk-f{--lk-ar:5.981;--vk1:4;--vk3:4.6;--vk-run:66}
.vlk-s{--lk-ar:6.014;--vk1:6;--vk3:7;--vk-run:66}
.vkm{--vk1:3;--vk3:3.2;--vk-run:85}
.vkb{--vk1:7;--vk3:8;--vk-run:84}
.vk .sh,.vk .vk-halo,.vk .vk-sweep,.vk .vk-fl,.vlk .lk-div{transform-box:fill-box;transform-origin:50% 50%}
.vk .sh{transition:transform .46s var(--vk-ease)}
.vk .sh1{transition-delay:0s}             /* compacting: the front sheet lands last */
.vk .sh3{transition-delay:.06s}
.vk .vk-halo{opacity:0;transition:opacity .5s ease}
.vk .vk-sweep,.vk .vk-fl{opacity:0}
.vlk .lk-div{transition:opacity .4s ease}

/* the open state, written once and shared by hover, focus and the tap class */
.vk-open .vk .sh3{transform:translateX(calc(var(--vk3) * 1px));transition-delay:0s}
.vk-open .vk .sh1{transform:translateX(calc(var(--vk1) * -1px));transition-delay:.06s}
.vk-open .vk .vk-halo{opacity:1}
.vk-open .vlk .lk-div{opacity:.7}
.vk-open .vk .vk-sweep{animation:vk-run .56s cubic-bezier(.42,0,.38,1) both}
.vk-open .vk .vk-fl1{animation:vk-flash .32s ease-out .09s both}
.vk-open .vk .vk-fl2{animation:vk-flash .32s ease-out .16s both}
.vk-open .vk .vk-fl3{animation:vk-flash .32s ease-out .24s both}
@media (hover:hover){
  [data-vk]:hover .vk .sh3{transform:translateX(calc(var(--vk3) * 1px));transition-delay:0s}
  [data-vk]:hover .vk .sh1{transform:translateX(calc(var(--vk1) * -1px));transition-delay:.06s}
  [data-vk]:hover .vk .vk-halo{opacity:1}
  [data-vk]:hover .vlk .lk-div{opacity:.7}
  [data-vk]:hover .vk .vk-sweep{animation:vk-run .56s cubic-bezier(.42,0,.38,1) both}
  [data-vk]:hover .vk .vk-fl1{animation:vk-flash .32s ease-out .09s both}
  [data-vk]:hover .vk .vk-fl2{animation:vk-flash .32s ease-out .16s both}
  [data-vk]:hover .vk .vk-fl3{animation:vk-flash .32s ease-out .24s both}
}
[data-vk]:focus-visible .vk .sh3,[data-vk]:focus-within .vk .sh3{transform:translateX(calc(var(--vk3) * 1px));transition-delay:0s}
[data-vk]:focus-visible .vk .sh1,[data-vk]:focus-within .vk .sh1{transform:translateX(calc(var(--vk1) * -1px));transition-delay:.06s}
[data-vk]:focus-visible .vk .vk-halo,[data-vk]:focus-within .vk .vk-halo{opacity:1}
[data-vk]:focus-visible .vlk .lk-div,[data-vk]:focus-within .vlk .lk-div{opacity:.7}
[data-vk]:focus-visible .vk .vk-sweep,[data-vk]:focus-within .vk .vk-sweep{animation:vk-run .56s cubic-bezier(.42,0,.38,1) both}
[data-vk]:focus-visible .vk .vk-fl1,[data-vk]:focus-within .vk .vk-fl1{animation:vk-flash .32s ease-out .09s both}
[data-vk]:focus-visible .vk .vk-fl2,[data-vk]:focus-within .vk .vk-fl2{animation:vk-flash .32s ease-out .16s both}
[data-vk]:focus-visible .vk .vk-fl3,[data-vk]:focus-within .vk .vk-fl3{animation:vk-flash .32s ease-out .24s both}
@keyframes vk-run{
  0%{transform:translateX(0);opacity:0}
  14%{opacity:1}
  84%{opacity:1}
  100%{transform:translateX(calc(var(--vk-run) * 1px));opacity:0}
}
/* each sheet flashes as the pulse passes its pierce point (peaks at ~170 / 240 / 320 ms) */
@keyframes vk-flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

/* the thinking indicator: the stack breathes open and shut about its centre and the line keeps reading */
@keyframes vk-breathe3{0%,100%{transform:none}50%{transform:translateX(calc(var(--vk3) * 1px))}}
@keyframes vk-breathe1{0%,100%{transform:none}50%{transform:translateX(calc(var(--vk1) * -1px))}}
@keyframes vk-glow{0%,100%{opacity:0}50%{opacity:1}}
.thinking.show .vk .sh3{animation:vk-breathe3 1.5s cubic-bezier(.45,.05,.25,1) infinite}
.thinking.show .vk .sh1{animation:vk-breathe1 1.5s cubic-bezier(.45,.05,.25,1) .08s infinite}
.thinking.show .vk .vk-halo{animation:vk-glow 1.5s ease-in-out infinite}
.thinking.show .vk .vk-sweep{animation:vk-run 1.5s cubic-bezier(.42,0,.38,1) infinite}

@media (prefers-reduced-motion:reduce){
  .vk .sh,.vk .vk-halo,.vk .vk-sweep,.vk .vk-fl,.vlk .lk-div{transition:none!important;animation:none!important;transform:none!important}
  .vk .vk-halo,.vk .vk-sweep,.vk .vk-fl{opacity:0!important}
  .vlk .lk-div{opacity:.32!important}
}