/* =============================================================================
   Vidanya tanıtım sayfası v2 — HAREKET KATMANI
   Sürekli döngüler (@keyframes) + görünürlükte açığa çıkarma (reveal) sistemi.

   Bölünmüş sorumluluk:
     · Bu dosya  → kendi kendine dönen döngüler ve `.is-in` / `.is-live` hedef durumları.
     · motion.js → kaydırma/imleç ile SÜRÜLEN değerler (--t, --cx, --py, --vd2-skew…).

   ERİŞİLEBİLİRLİK: en altta `prefers-reduced-motion` bloğu TÜM döngüleri durdurur ve
   açığa çıkarma sistemini kapatır (içerik anında görünür kalır).
   ========================================================================== */

/* ============================================ AÇIĞA ÇIKARMA (REVEAL) */
/* Öğe görünüm alanına girdiğinde motion.js `.is-in` ekler.
   `--i` sıra numarası kademeli gecikme üretir (kartlar tek tek gelir). */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  filter: blur(9px);
  transition:
    opacity 780ms cubic-bezier(.22,1,.36,1) calc(var(--i, 0) * 85ms),
    transform 780ms cubic-bezier(.22,1,.36,1) calc(var(--i, 0) * 85ms),
    filter 780ms cubic-bezier(.22,1,.36,1) calc(var(--i, 0) * 85ms);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Perde açılışı: öğe soldan sağa "yazılıyormuş" gibi belirir */
[data-reveal="wipe"] {
  transform: none;
  filter: none;
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 900ms cubic-bezier(.76,0,.24,1) calc(var(--i, 0) * 85ms),
    opacity 380ms ease calc(var(--i, 0) * 85ms);
}
[data-reveal="wipe"].is-in { clip-path: inset(0 0 0 0); }

/* Yukarı doğru "kalkan" kart — hafif ölçek payıyla.
   Blur BİLİNÇLİ olarak yok: kartlar büyük yüzeylerdir ve aynı anda 6-12 tanesinin
   blur katmanı oluşturması ilk sürümde kare hızını yere indirdi. */
[data-reveal="rise"] {
  transform: translate3d(0, 46px, 0) scale(0.965);
  filter: none;
  transition:
    opacity 700ms cubic-bezier(.22,1,.36,1) calc(var(--i, 0) * 85ms),
    transform 700ms cubic-bezier(.22,1,.36,1) calc(var(--i, 0) * 85ms);
}

/* ==================================== KAYDIRMA HIZINA TEPKİ (MOMENTUM) */
/* motion.js `--vd2-skew` yazar (±1.2deg). Hızlı kaydırmada ızgaralar hafifçe
   eğilir ve yavaşlarken yerine oturur — sayfaya fiziksel ağırlık hissi verir. */

.vd2-warp {
  transform: skewY(var(--vd2-skew, 0deg));
  transition: transform 420ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

/* ======================================================= SÜREKLİ DÖNGÜLER */

/* Vurgu kelimesindeki akan degrade */
@keyframes vd2-flow {
  to { background-position: 300% 50%; }
}
.vd2-grad-text { animation: vd2-flow 7s linear infinite; }

/* Birincil butonun üzerinden geçen ışık huzmesi */
@keyframes vd2-sheen {
  0%, 62% { left: -140%; }
  100% { left: 140%; }
}
.vd2-btn--primary::after { animation: vd2-sheen 3.6s cubic-bezier(.4,0,.2,1) infinite; }

/* Canlı nokta — dışa doğru sönen halka */
@keyframes vd2-ping {
  70% { box-shadow: 0 0 0 11px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.vd2-dot { animation: vd2-ping 2.1s cubic-bezier(0,0,.2,1) infinite; }

/* Yüzen istatistik kartları — her biri farklı fazda salınır */
@keyframes vd2-bob {
  50% { transform: translate3d(0, -13px, 60px); }
}
.vd2-float { animation: vd2-bob 6.4s ease-in-out infinite; }
.vd2-float:nth-of-type(2) { animation-duration: 7.6s; animation-delay: -1.9s; }
.vd2-float:nth-of-type(3) { animation-duration: 5.8s; animation-delay: -3.4s; }
.vd2-float:nth-of-type(4) { animation-duration: 8.2s; animation-delay: -0.8s; }

/* Entegrasyon çekirdeği — nefes alan hale + hafif süzülme */
@keyframes vd2-breathe {
  50% { transform: scale(1.06); opacity: 0.75; }
}
.vd2-net-core::before { animation: vd2-breathe 4.4s ease-in-out infinite; }

@keyframes vd2-hover-y {
  50% { transform: translateY(-14px); }
}
.vd2-net-core img { animation: vd2-hover-y 7s ease-in-out infinite; }
.vd2-sec-core img { animation: vd2-hover-y 8.5s ease-in-out infinite; }

/* Güvenlik kalkanını tarayan ışık çizgisi */
@keyframes vd2-scan {
  0% { top: 8%; opacity: 0; }
  12% { opacity: 0.9; }
  88% { opacity: 0.9; }
  100% { top: 88%; opacity: 0; }
}
.vd2-sec-core::after { animation: vd2-scan 3.8s cubic-bezier(.45,0,.55,1) infinite; }

/* Güvenlik rozetlerinin yörünge salınımı — merkez etrafında hafif gezinme */
@keyframes vd2-orbit {
  50% { transform: translate(-50%, -50%) translate(var(--ox, 8px), var(--oy, -10px)); }
}
.vd2-sec-badge { animation: vd2-orbit 9s ease-in-out infinite; }
.vd2-sec-badge:nth-child(2n) { animation-duration: 11s; animation-delay: -2.5s; }
.vd2-sec-badge:nth-child(3n) { animation-duration: 13s; animation-delay: -5s; }

/* Öne çıkan planın dönen degrade kenarlığı.
   @property olmadan conic-gradient açısı animasyonlanamaz — açıyı burada tanımlıyoruz. */
@property --spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes vd2-spin {
  to { --spin: 360deg; }
}
.vd2-plan--hot::before { animation: vd2-spin 6s linear infinite; }

/* Kart kenarlığındaki imleç açısı da animasyonlanabilir olsun */
@property --ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Toptan bloğu + son CTA: yavaşça yer değiştiren renk bulutları (aurora) */
@keyframes vd2-aurora {
  33% { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); }
  66% { transform: translate3d(-3%, 4%, 0) rotate(-6deg) scale(1.04); }
}
.vd2-b2b::before { animation: vd2-aurora 17s ease-in-out infinite; }
.vd2-cta::before { animation: vd2-aurora 21s ease-in-out infinite reverse; }

/* Ağ kablolarındaki akan enerji — motion.js paketleri path üzerinde yürütür,
   burada yalnızca kabloların kendi "canlılık" parıltısı var. */
@keyframes vd2-wire {
  to { stroke-dashoffset: -240; }
}
.vd2-net-wires path {
  stroke-dasharray: 5 11;
  animation: vd2-wire 6s linear infinite;
}

/* Kargo hareket adımları — pano görünür olunca sırayla "yanar"; en son adım
   nefes alır (gönderi hâlâ yolda hissi). Gerçek panelin takip sütununun kopyası. */
@keyframes vd2-step-pop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.14); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes vd2-step-live {
  50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.20); }
}
.is-live .vd2-steps i.lit { animation: vd2-step-pop 460ms cubic-bezier(.22,1,.36,1) backwards; }
.is-live .vd2-steps i.lit:nth-child(1) { animation-delay: 160ms; }
.is-live .vd2-steps i.lit:nth-child(2) { animation-delay: 320ms; }
.is-live .vd2-steps i.lit:nth-child(3) { animation-delay: 480ms; }
.is-live .vd2-steps i.now {
  animation:
    vd2-step-pop 460ms cubic-bezier(.22,1,.36,1) backwards,
    vd2-step-live 2.2s ease-in-out 900ms infinite;
}

/* Mağaza vitrini — ekranın üzerinden geçen ışık huzmesi (hover) */
@keyframes vd2-store-sweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

/* Metin çözümleme (decode) sırasında geçici karakterler */
.vd2-scramble { color: var(--vd2-blue-hi); opacity: 0.85; }

/* ============================================== HAREKET AZALTMA TERCİHİ */

@media (prefers-reduced-motion: reduce) {
  /* Tüm döngüleri durdur, geçişleri anlık yap */
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* Açığa çıkarma sistemi kapalı: içerik daima görünür */
  [data-reveal],
  [data-reveal="wipe"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  /* Kaydırmaya bağlı 3B eğilmeler düz kalsın */
  .vd2-warp { transform: none !important; }
  .vd2-dash-tilt { transform: none !important; }
  .vd2-scene { transform: none !important; }
  .vd2-store { transform: none !important; }

  /* Vitrin kartında hover-scroll'u kapat */
  .vd2-store:hover .vd2-store-view img { transform: none !important; }
}