/* MÀN ĐẦU — style scoped của HeroOrbit.vue + HeroAboutPart.vue. */

/* Hạt nhiễu SVG — chất liệu giấy nhẹ cho nền sáng. */
[data-ex-section="hero"] .ex-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.12 0 0 0 0 0.11 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ảnh nền hai góc: mỗi ảnh một mặt nạ elip riêng, độ đậm chỉnh riêng từng góc. */
[data-ex-section="hero"] .ex-photo-tl {
  opacity: 0.24;
  -webkit-mask-image: radial-gradient(ellipse 24% 40% at 17% 31%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 24% 40% at 17% 31%, #000 25%, transparent 100%);
}
/* Góc dưới phải tối hơn góc trên trái 20%: 0.24 × 0.8 */
[data-ex-section="hero"] .ex-photo-br {
  opacity: 0.19;
  -webkit-mask-image: radial-gradient(ellipse 17% 30% at 89% 79%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 17% 30% at 89% 79%, #000 25%, transparent 100%);
}

/* Dòng tít "Hệ sinh thái" màu BẠC: trắng ở đầu chữ, nhạt dần xuống xám bạc hơi xanh ở chân chữ. */
[data-ex-section="hero"] .ex-silver {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfc 34%, #dbe0e8 60%, #b1bbce 86%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Quầng sáng động thay video khi chưa có file video — hai đốm xanh thương hiệu trôi chậm. */
[data-ex-section="hero"] .ex-aurora {
  background:
    radial-gradient(40% 35% at 30% 40%, rgba(17, 135, 132, 0.55), transparent 70%),
    radial-gradient(35% 30% at 70% 60%, rgba(115, 178, 75, 0.35), transparent 70%),
    radial-gradient(30% 25% at 55% 20%, rgba(40, 110, 215, 0.28), transparent 70%);
  filter: blur(40px);
}
@media (prefers-reduced-motion: no-preference) {
  [data-ex-section="hero"] .ex-aurora { animation: ex-aurora 18s ease-in-out infinite alternate; }
}
@keyframes ex-aurora {
  0% { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); }
  100% { transform: translate3d(5%, 3%, 0) rotate(14deg) scale(1.12); }
}

/* Từng dòng tít trượt lên từ sau một mép ẩn. Đệm trên/dưới để dấu chồng tiếng Việt (ố, ể, ẫ) và chân chữ (g, y, q) không
   bị mép ẩn cắt mất khi dòng sát nhau (leading 0.76). */
[data-ex-section="hero"] .ex-line {
  display: block;
  overflow: hidden;
  padding: 0.36em 0 0.3em;
  margin: -0.36em 0 -0.3em;
}
[data-ex-section="hero"] .ex-line-in {
  display: inline-block;
  transform: translateY(140%);
}
/* Ánh sáng lướt qua chữ chuyển sắc, lặp lại: lớp nền thứ hai là một vệt sáng mảnh, cùng bị background-clip: text cắt theo
   nét chữ. Lướt 2,4 giây rồi nghỉ 1 giây; bắt đầu sau khi tít trượt vào xong. */
[data-ex-section="hero"] .ex-shine {
  background-image:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.9) 50%, transparent 58%),
    linear-gradient(100deg, #a3d94b 0%, #45b57a 48%, #0374ff 100%);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0, 0 0;
}
@media (prefers-reduced-motion: no-preference) {
  [data-ex-section="hero"] .ex-shine { animation: ex-shine 3.4s ease-in-out 1.6s infinite; }
}
@keyframes ex-shine {
  0% { background-position: 100% 0, 0 0; }
  70.6%, 100% { background-position: 0% 0, 0 0; }
}
/* Chữ chuyển sắc CHỈ tô được trong hộp nền của chính thẻ span ⇒ đệm cho hộp nền to ra (dấu chồng không bị mất). */
[data-ex-section="hero"] .ex-grad-pad {
  padding: 0.3em 0.08em 0.2em;
  margin: 0 -0.08em;
}
[data-ex-section="hero"] .ex-fade { opacity: 0; }
[data-ex-section="hero"] .ex-wheel {
  opacity: 0;
  transform: rotate(-28deg) scale(0.86);
}
[data-ex-section="hero"] .ex-orbit-ring { opacity: 0; }

[data-ex-section="hero"] .is-in .ex-line-in {
  transform: none;
  transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s);
}
[data-ex-section="hero"] .is-in .ex-fade {
  opacity: 1;
  transition: opacity 0.9s ease 0.6s;
}
[data-ex-section="hero"] .is-in .ex-wheel {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease 0.25s, transform 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
[data-ex-section="hero"] .is-in .ex-orbit-ring {
  opacity: 1;
  transition: opacity 1.2s ease 1s;
}

/* Quay quanh tâm hộp viewBox (50,50) */
[data-ex-section="hero"] .ex-spin-slow,
[data-ex-section="hero"] .ex-spin-ccw,
[data-ex-section="hero"] .ex-spin-a,
[data-ex-section="hero"] .ex-spin-b,
[data-ex-section="hero"] .ex-spin-c {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
[data-ex-section="hero"] .ex-cue::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #118784;
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: no-preference) {
  [data-ex-section="hero"] .ex-spin-slow { animation: ex-spin 90s linear infinite; }
  [data-ex-section="hero"] .ex-spin-ccw { animation: ex-spin 120s linear infinite reverse; }
  [data-ex-section="hero"] .ex-spin-a { animation: ex-spin 14s linear infinite; }
  [data-ex-section="hero"] .ex-spin-b { animation: ex-spin 22s linear infinite reverse; }
  [data-ex-section="hero"] .ex-spin-c { animation: ex-spin 31s linear infinite; animation-delay: -12s; }
  [data-ex-section="hero"] .ex-cue::after { animation: ex-cue 2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
}
@media (prefers-reduced-motion: reduce) {
  [data-ex-section="hero"] .ex-line-in,
  [data-ex-section="hero"] .ex-wheel { transform: none; }
  [data-ex-section="hero"] .ex-fade,
  [data-ex-section="hero"] .ex-wheel,
  [data-ex-section="hero"] .ex-orbit-ring { opacity: 1; }
  [data-ex-section="hero"] .is-in .ex-line-in,
  [data-ex-section="hero"] .is-in .ex-fade,
  [data-ex-section="hero"] .is-in .ex-wheel,
  [data-ex-section="hero"] .is-in .ex-orbit-ring { transition: none; }
}

@keyframes ex-spin {
  to { transform: rotate(360deg); }
}
@keyframes ex-cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* ───── HeroAboutPart: tiêu đề hai cột ───── */
/* Cùng font + dải màu với tít "nông nghiệp số" nhưng đầu xanh lá sẫm hơn để đọc được trên nền sáng. */
[data-ex-section="hero"] .ex-side-title {
  display: inline-block;
  white-space: nowrap;
  padding: 0.12em 0.04em 0.16em;
  margin: -0.12em -0.04em 0;
  font-family: 'Momo Trust Display', 'Be Vietnam Pro', sans-serif;
  font-weight: 400;
  font-size: var(--side-title, 40px); /* cột hẹp thu nhỏ — xem `sideVars` ở hero.js */
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, #4fa524 0%, #1f9a68 48%, #0374ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Khối dưới màn đầu: nhỏ dần theo mốc (điện thoại 30 = cỡ tít khối .ex-h2 cùng dải). */
[data-ex-section="hero"] .ex-side-title.is-flow { font-size: 30px; }
@media (min-width: 768px) { [data-ex-section="hero"] .ex-side-title.is-flow { font-size: 34px; } }
@media (min-width: 992px) { [data-ex-section="hero"] .ex-side-title.is-flow { font-size: 40px; } }