/* ============================================================
   Nibras — Karakterler (Selma, Adem ve kitap okuyan Adem)
   ============================================================
   Tanıtım sitesi (_Layout, playful.css'ten önce) ve üç panel
   (panel-playful.css'ten önce) bu dosyayı yükler; karakterlerin
   yüzü, göz kırpması, bakışı, zıplaması ve konfetisi TEK yerde
   tanımlıdır. Davranışı playful.js verir (--lx/--ly, .is-blink,
   .is-happy, .is-jump; window.nbConfetti).

   Konumlar SVG özniteliklerindedir; buradaki transform-origin
   değerleri o grubun YEREL koordinatındadır (px = kullanıcı birimi).
   Sahneye özgü giriş zıplaması ve konuşma balonları playful.css'te
   kalır (paneller kendi balonunu panel-playful.css'te çizer).
   ============================================================ */
.kid-spot { cursor: pointer; }
.kid { transform-origin: 0 0; }

.kid__body { transform-origin: 0 0; animation: pl-breathe 3.4s ease-in-out infinite; }
.kid-spot[data-kid="boy"] .kid__body { animation-delay: -1.2s; }
@keyframes pl-breathe { 0%, 100% { transform: none; } 50% { transform: translateY(-1.5px) scaleY(1.012); } }

.kid__head {
  transform-origin: 0 -130px;
  transform: rotate(calc(var(--lx, 0) * 5deg)) translate(calc(var(--lx, 0) * 2px), calc(var(--ly, 0) * 1.5px));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.kid__pupils {
  transform: translate(calc(var(--lx, 0) * 4.5px), calc(var(--ly, 0) * 3.5px));
  transition: transform .22s ease-out;
}
/* Göz kırpma BİLEREK geçişsiz: kapanıp açılma anlık bir sınıf değişimi.
   Geçiş olsaydı kare üretilmeyen bir anda (arka plan sekmesi) kırpma
   sınıfı kalktıktan sonra bile gözler yarı kapalı takılı kalabilirdi. */
.kid__eyes { transform-box: fill-box; transform-origin: center; }
.kid-spot.is-blink .kid__eyes { transform: scaleY(.08); }
.kid__happy { opacity: 0; transition: opacity .12s; }
.kid-spot.is-happy .kid__eyes { opacity: 0; }
.kid-spot.is-happy .kid__happy { opacity: 1; }
.kid__brows { transition: transform .25s var(--spring-pop); }
.kid-spot.is-happy .kid__brows { transform: translateY(-4px); }

/* Selma el sallar, örgüsü sallanır */
.kid__wave { transform-origin: -28px -116px; animation: pl-wave-arm 3.4s ease-in-out infinite 1.4s; }
.kid__palm { transform-origin: 0 10px; animation: pl-wave-palm 3.4s ease-in-out infinite 1.4s; }
@keyframes pl-wave-arm {
  0%, 44%, 100% { transform: rotate(0); }
  8%  { transform: rotate(-11deg); }
  16% { transform: rotate(7deg); }
  24% { transform: rotate(-11deg); }
  32% { transform: rotate(7deg); }
}
@keyframes pl-wave-palm {
  0%, 44%, 100% { transform: rotate(0); }
  8%  { transform: rotate(-14deg); }
  16% { transform: rotate(12deg); }
  24% { transform: rotate(-14deg); }
  32% { transform: rotate(12deg); }
}
.kid__braid { transform-origin: 42px -160px; animation: pl-braid 3.4s ease-in-out infinite; }
@keyframes pl-braid { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }

/* Adem'in perçemi zıplar, tableti gösterir */
.kid__tuft { transform-origin: 4px -219px; animation: pl-tuft 2.2s ease-in-out infinite; }
@keyframes pl-tuft { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(6deg); } }
.kid__tablet { transform-origin: 0 -82px; animation: pl-tablet 6s ease-in-out infinite 2s; }
@keyframes pl-tablet {
  0%, 62%, 100% { transform: none; }
  70%, 86% { transform: translateY(-5px) rotate(-7deg); }
}
.kid__play { transform-box: fill-box; transform-origin: center; animation: kid-pulse 1.6s ease-in-out infinite; }

/* Dokununca: çömel–zıpla–kon (squash & stretch) */
.kid-spot.is-jump .kid { animation: pl-kid-jump .72s cubic-bezier(.3, .8, .3, 1) both; }
.kid-spot.is-jump .kid__shadow { animation: pl-shadow-jump .72s cubic-bezier(.3, .8, .3, 1) both; }
.kid__shadow { transform-box: fill-box; transform-origin: center; }
@keyframes pl-kid-jump {
  0%   { transform: none; }
  14%  { transform: scale(1.07, .9); }
  42%  { transform: translateY(-38px) scale(.95, 1.06); }
  68%  { transform: translateY(0) scale(1.06, .93); }
  84%  { transform: scale(.98, 1.02); }
  100% { transform: none; }
}
@keyframes pl-shadow-jump {
  0%, 100% { transform: none; opacity: .14; }
  42% { transform: scale(.62); opacity: .07; }
}

/* Konfeti parçacıkları (playful.js üretir) */
.pl-confetti {
  position: absolute;
  z-index: 4;
  width: 9px; height: 13px;
  border-radius: 2px;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes kid-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }


/* ---------- Kitap okuyan Adem (_KidReader) ---------- */
.kid--reader .kid__body { animation: none; }
.kid__leg-l { transform-origin: -12px 2px; animation: pl-swing 1.9s ease-in-out infinite; }
.kid__leg-r { transform-origin: 12px 2px; animation: pl-swing 1.9s ease-in-out infinite -.95s; }
@keyframes pl-swing { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(12deg); } }
.kid__letter { font-family: var(--font-fun); opacity: 0; transform-box: fill-box; transform-origin: center; animation: pl-rise 4.4s ease-out infinite; }
.kid__letter--2 { animation-delay: 2.2s; }
@keyframes pl-rise {
  0%   { opacity: 0; transform: translateY(6px) scale(.6); }
  20%  { opacity: 1; }
  70%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-46px) scale(1.1); }
}


/* ---------- Azaltılmış hareket ----------
   Döngüler ve zıplama durur; karakter sabit bir resim olur. Bakışın
   yumuşak geçişi de kalkar. */
@media (prefers-reduced-motion: reduce) {
  .kid, .kid *, .pl-confetti { animation: none !important; }
  .kid__head, .kid__pupils { transition: none; }
}