/* ─────────────────────────────────────────────────────────────────────────
   AssurePort — Motion Layer (progressive, non-breaking, a11y-safe)
   sardil/feature (2026-10) — "premium motion without a build step".

   NEDEN BU DOSYA: Marketing yüzeyi statik HTML + nonce-CSP + build-yok. React
   / Framer Motion eklemek re-platform demek (CSP, i18n-parity, html-script
   integrity gate'lerini kırar). Aynı premium hareket hissini yığına sadık,
   CSS + ufak bir IntersectionObserver ile veriyoruz.

   KIRMIZI ÇİZGİ — "hiçbir özelliği bozma":
   - Reveal durumları SADECE <html class="motion-ready"> iken uygulanır. Bu
     sınıfı head-boot script'i yalnızca JS varsa VE prefers-reduced-motion
     kapalıysa ekler. JS yoksa / reduced-motion ise sınıf hiç gelmez →
     [data-reveal] öğeleri tam görünür kalır (içerik asla gizlenmez).
   - Her efekt transform/opacity/box-shadow üzerinedir (60fps, layout yok).
   - a11y-motion.css zaten reduced-motion'da tüm transition/animation'ı
     söndürüyor; bu dosya o sözleşmeyi bozmaz, ona yaslanır.
   - Renk/gölge design-tokens.css değişkenlerinden gelir → light/dark otomatik.
   ───────────────────────────────────────────────────────────────────────── */

/* ============ 1. SCROLL REVEAL ============ */
/* Başlangıç (gizli) durumu yalnız motion-ready iken. */
html.motion-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.72s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.72s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: opacity, transform;
}
html.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* Yön çeşitleri */
html.motion-ready [data-reveal="up"]    { transform: translate3d(0, 30px, 0); }
html.motion-ready [data-reveal="left"]  { transform: translate3d(-26px, 0, 0); }
html.motion-ready [data-reveal="right"] { transform: translate3d(26px, 0, 0); }
html.motion-ready [data-reveal="scale"] { transform: scale(0.965); }
html.motion-ready [data-reveal="left"].is-visible,
html.motion-ready [data-reveal="right"].is-visible,
html.motion-ready [data-reveal="up"].is-visible,
html.motion-ready [data-reveal="scale"].is-visible { transform: none; }

/* ============ 2. STAGGER (çocukları sırayla) ============ */
html.motion-ready [data-reveal-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 0.62s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.62s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
html.motion-ready [data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}
html.motion-ready [data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0.04s; }
html.motion-ready [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.11s; }
html.motion-ready [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.18s; }
html.motion-ready [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.25s; }
html.motion-ready [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.32s; }
html.motion-ready [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.39s; }
html.motion-ready [data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 0.46s; }
html.motion-ready [data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 0.53s; }

/* ============ 3. HOVER MICRO-INTERACTIONS ============ */
/* Kartlar: yumuşak kalkış + derinleşen gölge. transform/box-shadow only.
   Reduced-motion'da a11y-motion.css transition süresini ~0 yapar → anlık,
   hareketsiz ama yine çalışır. */
.freetools-card,
.entity-card,
.step,
.posture-card,
.compare-card,
.pricing-card {
  transition:
    transform 0.4s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow 0.4s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.freetools-card:hover,
.entity-card:hover,
.posture-card:hover,
.compare-card:hover,
.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg, 0 20px 48px rgba(23, 36, 43, 0.14));
}
.step:hover {
  transform: translateY(-4px);
}

/* "Devam" oklu kart linkleri: kart hover'ında renk vurgusu */
.card-link { transition: color 0.25s ease; }
.freetools-card:hover .card-link,
.entity-card:hover .card-link { color: var(--primary); }

/* ============ 4. PRIMARY CTA SHEEN (opt-in: .aprt-sheen) ============ */
/* Yalnız bu sınıf elle eklenen butona uygulanır → global .btn ile çakışmaz. */
.aprt-sheen { position: relative; overflow: hidden; }
.aprt-sheen::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.38),
    transparent
  );
  transform: skewX(-18deg);
  transition: left 0.75s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  pointer-events: none;
}
.aprt-sheen:hover::after { left: 150%; }

/* ============ 5. FOCUS-VISIBLE POLISH (erişilebilirlik + cila) ============ */
/* Klavye kullanıcısına net, markalı bir odak halkası. Fare tıklamasında çıkmaz. */
html.motion-ready a:focus-visible,
html.motion-ready button:focus-visible,
html.motion-ready [tabindex]:focus-visible,
html.motion-ready .btn:focus-visible {
  outline: 2px solid var(--primary, #c63d22);
  outline-offset: 3px;
  border-radius: var(--radius-sm, 10px);
}

/* ============ 6. HERO ARKA PLAN NABZI (çok hafif, opsiyonel) ============ */
/* .hero-bg varsa yavaş bir ölçek/parlaklık nefesi — dikkat dağıtmayan. */
@keyframes aprt-hero-drift {
  0%   { transform: scale(1);     opacity: 0.92; }
  50%  { transform: scale(1.035); opacity: 1; }
  100% { transform: scale(1);     opacity: 0.92; }
}
html.motion-ready .hero-bg {
  animation: aprt-hero-drift 16s var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)) infinite;
  transform-origin: center;
}

/* ============ 7. FAILSAFE — motion.js yüklenmese bile içerik görünür ============ */
/* En kritik bozma-güvenliği: head-boot 'motion-ready' ekler ve CSS öğeleri
   gizler; ama motion.js dış dosyası (ağ) yüklenmezse is-visible hiç gelmez.
   Bu animasyon 4s sonra opacity/transform'u kesin açar. .is-visible gelince
   animation:none → JS yolu ile çakışma yok. Reduced-motion'da a11y-motion.css
   zaten animation'ı söndürür + aşağıdaki blok görünür kılar. */
@keyframes aprt-failsafe { to { opacity: 1; transform: none; } }
html.motion-ready [data-reveal],
html.motion-ready [data-reveal-stagger] > * {
  animation: aprt-failsafe 0.01s linear 4s forwards;
}
html.motion-ready [data-reveal].is-visible,
html.motion-ready [data-reveal-stagger].is-visible > * {
  animation: none;
}

/* Güvenlik ağı: reduced-motion'da (a11y-motion.css'e ek olarak) reveal
   başlangıç durumunu da açıkça iptal et — motion-ready hiç gelmese bile. */
@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-reveal],
  html.motion-ready [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
  html.motion-ready .hero-bg { animation: none !important; }
}