/* ==========================================================================
   CosmoVerse — Kaydırma ve hareket katmanı
   CSS scroll-driven animations (Chrome 115+, Safari 26+) varsa CSS'te,
   yoksa motion.js/main.js (IntersectionObserver) devreye girer.
   Yalnızca transform / opacity animasyonu. prefers-reduced-motion → hepsi kapalı.
   ========================================================================== */

/* Genel: hover'da will-change; dokunmatikte hover yok */
@media (hover:hover) and (pointer:fine){
  .btn-primary{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,background .18s ease}
  .btn-primary:active{transform:scale(.97)}
}
@media (pointer:coarse){
  .btn-primary:active{transform:scale(.97)}
}

/* ---- Sayfa ilerleme çubuğu (CSS scroll timeline) ---- */
@keyframes cv-grow{to{transform:scaleX(1)}}
@supports (animation-timeline: scroll()){
  html.sda .scroll-progress i{animation:cv-grow linear both;animation-timeline:scroll(root)}
}

/* ---- Parallax katmanları: CSS view timeline; JS yedeği motion.js'te ---- */
@keyframes cv-drift{from{transform:translateY(var(--amp,40px))}to{transform:translateY(calc(var(--amp,40px)*-1))}}
@supports (animation-timeline: view()){
  html.sda [data-parallax]{animation:cv-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%;--amp:28px}
  html.sda .final [data-parallax]{--amp:22px}
  @media(max-width:760px){html.sda [data-parallax]{--amp:10px}}
}

/* ---- Kelime kelime aydınlanan metin ---- */
.words .w{opacity:.22;transition:opacity .45s ease;transition-delay:calc(var(--i,0)*28ms)}
.words.in .w{opacity:1}
@supports (animation-timeline: view()){
  @keyframes cv-lit{to{opacity:1}}
  html.sda .words .w{transition:none;animation:cv-lit linear both;animation-timeline:view();animation-range:cover calc(22% + var(--i,0)*.35%) cover calc(42% + var(--i,0)*.35%)}
}

/* ---- Kart eğimi (3D tilt) — yalnızca fare ---- */
@media (hover:hover) and (pointer:fine){
  .tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .25s ease,box-shadow .24s ease,border-color .24s ease}
  .tilt:hover{will-change:transform}
}

/* ---- İmleç spot ışığı (koyu kartlar) ---- */
@media (hover:hover) and (pointer:fine){
  .spot{--x:50%;--y:50%;position:relative;contain:paint}
  .spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;z-index:0;
    background:radial-gradient(240px circle at var(--x) var(--y),color-mix(in srgb,var(--accent,var(--gold-400)) 20%,transparent),transparent 65%)}
  .spot:hover::before{opacity:1}
  .spot > *{position:relative;z-index:1}
}

/* ---- Bağlayıcı çizgi / ilerleme çubukları ---- */
@supports (animation-timeline: view()){
  html.sda .kc-prog i::after,html.sda .bar-t i{animation:cv-grow linear both;animation-timeline:view();animation-range:entry 10% entry 70%;transition:none}
}

/* ---- Hero slayt geçişi: aktif slayt için mevcut slideUp kalır ---- */

/* ---- Yapışkan bölümlerde kayan başlık ---- */
.sec-head.reveal h2{text-wrap:balance}

/* ---- Reduced motion: her şey açık ve sabit ---- */
@media (prefers-reduced-motion: reduce){
  .words .w{opacity:1}
  .scroll-progress i{transition:none}
  .story-steps .step{opacity:1}
  .story-phone .scr{transition:none}
  .hero-stage .layer{transition:none;transform:none}
  .float-chip,.hero-stage .mascot,.motto-mascot,.motto-art .bird,.motto-art .moon{animation:none}
  .ring-fill,.bar-t i,.pp-bars i::before,.kc-prog i::after{transition:none;transform:none;stroke-dashoffset:0}
}