/* Wasamio tema düğmesi ve "gelgit" geçişi — TEK KAYNAK.
   Bütün Wasamio oyunları bu dosyayı olduğu gibi kullanır (Kordo: kit/brand/theme.css,
   Sudoku: src/kit/brand/theme.css); oyunda düzenlenmez, kit-check sapmayı yakalar.
   Seçiciler kaskad sırasından bağımsızdır (.btn-icon.theme-btn): brand.css'ten
   önce ya da sonra bağlanabilir. Betik: kit/js/theme.js; işaretleme: kit/brand/markup.js.

   Ölçü: düğme 44 px (btn-icon), simge 30 px, ikisi de aynı merkezde.
   Hareket: yeni tema düğmeden yayılır (0,75 sn, --ease-tide); eski simge 0,24 sn'de
   suya batar, yeni simgenin küçük hikâyesi (dalga+güneş, ay+ışık, filiz+gül) bir
   kez oynar. Üç hikâye aynı ritimdedir: ~0,15 sn'de başlar, 0,62–0,8 sn'de biter
   (dalgayla birlikte; betik 0,9 sn'de bırakır). Geçiş sürerken gelen dokunuşlar
   birikir, geçiş bitince tek dalgayla son seçilen temaya gidilir (theme.js).
   Hareket azaltmada geçiş yok, simge anında değişir. */

.btn-icon.theme-btn {
  position: relative;
  overflow: hidden;
  background: var(--theme-chip);
}

@media (hover: hover) {
  .btn-icon.theme-btn:hover:not(:disabled) {
    background: var(--theme-chip);
  }
}

/* Simgeler tek sarmalda. Geçiş anında yalnız ESKİ simge kendi katmanına alınır
   (view-transition-name betikte, anlık görüntüden hemen önce verilir) ve suya
   batar; yeni simge zeminiyle birlikte gelgit maskesiyle gelir, renkler karışmaz. */
.theme-btn .embs {
  position: absolute;
  inset: 0;
}
::view-transition-group(theme-emb) {
  animation: none;
}
::view-transition-old(theme-emb) {
  animation: tb-sink 0.24s var(--ease-out) both;
}
@keyframes tb-sink {
  to {
    transform: translateY(5px) scale(0.92);
    opacity: 0;
  }
}
.theme-btn .emb {
  position: absolute;
  inset: 0px;
  width: 30px;
  height: 30px;
  margin: auto;
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}

.theme-btn .emb-day,
:root[data-theme="dark"] .theme-btn .emb-night,
:root[data-theme="rose"] .theme-btn .emb-rose {
  opacity: 1;
}

:root[data-theme="dark"] .theme-btn .emb-day,
:root[data-theme="rose"] .theme-btn .emb-day {
  opacity: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-btn .emb-day {
    opacity: 0;
  }
  :root:not([data-theme]) .theme-btn .emb-night {
    opacity: 1;
  }
}

.theme-btn .emb * {
  transform-box: fill-box;
}

.theme-btn .e-petal {
  opacity: 0;
}

.theme-btn[data-anim="light"] .e-waves {
  animation: tb-tide 0.5s var(--ease-out) both;
}

.theme-btn[data-anim="light"] .e-sun {
  animation: tb-sunrise 0.5s var(--ease-spring) 0.12s both;
}

@keyframes tb-tide {
  0% {
    transform: translateY(14px);
  }
}

@keyframes tb-sunrise {
  0% {
    transform: translateY(16px);
    opacity: 0;
  }
}

.theme-btn[data-anim="dark"] .e-moon {
  transform-origin: 60% 60%;
  animation: tb-moon 0.55s var(--ease-spring) both;
}

.theme-btn[data-anim="dark"] .e-spark {
  transform-origin: center center;
  animation: tb-twinkle 0.5s var(--ease-out) 0.16s both;
}

.theme-btn[data-anim="dark"] .e-spark-2 {
  animation-delay: 0.3s;
}

@keyframes tb-moon {
  0% {
    transform: translate(-6px, 10px) rotate(-25deg);
    opacity: 0;
  }
}

@keyframes tb-twinkle {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  45% {
    transform: scale(1.6);
    opacity: 1;
  }
}

.theme-btn[data-anim="rose"] .e-stem {
  transform-origin: 50% 100%;
  animation: tb-grow 0.3s var(--ease-out) both;
}

.theme-btn[data-anim="rose"] .e-leaf {
  animation: tb-unfurl 0.26s var(--ease-spring) 0.16s both;
}

.theme-btn[data-anim="rose"] .e-leaf-1 {
  transform-origin: 100% 100%;
}

.theme-btn[data-anim="rose"] .e-leaf-2 {
  transform-origin: 0px 100%;
  animation-delay: 0.22s;
}

.theme-btn[data-anim="rose"] .e-head {
  transform-origin: 50% 90%;
  animation: tb-bloom 0.42s var(--ease-spring) 0.24s both;
}

.theme-btn[data-anim="rose"] .e-petal {
  animation: tb-petal 0.44s var(--ease-out) 0.36s both;
}

@keyframes tb-grow {
  0% {
    transform: scaleY(0);
  }
}

@keyframes tb-unfurl {
  0% {
    transform: scale(0);
  }
}

@keyframes tb-bloom {
  0% {
    transform: scale(0.15) rotate(-20deg);
    opacity: 0;
  }
}

@keyframes tb-petal {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(-30deg);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(3px, 12px) rotate(20deg);
  }
}

::view-transition {
  pointer-events: none;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: auto ease 0s 1 normal none running none;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  mask-image: radial-gradient(
    circle closest-side,
    rgb(0, 0, 0) 70%,
    transparent 100%
  );
  mask-repeat: no-repeat;
  animation: tide-reveal 0.75s var(--ease-tide) both;
}

@keyframes tide-reveal {
  0% {
    mask-size: 0px 0px;
    mask-position: var(--vt-x) var(--vt-y);
  }
  100% {
    mask-size: var(--vt-d) var(--vt-d);
    mask-position: calc(var(--vt-x) - var(--vt-d) / 2)
      calc(var(--vt-y) - var(--vt-d) / 2);
  }
}

.tide-shore {
  position: fixed;
  z-index: 100;
  left: calc(var(--vt-x) - var(--vt-d) / 2);
  top: calc(var(--vt-y) - var(--vt-d) / 2);
  width: var(--vt-d);
  height: var(--vt-d);
  border-radius: var(--r-pill);
  pointer-events: none;
  background: radial-gradient(
    circle closest-side,
    transparent 62%,
    color-mix(in srgb, var(--primary) 22%, transparent) 76%,
    color-mix(in srgb, var(--primary) 8%, transparent) 88%,
    transparent 100%
  );
  view-transition-name: tide-shore;
}

.tide-shore.solo {
  view-transition-name: none;
  animation: tide-shore 0.75s var(--ease-tide) both;
}

::view-transition-new(tide-shore) {
  animation: tide-shore 0.75s var(--ease-tide) both;
}

::view-transition-group(tide-shore) {
  animation: auto ease 0s 1 normal none running none;
}

@keyframes tide-shore {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@media not (prefers-reduced-motion: reduce) {
  :root.theme-fade,
  :root.theme-fade * {
    transition:
      background-color 0.6s var(--ease-tide),
      color 0.6s var(--ease-tide),
      border-color 0.6s var(--ease-tide),
      fill 0.6s var(--ease-tide) !important;
  }
}

/* Dil düğmesi (TR/EN): tema düğmesiyle aynı 44 px, metin = diğer dilin kısaltması. */
.btn-icon.lang-btn {
  font: 700 var(--fs-small, 0.8125rem) / 1 var(--font, inherit);
  letter-spacing: 0.04em;
  min-width: 44px;
  min-height: 44px;
  background: var(--theme-chip);
  color: var(--ink-2);
}
.btn-icon.lang-btn {
  position: relative;
}
/* Dil değişimi: yeni dil kısaltması yumuşakça döner, etrafında bir halka dalgası yayılır.
   Yalnız transform/opacity; hareket azaltmada kapalı. */
@media not (prefers-reduced-motion: reduce) {
  .btn-icon.lang-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--ink-2);
    opacity: 0;
    pointer-events: none;
  }
  .btn-icon.lang-btn.lang-morph {
    animation: lang-flip 700ms cubic-bezier(0.22, 1.2, 0.36, 1);
  }
  .btn-icon.lang-btn.lang-morph::after {
    animation: lang-ring 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
  }
}
@keyframes lang-flip {
  0% {
    transform: perspective(240px) rotateY(-100deg) scale(0.86);
    opacity: 0.35;
  }
  55% {
    transform: perspective(240px) rotateY(10deg) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: perspective(240px) rotateY(0) scale(1);
  }
}
@keyframes lang-ring {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}