/* ============================================================
   HUGO Common UX Styles - Mượt mà cho toàn bộ website
   Áp dụng: page transitions, fade-in scroll, smooth hover
   ============================================================ */

/* Page transition fade */
body{
  opacity:1;
  transition:opacity .25s cubic-bezier(.4,0,.2,1);
}
body.page-leaving{opacity:0}

/* Smooth scroll */
html{scroll-behavior:smooth}

/* Fade-in section khi scroll */
.fade-in-section{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
  will-change:opacity, transform;
}
.fade-in-section.visible{
  opacity:1;
  transform:translateY(0);
}

/* Mobile menu smooth (override cho các trang có CSS riêng) */
.mobile-menu{
  transition:transform .45s cubic-bezier(.4,0,.2,1) !important;
  will-change:transform;
}
.mobile-overlay,
.mobile-menu-overlay{
  transition:opacity .35s cubic-bezier(.4,0,.2,1) !important;
  will-change:opacity;
}
.mobile-overlay,
.mobile-menu-overlay{
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* Mobile menu items stagger animation */
.mobile-menu a{
  opacity:0;
  transform:translateX(20px);
  transition:opacity .35s cubic-bezier(.4,0,.2,1), 
             transform .35s cubic-bezier(.4,0,.2,1),
             color .2s ease,
             padding-left .2s ease;
}
.mobile-menu.open a{
  opacity:1;
  transform:translateX(0);
}
.mobile-menu.open a:nth-of-type(1){transition-delay:.10s}
.mobile-menu.open a:nth-of-type(2){transition-delay:.13s}
.mobile-menu.open a:nth-of-type(3){transition-delay:.16s}
.mobile-menu.open a:nth-of-type(4){transition-delay:.19s}
.mobile-menu.open a:nth-of-type(5){transition-delay:.22s}
.mobile-menu.open a:nth-of-type(6){transition-delay:.25s}
.mobile-menu.open a:nth-of-type(7){transition-delay:.28s}
.mobile-menu.open a:nth-of-type(8){transition-delay:.31s}
.mobile-menu a:hover{padding-left:6px}

/* Smooth hover GPU acceleration */
a, button, .btn, .card, .product-card, .news-card, .tech-item{
  -webkit-tap-highlight-color:transparent;
}
.btn, button{will-change:transform}

/* Smooth focus outline */
:focus-visible{
  outline:2px solid var(--orange, #F58220);
  outline-offset:2px;
  border-radius:4px;
}

/* Reduce motion */
@media(prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}