/* Kapanış imzası: Patlıcan çay keyfi. 6 sn'lik GIF gibi döngü, JS yok.
   Döngü: yudum (0-38%) > "Oh be!" keyfi (38-66%) > çaydanlık doldurur (66-94%) > dinlenme.
   Tüm parçalar aynı 6 sn'lik saati paylaşır; buhar 1.5 sn (6'yı tam böler). */
.tea-stage{
  --tea-ink:#2A1D16;--tea-glass:#FFFFFFB8;--tea-chai:#B8321A;--tea-chai-top:#E0662E;
  --tea-steam:#2A1D1666;--tea-steel:#D9DFE4;--tea-steel-shade:#A7B2BB;--tea-cream:#FFF7EF;
  --tea-purple:#BC2296;--tea-yellow:#FFD260;--tea-heart:#E0483A;
  --tea-loop:6s;
  width:min(270px,78vw);
}
@media (prefers-color-scheme:dark){
  .tea-stage{--tea-glass:#FFFFFFD0;--tea-steam:#F4EFE980}
}
.tea-svg{display:block;width:100%;height:auto;overflow:hidden}
.tea-svg *{transform-origin:0 0;transform-box:view-box}

/* Ortak saat */
.tea-body,.tea-pose,.tea-pos,.tea-tilt,.tea-level,.tea-fist,.tea-saucer,.tea-saucer-in,.tea-steam,
.tea-stream path,.tea-pot,.tea-bubble,.tea-joy{animation:var(--tea-loop) ease-in-out infinite}

/* Çizim */
.tea-glass-back{fill:var(--tea-glass)}
.tea-glass{fill:none;stroke:var(--tea-ink);stroke-width:4;stroke-linejoin:round}
.tea-shine{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.tea-liquid{fill:var(--tea-chai)}
.tea-surface{fill:var(--tea-chai-top)}
.tea-fist rect{fill:var(--tea-purple);stroke:var(--tea-ink);stroke-width:4}
.tea-fist path{stroke:var(--tea-ink);stroke-width:2.5;stroke-linecap:round}
.tea-saucer{fill:var(--tea-cream);stroke:var(--tea-ink);stroke-width:4}
.tea-saucer-in{fill:none;stroke:var(--tea-chai);stroke-width:2}
.tea-steam path{fill:none;stroke:var(--tea-steam);stroke-width:3.5;stroke-linecap:round;animation:tea-wisp 1.5s ease-in-out infinite}
.tea-steam path+path{animation-delay:-.75s}
.tea-stream path{fill:none;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100}
.tea-stream-edge{stroke:var(--tea-ink);stroke-width:8}
.tea-stream-in{stroke:var(--tea-chai);stroke-width:4}
.tea-pot-steel{fill:var(--tea-steel);stroke:var(--tea-ink);stroke-width:4.5;stroke-linejoin:round}
.tea-pot-shade{fill:var(--tea-steel-shade)}
.tea-pot-ink{fill:none;stroke:var(--tea-ink);stroke-width:6;stroke-linecap:round}
.tea-pot-shine{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.tea-bubble-bg{fill:var(--tea-cream);stroke:var(--tea-ink);stroke-width:4;stroke-linejoin:round}
.tea-bubble-text{font:900 23px var(--font,'Nunito',sans-serif);fill:var(--tea-ink)}
.tea-ray-ink{fill:none;stroke:var(--tea-ink);stroke-width:8.5;stroke-linecap:round}
.tea-ray{fill:none;stroke:var(--tea-yellow);stroke-width:4;stroke-linecap:round}
.tea-heart{fill:var(--tea-heart);stroke:var(--tea-ink);stroke-width:2.5}

/* Dinlenme karesi (animasyon yokken de görünen hal) */
.tea-pose-bliss{opacity:0}
.tea-pos{transform:translate(118px,210px)}
.tea-saucer,.tea-saucer-in{opacity:0}
.tea-pot{transform:translate(-90px,40px) rotate(-20deg)}
.tea-bubble,.tea-joy{opacity:0}

/* Kareler */
.tea-body{animation-name:tea-body}
.tea-pose-think{animation-name:tea-think}
.tea-pose-bliss{animation-name:tea-bliss}
.tea-pos{animation-name:tea-pos}
.tea-tilt{animation-name:tea-tilt}
.tea-level{animation-name:tea-level}
.tea-fist{animation-name:tea-fist}
.tea-saucer,.tea-saucer-in{animation-name:tea-saucer}
.tea-steam{animation-name:tea-steam}
.tea-stream path{animation-name:tea-pour}
.tea-pot{animation-name:tea-pot}
.tea-bubble{animation-name:tea-bubble}
.tea-joy{animation-name:tea-joy}

@keyframes tea-body{
  0%,8%,38%,100%{transform:none}
  20%,30%{transform:translate(160px,308px) rotate(-2.5deg) translate(-160px,-308px)}
  46%,58%{transform:translate(160px,308px) scale(1.025,.985) translate(-160px,-308px)}
  52%{transform:translate(160px,308px) scale(.99,1.015) translate(-160px,-308px)}
  64%{transform:none}
}
@keyframes tea-think{0%,39%{opacity:1}41%,64%{opacity:0}66%,100%{opacity:1}}
@keyframes tea-bliss{0%,39%{opacity:0}41%,64%{opacity:1}66%,100%{opacity:0}}
@keyframes tea-pos{
  0%,8%,34%,39.8%{transform:translate(118px,210px)}
  16%,30%{transform:translate(128px,224px)}
  40%,64.8%{transform:translate(158px,265px)}
  65%,100%{transform:translate(118px,210px)}
}
@keyframes tea-tilt{
  0%,8%,34%,100%{transform:none}
  16%,30%{transform:rotate(30deg)}
}
@keyframes tea-level{
  0%,8%{transform:none}
  16%{transform:rotate(-30deg)}
  30%{transform:rotate(-30deg) translateY(28px)}
  34%,76%{transform:translateY(28px)}
  86%,100%{transform:none}
}
@keyframes tea-fist{0%,39.8%{opacity:1}40%,64.8%{opacity:0}65%,100%{opacity:1}}
@keyframes tea-saucer{0%,39.8%{opacity:0}40%,64.8%{opacity:1}65%,100%{opacity:0}}
@keyframes tea-steam{0%,8%{opacity:1}11%,40%{opacity:0}46%,62%{opacity:.8}64%,88%{opacity:0}92%,100%{opacity:1}}
@keyframes tea-wisp{0%{opacity:0;transform:translateY(6px)}40%{opacity:1}100%{opacity:0;transform:translate(-3px,-8px)}}
@keyframes tea-pot{
  0%,66%{transform:translate(-90px,40px) rotate(-20deg)}
  71%{transform:translate(40px,96px) rotate(-8deg);animation-timing-function:ease-out}
  74%{transform:translate(90px,146px) rotate(0)}
  77%,85%{transform:translate(90px,146px) rotate(34deg)}
  88%{transform:translate(90px,146px) rotate(0)}
  94%,100%{transform:translate(-90px,30px) rotate(-20deg)}
}
@keyframes tea-pour{
  0%,76%{stroke-dashoffset:100}
  78%,85%{stroke-dashoffset:0}
  88%,100%{stroke-dashoffset:-100}
}
@keyframes tea-bubble{
  0%,43%{opacity:0;transform:translate(234px,98px) scale(.2) translate(-234px,-98px)}
  46%{opacity:1;transform:translate(234px,98px) scale(1.1) translate(-234px,-98px)}
  48%,60%{opacity:1;transform:none}
  63%,100%{opacity:0;transform:translate(234px,98px) scale(.8) translate(-234px,-98px)}
}
@keyframes tea-joy{
  0%,44%{opacity:0;transform:translateY(6px)}
  47%,58%{opacity:1;transform:none}
  62%,100%{opacity:0;transform:translateY(-8px)}
}

@media (prefers-reduced-motion:reduce){
  .tea-svg *{animation:none!important}
}