/* =========================================================== OKUR DİŞ · WOW katmanı (tüm temalar için ortak) - Lenis smooth scroll (inertia) yardımcı stilleri - Parallax yardımcıları ([data-parallax]) - Zengin reveal varyantları ([data-reveal]) - Dekoratif parallax orb'ları (.wow-orb) - Footer dalgası (.site-wave) Tema CSS'lerinden SONRA yüklenir; var(--ink) gibi tema değişkenlerini kullanır. prefers-reduced-motion'a saygılı. =========================================================== */ /* Yatay taşmayı (parallax/orb kaynaklı) engelle */ body { overflow-x: hidden; } /* ---------- 1. Lenis smooth scroll ---------- */ /* Lenis JS yüklendiğinde üzerine .lenis sınıflarını ekler */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ---------- 2. Parallax ---------- */ [data-parallax] { will-change: transform; backface-visibility: hidden; } /* ---------- 3. Dekoratif parallax orb'ları ---------- */ .wow-orb { position: absolute; width: clamp(170px, 24vw, 340px); aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle at 32% 30%, var(--wow-c, #7bbcf7), transparent 70%); filter: blur(22px); opacity: var(--wow-o, .5); pointer-events: none; z-index: 0; will-change: transform; } /* ---------- 4. Zengin reveal varyantları ---------- */ /* Temel .reveal davranışı tema CSS'inde tanımlı; burada yön/efekt varyantları ekliyoruz. wow.css en sonda yüklendiği için kazanır. */ .reveal[data-reveal] { opacity: 0; transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1), filter .9s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform, filter; } .reveal[data-reveal="left"] { transform: translateX(-56px); } .reveal[data-reveal="right"] { transform: translateX(56px); } .reveal[data-reveal="zoom"] { transform: scale(.9); } .reveal[data-reveal="up-big"] { transform: translateY(72px); } .reveal[data-reveal="blur"] { transform: translateY(28px); filter: blur(14px); } .reveal[data-reveal="rotate"] { transform: translateY(40px) rotate(-3deg); transform-origin: left bottom; } .reveal[data-reveal].is-visible { opacity: 1; transform: none; filter: none; } /* FORCE: kullanıcı isteğiyle reduced-motion'da da premium animasyonlar açık. Tema CSS'lerindeki `.reveal { transition:none }` resetlerini eziyoruz. (data-reveal varyantları zaten daha yüksek özgüllükle çalışıyor; parallax inline transform'u artık engellenmiyor.) */ @media (prefers-reduced-motion: reduce) { .reveal { transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1), filter .9s cubic-bezier(.16, 1, .3, 1); } .reveal:not(.is-visible):not([data-reveal]) { opacity: 0; transform: translateY(46px) scale(.97); } .reveal.is-visible { opacity: 1; transform: none; filter: none; } .wow-orb { display: block; } } /* ---------- 5. Footer dalgası (.site-wave) ---------- */ /* Footer'ın üst kenarına oturur, koyu footer rengini (var(--ink)) üstteki açık bölüme dalga dalga taşırır. */ footer { position: relative; } .site-wave { position: absolute; left: 0; right: 0; top: 0; transform: translateY(-99%); line-height: 0; pointer-events: none; z-index: 2; } .site-wave svg { display: block; width: 100%; height: clamp(42px, 6vw, 92px); } .site-wave path { fill: var(--ink); } /* ---------- 6. Mobil menü karartma (backdrop) ---------- */ /* main.js menü açılınca .is-visible ekler; offcanvas (z 90-99) ve header (z 100) bunun ÜSTÜnde kalır, içerik kararır. */ .nav-backdrop { position: fixed; inset: 0; background: rgba(18, 14, 22, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 80; } .nav-backdrop.is-visible { opacity: 1; visibility: visible; }