/* Ana sayfa hareket efektleri (assets/js/motion.js ile çalışır).
   Gizli başlangıç durumları yalnızca html.motion-ready varken uygulanır; JS çalışmazsa içerik normal görünür. */

:root {
  --motion-ease: cubic-bezier(.22, .61, .36, 1);
  --motion-dur: .8s;
}

/* Yandan kayan öğeler başlangıçta ekran dışına taşar; yatay kaydırma çubuğu çıkmasın.
   (clip, hidden'ın aksine kaydırma kabı oluşturmaz; sabit/yapışkan menüyü bozmaz) */
.motion-ready body { overflow-x: clip; }

/* ---------- Görünür olunca beliren öğeler ---------- */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--motion-dur) var(--motion-ease), transform var(--motion-dur) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0s);
}
.motion-ready [data-reveal="left"]  { transform: translateX(-40px); }
.motion-ready [data-reveal="right"] { transform: translateX(40px); }
.motion-ready [data-reveal="zoom"]  { transform: scale(.94); }

/* Başlık: alttan yukarı perde açılır gibi. Kırpma içteki span'de; başlığın kendisi kırpılırsa
   tarayıcı onu görünmez sayar ve IntersectionObserver hiç tetiklenmez. */
.motion-ready [data-reveal="slice"] { opacity: 1; transform: none; }
.motion-ready [data-reveal="slice"] > .slice-in {
  display: inline-block;
  transform: translateY(.35em);
  clip-path: inset(0 0 100% 0);
  transition: transform var(--motion-dur) var(--motion-ease), clip-path var(--motion-dur) var(--motion-ease);
}
.motion-ready [data-reveal="slice"].is-in > .slice-in {
  transform: none;
  clip-path: inset(0 0 -10% 0);
}

/* Sıralı: kapsayıcı görünür, çocukları tek tek gelir */
.motion-ready [data-reveal="stagger"] { opacity: 1; transform: none; }
.motion-ready [data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--motion-ease), transform .7s var(--motion-ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.motion-ready [data-reveal].is-in,
.motion-ready [data-reveal="stagger"].is-in > * {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* Başlık altındaki sarı çizgi soldan dolar */
.motion-ready .motion-bar {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--motion-ease) .25s;
}
.motion-ready .mx-auto.motion-bar { transform-origin: center; }
.motion-ready .motion-bar.is-in { transform: scaleX(1); }

/* ---------- Hero ----------
   İlk ekrandaki yazılar görünmez başlamaz, yalnızca yerine kayar: PageSpeed en büyük öğeyi (LCP)
   ancak görünür olduğunda sayar; gizli başlarsa ölçüm animasyon bitene kadar uzar. */
.motion-ready .hero-content [data-reveal] { opacity: 1; transform: translateY(18px); }
.motion-ready .hero-content [data-reveal].is-in { transform: none; }
.hero-video-section .hero-video-bg { will-change: transform; }

/* Kelimeler soluk ve biraz aşağıdan yerine oturur. Tamamen gizli başlamaz: başlık LCP öğesi,
   ilk karede görünür sayılmazsa PageSpeed LCP süresini animasyon bitene kadar uzatır. */
.motion-ready [data-split] .w {
  display: inline-block;
  vertical-align: bottom;
}
.motion-ready [data-split] .w > span {
  display: inline-block;
  opacity: .2;
  transform: translateY(.45em);
  transition: transform .8s var(--motion-ease), opacity .8s var(--motion-ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.motion-ready [data-split].is-in .w > span { opacity: 1; transform: none; }

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 3;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 14px;
  display: block;
}
.hero-scroll::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--primary);
  animation: hero-scroll 1.8s var(--motion-ease) infinite;
}
@keyframes hero-scroll {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ---------- Rozet şeridi: ikonlar hafif zıplayarak gelir ---------- */
.motion-ready .feature-badges-section [data-reveal="stagger"].is-in .badge-circle {
  animation: badge-pop .6s var(--motion-ease) both;
  animation-delay: calc(.2s + var(--i, 0) * 90ms);
}
@keyframes badge-pop {
  0%   { transform: scale(.6); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ---------- Kartlar: üzerine gelince görsel yakınlaşır ---------- */
.motion-card { transition: transform .35s var(--motion-ease), box-shadow .35s var(--motion-ease); }
.motion-card:hover { transform: translateY(-6px); }
.motion-card .motion-zoom { transition: transform .6s var(--motion-ease); }
.motion-card:hover .motion-zoom { transform: scale(1.07); }

/* ---------- Vizyon: zeminde yavaşça kayan ışık ----------
   background-position animasyonu her karede yeniden boyama yaptırır (PageSpeed'i düşürür);
   bunun yerine yalnızca transform ile kayan yarı saydam bir katman kullanılır. */
.motion-gradient { position: relative; overflow: hidden; isolation: isolate; }
.motion-gradient::before {
  content: "";
  position: absolute;
  inset: -50% -50%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(250, 180, 0, .14), transparent 70%);
  animation: motion-glow 20s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}
@keyframes motion-glow {
  from { transform: translate3d(-25%, -10%, 0); }
  to   { transform: translate3d(25%, 10%, 0); }
}

/* ---------- Hareketi azalt tercihi: her şey direkt görünür ---------- */
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal],
  .motion-ready [data-reveal="slice"] > .slice-in,
  .motion-ready [data-reveal="stagger"] > *,
  .motion-ready [data-split] .w > span,
  .motion-ready .motion-bar {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .hero-scroll::after,
  .motion-gradient::before,
  .motion-ready .feature-badges-section .badge-circle { animation: none !important; }
  .motion-card,
  .motion-card .motion-zoom { transition: none; }
  .motion-card:hover,
  .motion-card:hover .motion-zoom { transform: none; }
}