/* animations.css — scroll-reveal state'leri ve keyframe'ler. Kural: yalnızca opacity / transform / clip-path anime edilir. */ /* ======================================================== SCROLL REVEAL ÖNEMLİ: gizleme kuralları .js sınıfına bağlı. Bu sınıfı 'deki tek satırlık satır içi script koyuyor. JS hiç çalışmazsa hiçbir şey gizlenmez — içerik her koşulda görünür kalır. */ .js [data-reveal] { opacity: 0; transition: opacity .8s var(--ease), transform .8s var(--ease), clip-path .9s var(--ease-io); transition-delay: var(--rd, 0ms); } .js [data-reveal="up"] { transform: translateY(28px); } .js [data-reveal="left"] { transform: translateX(-30px); } .js [data-reveal="right"] { transform: translateX(30px); } .js [data-reveal="scale"] { transform: scale(.97); } .js [data-reveal="fade"] { transform: none; } .js [data-reveal="clip"] { clip-path: inset(0 0 105% 0); transform: translateY(8px); } .js [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 -5% 0); } .no-motion [data-reveal] { opacity: 1; transform: none; clip-path: none; transition: none; } /* ==================================================== HERO GİRİŞ STAGGER */ .js [data-hero] { opacity: 0; transform: translateY(26px); } .js.is-ready [data-hero] { animation: rise .9s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 85ms + 100ms); } .no-motion [data-hero] { opacity: 1; transform: none; animation: none; } @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* ============================================================ KEYFRAMES */ /* Hero scroll göstergesi */ @keyframes cue { 0% { transform: translateY(-100%); opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(280%); opacity: 0; } } /* Araç anatomisindeki bağlantı noktası halkası — scale + opacity (box-shadow animasyonu pahalı olduğu için kullanılmıyor) */ @keyframes ping { 0% { transform: scale(.5); opacity: .7; } 70% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } } /* PPF paneli: çizik açılır, sonra kendini kapatır */ @keyframes scr-heal { 0% { opacity: 0; transform: rotate(var(--r)) scaleX(.15); } 9% { opacity: 1; transform: rotate(var(--r)) scaleX(1); } 46% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--r)) scaleX(.55); } } /* PPF kapalıyken: çizik açılır ve kalıcı olur */ @keyframes scr-cut { 0% { opacity: 0; transform: rotate(var(--r)) scaleX(.15); } 100% { opacity: .82; transform: rotate(var(--r)) scaleX(1); } } /* Lightbox iskelet parıltısı */ @keyframes shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }