/* ==========================================================================
   PikselWeb — Motion System
   İlkeler:
   1. Yalnızca transform ve opacity animasyonu (layout/paint tetiklemeyen).
   2. Tüm süreler token'lardan; tutarlı easing eğrileri.
   3. prefers-reduced-motion: reduce → tüm hareket kapanır, içerik görünür kalır.
   4. JS yoksa (.js sınıfı yoksa) hiçbir içerik gizlenmez.
   ========================================================================== */

:root {
    /* Easing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* Süre */
    --dur-instant: 120ms;
    --dur-fast: 200ms;
    --dur-base: 320ms;
    --dur-slow: 560ms;
    --dur-slower: 800ms;

    /* Hareket mesafesi */
    --rise-sm: 12px;
    --rise-md: 24px;
    --rise-lg: 40px;
}

/* --- Giriş animasyonu (sayfa yüklenince) ---------------------------------- */

.js body {
    animation: pageFadeIn var(--dur-slow) var(--ease-out-quart) both;
}

@keyframes pageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Hero içeriği kademeli yükselir */
.js .hero > * {
    animation: heroRise var(--dur-slower) var(--ease-out-expo) both;
}
.js .hero > *:nth-child(1) { animation-delay: 60ms; }
.js .hero > *:nth-child(2) { animation-delay: 160ms; }
.js .hero > *:nth-child(3) { animation-delay: 260ms; }
.js .hero > *:nth-child(4) { animation-delay: 360ms; }

@keyframes heroRise {
    from { opacity: 0; transform: translate3d(0, var(--rise-lg), 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* --- Scroll reveal --------------------------------------------------------
   Kullanım: <div data-reveal> · <div data-reveal="left"> · data-reveal-group
   -------------------------------------------------------------------------- */

.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, var(--rise-md), 0);
    transition:
        opacity var(--dur-slow) var(--ease-out-expo),
        transform var(--dur-slow) var(--ease-out-expo);
    transition-delay: calc(var(--stagger, 0) * 80ms);
    will-change: opacity, transform;
}

.js [data-reveal="left"]  { transform: translate3d(calc(var(--rise-md) * -1.2), 0, 0); }
.js [data-reveal="right"] { transform: translate3d(calc(var(--rise-md) * 1.2), 0, 0); }
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal="fade"]  { transform: none; }

/* Dar ekranda yatay kaydırma yerine aşağıdan yükselme kullanılır: yana
   kaydırılan öğe görünür alana sığmadığı için sayfayı yatay kaydırılabilir
   hâle getiriyordu (ör. iletişim sayfasındaki bilgi kolonu). */
@media (max-width: 900px) {
    .js [data-reveal="left"],
    .js [data-reveal="right"] {
        transform: translate3d(0, var(--rise-md), 0);
    }
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* --- Aurora / mesh arka plan (canvas particle yerine) --------------------- */

.bg-mesh {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.55;
}

.bg-mesh span {
    position: absolute;
    display: block;
    width: 46vmax;
    height: 46vmax;
    border-radius: 50%;
    /* 80px blur üç dev katmanda çok pahalıydı (yüksek DPR'de katman başına
       ~8 MB doku). Gradyanlar zaten yumuşak olduğu için 24px görsel olarak
       aynı sonucu veriyor. */
    filter: blur(24px);
    will-change: transform;
}

.bg-mesh span:nth-child(1) {
    top: -12vmax;
    left: -8vmax;
    background: radial-gradient(circle, rgba(26, 115, 232, 0.28), transparent 68%);
    animation: drift1 26s var(--ease-in-out) infinite alternate;
}

.bg-mesh span:nth-child(2) {
    top: 18vmax;
    right: -14vmax;
    background: radial-gradient(circle, rgba(147, 52, 230, 0.20), transparent 68%);
    animation: drift2 32s var(--ease-in-out) infinite alternate;
}

.bg-mesh span:nth-child(3) {
    bottom: -18vmax;
    left: 28vmax;
    background: radial-gradient(circle, rgba(0, 196, 204, 0.16), transparent 70%);
    animation: drift3 38s var(--ease-in-out) infinite alternate;
}

@keyframes drift1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); }
}
@keyframes drift2 {
    from { transform: translate3d(0, 0, 0) scale(1.08); }
    to   { transform: translate3d(-5vmax, 6vmax, 0) scale(0.95); }
}
@keyframes drift3 {
    from { transform: translate3d(0, 0, 0) scale(0.96); }
    to   { transform: translate3d(4vmax, -5vmax, 0) scale(1.1); }
}

/* --- Bileşen geçişleri (transition: all yerine açık özellik listesi) ------ */

.glass-nav {
    transition:
        top var(--dur-fast) var(--ease-out-quart),
        height var(--dur-fast) var(--ease-out-quart),
        border-radius var(--dur-fast) var(--ease-out-quart),
        background-color var(--dur-fast) linear,
        box-shadow var(--dur-fast) linear;
}

.btn {
    position: relative;
    transition:
        transform var(--dur-fast) var(--ease-out-quart),
        box-shadow var(--dur-base) var(--ease-out-quart),
        background-color var(--dur-fast) linear,
        color var(--dur-fast) linear,
        border-color var(--dur-fast) linear;
}

.btn:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.45);
}

.btn:active {
    transform: translate3d(0, 0, 0) scale(0.985);
    transition-duration: var(--dur-instant);
}

/* Metin ölçeklemek yerine arka plan vurgusu — bulanık yazı görünümünü önler */
.btn-primary:hover {
    transform: translate3d(0, -2px, 0);
    background: var(--accent-blue);
    color: #ffffff;
}

.btn-outline:hover {
    border-color: var(--accent-blue);
    background: rgba(26, 115, 232, 0.06);
}

/* Kart hover: yükselme + kenar vurgusu */
.glass {
    transition:
        transform var(--dur-base) var(--ease-out-quart),
        border-color var(--dur-base) linear,
        box-shadow var(--dur-base) var(--ease-out-quart);
}

.lift:hover {
    transform: translate3d(0, -6px, 0);
    border-color: rgba(26, 115, 232, 0.35);
    box-shadow: 0 22px 48px -28px rgba(26, 115, 232, 0.5);
}

/* Nav link alt çizgi animasyonu */
.nav-links a {
    position: relative;
    transition: color var(--dur-fast) linear;
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1.5px;
    background: var(--accent-blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-base) var(--ease-out-expo);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
}

.share-btn {
    transition:
        transform var(--dur-base) var(--ease-spring),
        background-color var(--dur-fast) linear,
        color var(--dur-fast) linear,
        box-shadow var(--dur-base) var(--ease-out-quart);
}

.mobile-panel {
    transition: transform var(--dur-base) var(--ease-out-expo), visibility var(--dur-base);
    right: 0;
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
}

.mobile-panel.active {
    transform: translate3d(0, 0, 0);
    visibility: visible;
}

/* --- Sayaç (data-count) --------------------------------------------------- */

[data-count] {
    font-variant-numeric: tabular-nums;
}

/* --- Erişilebilirlik: klavye odağı ---------------------------------------- */

:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 3px;
    border-radius: 6px;
}

/* --- Hareket azaltma tercihi ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .js body,
    .js .hero > * {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .js [data-reveal] {
        opacity: 1;
        transform: none;
        will-change: auto;
    }

    .bg-mesh span {
        animation: none;
    }

    .btn:hover,
    .lift:hover {
        transform: none;
    }
}