/*
 * KANKA BAR - animasyonlar
 * Kaynak: docs/oyun-tasarim.md bolum 9.
 * Hepsi CSS transform/opacity uzerinden - layout tetiklenmez, mobilde akici kalir.
 *
 * Genel ilke: gerginlik hizda degil, DURAKLAMADA uretilir.
 */

/* 1) Kart atma - 0.3s, hizli ve akici */
.ucan-kart {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  transition: transform var(--sure-kart-atma) cubic-bezier(0.3, 0.9, 0.4, 1),
              opacity var(--sure-kart-atma) linear;
  will-change: transform, opacity;
}

/* 2) "YALAN!" - 0.5s, tam sessizlik + zoom + ekran donmasi */
@keyframes yalan-carpma {
  0%   { transform: scale(0.6) rotate(-6deg); opacity: 0; }
  35%  { transform: scale(1.25) rotate(2deg); opacity: 1; }
  70%  { transform: scale(1.1) rotate(0deg); }
  100% { transform: scale(1.12) rotate(0deg); opacity: 1; }
}

.yalan-perde {
  position: fixed; inset: 0; z-index: 45;
  display: grid; place-items: center;
  background: rgba(23, 19, 15, 0.55);
  pointer-events: none;
}
.yalan-perde .yazi {
  font-family: var(--font-baslik);
  font-size: clamp(3rem, 18vw, 8rem);
  color: var(--bordo);
  text-shadow: 0 0 0 var(--duman), 0 6px 0 var(--duman), 0 0 40px rgba(142, 43, 43, 0.8);
  animation: yalan-carpma var(--sure-yalan) cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

/* Tema tabelasi (assets/themes/<tema>/ui/yalan.png) */
.yalan-perde .yalan-tabela {
  width: min(78vw, 620px);
  aspect-ratio: 1536 / 1024;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 30px rgba(142, 43, 43, 0.85));
  animation: yalan-carpma var(--sure-yalan) cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

/* Ayna: ceza geri dondu - neon pembe, bordo degil (bu bir kurtulus) */
.ayna-perde .yazi {
  color: var(--neon);
  font-size: clamp(1.6rem, 9vw, 4rem);
  text-align: center;
  text-shadow: 0 4px 0 var(--duman), 0 0 40px rgba(217, 82, 122, 0.8);
}

/* Ekran donmasi: her sey bir an icin kilitlenir ve rengi cekilir */
.donuk { animation: don 120ms steps(2, end) 2; }
@keyframes don {
  0%, 100% { filter: none; transform: none; }
  50% { filter: grayscale(1) contrast(1.4); transform: translateX(3px); }
}

/* 3) Kart acilisi - kart basi 0.6s, BIRER BIRER */
@keyframes kart-cevir {
  0%   { transform: rotateY(0deg) translateY(0) scale(1); }
  45%  { transform: rotateY(90deg) translateY(-14px) scale(1.12); }
  55%  { transform: rotateY(90deg) translateY(-14px) scale(1.12); }
  100% { transform: rotateY(0deg) translateY(0) scale(1); }
}
.kart.aciliyor {
  animation: kart-cevir var(--sure-kart-acilis) ease-in-out forwards;
  backface-visibility: hidden;
  z-index: 2;
}

/* Acilan kart rutbeye uyuyor mu - okunakli olsun diye kenarlik rengi */
.kart.uyuyor { box-shadow: 0 3px 0 rgba(0,0,0,0.5), 0 0 0 3px var(--amber); }
.kart.uymuyor { box-shadow: 0 3px 0 rgba(0,0,0,0.5), 0 0 0 3px var(--bordo); }

/*
 * 4) Kadeh icme - 2.2s: kaldirir -> agzina goturur -> diker -> geri koyar.
 * --dx / --dy JS'te hesaplanir: kadehten karakterin agzina olan mesafe.
 */
@keyframes kadeh-dik {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  18%  { transform: translate(0, -14px) rotate(0deg) scale(1.1); }
  34%  { transform: translate(var(--dx, 0px), var(--dy, -40px)) rotate(-8deg) scale(1.3); }
  46%  { transform: translate(var(--dx, 0px), var(--dy, -40px)) rotate(-62deg) scale(1.3); }
  68%  { transform: translate(var(--dx, 0px), var(--dy, -40px)) rotate(-62deg) scale(1.3); }
  80%  { transform: translate(var(--dx, 0px), var(--dy, -40px)) rotate(-4deg) scale(1.25); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
.kadeh.diklenen {
  animation: kadeh-dik var(--sure-kadeh) cubic-bezier(0.4, 0.1, 0.3, 1) forwards;
  z-index: 3;
  position: relative;
}

/* Icilmeyen kadehler sahneden cekilir - goz tek kadehte kalsin */
.kadeh.geride { opacity: 0.35; transform: scale(0.9); }

/*
 * --- CEZA ARACI (bolum 9) ---
 * Birimden AYRI bir nesne: mermiyi secersin, SILAHLA atesler.
 * Kadehte karsiligi yok - orada birimin kendisi aractir.
 *
 * Konum JS'te yuze gore hesaplanir; buradaki donusumler ona GORE calisir,
 * yani gorselin olcusu degisse de hareket bozulmaz.
 */
.ceza-araci {
  position: fixed;
  z-index: 60;
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
  transform: translate(10%, 60%) rotate(14deg) scale(0.9);
  transition: opacity 260ms ease-out, transform 380ms cubic-bezier(0.3, 0.9, 0.4, 1);
}
/* 1) Kadraja girer */
.ceza-araci.gorunur { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
/* 2) Sakaga dayanir - basa dogru yaklasir ve hafif yatar */
.ceza-araci.sakakta { transform: translate(-16%, -6%) rotate(-8deg) scale(1.04); }
/* 3) Tetik: kisa ve sert geri tepme */
.ceza-araci.tetik { animation: geri-tep 220ms cubic-bezier(0.2, 0, 0.4, 1); }

@keyframes geri-tep {
  0%   { transform: translate(-16%, -6%) rotate(-8deg) scale(1.04); }
  30%  { transform: translate(-10%, -14%) rotate(-20deg) scale(1.08); }
  100% { transform: translate(-16%, -6%) rotate(-8deg) scale(1.04); }
}

/* Mermi silaha yuklenirken: kayar ve kucultup kaybolur */
.kadeh.yukleniyor {
  animation: haznee-gir 400ms cubic-bezier(0.4, 0.1, 0.3, 1) forwards;
  z-index: 3;
  position: relative;
}
@keyframes haznee-gir {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  70%  { transform: translate(var(--dx), var(--dy)) scale(0.75); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ceza-araci { transition-duration: 80ms; }
  .ceza-araci.tetik { animation-duration: 90ms; }
  .kadeh.yukleniyor { animation-duration: 120ms; }
}
.secim-tepsisi.icimde .kadeh { pointer-events: none; }

/* Lanetli kadeh ortaya cikiyor: mor parlama + titreme */
@keyframes lanetli-belir {
  0%   { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(147, 51, 234, 0)); }
  25%  { transform: scale(1.35) rotate(-4deg); filter: drop-shadow(0 0 18px rgba(147, 51, 234, 1)); }
  50%  { transform: scale(1.25) rotate(4deg); }
  75%  { transform: scale(1.3) rotate(-2deg); filter: drop-shadow(0 0 26px rgba(147, 51, 234, 1)); }
  100% { transform: scale(1.25) rotate(0deg); filter: drop-shadow(0 0 14px rgba(147, 51, 234, 0.9)); }
}
.kadeh.lanetli-acilis {
  animation: lanetli-belir 900ms ease-out forwards;
  z-index: 3;
  position: relative;
}

/* Lanetli an: perde bordoya doner */
.perde.lanetli-an {
  background: rgba(78, 14, 14, 0.96);
  animation: don 120ms steps(2, end) 3;
}
.perde.lanetli-an h2 { color: var(--bordo); }

@keyframes rahatla {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.05) translateY(-4px); }
  60%  { transform: scale(0.99) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}
.rahatladi { animation: rahatla 600ms cubic-bezier(0.3, 1.4, 0.5, 1); }

@keyframes cok {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; filter: none; }
  25%  { transform: translateY(8px) rotate(-3deg); }
  100% { transform: translateY(40px) rotate(-10deg); opacity: 0.3; filter: grayscale(0.8); }
}
.coktu { animation: cok 1s cubic-bezier(0.4, 0, 0.6, 1) forwards; }

/* 5) Tepki - 0.4s (bolum 9) */
@keyframes sirit {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
.tepki { animation: sirit var(--sure-tepki) ease-in-out; }

/*
 * Tell pozu belirirken kucuk bir kipirdanma. Bilerek SILIK: poz zaten
 * cogu zaman yalan soyluyor, animasyon onu one cikarirsa oyuncu kesin
 * bilgi sanir. Goz ucuyla yakalanmali (bolum 6).
 */
@keyframes tell-kipirdan {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-3px) scale(1.015); }
  100% { transform: translateY(0) scale(1); }
}
.yuz.tell { animation: tell-kipirdan var(--sure-tepki) ease-in-out; }

/* Sira vurgusu ve YALAN butonu nabzi */
@keyframes yalan-nabiz {
  0%, 100% { box-shadow: 0 0 0 0 rgba(142, 43, 43, 0.55); }
  50% { box-shadow: 0 0 0 10px rgba(142, 43, 43, 0); }
}

/* Kullanilabilir ozel kart hafifce nefes alir - unutulmasin */
@keyframes ozel-nabiz {
  0%, 100% { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 0 2px var(--amber); }
  50% { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 0 2px var(--amber),
                    0 0 14px rgba(232, 163, 61, 0.55); }
}

@keyframes sira-nabzi {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 163, 61, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(232, 163, 61, 0); }
}
.rakip.aktif { animation: sira-nabzi 2s ease-in-out infinite; }

/* Yeni el: rutbe yazisi tabela gibi iner */
@keyframes rutbe-in {
  0%   { transform: translateY(-24px) scale(0.85); opacity: 0; }
  60%  { transform: translateY(3px) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.rutbe.yeni { animation: rutbe-in 450ms cubic-bezier(0.2, 1.2, 0.4, 1); }

/* Kart dagitimi: elde kartlar sirayla yerine oturur */
@keyframes kart-gel {
  from { transform: translateY(40px) rotate(8deg); opacity: 0; }
  to   { transform: translateY(0) rotate(0deg); opacity: 1; }
}
.kart.dagitiliyor { animation: kart-gel 280ms ease-out backwards; }

/* Girdi kilidi: animasyon oynarken tiklanamaz */
.kilitli { pointer-events: none; }

/*
 * Hareket hassasiyeti olan oyuncular icin: animasyonlar kapanir ama
 * oyun akisi bozulmaz - sureler JS tarafinda da kisalir.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}