/* ==========================================================================
   Tavuk Games - hareket katmani
   main.css'ten SONRA yuklenir. Sadece animasyonla ilgili kurallari icerir,
   boylece istenirse tek satir kaldirilarak devre disi birakilabilir.
   Animasyonlari js/animations.js (GSAP + ScrollTrigger) surer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Giris animasyonu icin baslangic durumu
   .gs-motion sinifi <head> icindeki satir ici script ile, ilk boyamadan once
   eklenir. GSAP yuklenemezse ayni script sinifi 2.5sn sonra kaldirir; yani
   script coktugunde bile icerik her zaman gorunur kalir.
   -------------------------------------------------------------------------- */
html.gs-motion .site-header,
html.gs-motion .hero__eyebrow,
html.gs-motion .hero__line,
html.gs-motion .hero__copy,
html.gs-motion .hero .button,
html.gs-motion .hero__note,
html.gs-motion .hero__bottom,
html.gs-motion .hero__stamp,
html.gs-motion .reveal{opacity:0}

/* --------------------------------------------------------------------------
   2. GSAP'in yonettigi ogeler
   Bu ogelerde transform'u GSAP yaziyor; CSS transition araya girerse hareket
   akiciligini bozar, bu yuzden kapatiyoruz.
   -------------------------------------------------------------------------- */
.gs-owned{transition:none!important}

/* Tarayiciya hangi ogelerin surekli hareket ettigini bildir */
.hero__media img,
.studio__motto-track,
.studio__mascot,
.hero__stamp,
.wave-layer{will-change:transform}

/* --------------------------------------------------------------------------
   3. Motto seridi - sonsuz kayan marquee
   Serit js tarafinda ekran genisligini dolduracak kadar kopyalanir.
   -------------------------------------------------------------------------- */
.studio__motto{display:block;overflow:hidden;padding-inline:0}
.studio__motto-track{display:flex;align-items:center;gap:42px;width:max-content}
.studio__motto-set{display:flex;align-items:center;gap:42px;flex-shrink:0}
.studio__motto-set>span{flex-shrink:0}

@media(max-width:800px){
  .studio__motto-track,.studio__motto-set{gap:20px}
}
@media(max-width:580px){
  .studio__motto-track,.studio__motto-set{gap:21px}
  .studio__motto{padding-inline:0}
}

/* --------------------------------------------------------------------------
   3b. Deniz yuzeyi - hero'nun altindaki katmanli dalgalar
   Uc ayri SVG ust uste biner; her biri farkli hiz, yon ve derinlikte kayar.
   Her katman kabin genisliginin iki kati olup tam yarisi bir tam periyoda
   denk gelir, boylece dongu dikissiz kapanir.
   -------------------------------------------------------------------------- */
.wave-divider--live{height:58px;overflow:hidden;z-index:1;pointer-events:none}
.wave-layer{position:absolute;bottom:0;left:0;width:200%;height:100%}
.wave-layer--back{opacity:.32}
.wave-layer--mid{opacity:.58}
.wave-layer--front{opacity:1}

@media(max-width:800px){.wave-divider--live{height:46px}}
@media(max-width:580px){.wave-divider--live{height:38px}}

/* --------------------------------------------------------------------------
   4. Hareket azaltma tercihi
   Kullanici sistem ayarindan hareketi kisitladiysa hicbir sey gizlenmez ve
   serit sabit durur. js/animations.js da bu durumda hic calismaz.
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html.gs-motion .site-header,
  html.gs-motion .hero__eyebrow,
  html.gs-motion .hero__line,
  html.gs-motion .hero__copy,
  html.gs-motion .hero .button,
  html.gs-motion .hero__note,
  html.gs-motion .hero__bottom,
  html.gs-motion .hero__stamp,
  html.gs-motion .reveal{opacity:1}
  .studio__motto{display:flex;justify-content:center}
  .studio__motto-track{transform:none!important}
}