/* The clay Zıpır (zipir-kil.js). A .zk slot keeps the old 228x262 mascot box; inside it .zk-w holds the baked cell and the
   <img> strip (all of the mood's frames, left to right) shows one frame at a time (object-position steps). No SVG, no WebGL. */
.zk{position:relative;display:inline-block;vertical-align:middle;line-height:0;flex:none}
/* the slot's default width (zipirKil's size); :where() keeps it at zero specificity so any rule of the page wins */
:where(.zk){width:var(--zs,160px)}
.zk-w{position:absolute;overflow:hidden;transform-origin:50% 97%;animation:zk-breathe 2.8s ease-in-out infinite}
/* the strip is drawn through a one-cell window (object-fit:cover on a cell-sized img): no box ever sticks out of the slot */
.zk-i{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;max-height:none;border:0;object-fit:cover;object-position:0 0}
/* blink (2 frames): open most of the time, the shut frame for a beat */
.zk[data-mood=idle] .zk-i,.zk[data-mood=think] .zk-i,.zk[data-mood=calm] .zk-i{animation:zk-blink 4.6s infinite}
.zk[data-mood=calm] .zk-i{animation-duration:5.4s}
.zk[data-mood=calm] .zk-w{animation-duration:3.6s}
/* chew (2 frames) and wave (4 frames) */
.zk[data-mood=eat] .zk-i{animation:zk-chew .38s infinite}
.zk[data-mood=wave] .zk-i{animation:zk-wave .72s infinite}
.zk[data-mood=sleep] .zk-w{animation-duration:4.2s}
@keyframes zk-breathe{0%,100%{transform:none}50%{transform:translateY(-1.2%) scale(1.012,.988)}}
@keyframes zk-blink{0%,94.9%{object-position:0 0}95%,98.9%{object-position:100% 0}99%{object-position:0 0}}
@keyframes zk-chew{0%,49.9%{object-position:0 0}50%,100%{object-position:100% 0}}
@keyframes zk-wave{0%,24.9%{object-position:0 0}25%,49.9%{object-position:33.333% 0}50%,74.9%{object-position:66.667% 0}75%,100%{object-position:100% 0}}
/* the mood marks the flat mascot drew beside its head: a heart (happy), a bang (wow), z's (sleep) */
.zk[data-mood=happy]::after,.zk[data-mood=wow]::after,.zk[data-mood=sleep]::after,.zka[data-mood=happy]::after,.zka[data-mood=wow]::after{position:absolute;right:2%;top:0;line-height:1;font-weight:800;pointer-events:none;font-size:calc(var(--zs,160px) * .17)}
.zk-bust[data-mood=happy]::after,.zk-bust[data-mood=wow]::after,.zk-bust[data-mood=sleep]::after{display:none}
.zk[data-mood=happy]::after,.zka[data-mood=happy]::after{content:'\2665';color:#F0604A;animation:zk-heart 1.8s ease-out infinite}
.zk[data-mood=wow]::after,.zka[data-mood=wow]::after{content:'!';color:#16261E;font-family:'Bagel Fat One',sans-serif;animation:zk-pop .5s cubic-bezier(.34,1.56,.64,1) both}
.zk[data-mood=sleep]::after{content:'z\2009z';color:#4B574F;font-family:'Bagel Fat One',sans-serif;animation:zk-z 2.6s ease-in-out infinite}
@keyframes zk-heart{0%{opacity:0;transform:translateY(40%) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translateY(-110%) scale(1.1)}}
@keyframes zk-pop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes zk-z{0%{opacity:0;transform:translate(0,40%)}40%{opacity:1}100%{opacity:0;transform:translate(-30%,-90%)}}
/* a scripted hop (the old .zp.hopping) */
.zk.hopping .zk-w,.zka.hopping .zka-f{animation:zk-hop .9s cubic-bezier(.34,1.56,.64,1) both}
@keyframes zk-hop{0%{transform:none}18%{transform:translateY(3%) scale(1.08,.9)}50%{transform:translateY(-18%) scale(.92,1.1)}78%{transform:translateY(0) scale(1.08,.92)}100%{transform:none}}
/* the grid-atlas mascot (home page, footer): one frame shown by background-position, set from script */
.zka{position:relative;display:inline-block;vertical-align:middle;line-height:0}
.zka-f{position:absolute;background-repeat:no-repeat;transform-origin:50% 97%;animation:zka-bob 2.8s ease-in-out infinite,zka-sway 3.9s ease-in-out infinite}
/* MASKOT-SADECE EK 3: the old mascot never stood still (mascot.css zp-bob: 5 of 262 units up and down every 2.8 s, the spring
   squashing .94 with it, the tuft swaying). The baked figure gets the same breath on the same curve, plus a slow sway on a
   second period so the two never line up into a loop you can see. Individual translate/scale/rotate properties: they add to
   the inline transform that mirrors a frame. Both layers run the same clock, so a mixed pose never splits. */
@keyframes zka-bob{0%,100%{translate:0 0;scale:1 1}50%{translate:0 -1.9%;scale:1.012 .982}}
@keyframes zka-sway{0%,100%{rotate:-.8deg}50%{rotate:.8deg}}
.zka-ilk{position:absolute;overflow:hidden;display:none}.zka-ilk img{position:absolute;left:0;top:0;height:100%;max-width:none}
.zka-bekle .zka-f{visibility:hidden}.zka-bekle .zka-ilk{display:block}
@media (prefers-reduced-motion:reduce){.zk-w,.zk-i,.zk::after,.zka-f{animation:none!important}}

/* cache-bust 2026-11-14 */