/* Turkish Spa — efekt: malzeme kemerleri ışıltısı (M8, K4d). Kullanım: BENIOKU.md. tokens.css --hareket-* okunur.
   Işık rengi mozaik bandın ışık bandından (rgb 255 214 140 → 255 232 180), daha hafif ve kemer biçiminde: kemerin yarım
   dairesinin merkezinden dönen yumuşak ışık (−86° → 86°); maske ışığı kemer kenarında toplar, içe doğru söndürür. JS yalnız sınıf + --mi-gecikme yazar. */

.efekt-mi {
  --mi-sure: var(--hareket-sure, 700ms);
  --mi-isik-sure: var(--hareket-sure-uzun, 900ms);
  --mi-egri: var(--hareket-egri, cubic-bezier(0.2, 0.7, 0.2, 1));
  --mi-kayma: min(var(--hareket-kayma, 16px), 12px);
  --mi-kalkma: var(--hareket-kalkma, 4px);   /* PLAN §1.9: ≤ 4 px (hareket azaltmada 0) */
}

/* Sıralı belirme (gizleme yalnız ekranda ve hareket serbestken) */
.efekt-mi__kart {
  transition:
    opacity var(--mi-sure) var(--mi-egri) var(--mi-gecikme, 0ms),
    translate var(--mi-sure) var(--mi-egri) var(--mi-gecikme, 0ms);
}
@media screen and (prefers-reduced-motion: no-preference) {
  .efekt-mi__kart--bekle { opacity: 0; translate: 0 var(--mi-kayma); }
}

/* Kemer ışığı */
.efekt-mi__kemer { position: relative; isolation: isolate; }
.efekt-mi__kemer::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1;             /* W × W kare: merkezi = kemer yayının merkezi (W/2, W/2), yarıçap = kemer */
  pointer-events: none;
  opacity: 0;
  rotate: -86deg;
  background: conic-gradient(from -34deg,
    rgb(255 214 140 / 0) 0deg, rgb(255 222 158 / 0.16) 18deg, rgb(255 232 180 / 0.46) 34deg,
    rgb(255 222 158 / 0.16) 50deg, rgb(255 214 140 / 0) 68deg, transparent 68deg);
  /* ışık kemer kenarında yoğun, içe doğru söner (merkezden çıkan huzme gibi değil) */
  -webkit-mask: radial-gradient(closest-side, transparent 0, rgb(0 0 0 / 0.1) 40%, rgb(0 0 0 / 0.42) 76%, #000 93%, #000 100%, transparent 106%);
  mask: radial-gradient(closest-side, transparent 0, rgb(0 0 0 / 0.1) 40%, rgb(0 0 0 / 0.42) 76%, #000 93%, #000 100%, transparent 106%);
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
}
.efekt-mi--supur .efekt-mi__kemer::after {
  animation: efekt-mi-supur var(--mi-isik-sure) var(--mi-egri) both;
}
@keyframes efekt-mi-supur {
  0% { rotate: -86deg; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { rotate: 86deg; opacity: 0; }
}

/* Fareyle üzerine gelince kemer kalkar (≤ 4 px), gölgesi yumuşakça uzar */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .efekt-mi__kemer {
    transition: translate var(--hareket-sure-kisa, 500ms) var(--mi-egri), box-shadow var(--hareket-sure-kisa, 500ms) var(--mi-egri);
  }
  .efekt-mi > :hover .efekt-mi__kemer {
    translate: 0 calc(-1 * var(--mi-kalkma));
    box-shadow: 0 12px 22px -14px rgb(43 36 29 / 0.42);
  }
}

@media (prefers-reduced-motion: reduce) {
  .efekt-mi__kemer::after { display: none; }
}