/* ==========================================================================
   Ankara Hızlı Ambar — Motion System
   Tek bir kurumsal hareket dili. Büyük animasyonlar çok az yerde.
   Hover ve reveal standartları token'lar üzerinden belirlenir.
   GSAP ve Locomotive bağımlılığı yoktur; tüm motion CSS + IntersectionObserver
   ile çalışır ve prefers-reduced-motion tam desteklenir.
   ========================================================================== */

:root {
    --motion-duration-fast: 180ms;
    --motion-duration-base: 260ms;
    --motion-duration-slow: 420ms;
    --motion-duration-reveal: 680ms;

    --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --motion-lift-sm: 2px;
    --motion-lift-md: 4px;
    --motion-scale-img: 1.03;
    --motion-scale-btn: 1.02;
}

/* --------------------------------------------------------------------------
   Section reveal primitive — IntersectionObserver ile .is-in-view tetiklenir.
   Başlangıç durumu yalnızca JS destekli modern tarayıcılarda (.js-motion)
   uygulanır. No-JS / reduced-motion durumunda içerik her zaman görünür kalır.
   -------------------------------------------------------------------------- */

.js-motion .motion-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity var(--motion-duration-reveal) var(--motion-ease-out),
        transform var(--motion-duration-reveal) var(--motion-ease-out);
    will-change: opacity, transform;
}

/* Görünür durum: üst üste binen katman / transition takılırsa bile içerik okunaklı kalsın */
.js-motion .motion-reveal.is-in-view {
    opacity: 1 !important;
    transform: none !important;
}

.js-motion .motion-reveal[data-motion-delay="1"] { transition-delay: 80ms; }
.js-motion .motion-reveal[data-motion-delay="2"] { transition-delay: 160ms; }
.js-motion .motion-reveal[data-motion-delay="3"] { transition-delay: 240ms; }
.js-motion .motion-reveal[data-motion-delay="4"] { transition-delay: 320ms; }

/* --------------------------------------------------------------------------
   Hero line reveal — CSS @keyframes ile (GSAP gereksiz).
   Parent element'ları overflow:hidden olduğu için translateY(100%) başlangıcı
   gizli kalır; sonra yumuşak bir premium reveal ile yerine oturur.
   -------------------------------------------------------------------------- */

@keyframes hero-line-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* .js-hero-line span/h1/p farklı display türleri için: display değiştirilmez,
   transform block/inline-block elementlerde doğal çalışır. Inline span için
   HTML'de inline-block class'ı verilmelidir. */
.js-motion .js-hero-line {
    animation: hero-line-in var(--motion-duration-reveal) var(--motion-ease-out) both;
}

.js-motion .js-hero-line[data-motion-delay="1"] { animation-delay: 120ms; }
.js-motion .js-hero-line[data-motion-delay="2"] { animation-delay: 220ms; }
.js-motion .js-hero-line[data-motion-delay="3"] { animation-delay: 320ms; }
.js-motion .js-hero-line[data-motion-delay="4"] { animation-delay: 420ms; }

/* --------------------------------------------------------------------------
   Global reduced-motion override — tek nokta.
   Tüm motion sistemi burada kapatılır. İçerik her zaman görünür kalır.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .js-motion .motion-reveal,
    .js-motion .motion-reveal[data-motion-delay="1"],
    .js-motion .motion-reveal[data-motion-delay="2"],
    .js-motion .motion-reveal[data-motion-delay="3"],
    .js-motion .motion-reveal[data-motion-delay="4"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        transition-delay: 0ms !important;
    }

    .js-motion .js-hero-line,
    .js-motion .js-hero-line[data-motion-delay="1"],
    .js-motion .js-hero-line[data-motion-delay="2"],
    .js-motion .js-hero-line[data-motion-delay="3"],
    .js-motion .js-hero-line[data-motion-delay="4"] {
        animation: none !important;
        animation-delay: 0ms !important;
        transform: none !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}