/* ============================================================
   Effects — React Bits'ten port edilmiş mikro-animasyonlar.
   Kaynak fikirler: reactbits.dev (BlurText, ScrollReveal/FadeContent,
   ShinyText, SoftAurora, ClickSpark). React yerine saf CSS + vanilla JS;
   build adımı ve bağımlılık YOK.

   Yükleme sırası: DesignPack -> Public.css -> Effects.css, yani buradaki
   kurallar public shell'i güvenle ezebilir. Renkler daima var(--...)
   token'larından gelir, böylece light/dark tema kendiliğinden uyar.

   Erişilebilirlik: her efekt `prefers-reduced-motion: reduce` altında
   animasyonsuz ama TAM GÖRÜNÜR son duruma düşer (içerik asla kaybolmaz).
   JS kapalıysa de aynı şekilde: başlangıç durumu `.fx-ready` sınıfına
   bağlıdır ve o sınıfı yalnızca JS ekler.
   ============================================================ */

/* ------------------------------------------------------------
   1) BlurText — hero başlığı/alt metni kelime kelime blur'dan gelir.
   JS her kelimeyi <span class="fx-word"> içine alır ve --i indeksini verir.
   ------------------------------------------------------------ */
.fx-blur-text .fx-word {
  display: inline-block;
  white-space: pre;
  will-change: opacity, transform, filter;
}

.fx-ready .fx-blur-text .fx-word {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px);
  animation: fxBlurIn 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  /* Kelime başına 70ms kademeli gecikme (React Bits'in `delay` prop'u) */
  animation-delay: calc(var(--i, 0) * 70ms + var(--fx-delay, 0ms));
}

@keyframes fxBlurIn {
  from { opacity: 0; filter: blur(10px); transform: translateY(14px); }
  60%  { filter: blur(2px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* ------------------------------------------------------------
   2) Reveal — scroll ile beliren bölümler (ScrollReveal / FadeContent).
   JS görünür olduğunda .is-in ekler; kardeşler arasında otomatik stagger.
   ------------------------------------------------------------ */
.fx-ready [data-fx-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}

.fx-ready [data-fx-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Animasyon bittikten sonra will-change'i bırak (kompozisyon katmanı sızmasın) */
.fx-ready [data-fx-reveal].fx-done { will-change: auto; }

/* ------------------------------------------------------------
   3) ShinyText — CTA/badge üzerinde yavaşça geçen parlama.
   Saf CSS: metnin kendisi maskeli bir gradient olur.
   ------------------------------------------------------------ */
/* Süpürme rengi tema-farkında olmalı: koyu zeminde metni AÇIYORUZ (beyaza),
   açık zeminde KOYULAŞTIRIYORUZ. Aksi halde açık zeminde beyaz süpürme,
   yazının içinden geçen bir "boşluk" gibi görünür. */
.fx-shiny { --fx-shine: #fff; --fx-shine-amt: 85%; }
[data-theme="light"] .fx-shiny { --fx-shine: #000; --fx-shine-amt: 45%; }

.fx-shiny {
  background: linear-gradient(
    100deg,
    currentColor 0%,
    currentColor 38%,
    color-mix(in srgb, var(--fx-shine) var(--fx-shine-amt), currentColor) 50%,
    currentColor 62%,
    currentColor 100%
  );
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: fxShine 4.5s linear infinite;
}

/* Butonun içindeki metin için: buton zeminini bozmadan sadece yazı parlar */
.btn .fx-shiny { display: inline-block; }

@keyframes fxShine {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

/* `color-mix` desteklemeyen tarayıcılarda metin şeffaf kalmasın */
@supports not (color: color-mix(in srgb, #fff 50%, #000)) {
  .fx-shiny {
    background: none;
    color: inherit;
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
}

/* ------------------------------------------------------------
   4) SoftAurora — hero arkasında yumuşak, yavaş sürüklenen ışıma.
   Markup değişikliği yok: .pub-hero::before/::after kullanılır.
   Renkler primary + pub shell accent token'larından.
   ------------------------------------------------------------ */
.pub-hero { position: relative; isolation: isolate; }

.pub-hero::before,
.pub-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.5;
}

.pub-hero::before {
  inset: -120px -80px auto -80px;
  height: 320px;
  background: radial-gradient(
    ellipse at 30% 40%,
    color-mix(in srgb, var(--color-primary) 55%, transparent) 0%,
    transparent 68%
  );
  animation: fxAuroraA 18s ease-in-out infinite alternate;
}

.pub-hero::after {
  inset: -60px -40px auto 30%;
  height: 260px;
  background: radial-gradient(
    ellipse at 60% 50%,
    color-mix(in srgb, var(--accent, #f59e0b) 40%, transparent) 0%,
    transparent 70%
  );
  animation: fxAuroraB 22s ease-in-out infinite alternate;
}

@keyframes fxAuroraA {
  from { transform: translate3d(-4%, 0, 0) scale(1); }
  to   { transform: translate3d(6%, 5%, 0) scale(1.12); }
}

@keyframes fxAuroraB {
  from { transform: translate3d(4%, 3%, 0) scale(1.08); }
  to   { transform: translate3d(-6%, -2%, 0) scale(0.95); }
}

/* Light temada ışıma çok baskın olmasın */
[data-theme="light"] .pub-hero::before { opacity: 0.28; }
[data-theme="light"] .pub-hero::after  { opacity: 0.2; }

/* ------------------------------------------------------------
   5) ClickSpark — tıklama noktasında kısa ömürlü ışın patlaması.
   Canvas JS tarafından oluşturulur; burada sadece konumlanır.
   ------------------------------------------------------------ */
.fx-spark-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* ------------------------------------------------------------
   5b) Hero pop — tıklamada yay çizip sönen minik ikonlar.
   Parçacıklar JS tarafından (Web Animations API) oynatılır; burada yalnız
   katman ve başlangıç durumu var. Hareketin tamamı JS'te: her parçacığın
   yayı rastgele, CSS'te tarif edilemez.
   ------------------------------------------------------------ */
.fx-pop-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;      /* kenardan taşan parçacık yatay kaydırma açmasın */
  pointer-events: none;
  z-index: 9998;         /* kıvılcım canvas'ının (9999) hemen altı */
}

/* opacity:0 başlangıç ŞART: WAAPI ilk kareyi yazana kadar geçen bir frame'de
   parçacık tıklama noktasında olduğu yerde görünüp zıplıyordu. */
.fx-pop {
  position: absolute;
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
}

/* ------------------------------------------------------------
   6) CountUp — dashboard istatistik sayıları sayarken zıplamasın.
   Rakamlar sabit genişlikte olur, layout titremez.
   ------------------------------------------------------------ */
.cx-stat-value.fx-counting {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------
   Reduced motion — her şey anında son duruma.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fx-ready .fx-blur-text .fx-word,
  .fx-ready [data-fx-reveal] {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .fx-shiny {
    background: none;
    color: inherit;
    -webkit-text-fill-color: currentColor;
    animation: none;
  }

  .pub-hero::before,
  .pub-hero::after { animation: none; }
}