/* Chat360 — ortak sayfa açılış ve scroll efektleri */
html.fx-js:not(.fx-loaded) body {
  opacity: 0;
}

html.fx-js body {
  transition: opacity .52s cubic-bezier(.22, 1, .36, 1);
}

html.fx-js [data-page-fx] {
  opacity: 0;
  transform: translate3d(0, -14px, 0);
  transition:
    opacity .72s cubic-bezier(.22, 1, .36, 1),
    transform .72s cubic-bezier(.22, 1, .36, 1);
}

html.fx-js .nav[data-page-fx] {
  transform: translate3d(0, -14px, 0);
}

html.fx-loaded [data-page-fx] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.fx-loaded .nav[data-page-fx] {
  transform: translate3d(0, 0, 0);
}

html.fx-js [data-scroll-fx] {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, 34px, 0) scale(.985);
  transition:
    opacity .82s cubic-bezier(.22, 1, .36, 1),
    filter .82s cubic-bezier(.22, 1, .36, 1),
    transform .82s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--fx-delay, 0ms);
  will-change: opacity, filter, transform;
}

html.fx-js [data-scroll-fx="left"] {
  transform: translate3d(-34px, 22px, 0) scale(.985);
}

html.fx-js [data-scroll-fx="right"] {
  transform: translate3d(34px, 22px, 0) scale(.985);
}

html.fx-js [data-scroll-fx="scale"] {
  transform: translate3d(0, 20px, 0) scale(.955);
}

html.fx-js [data-scroll-fx].fx-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

/* Ana sayfanın mevcut reveal sistemiyle aynı hareket dilini kullan. */
.reveal {
  transition-timing-function: cubic-bezier(.22, 1, .36, 1) !important;
}

@media (max-width: 1100px) {
  html.fx-js [data-scroll-fx],
  html.fx-js [data-scroll-fx="left"],
  html.fx-js [data-scroll-fx="right"] {
    transform: translate3d(0, 24px, 0) scale(.99);
    filter: blur(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  html.fx-js body,
  html.fx-js [data-page-fx],
  html.fx-js .nav[data-page-fx],
  html.fx-js [data-scroll-fx],
  .reveal {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  html.fx-js .nav[data-page-fx] { transform: none !important; }
}