/**
 * การเปลี่ยนหน้าแบบ smooth กับ Livewire / Alpine.navigate
 * ครอบเนื้อหาหลักด้วย .lw-main-surface
 */

.lw-main-surface {
  will-change: opacity, transform;
  transition:
    opacity 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html.lw-nav-transition-out .lw-main-surface {
  opacity: 0;
  transform: translateY(0.55rem) scale(0.988);
}

@media (prefers-reduced-motion: reduce) {
  .lw-main-surface {
    transition: opacity 0.15s ease;
  }

  html.lw-nav-transition-out .lw-main-surface {
    transform: none;
  }
}