/* ==========================================================================
   NANO HOME — effects.css
   Gói hiệu ứng bổ sung: hero Ken Burns, reveal so le, shine cho nút,
   micro-interaction cho thẻ/menu/footer, thanh tiến độ cuộn, nút lên đầu trang.
   Mọi chuyển động bị tắt khi người dùng bật "giảm chuyển động".
   ========================================================================== */

/* ------------------------------------------------------------
   1. Hero — phóng to chậm kiểu Ken Burns + lớp phủ sáng dần
   ------------------------------------------------------------ */
@keyframes nano-kenburns {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
.hero__img,
.page-hero img {
  animation: nano-kenburns 9s ease-out both;
  will-change: transform;
}
.hero,
.page-hero { overflow: hidden; }

/* ------------------------------------------------------------
   2. Reveal nâng cấp — các biến thể hướng + so le phần tử con
   ------------------------------------------------------------ */
.reveal { transition-duration: .8s; }

/* Hai cột khối "Ý tưởng màu sắc" trượt vào từ hai phía */
.idea__left.reveal  { transform: translateX(-34px); }
.idea__right.reveal { transform: translateX(34px); }
.idea__left.reveal.is-visible,
.idea__right.reveal.is-visible { transform: none; }

/* So le phần tử con trong các lưới có .reveal ở phần tử cha.
   Dùng animation (chạy một lần) thay vì transition để không làm
   trễ các hiệu ứng hover về sau. Độ trễ truyền qua biến --nano-d. */
@keyframes nano-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.badge-strip .badge-item,
.stats .stat-pill,
.latest__grid .latest__col,
.color-cards .color-card,
.process__grid .process-step,
.certs__grid .cert-card,
.contact-cards .contact-card,
.spaces__grid .space-card,
.catalog__cats .catalog__cat {
  opacity: 0;
}
.badge-strip.is-visible .badge-item,
.stats.is-visible .stat-pill,
.latest__grid.is-visible .latest__col,
.color-cards.is-visible .color-card,
.process__grid.is-visible .process-step,
.certs__grid.is-visible .cert-card,
.contact-cards.is-visible .contact-card,
.spaces__grid.is-visible .space-card,
.catalog__nav.is-visible .catalog__cat {
  animation: nano-fade-up .6s ease forwards;
  animation-delay: var(--nano-d, 0s);
}
/* Biến --nano-d vô hại với phần tử không tham gia so le */
.is-visible > :nth-child(1), .catalog__cats > :nth-child(1) { --nano-d: .05s; }
.is-visible > :nth-child(2), .catalog__cats > :nth-child(2) { --nano-d: .15s; }
.is-visible > :nth-child(3), .catalog__cats > :nth-child(3) { --nano-d: .25s; }
.is-visible > :nth-child(4), .catalog__cats > :nth-child(4) { --nano-d: .35s; }
.is-visible > :nth-child(5), .catalog__cats > :nth-child(5) { --nano-d: .45s; }
.is-visible > :nth-child(6), .catalog__cats > :nth-child(6) { --nano-d: .55s; }
.is-visible > :nth-child(7), .catalog__cats > :nth-child(7) { --nano-d: .65s; }
.is-visible > :nth-child(8), .catalog__cats > :nth-child(8) { --nano-d: .75s; }

/* ------------------------------------------------------------
   3. Nút — vệt sáng quét qua khi hover + nhún khi bấm
   ------------------------------------------------------------ */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -80%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn:hover { box-shadow: 0 10px 24px rgba(20, 26, 60, .22); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }

/* ------------------------------------------------------------
   4. Menu — gạch chân chạy + xoay caret + sub-menu mượt hơn
   ------------------------------------------------------------ */
.nav-list > li > a { position: relative; }
.nav-list > li > a::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 4px;
  width: 0; height: 2px;
  background: currentColor;
  opacity: .85;
  transition: width .3s ease, left .3s ease;
}
.nav-list > li:hover > a::before,
.nav-list > li.is-active > a::before { width: 60%; left: 20%; }

/* Trong drawer mobile: gạch chân chạy trông như nét thừa — thay bằng
   thanh nhấn dọc sát mép trái, màu theo link (vàng khi active). */
@media (max-width: 860px) {
  .nav-list > li > a::before {
    left: -16px; bottom: auto; top: 50%; transform: translateY(-50%);
    width: 3px; height: 0; border-radius: 2px;
    transition: height .25s ease;
  }
  .nav-list > li:hover > a::before,
  .nav-list > li.is-active > a::before { width: 3px; height: 22px; left: -16px; }
}
.nav-list .caret { transition: transform .25s ease; }
.nav-list > li:hover .caret { transform: rotate(180deg); }
.sub-menu li a { transition: padding-left .2s ease, color .2s ease; }
.sub-menu li a:hover { padding-left: 6px; }

/* Desktop: nâng cấp hover / active / dropdown */
@media (min-width: 861px) {
  /* Cấp 1: hover có nền pill mờ; item active đậm hơn.
     KHÔNG đặt transition color/background trên link — Chrome sẽ chuyển
     chữ sang khử răng cưa grayscale làm cả thanh menu trông nhạt mờ. */
  .nav-list > li > a { border-radius: 999px; }
  .nav-list > li:hover > a { background: rgba(43, 56, 128, .07); }
  .nav-list > li.is-active > a { font-weight: 800; }

  /* Gạch chân chạy: thanh gradient đỏ→vàng bo tròn.
     Lúc nghỉ phải opacity 0 — box width:0 có border-radius + gradient
     vẫn bị Chrome vẽ sót thành chấm ~2px. */
  .nav-list > li > a::before {
    height: 3px; border-radius: 3px; bottom: 5px;
    background: linear-gradient(90deg, var(--red), var(--gold));
    opacity: 0;
    transition: width .3s ease, left .3s ease, opacity .2s ease;
  }
  .nav-list > li:hover > a::before,
  .nav-list > li.is-active > a::before { opacity: 1; }

  /* Dropdown: hộp nổi có mũi tên chỉ lên, mở bằng trượt + phóng nhẹ */
  .sub-menu {
    padding: 8px;
    border: 1px solid #E6E9F2; border-radius: 14px;
    box-shadow: 0 24px 50px rgba(15, 23, 66, .14), 0 3px 10px rgba(15, 23, 66, .08);
    transform: translate(-50%, 20px) scale(.96); transform-origin: 50% 0;
    transition: opacity .26s ease, transform .26s cubic-bezier(.22, .8, .26, 1), visibility .26s;
  }
  .nav-list > li:hover .sub-menu,
  .nav-list > li.is-open .sub-menu { transform: translate(-50%, 10px) scale(1); }
  .sub-menu::before {
    content: ""; position: absolute; top: -6px; left: 50%;
    width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
    background: #fff; border-left: 1px solid #E6E9F2; border-top: 1px solid #E6E9F2;
    border-top-left-radius: 3px;
  }
  /* Cầu vô hình lấp khe hở 10px giữa item cha và hộp — giữ hover khi rê chuột xuống */
  .sub-menu::after { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }

  /* Item trong dropdown: chấm đỏ trượt vào + nền tint khi hover */
  .sub-menu li a {
    border-radius: 9px; font-weight: 600; padding: 10px 14px 10px 22px;
    position: relative;
    transition: padding-left .2s ease, background-color .2s ease, color .2s ease;
  }
  .sub-menu li a::before {
    content: ""; position: absolute; left: 10px; top: 50%;
    width: 5px; height: 5px; border-radius: 50%; background: var(--red);
    transform: translateY(-50%) scale(0); transition: transform .2s ease;
  }
  .sub-menu li a:hover { background: #F2F4FA; color: var(--navy); padding-left: 28px; }
  .sub-menu li a:hover::before { transform: translateY(-50%) scale(1); }
  .sub-menu li.current-menu-item > a { color: var(--red); font-weight: 700; }
}

/* Nav dính: đổ bóng + trượt xuống nhẹ */
@keyframes nano-nav-drop {
  from { transform: translateY(-100%); }
  to   { transform: none; }
}
.main-nav.is-sticky {
  animation: nano-nav-drop .35s ease;
  box-shadow: 0 10px 28px rgba(10, 22, 51, .22);
}
/* Mobile: nav luôn dính sẵn ở top nên bỏ animation trượt xuống.
   Quan trọng: transform của animation biến .main-nav thành containing block
   của drawer position:fixed — làm drawer bị kéo theo rồi bật lại khi cuộn. */
@media (max-width: 860px) {
  .main-nav.is-sticky { animation: none; }
}

/* ------------------------------------------------------------
   5. Ảnh & thẻ — zoom nhẹ, lớp phủ, ánh kim tiêu đề
   ------------------------------------------------------------ */
.collection__main img, .collection__small img, .collection__wide img,
.idea__photo img, .latest__photo img, .life-strip__img img,
.factory-intro__img img, .news-featured figure img, .news-card figure img {
  transition: transform .55s ease, filter .55s ease;
}
.collection__main:hover img, .collection__small:hover img, .collection__wide:hover img,
.idea__photo:hover img, .latest__photo:hover img, .life-strip__img:hover img,
.factory-intro__img:hover img, .news-featured figure:hover img, .news-card:hover figure img {
  transform: scale(1.05);
  filter: brightness(1.06);
}
.collection__main, .collection__small, .collection__wide,
.idea__photo, .latest__photo, .life-strip__img,
.factory-intro__img { overflow: hidden; }

/* Space card: lớp phủ tối dần + nhãn nổi lên */
.space-card { position: relative; }
.space-card figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 22, 51, .45), transparent 55%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.space-card figure { position: relative; }
.space-card:hover figure::after { opacity: 1; }
.space-card .space-card__label { transition: transform .3s ease, letter-spacing .3s ease; }
.space-card:hover .space-card__label { transform: translateY(-3px); letter-spacing: .5px; }

/* Chữ "MÀU SẮC" cầu vồng — gradient chuyển động */
@keyframes nano-rainbow-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.rainbow-text {
  background-size: 200% auto;
  animation: nano-rainbow-shift 6s linear infinite;
}

/* Bánh xe màu quay khi hover khối tiêu đề */
.color-wheel { transition: transform .6s ease; }
.idea__head:hover .color-wheel { transform: rotate(180deg); }

/* Hue dot đang chọn: nhịp thở nhẹ */
@keyframes nano-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20, 26, 60, .25); }
  50%      { box-shadow: 0 0 0 6px rgba(20, 26, 60, 0); }
}
.hue-dot.is-active { animation: nano-pulse 2.2s ease-in-out infinite; }

/* Lưới sắc độ: đổi màu mượt khi chọn tông khác */
.dot-grid span { transition: transform .2s, background .45s ease; }

/* Badge công nghệ: lắc lư nhẹ khi hover */
@keyframes nano-wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-3deg); }
  75%      { transform: rotate(3deg); }
}
.tech-badges img:hover, .badge-item img:hover { animation: nano-wiggle .5s ease; }

/* Số liệu: nảy nhẹ khi hover */
.stat-pill { transition: transform .3s ease, box-shadow .3s ease; }
.stat-pill:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 16px 32px rgba(20, 26, 60, .14); }

/* Footer: icon mạng xã hội nảy lên */
.footer__social a { transition: transform .25s ease, background .25s ease, color .25s ease; }
.footer__social a:hover { transform: translateY(-4px) scale(1.1); }

/* Bảng màu lớn: phóng nhẹ và nổi bóng từng ô */
.palette__col span:hover { transform: scale(1.15); box-shadow: 0 6px 14px rgba(20, 26, 60, .25); z-index: 2; position: relative; }

/* ------------------------------------------------------------
   5b. Vệt sáng quét trên logo (canvas do JS chèn)
   ------------------------------------------------------------ */
.nano-shine {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 2;
}
.site-logo { display: inline-block; line-height: 0; }

/* ------------------------------------------------------------
   6. Thanh tiến độ cuộn + nút lên đầu trang (JS chèn phần tử)
   ------------------------------------------------------------ */
.nano-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, #2B3880, #D2232A, #E8C878);
  z-index: 999;
  pointer-events: none;
  transition: width .1s linear;
}
.nano-top {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: #2B3880; color: #fff;
  font-size: 18px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(10, 22, 51, .3);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s;
  z-index: 998;
}
.nano-top.is-show { opacity: 1; visibility: visible; transform: none; }
.nano-top:hover { background: #D2232A; }

/* ------------------------------------------------------------
   7. Tôn trọng "giảm chuyển động"
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero__img, .page-hero img, .main-nav.is-sticky,
  .rainbow-text, .hue-dot.is-active,
  .tech-badges img:hover, .badge-item img:hover { animation: none !important; }
  .badge-strip .badge-item, .stats .stat-pill, .latest__grid .latest__col,
  .color-cards .color-card, .process__grid .process-step, .certs__grid .cert-card,
  .contact-cards .contact-card, .spaces__grid .space-card, .catalog__cats .catalog__cat {
    opacity: 1 !important; animation: none !important;
  }
  .nano-progress { display: none; }
}

/* ==========================================================================
   8. GÓI HIỆU ỨNG "CHẤT SƠN" — vệt sơn phủ ảnh, nút đổ sơn, tiêu đề lăn rulo
   ========================================================================== */

/* ------------------------------------------------------------
   8a. Ảnh hiện ra như được lăn sơn phủ qua: lớp sơn gradient
   thương hiệu che ảnh, khi cuộn tới thì quét sang phải lộ ảnh.
   ------------------------------------------------------------ */
.collection__main, .collection__small, .collection__wide,
.idea__photo, .latest__photo, .life-strip__img, .life-strip__can,
.factory-intro__img, .news-featured figure, .news-card figure,
.space-card figure, .color-card figure, .catalog__banner, .news-banner {
  position: relative;
  overflow: hidden;
}
.collection__main::before, .collection__small::before, .collection__wide::before,
.idea__photo::before, .latest__photo::before, .life-strip__img::before, .life-strip__can::before,
.factory-intro__img::before, .news-featured figure::before, .news-card figure::before,
.space-card figure::before, .color-card figure::before, .catalog__banner::before, .news-banner::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  background: linear-gradient(105deg, #2B3880 0%, #3A4A9F 38%, #D2232A 62%, #E8C878 100%);
  pointer-events: none;
}
@keyframes nano-paint-swipe {
  from { transform: translateX(0) skewX(-6deg) scaleX(1.15); }
  to   { transform: translateX(112%) skewX(-6deg) scaleX(1.15); }
}
.is-visible .collection__main::before, .is-visible .collection__small::before, .is-visible .collection__wide::before,
.is-visible .idea__photo::before, .is-visible .latest__photo::before,
.is-visible .life-strip__img::before, .is-visible .life-strip__can::before,
.is-visible .factory-intro__img::before, .is-visible.news-featured figure::before,
.is-visible .news-card figure::before, .is-visible .space-card figure::before,
.is-visible .color-card figure::before,
.catalog__banner.is-visible::before, .news-banner.is-visible::before {
  animation: nano-paint-swipe .9s cubic-bezier(.65, 0, .35, 1) both;
  animation-delay: calc(var(--nano-d, 0s) + .15s);
}

/* ------------------------------------------------------------
   8b. Nút bấm: sơn màu đậm tràn qua nút khi hover
   (gradient 2 nửa, trượt background-position như đổ sơn)
   ------------------------------------------------------------ */
.btn { transition: .25s, background-position .5s cubic-bezier(.65, 0, .35, 1); }
.btn--navy {
  background-image: linear-gradient(105deg, var(--navy) 49.5%, #D2232A 50.5%);
  background-size: 245% 100%;
  background-position: 1% 0;
}
.btn--navy:hover { background-image: linear-gradient(105deg, var(--navy) 49.5%, #D2232A 50.5%); background-size: 245% 100%; background-position: 99% 0; }
.btn--green {
  background-image: linear-gradient(105deg, #6FA53A 49.5%, #4E7A28 50.5%);
  background-size: 245% 100%;
  background-position: 1% 0;
}
.btn--green:hover { background-image: linear-gradient(105deg, #6FA53A 49.5%, #4E7A28 50.5%); background-size: 245% 100%; background-position: 99% 0; }
.btn--teal {
  background-image: linear-gradient(105deg, #1D7E8C 49.5%, #124D56 50.5%);
  background-size: 245% 100%;
  background-position: 1% 0;
}
.btn--teal:hover { background-image: linear-gradient(105deg, #1D7E8C 49.5%, #124D56 50.5%); background-size: 245% 100%; background-position: 99% 0; }
.btn--gold {
  background-size: 200% 100%;
  background-position: 0 0;
}
.btn--gold:hover { background-position: 100% 0; }

/* ------------------------------------------------------------
   8c. Tiêu đề section: hiện ra như được lăn rulo từ trái sang
   ------------------------------------------------------------ */
@keyframes nano-title-roll {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 -2% 0 0); }
}
.fancy-title.is-visible { animation: nano-title-roll .85s cubic-bezier(.65, 0, .35, 1) both; }

/* ------------------------------------------------------------
   8d. Chọn tông màu (trang chủ): vòng splash quanh chấm màu
   ------------------------------------------------------------ */
@keyframes nano-splash {
  0%   { box-shadow: 0 0 0 0 var(--c); opacity: .9; }
  100% { box-shadow: 0 0 0 14px var(--c); opacity: 0; }
}
.hue-dot { position: relative; }
.hue-dot.is-splash::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  animation: nano-splash .55s ease-out both;
  pointer-events: none;
}

/* ------------------------------------------------------------
   8e. Thẻ màu (trang Màu Sắc): dải swatch nhún lần lượt khi hover
   ------------------------------------------------------------ */
.color-card__swatches span { transition: transform .25s ease; }
.color-card:hover .color-card__swatches span { transform: translateY(-4px); }
.color-card:hover .color-card__swatches span:nth-child(1) { transition-delay: 0s; }
.color-card:hover .color-card__swatches span:nth-child(2) { transition-delay: .06s; }
.color-card:hover .color-card__swatches span:nth-child(3) { transition-delay: .12s; }
.color-card:hover .color-card__swatches span:nth-child(4) { transition-delay: .18s; }

/* ------------------------------------------------------------
   8f. Giảm chuyển động: tắt toàn bộ gói hiệu ứng sơn
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .collection__main::before, .collection__small::before, .collection__wide::before,
  .idea__photo::before, .latest__photo::before, .life-strip__img::before, .life-strip__can::before,
  .factory-intro__img::before, .news-featured figure::before, .news-card figure::before,
  .space-card figure::before, .color-card figure::before, .catalog__banner::before, .news-banner::before {
    display: none;
  }
  .fancy-title.is-visible { animation: none; }
  .hue-dot.is-splash::after { animation: none; }
}