/* mascot motion · C0A
   Göz katmanı motion/mascot.js ile eklenir; JS yoksa hiçbir kural devreye girmez (.is-live yok). */

/* Görsel artık hareketi .m-rig / .m-poke üzerinden alır; img sabit kalır ki SVG gözlerle hizalı dursun. */
.mascot.is-live .mascot-btn img {
  display: block;
  transform: none !important;
  animation: none !important;
  transition: none;
}

/* imleç eğimi / uyuklama: bob (.mascot-btn) ile çakışmasın diye ayrı katman */
.m-rig {
  display: block;
  position: relative;
  width: fit-content;
  margin: 0 auto;
  transform-origin: 50% 88%;
  transform: translate3d(var(--m-tx, 0px), var(--m-ty, 0px), 0) rotate(var(--m-rot, 0deg));
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}
.mascot.is-sleeping .m-rig { transition-duration: 2.6s; }

/* dürtme: style.css'teki poke/active img yerine burada */
.m-poke { display: block; position: relative; transition: transform .15s; }
.mascot.is-live .mascot-btn:active .m-poke { transform: scale(.96) rotate(-2deg); }
.mascot.is-live.poked .m-poke { animation: poke .35s ease; }

.m-eyes {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* göz parıltısı: nefes gibi, hafif */
.m-glow { transition: opacity .12s linear; }
.m-glow-pulse { animation: m-glow 4.2s ease-in-out infinite; }
.m-glow-pulse.m-r { animation-delay: -.35s; }
@keyframes m-glow {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

/* imlece doğru kayan küçük ışık */
.m-glint {
  transform: translate(calc(var(--m-gx, 0) * 1px), calc(var(--m-gy, 0) * 1px));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

.m-lid { fill: #0C0E0E; }
.m-lash { fill: none; stroke: #2A2A2A; stroke-width: 1.4; stroke-linecap: round; }

/* "!" / "?" fırça işareti */
.m-mark { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.m-mark .m-fill { fill: #39FF14; }
.m-mark .m-stroke { fill: none; stroke: #39FF14; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.m-mark.is-on { animation: m-pop .95s cubic-bezier(.2, .9, .3, 1.2) forwards; }
@keyframes m-pop {
  0%   { opacity: 0; transform: scale(.2) rotate(-24deg); }
  22%  { opacity: 1; transform: scale(1.18) rotate(9deg); }
  38%  { transform: scale(1) rotate(-3deg); }
  75%  { opacity: 1; transform: scale(1) rotate(0deg) translateY(0); }
  100% { opacity: 0; transform: scale(.96) rotate(2deg) translateY(-8px); }
}

/* uyku: z z */
.m-zz { opacity: 0; transition: opacity .6s; }
.mascot.is-sleeping .m-zz { opacity: 1; transition-delay: 1.4s; }
.m-z {
  fill: #39FF14;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  transform-box: fill-box; transform-origin: 50% 50%;
  opacity: 0;
}
.mascot.is-sleeping .m-z { animation: m-z 3s ease-in-out infinite; }
.mascot.is-sleeping .m-z2 { animation-delay: 1s; }
.mascot.is-sleeping .m-z3 { animation-delay: 2s; }
@keyframes m-z {
  0%   { opacity: 0; transform: translate(-4px, 8px) scale(.7); }
  30%  { opacity: .95; }
  100% { opacity: 0; transform: translate(6px, -14px) scale(1.1); }
}

/* sekme gizli / maskot ekran dışı: CSS döngülerini dondur */
.mascot.is-paused .m-glow-pulse,
.mascot.is-paused .m-z { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .m-rig, .m-poke, .m-glint { transform: none !important; transition: none !important; }
  .m-eyes { display: none; }
}