/**
 * MTN Travel — hareket katmanı
 * -----------------------------------------------------------------
 * Bu dosya yalnızca panelden "Hareket efektleri" açıkken yüklenir ve
 * tüm kuralları `.motion` sınıfı altında toplanır. Dolayısıyla efektler
 * kapatıldığında tasarım birebir eski hâline döner.
 *
 * Tailwind tarafından ÜRETİLMEZ; elle yazılmıştır, derleme gerektirmez.
 */

:root {
    --mo-dur: 0.55s;
    --mo-step: 70ms;
    --mo-shift: 14px;
    --mo-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.motion-speed-slow  { --mo-dur: 0.8s;  --mo-step: 95ms; --mo-shift: 18px; }
.motion-speed-fast  { --mo-dur: 0.38s; --mo-step: 45ms; --mo-shift: 10px; }

/* -----------------------------------------------------------------
   1) Kaydırdıkça beliren bölümler
   ----------------------------------------------------------------- */
.motion.mo-js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, var(--mo-shift), 0);
    transition:
        opacity   var(--mo-dur) var(--mo-ease),
        transform var(--mo-dur) var(--mo-ease);
    transition-delay: var(--mo-delay, 0ms);
    will-change: opacity, transform;
}

.motion.mo-js [data-reveal="fade"]  { transform: none; }
.motion.mo-js [data-reveal="zoom"]  { transform: scale(0.965); }
.motion.mo-js [data-reveal="left"]  { transform: translate3d(calc(var(--mo-shift) * -1.4), 0, 0); }
.motion.mo-js [data-reveal="right"] { transform: translate3d(calc(var(--mo-shift) *  1.4), 0, 0); }

/* Arapça'da yanlardan gelen hareketler ayna görüntüsü olsun */
[dir="rtl"].motion.mo-js [data-reveal="left"]  { transform: translate3d(calc(var(--mo-shift) *  1.4), 0, 0); }
[dir="rtl"].motion.mo-js [data-reveal="right"] { transform: translate3d(calc(var(--mo-shift) * -1.4), 0, 0); }

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

/* -----------------------------------------------------------------
   2) Sayfa açılışı — çok hafif bir yumuşama
   ----------------------------------------------------------------- */
.motion main {
    animation: mo-page-in 0.45s var(--mo-ease) both;
}

@keyframes mo-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* -----------------------------------------------------------------
   3) Hero — yavaş yakınlaşma (Ken Burns) ve yazıların sırayla gelişi
   ----------------------------------------------------------------- */
.motion [data-hero-bg] img {
    animation: mo-kenburns 26s ease-in-out infinite alternate;
    transform-origin: 50% 55%;
}

@keyframes mo-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.075); }
}

.motion [data-hero-text].is-active > * {
    animation: mo-hero-in 0.75s var(--mo-ease) both;
}
.motion [data-hero-text].is-active > *:nth-child(1) { animation-delay: 0.05s; }
.motion [data-hero-text].is-active > *:nth-child(2) { animation-delay: 0.16s; }
.motion [data-hero-text].is-active > *:nth-child(3) { animation-delay: 0.27s; }

@keyframes mo-hero-in {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to   { opacity: 1; transform: none; }
}

/* Slider noktalarında ilerleme hissi */
.motion [data-hero-dot],
.motion [data-carousel-dot] {
    transition: width 0.4s var(--mo-ease), background-color 0.4s var(--mo-ease);
}

/* -----------------------------------------------------------------
   4) Kart etkileşimleri
   ----------------------------------------------------------------- */
.motion [data-lift] {
    transition:
        transform  0.35s var(--mo-ease),
        box-shadow 0.35s var(--mo-ease);
}

@media (hover: hover) {
    .motion [data-lift]:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px -18px rgb(0 56 94 / 0.28);
    }
}

/* İkon kutuları hafifçe canlansın */
@media (hover: hover) {
    .motion [data-lift]:hover [data-lift-icon] {
        transform: scale(1.08) rotate(-3deg);
    }
}
.motion [data-lift-icon] {
    transition: transform 0.35s var(--mo-ease);
}

/* -----------------------------------------------------------------
   5) Butonlarda dalga (ripple) ve parlama
   ----------------------------------------------------------------- */
.motion .mo-ripple {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.motion .mo-ripple > .mo-wave {
    position: absolute;
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.35);
    transform: scale(0);
    opacity: 0.7;
    pointer-events: none;
    animation: mo-wave 0.6s ease-out forwards;
    z-index: -1;
}

@keyframes mo-wave {
    to { transform: scale(2.6); opacity: 0; }
}

/* -----------------------------------------------------------------
   6) Sayaçlar — sayarken rakamların zıplamasını engelle
   ----------------------------------------------------------------- */
.motion [data-count] {
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------
   7) Yukarı çık / WhatsApp butonuna nazik bir nefes
   ----------------------------------------------------------------- */
@media (hover: hover) {
    .motion #scroll-to-top:hover,
    .motion a[aria-label="WhatsApp"]:hover {
        transform: translateY(-2px) scale(1.06);
    }
}

/* -----------------------------------------------------------------
   8) ERİŞİLEBİLİRLİK — işletim sisteminde "hareketi azalt" açıksa
      hiçbir efekt çalışmaz, içerik anında görünür.
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .motion.mo-js [data-reveal],
    .motion.mo-js [data-reveal].is-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .motion main,
    .motion [data-hero-bg] img,
    .motion [data-hero-text].is-active > * {
        animation: none !important;
    }
    .motion [data-lift],
    .motion [data-lift-icon] {
        transition: none !important;
    }
    .motion .mo-ripple > .mo-wave { display: none; }
}