/* ==========================================================================
   Animasyonlar — Framer build'inden çıkarılan birebir parametreler.

   Kaynak değerler (mafe.live bundle'ı):
     • yükleme (appear)  : ease [.44,0,.56,1], gecikmeler .4 / .6 / .8
     • dashboard         : spring  damping 100, mass 3, stiffness 500, delay .6
     • scroll reveal     : spring  damping 80,  mass 1, stiffness 250
     • kelime efekti     : blur(10px) + y20, tokenization word,      stagger .05, dur .7, ease [.12,.23,.17,.98]
     • harf efekti       : blur(10px) + y10, tokenization character, stagger .05, dur .4, spring bounce 0
     • highlights        : y40, delay .8, dur 1.5, ease [.12,.23,.17,.99]

   Yay hareketleri linear() ile sayısal olarak simüle edildi (aşağıdaki
   --spring-* değişkenleri), böylece CSS'te gerçek yay eğrisi korunuyor.
   ========================================================================== */

:root {
  --ease-framer: cubic-bezier(0.44, 0, 0.56, 1);
  --ease-soft:   cubic-bezier(0.12, 0.23, 0.17, 0.98);
  --ease-slow:   cubic-bezier(0.12, 0.23, 0.17, 0.99);

  /* damping 80 · mass 1 · stiffness 250 → 1.65s */
  --spring-scroll: linear(0, 0.214, 0.3997, 0.5353, 0.6451, 0.7289, 0.7929, 0.8419, 0.8776, 0.9065, 0.9286, 0.9455, 0.9583, 0.9677, 0.9754, 0.9812, 0.9856, 0.989, 0.9915, 0.9935, 1);
  /* damping 100 · mass 3 · stiffness 500 → 0.92s */
  --spring-dash:   linear(0, 0.1213, 0.3024, 0.4626, 0.59, 0.6881, 0.7631, 0.8201, 0.8634, 0.8962, 0.9212, 0.9416, 0.9557, 0.9664, 0.9745, 0.9806, 0.9853, 0.9888, 0.9915, 0.9936, 1);
}

/* ---------------------------------------------------------- 1. yüklenme -- */
/* JS yüklenmeden önce içerik görünmesin diye başlangıç durumları burada. */

[data-anim] { will-change: transform, opacity; }

[data-anim="up"]    { opacity: 0.001; transform: translateY(40px); }
[data-anim="glow"]  { opacity: 0.001; transform: translateY(40px); }

/* Dashboard: Framer'da iki ayrı efekt var —
   1) görünürlük (opacity) yay ile açılır,
   2) duruş (rotateX 40°→0, scale .9→1, y -80→0) SCROLL'a bağlı ilerler.
   İkincisi script.js tarafından --p (0→1) değişkeniyle sürülüyor. */
[data-anim="dash"] { opacity: 0.001; }

/* Not: özgüllük [data-anim].in kuralındaki `transform: none`u geçmek zorunda,
   yoksa görünürlük animasyonu yatıklığı sıfırlar. */
.dashboard[data-anim],
.dashboard[data-anim].in {
  --p: 0;
  transform:
    perspective(1200px)
    translateY(calc(-80px * (1 - var(--p))))
    rotateX(calc(40deg * (1 - var(--p))))
    scale(calc(0.9 + 0.1 * var(--p)));
  transform-origin: 50% 50%;
}

[data-anim].in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-framer), transform 0.6s var(--ease-framer);
}

/* h1 → delay .4 / dur .6 · buton → delay .8 / dur .4 */
[data-anim="up"][data-delay="0.4"].in { transition-duration: 0.6s; transition-delay: 0.4s; }
[data-anim="up"][data-delay="0.8"].in { transition-duration: 0.4s; transition-delay: 0.8s; }

[data-anim="dash"].in {
  transition: opacity 0.92s var(--spring-dash) 0.6s;
}
[data-anim="glow"].in {
  transition: opacity 1.5s var(--ease-slow) 0.8s, transform 1.5s var(--ease-slow) 0.8s;
}

/* --------------------------------------------------------- 2. metin efekti -- */

.split-token {
  display: inline-block;
  opacity: 0.001;
  filter: blur(10px);
  will-change: transform, opacity, filter;
}
/* kelime: y20 · dur .7 · ease [.12,.23,.17,.98] */
.split-word  { transform: translateY(20px); }
.split-word.in {
  opacity: 1; filter: blur(0); transform: none;
  transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft), filter 0.7s var(--ease-soft);
}
/* harf: y10 · dur .4 · spring bounce 0 (≈ yumuşak ease-out) */
.split-char  { transform: translateY(10px); }
.split-char.in {
  opacity: 1; filter: blur(0); transform: none;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ------------------------------------------------- 3. scroll ile beliren -- */
/* Framer'da yön elemana göre değişiyor: içerik/görsel sola veya sağa kayıyor */

[data-scroll]           { opacity: 0; will-change: transform, opacity; }
[data-scroll="left"]    { transform: translateX(-100px); }
[data-scroll="right"]   { transform: translateX(100px); }
[data-scroll="up"]      { transform: translateY(40px); }

[data-scroll].in {
  opacity: 1;
  transform: none;
  transition: opacity 1.65s var(--spring-scroll), transform 1.65s var(--spring-scroll);
}

/* ------------------------------------------------------- 4. header / nav -- */

.header__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(3, 3, 3, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.4s var(--ease-framer);
}
.header.scrolled .header__bg { opacity: 1; }

/* alt çizgili nav bağlantıları */
.nav a { position: relative; }
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease-framer);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* -------------------------------------------------------- 5. etkileşimler -- */

/* buton okunun kayması */
.btn svg { transition: transform 0.3s var(--ease-framer); }
.btn:hover svg { transform: translate(2px, -2px); }

/* kart hover: ikon yayı + etiketler + mor parıltı (Framer'daki "Light shade") */
.card__icon { transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1); }
.card:hover .card__icon { transform: translateY(-4px); }

.card .tags { transition: opacity 0.3s var(--ease-framer), transform 0.3s var(--ease-framer); }

.card { transition: border-color 0.35s var(--ease-framer); }
.card:hover { border-color: #2a2a44; }

/* görsellerin hafif yakınlaşması */
.split__visual img { transition: transform 0.6s var(--ease-framer); }
.split__visual:hover img { transform: scale(1.03); }

/* sosyal ikonlar */
.socials a { transition: background 0.25s var(--ease-framer), color 0.25s var(--ease-framer), transform 0.25s var(--ease-framer); }
.socials a:hover { transform: translateY(-2px); }

/* ------------------------------------------------ 6. hareket azaltma modu -- */

@media (prefers-reduced-motion: reduce) {
  [data-anim], [data-scroll], .split-token {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .dashboard[data-anim], .dashboard[data-anim].in { --p: 1; transform: none !important; }
  .card .tags { opacity: 1 !important; transform: none !important; }
  .ticker__track { animation: none; }
  html { scroll-behavior: auto; }
}