/* ============================================================
   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: .9s;
  --m-ease: cubic-bezier(.16,1,.3,1);         /* easeOutExpo — dot-hero kalıbı */
  --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;
}
/* CSS emniyeti: JS hiç çalışmazsa (engellendi/hata) perde kalkar, içerik görünür olur.
   motion.js init'te <html>'e .m-js ekler; bu kurallar yalnız JS'siz/başarısız durumda devreye girer. */
html:not(.m-js) .m-preloader{animation:m-pre-autohide .7s cubic-bezier(.76,0,.24,1) 3.4s forwards}
html:not(.m-js) [data-reveal]{animation:m-reveal-fallback .8s ease 4s forwards}
@keyframes m-pre-autohide{to{transform:translateY(-100%);visibility:hidden}}
@keyframes m-reveal-fallback{to{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}}
.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)}
}

/* ---------- 14) GLOSS BUTON (üst ışık şeridi + iç gölge — dot-hero) ---------- */
.m-gloss{position:relative;overflow:hidden;isolation:isolate}
.m-gloss::before{
  content:"";position:absolute;top:1.5px;left:10%;width:80%;height:38%;
  background:linear-gradient(to bottom, rgba(255,255,255,.55), transparent);
  border-radius:12px;pointer-events:none;z-index:1;
  transition:transform .3s var(--m-ease);
}
.m-gloss:hover::before{transform:scaleX(1.08)}
.m-gloss > *{position:relative;z-index:2}

/* ---------- 14b) VIDEO LIGHTBOX (JS: video[data-lightbox]) ---------- */
.m-lightbox{
  position:fixed;inset:0;z-index:10500;display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,9,.84);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:4vmin;opacity:0;transition:opacity .28s ease;
}
.m-lightbox.m-open{opacity:1}
.m-lightbox-inner{
  max-width:min(1100px,94vw);max-height:88vh;
  transform:scale(.94);transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.m-lightbox.m-open .m-lightbox-inner{transform:scale(1)}
.m-lightbox video{
  max-width:100%;max-height:88vh;display:block;border-radius:14px;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.85);background:#000;
}
.m-lightbox-close{
  position:absolute;top:18px;right:22px;width:46px;height:46px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer;z-index:2;
  transition:background .2s ease, transform .2s ease;
}
.m-lightbox-close:hover{background:rgba(255,255,255,.28);transform:rotate(90deg)}

/* ---------- 15) TYPING (daktilo mesaj döngüsü — JS: data-typing) ----------
   Kullanım: <span data-typing='["Mesaj 1","Mesaj 2"]'></span>
*/
[data-typing]{white-space:pre-wrap;word-break:break-word}
.m-type-cursor{
  display:inline-block;width:.45em;height:1em;margin-left:2px;
  background:currentColor;vertical-align:text-bottom;
  animation:m-blink .8s linear infinite;
}
@keyframes m-blink{0%,100%{opacity:0}50%{opacity:1}}

/* ---------- 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}
  .m-type-cursor{animation:none!important;opacity:0}
}