/* ============================================================
   MOTION.CSS — cinematic-site kütüphanesi (v1)
   Her projeye kopyalanır: assets/motion.css
   Eşlik eden dosya: motion.js (Motion.init() çağrılmalı)
   Tüm animasyonlar prefers-reduced-motion'da kapanır.
   ============================================================ */

:root{
  --m-dur: .8s;
  --m-ease: cubic-bezier(.22,.61,.36,1);      /* easeOutCubic-vari */
  --m-ease-spring: cubic-bezier(.34,1.56,.64,1); /* hafif overshoot */
  --m-stagger: 90ms;
  --m-glow-a: #FFD100;   /* proje paletine göre değiştir */
  --m-glow-b: #ffffff;
  --m-cursor-size: 10px;
  --m-cursor-ring: 38px;
}

/* ---------- 1) REVEAL SİSTEMİ ----------
   Kullanım: data-reveal="up|in|left|right|scale|blur|clip"
   Grup stagger: ebeveyne data-reveal-stagger (çocuklara otomatik gecikme, JS)
*/
[data-reveal]{opacity:0;will-change:transform,opacity}
[data-reveal="up"]    {transform:translateY(34px)}
[data-reveal="in"]    {transform:none}
[data-reveal="left"]  {transform:translateX(-40px)}
[data-reveal="right"] {transform:translateX(40px)}
[data-reveal="scale"] {transform:scale(.92)}
[data-reveal="blur"]  {filter:blur(12px);transform:translateY(14px)}
[data-reveal="clip"]  {clip-path:inset(0 0 100% 0);transform:none}
[data-reveal].m-in{
  opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0);
  transition:
    opacity var(--m-dur) var(--m-ease),
    transform var(--m-dur) var(--m-ease),
    filter var(--m-dur) var(--m-ease),
    clip-path calc(var(--m-dur) * 1.1) var(--m-ease);
  transition-delay:var(--m-delay, 0ms);
}

/* ---------- 2) SPLIT TEXT (kelime kelime açılış) ----------
   Kullanım: <h1 data-split>Başlık</h1> — JS kelimelere böler.
*/
[data-split] .m-word{
  display:inline-block;overflow:hidden;vertical-align:top;
}
[data-split] .m-word > span{
  display:inline-block;transform:translateY(110%);
  transition:transform .9s var(--m-ease);
  transition-delay:calc(var(--m-i, 0) * 70ms + var(--m-delay, 0ms));
}
[data-split].m-in .m-word > span{transform:translateY(0)}

/* ---------- 3) MARQUEE (kayan şerit) ----------
   Kullanım: .m-marquee > .m-marquee-track > (içerik x2, aynısı iki kez)
*/
.m-marquee{overflow:hidden;position:relative}
.m-marquee-track{display:flex;width:max-content;animation:m-slide var(--m-marquee-speed,26s) linear infinite}
.m-marquee:hover .m-marquee-track{animation-play-state:paused}
@keyframes m-slide{to{transform:translateX(-50%)}}

/* ---------- 4) GLOW BORDER (dönen ışıklı kenarlık) ----------
   Kullanım: .m-glow (position:relative + border-radius kendi stilinden)
*/
.m-glow{position:relative;isolation:isolate}
.m-glow::before{
  content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;
  background:conic-gradient(from var(--m-angle,0deg),
    transparent 0 70%, var(--m-glow-a) 82%, var(--m-glow-b) 88%, var(--m-glow-a) 94%, transparent 100%);
  opacity:0;transition:opacity .35s ease;
  animation:m-rotate 3.2s linear infinite paused;
}
.m-glow:hover::before,.m-glow.m-glow-on::before{opacity:1;animation-play-state:running}
@property --m-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes m-rotate{to{--m-angle:360deg}}

/* ---------- 5) SHINE (parlama süpürmesi) ---------- */
.m-shine{position:relative;overflow:hidden}
.m-shine::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:none;pointer-events:none;
}
.m-shine:hover::after{left:130%;transition:left .8s var(--m-ease)}

/* ---------- 6) FLOAT (yüzen nesne) ---------- */
.m-float{animation:m-float 5.5s ease-in-out infinite}
.m-float-slow{animation:m-float 8s ease-in-out infinite}
@keyframes m-float{0%,100%{transform:translateY(0) rotate(var(--m-rot,0deg))}50%{transform:translateY(-14px) rotate(var(--m-rot,0deg))}}

/* ---------- 7) TILT (3D kart eğimi — JS ile) ---------- */
.m-tilt{transform-style:preserve-3d;transition:transform .25s ease;will-change:transform}

/* ---------- 8) MAGNETIC (mıknatıs buton — JS ile) ---------- */
.m-magnetic{display:inline-flex;transition:transform .25s var(--m-ease-spring);will-change:transform}

/* ---------- 9) CUSTOM CURSOR (yalnızca fine pointer, JS ekler) ---------- */
.m-cursor-dot,.m-cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;
  transform:translate(-50%,-50%);
}
.m-cursor-dot{width:var(--m-cursor-size);height:var(--m-cursor-size);background:var(--m-glow-a);mix-blend-mode:difference}
.m-cursor-ring{
  width:var(--m-cursor-ring);height:var(--m-cursor-ring);
  border:1.5px solid var(--m-glow-a);opacity:.6;
  transition:width .25s ease,height .25s ease,opacity .25s ease;
}
body.m-cursor-active .m-cursor-ring{width:64px;height:64px;opacity:.9}
@media (pointer:coarse){.m-cursor-dot,.m-cursor-ring{display:none}}

/* ---------- 10) PRELOADER ----------
   Kullanım: <div class="m-preloader"><div class="m-preloader-word">MARKA</div></div>
   JS: yükleme bitince .m-done ekler; 2.6s emniyet tavanı.
*/
.m-preloader{
  position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  background:var(--m-preloader-bg,#111110);
  transition:transform .7s cubic-bezier(.76,0,.24,1) .15s;
}
.m-preloader-word{display:flex;gap:.06em;font-weight:700;letter-spacing:.22em;color:var(--m-preloader-fg,#F6F3EC)}
.m-preloader-word span{
  display:inline-block;transform:translateY(120%);opacity:0;
  animation:m-pre-in .6s var(--m-ease) forwards;
  animation-delay:calc(var(--m-i) * 60ms);
}
.m-preloader .m-bar{
  position:absolute;bottom:0;left:0;height:3px;width:0;background:var(--m-glow-a);
  animation:m-pre-bar 1.6s var(--m-ease) forwards .3s;
}
.m-preloader.m-done{transform:translateY(-100%)}
@keyframes m-pre-in{to{transform:translateY(0);opacity:1}}
@keyframes m-pre-bar{to{width:100%}}

/* ---------- 11) PARALLAX (JS: data-parallax="0.2") ---------- */
[data-parallax]{will-change:transform}

/* ---------- 12) SCROLL PROGRESS ÇUBUĞU ---------- */
.m-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--m-glow-a);z-index:9998}

/* ---------- 13) BLOB / MESH ARKA PLAN ---------- */
.m-blob{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;
  animation:m-blob-drift 16s ease-in-out infinite alternate;
}
@keyframes m-blob-drift{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(6%, -8%) scale(1.15)}
}

/* ---------- REDUCED MOTION: her şey kapanır ---------- */
@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-split] .m-word>span{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
  .m-marquee-track,.m-float,.m-float-slow,.m-blob,.m-glow::before{animation:none!important}
  .m-preloader{display:none!important}
  .m-cursor-dot,.m-cursor-ring{display:none!important}
  .m-tilt,.m-magnetic{transform:none!important}
}