/* ==========================================================================
   EPS Minh Phú — đồ hoạ và chuyển động
   Quy tắc: chỉ animate transform và opacity; mọi chuyển động liên tục nằm
   trong @media (prefers-reduced-motion: no-preference) để máy bật giảm
   chuyển động chỉ thấy trạng thái cuối.
   ========================================================================== */

/* -------------------------------------------------- hero: dàn nhập ------ */

@media (prefers-reduced-motion: no-preference) {
  /* Dan nhap dung chung @keyframes rise cua site.css (fill backwards: an
     trong luc cho, chay xong tra ve trang thai goc = hien). Khong dat
     opacity goc o day, neu khong khi animation khac thang cascade thi
     phan tu ket o 0. */
  [data-enter] {
    animation: rise 0.8s var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 110ms + 80ms);
  }

}

/* Cụm lục giác phía sau ảnh: lấy từ ba khối lục giác của logo */
.hero {
  overflow: hidden; /* cum luc giac tran ra mep phai, khong duoc keo trang rong */
}

.hero__grid {
  position: relative;
}

.hero__hex {
  position: absolute;
  right: -6%;
  top: -12%;
  width: min(62%, 560px);
  height: auto;
  z-index: 0;
  pointer-events: none;
  color: var(--accent);
}

.hero__art {
  position: relative;
  z-index: 1;
}

@media (max-width: 959px) {
  .hero__hex {
    right: -18%;
    top: 34%;
    width: 78%;
  }
}

/* ------------------------------------------------- dải số: đếm lên ----- */

.statbar dt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.statbar dt .ico {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--accent);
  flex: none;
}

[data-count] {
  display: inline-block;
  min-width: var(--w, auto);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------- sơ đồ quy trình: dây chuyền -- */

.pipe {
  --node: 58px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 0.5rem;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem);
  counter-reset: step;
}

@media (min-width: 560px) {
  .pipe {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .pipe {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
  }
}

.pipe__step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  text-align: center;
}

/* Đường chảy nối các nút, chỉ vẽ khi nút kế nằm cùng hàng */
@media (min-width: 960px) {
  .pipe__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--node) / 2 - 1px);
    left: calc(50% + var(--node) / 2 + 6px);
    width: calc(100% - var(--node) - 12px);
    height: 2px;
    border-radius: 2px;
    background: repeating-linear-gradient(
      90deg,
      var(--accent) 0 9px,
      transparent 9px 18px
    );
    background-size: 18px 2px;
    opacity: 0.55;
  }
}

.pipe__node {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, var(--teal-500), var(--teal-800));
  color: #fff;
  transition: transform var(--dur) var(--ease);
}

.pipe__node .ico {
  width: 24px;
  height: 24px;
}

.pipe__step:hover .pipe__node {
  transform: scale(1.1) rotate(-4deg);
}

.pipe__num {
  order: -1;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

.pipe__label {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  max-width: 11ch;
}

/* Nút nảy ra lần lượt khi cuộn tới (lớp .is-in do main.js gắn) */
@media (prefers-reduced-motion: no-preference) {
  .js .pipe .pipe__node {
    opacity: 0;
    transform: scale(0.6);
  }

  .pipe.is-in .pipe__node {
    animation: pop-in 0.55s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 90ms);
  }

  .pipe.is-in .pipe__step:hover .pipe__node {
    animation: none;
    opacity: 1;
    transform: scale(1.1) rotate(-4deg);
  }
}

@keyframes pop-in {
  60% {
    opacity: 1;
    transform: scale(1.08);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ------------------------------------------ khối tối: ảnh và vân trôi ---- */

.slab figure {
  overflow: hidden;
  border-radius: var(--r);
}

.slab figure img {
  transform-origin: 50% 60%;
}

/* ----------------------------------------------- tiêu chí: icon sống ----- */

.stance__list .ico {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.stance__list li:hover .ico {
  transform: rotate(-6deg) scale(1.08);
  box-shadow: 0 14px 30px -10px rgba(0, 120, 137, 0.6);
}

/* ==========================================================================
   Bộ dùng chung cho các trang con
   ========================================================================== */

/* ---------------------------------------- reveal: trượt ngang theo phía -- */

/* Chi truot ngang tu 1000px: duoi do khoi anh sat mep, truot ngang lam
   trang tran 28px truoc khi hien; mobile dung reveal doc mac dinh. */
@media (min-width: 1000px) {
  .js [data-reveal="left"] {
    transform: translate3d(-28px, 0, 0);
  }

  .js [data-reveal="right"] {
    transform: translate3d(28px, 0, 0);
  }

  .js [data-reveal="left"].is-in,
  .js [data-reveal="right"].is-in {
    transform: translate3d(0, 0, 0);
  }
}

/* ------------------------------------ nảy ra lần lượt: các con của .stagger
   main.js gắn --i cho từng con (hoặc từng hàng tbody nếu là bảng). Hàng
   bảng chỉ mờ dần vì transform trên <tr> không đáng tin. */

@media (prefers-reduced-motion: no-preference) {
  .js .stagger > *,
  .js .stagger tbody tr {
    opacity: 0;
  }

  .js .stagger.is-in > * {
    animation: fade-up 0.6s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
  }

  .js .stagger.is-in tbody tr {
    animation: fade-in 0.5s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 60ms);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

/* ------------------------------------------ nghiêng 3D nhẹ theo con trỏ --
   Toạ độ --rx/--ry do main.js ghi lên [data-tilt]; transform đặt lên con
   trực tiếp để không đè lên transform của reveal trên chính phần tử đó. */

[data-tilt] {
  perspective: 900px;
}

[data-tilt] > picture,
[data-tilt] > img {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 0.35s var(--ease);
  will-change: transform;
}

/* ----------------------------------------------- Ken Burns dùng chung ---- */

.kb {
  overflow: hidden;
  border-radius: var(--r);
}

.kb img {
  transform-origin: 50% 60%;
}

/* --------------------------------------------- thanh biểu đồ nhân sự ---- */

.bars {
  display: grid;
  gap: 0.75rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.bars__title {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.bars__row {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-sm);
}

.bars__track {
  display: block;
  height: 10px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.bars__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--teal-400), var(--teal-300));
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 120ms);
}

.js .bars .bars__fill {
  transform: scaleX(0);
}

.js .bars.is-in .bars__fill {
  transform: scaleX(var(--p, 0));
}

.bars__val {
  font-family: var(--font-mono);
  font-weight: 600;
  min-width: 2ch;
  text-align: right;
}

/* ------------------------------------- đường cắt 3D vẽ dần trên ảnh ----- */

.cutfig {
  position: relative;
  width: fit-content; /* figure om sat anh de lop SVG ve dung tren anh */
  max-width: 100%;
  margin-inline: auto;
}

.cutfig .cut {
  position: absolute;
  inset: 1rem;
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  pointer-events: none;
  overflow: visible;
}

.cut__path {
  fill: none;
  stroke: var(--teal-300);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(124, 203, 216, 0.85));
}

.cut__head {
  fill: #fff;
  stroke: var(--teal-300);
  stroke-width: 2;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .js .cutfig .cut__path {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
  }

  .js .cutfig.is-in .cut__path {
    animation: draw 2.4s var(--ease) 0.3s forwards;
  }

  .js .cutfig.is-in .cut__head {
    animation: head-pop 0.4s var(--ease) 2.5s forwards;
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes head-pop {
  to {
    opacity: 1;
  }
}

/* --------------------------------------------- form: sáng lên khi nhập --- */

.form {
  transition: box-shadow var(--dur) var(--ease);
}

.form:focus-within {
  box-shadow: var(--glass-shadow-lg), 0 0 0 4px rgba(0, 120, 137, 0.08),
    inset 0 1px 0 var(--glass-hi);
}

/* Nhãn danh sách liên hệ: icon nghiêng nhẹ khi rê chuột */
.info-list .ico {
  transition: transform var(--dur) var(--ease);
}

.info-list > div:hover .ico {
  transform: rotate(-6deg) scale(1.08);
}