/* ==========================================================================
   LogWa — Hareket Kütüphanesi
   --------------------------------------------------------------------------
   Uygulamadaki animasyonların birebir web karşılıkları. Süreler tahmin
   edilmedi, koddan okundu (parantez içinde kaynak dosya).

   TEMEL KURAL — İÇERİK ASLA GİZLİ KALMAZ:
   Scroll reveal animasyonları "varsayılan görünür" prensibiyle kurulur.
   Öğeler HTML'de normal akışta ve tam opak durur. Gizleme işini
   `motion.js` yapar ve bunu yalnızca (a) JS çalışıyorsa ve (b) kullanıcı
   hareketi azaltmamışsa yapar. Bu yüzden `<html>` üzerine `js-motion`
   sınıfı eklenene kadar aşağıdaki .reveal kuralları devreye girmez.
   JS hata verse, geç yüklense ya da tamamen kapalı olsa bile sayfa
   okunabilir kalır.
   ========================================================================== */

/* ==========================================================================
   1. GİRİŞ ANİMASYONLARI (scroll reveal)
   ========================================================================== */

/*
 * FadeSlideIn karşılığı (components/fade_slide_in.dart)
 * Uygulama: 320ms easeOutCubic, yüksekliğin %24'ü kadar aşağıdan.
 * Web'de fraksiyonel offset yerine sabit 24px kullanılır — bölüm
 * yükseklikleri web'de çok değişken, oransal kayma dev bloklarda
 * abartılı duruyor.
 */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--d-normal) var(--e-enter),
    transform var(--d-normal) var(--e-enter);
  /* Animasyon süresince kompozit katmanda kalsın; bitince motion.js
     `is-revealed` ekleyip will-change'i kaldırır. */
  will-change: opacity, transform;
}

.js-motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Yön varyantları. Yatay girişler yalnızca yeterli genişlikte uygulanır;
   dar ekranda yatay kayma yatay kaydırma hissi veriyor. */
@media (min-width: 768px) {
  .js-motion [data-reveal="left"] {
    transform: translateX(-28px);
  }

  .js-motion [data-reveal="right"] {
    transform: translateX(28px);
  }
}

.js-motion [data-reveal="scale"] {
  transform: scale(0.96);
}

.js-motion [data-reveal="fade"] {
  transform: none;
}

/*
 * StaggeredColumn karşılığı (components/staggered_column.dart)
 * Panolarda firstDelay 120ms / stepDelay 55ms kullanılıyor; bu değerleri
 * default aldık. Gecikme, motion.js tarafından her çocuğa
 * `--reveal-delay` olarak yazılır.
 */
.js-motion [data-reveal] {
  transition-delay: var(--reveal-delay, 0ms);
}

/*
 * BlurRevealTitle karşılığı (components/blur_reveal_title.dart)
 * Uygulama: kelime başına 620ms, 85ms gecikmeli zincir, blur (1-p)*7px +
 * translateY (1-p)*10px + opaklık, easeOutCubic.
 * motion.js başlığı kelimelere bölüp her birine --word-index yazar.
 */
/*
 * SEÇİCİ TORUN, DOĞRUDAN ÇOCUK DEĞİL.
 *
 * Başlıklar vurgu için `<em>` taşıyor ("Ne Zaman <em>Çevrimiçi</em>
 * Bilin"). motion.js kelimeleri sararken `<em>` yapısını koruyor, yani
 * bazı `.word`lar `.blur-reveal`ın doğrudan çocuğu DEĞİL, `<em>`in
 * çocuğu oluyor. `>` kullanılsaydı vurgulu kelimeler hiç animasyon
 * almaz, blur'lu ve saydam kalırdı.
 */
.js-motion .blur-reveal .word {
  display: inline-block;
  opacity: 0;
  filter: blur(7px);
  transform: translateY(10px);
  transition:
    opacity 620ms var(--e-enter),
    filter 620ms var(--e-enter),
    transform 620ms var(--e-enter);
  /* Kelime adımı motion.js tarafından uzun başlıklarda 55ms'ye
     düşürülür; varsayılan uygulamanın 85ms'si. */
  transition-delay: calc(
    var(--word-index, 0) * var(--word-step, 85ms) + var(--word-start, 120ms)
  );
  will-change: opacity, filter, transform;
}

.js-motion .blur-reveal.is-revealed .word {
  opacity: 1;
  filter: blur(0);
  transform: none;
  will-change: auto;
}

/* ==========================================================================
   2. SONSUZ DÖNGÜLER
   --------------------------------------------------------------------------
   Hepsi `prefers-reduced-motion` altında durur (dosya sonundaki blok).
   ========================================================================== */

/*
 * PrimaryButton shine (components/primary_button.dart _ShineSweep)
 * 2200ms, bant genişliği butonun tamamı, white %0 → %30 → %0.
 * Flutter'da `left = -w + t*2w`; CSS'te translateX(-100% → 100%).
 */
@keyframes shine-sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/*
 * PrimaryButton pulse (1400ms, repeat reverse, ölçek 1.0 → 1.025)
 * Flutter'daki reverse:true döngüsünün karşılığı `alternate`.
 */
@keyframes pulse-scale {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.025);
  }
}

/*
 * ShimmerMask (components/shimmer_mask.dart)
 * 1800ms, ShaderMask ile metnin üzerinden geçen parlama.
 * Web'de background-clip:text + hareketli gradient pozisyonu.
 */
@keyframes shimmer-slide {
  from {
    background-position: -150% 0;
  }
  to {
    background-position: 250% 0;
  }
}

/*
 * FillProgressBar parlaması (components/fill_progress_bar.dart)
 * 1600ms, bant genişliği dolgunun %45'i, white %0 → %34 → %0.
 */
@keyframes fill-sheen {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(320%);
  }
}

/*
 * AuroraBackdrop blob dolaşımı (components/aurora_backdrop.dart)
 * Uygulamada 18 saniyelik döngüde sinüs/kosinüs ile konum sürülüyor.
 * CSS'te üç blob'a farklı faz ve yön vererek aynı "dolaşma" hissi
 * kuruluyor. Her blob kendi keyframe'ini kullanır ki yolları
 * senkronize görünmesin.
 */
@keyframes aurora-drift-1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(6%, 4%) scale(1.06);
  }
  50% {
    transform: translate(2%, 9%) scale(0.97);
  }
  75% {
    transform: translate(-5%, 3%) scale(1.04);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes aurora-drift-2 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  30% {
    transform: translate(-7%, 5%) scale(1.08);
  }
  60% {
    transform: translate(4%, -4%) scale(0.95);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes aurora-drift-3 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  40% {
    transform: translate(5%, -6%) scale(1.05);
  }
  70% {
    transform: translate(-4%, -2%) scale(1.02);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

/*
 * TestimonialMarquee (features/onboarding/widgets/testimonial_marquee.dart)
 * Uygulamada 26 px/s sabit hızla akar ve liste ikiye katlanarak kesintisiz
 * döngü kurulur. Web'de aynı yaklaşım: içerik iki kez basılır, şerit
 * -50% kaydırılır. Süre satır genişliğine göre --marquee-duration ile
 * verilir, böylece hız (px/s) sabit kalır.
 */
@keyframes marquee-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/*
 * Lottie fallback "nefes alma" (components/app_lottie.dart _FallbackGlyph)
 * 1600ms, repeat reverse, ölçek 0.92 → 1.00.
 * Uygulamada assets/lottie/ boş olduğu için bu fallback zaten devrede.
 */
@keyframes breathe {
  from {
    transform: scale(0.92);
    opacity: 0.85;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/*
 * Çevrimiçi durum noktası. CountdownPill'in nabız deseninden
 * (widgets/countdown_pill.dart, 900ms reverse, 0.85 → 1.15) türetildi.
 */
@keyframes status-pulse {
  0% {
    transform: scale(0.85);
    opacity: 1;
  }
  70% {
    transform: scale(1.9);
    opacity: 0;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

/* Yavaş dönüş — skor halkası ve dekoratif çemberler için */
@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}

/* Aşağı kaydır göstergesi */
@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

/* ==========================================================================
   3. GRAFİK AÇILIŞ ANİMASYONLARI
   --------------------------------------------------------------------------
   Uygulamada revealDuration 820ms / revealCurve easeOutQuint
   (components/charts/chart_theme.dart). charts.js bu sınıfları ekler.
   ========================================================================== */

/*
 * TÜM GRAFİK KURALLARI `.js-motion` ALTINDA.
 *
 * Reveal sistemiyle aynı gerekçe: başlangıç durumu (çubuk yüksekliği 0,
 * çizgi çizilmemiş, nokta ölçeği 0) yalnızca animasyonu sürecek JS
 * varsa uygulanır. Aksi halde JS kapalı bir tarayıcıda grafikler
 * kalıcı olarak boş kalır — kartın içi bomboş görünür ve kullanıcı
 * veriyi hiç göremez.
 */

/* Saatlik çubuk grafik: çubuklar alttan yukarı büyür. Yükseklik
   `--bar-height` ile veriden gelir; animasyon scaleY ile yapılır ki
   layout tetiklenmesin. */
.js-motion .chart-bar {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 820ms var(--e-emphasized);
  transition-delay: calc(var(--bar-index, 0) * 18ms);
}

.js-motion .is-chart-revealed .chart-bar {
  transform: scaleY(1);
}

/* Çizgi grafik: yol soldan sağa çizilir (stroke-dashoffset tekniği).
   Uzunluk charts.js tarafından ölçülüp --path-length olarak yazılır. */
.js-motion .chart-line {
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
  transition: stroke-dashoffset 820ms var(--e-emphasized);
}

.js-motion .is-chart-revealed .chart-line {
  stroke-dashoffset: 0;
}

/* Çizgi altındaki alan dolgusu: çizgi çizildikten sonra belirir */
.js-motion .chart-area {
  opacity: 0;
  transition: opacity 520ms var(--e-enter) 300ms;
}

.js-motion .is-chart-revealed .chart-area {
  opacity: 1;
}

/* Çizgi üzerindeki noktalar: sırayla yaydan çıkar */
.js-motion .chart-dot {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity var(--d-fast) var(--e-enter),
    transform var(--d-normal) var(--e-bounce);
  transition-delay: calc(var(--dot-index, 0) * 60ms + 320ms);
}

.js-motion .is-chart-revealed .chart-dot {
  opacity: 1;
  transform: scale(1);
}

/*
 * Donut ve halka grafikler: dairesel dolum.
 *
 * DİKKAT — BURADA BİR AYRIM VAR:
 * `stroke-dasharray` bir animasyon aracı DEĞİL, VERİDİR. Dilimin yay
 * uzunluğunu o belirliyor (tam çevre kadar dasharray + veriden gelen
 * dashoffset = istenen yay). Bu yüzden `.js-motion` DIŞINDA, her koşulda
 * uygulanır. Aksi halde hareketi azaltan kullanıcı iki yay yerine iki
 * TAM DAİRE görüyor ve grafik tamamen yanlış okunuyordu.
 *
 * `.js-motion` yalnızca BAŞLANGIÇ durumunu (yay tamamen gizli) ve
 * geçişi ekler.
 */
.chart-ring {
  stroke-dasharray: var(--ring-circumference, 100);
  stroke-dashoffset: var(--ring-offset, 0);
}

.js-motion .chart-ring {
  stroke-dashoffset: var(--ring-circumference, 100);
  transition: stroke-dashoffset 820ms var(--e-emphasized);
}

.js-motion .is-chart-revealed .chart-ring {
  stroke-dashoffset: var(--ring-offset, 0);
}

/* ==========================================================================
   4. HAREKETİ AZALT — TÜM DÖNGÜLERİ DURDUR
   --------------------------------------------------------------------------
   Uygulamadaki `MediaQuery.disableAnimationsOf` davranışı: sürekli
   animasyonlar kapanır, içerik son hâlinde görünür kalır.

   Dekoratif katmanlar (shine, sheen, grain) tamamen kaldırılır;
   bilgi taşıyan öğeler (grafikler, sayaçlar) son değerinde durur.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Reveal sistemi: her şey anında görünür */
  .js-motion [data-reveal],
  .js-motion .blur-reveal .word {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  /* Grafikler son hâlinde çizilir, animasyon yok */
  .js-motion .chart-bar,
  .js-motion .chart-line,
  .js-motion .chart-area,
  .js-motion .chart-dot,
  .js-motion .chart-ring {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* Halka son yay uzunluğunda durur */
  .chart-ring,
  .js-motion .chart-ring {
    stroke-dashoffset: var(--ring-offset, 0) !important;
  }

  .js-motion .chart-bar {
    transform: scaleY(1) !important;
  }

  .js-motion .chart-line {
    stroke-dashoffset: 0 !important;
  }

  /* Tüm sonsuz döngüler durur */
  [class*="anim-"],
  .btn__shine,
  .aurora__blob,
  .marquee__track,
  .status-dot::after {
    animation: none !important;
  }

  /* Dekoratif parlamalar tamamen kaldırılır: durdurulmuş bir shine bandı
     butonun ortasında sabit bir leke bırakıyor. */
  .btn__shine,
  .progress__sheen {
    display: none !important;
  }
}