/* ============================================================================
 * HERO — MOTION DESIGN (component riêng, chỉ nạp ở trang chủ)
 * ----------------------------------------------------------------------------
 * Phong cách: Leica / Trimble / Apple — premium, natural, subtle.
 * "Motion should be felt, not noticed."
 *
 * Chỉ chạm transform / opacity / scale / translate / background-position
 * (KHÔNG width/height/margin/padding/top/left) ⇒ không layout-shift, 60fps.
 *
 * COMPOSE (tránh xung đột transform trên cùng phần tử):
 *   Ảnh : transform = sway(float) · scale = hover
 *   Card: transform = float · translate = hover-lift · (opacity/transform load-in)
 * 3 nhóm dùng thuộc tính khác nhau nên ghép chồng, không đè nhau.
 *
 * REDUCED-MOTION / SEO:
 *   - Load-in + chuyển động của ảnh/card gói dưới `html.mas-anim` (JS đặt khi bật
 *     JS + KHÔNG prefers-reduced-motion — xem functions.php §20). ⇒ no-JS/crawler/
 *     reduced-motion luôn thấy nội dung tĩnh, đầy đủ.
 *   - Sọc + góc gói dưới @media prefers-reduced-motion (chạy cả khi no-JS).
 * ========================================================================== */

.mas-home-hero .mas-hero__media img,
.mas-home-hero .mas-hero__tb { will-change: transform; }
.mas-tape { will-change: background-position; }

/* ---------------------------------------------------------------------------
 * NỀN HERO — gradient trắng→xanh rất nhạt + lưới bản đồ (blueprint) mờ (tĩnh)
 * ------------------------------------------------------------------------- */
.mas-home-hero .mas-frame{
  background: linear-gradient(160deg, var(--c-surface) 0%, #edf3fb 100%);
  border-radius: var(--r-md);
}
.mas-home-hero .mas-frame::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background-image:
    linear-gradient(var(--c-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(175deg, rgba(0,0,0,.85), transparent 72%);
          mask-image: linear-gradient(175deg, rgba(0,0,0,.85), transparent 72%);
}
.mas-home-hero .mas-hero__grid{ position:relative; z-index:1; }

/* ---------------------------------------------------------------------------
 * 1 · THANH SỌC HAZARD — chạy sang phải, seamless, KHÔNG méo
 * Chu kỳ ngang của sọc -45° (pitch 24px) = 24·√2 ≈ 33.9411px. Đặt background-size
 * = đúng chu kỳ ⇒ mỗi tile khít mép, sọc không biến dạng. Chỉ animate
 * background-position-x, dịch đúng 8 tile (8·33.9411) ⇒ lặp không thấy điểm nối.
 * Giữ nguyên độ dày / khoảng cách / góc / màu (từ --c-tape).
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .mas-tape{
    background-size: 33.9411px 33.9411px;
    animation: mas-tape-slide 24s linear infinite;
  }
}
@keyframes mas-tape-slide{
  from { background-position-x: 0; }
  to   { background-position-x: 271.529px; }   /* 8 × 33.9411 = seamless */
}

/* ---------------------------------------------------------------------------
 * 5 · BỐN GÓC KHUNG — chỉ opacity (KHÔNG scale), 6s, rất tinh tế
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .mas-home-hero .mas-frame::after{ animation: mas-corner-glow 6s ease-in-out infinite; }
}
@keyframes mas-corner-glow{ 0%,100%{ opacity:.9; } 50%{ opacity:1; } }

/* ---------------------------------------------------------------------------
 * 3 · ẢNH — HOVER rất nhẹ (scale 1.015 + shadow), 400ms. scale = property riêng
 * nên không đè sway (transform).
 * ------------------------------------------------------------------------- */
.mas-home-hero .mas-hero__media img{
  transition: scale .4s ease, box-shadow .4s ease;
}
.mas-home-hero .mas-hero__media img:hover{
  scale: 1.015;
  box-shadow: 0 12px 30px -8px rgba(13,59,102,.28);
}

/* ---------------------------------------------------------------------------
 * 4 · CARD — HOVER: nâng 4px + shadow đậm. Dùng `translate` (property) để ghép
 * với float (transform) — không đè nhau.
 * ------------------------------------------------------------------------- */
.mas-home-hero .mas-hero__tb:hover{
  translate: 0 -4px;
  box-shadow: 8px 8px 0 0 var(--c-primary);
}

/* ---------------------------------------------------------------------------
 * KEYFRAMES
 * ------------------------------------------------------------------------- */
/* Xuất hiện khi load (6) */
@keyframes mas-hero-in{ from{ opacity:0; transform: translateY(20px); } to{ opacity:1; transform:none; } }

/* 2 · Sway ảnh — camera handheld: Y 0→-5, X 0→2, rotate ±0.15°, ease-in-out.
 * Nhiều mốc, đỉnh lệch pha ⇒ đường đi hữu cơ, không phải bập bênh máy móc. */
@keyframes mas-hero-sway{
  0%   { transform: translate(0px, 0px)     rotate(0deg); }
  15%  { transform: translate(0.8px, -2px)  rotate(0.08deg); }
  30%  { transform: translate(1.6px, -4px)  rotate(0.15deg); }
  45%  { transform: translate(2px, -5px)    rotate(0.10deg); }
  60%  { transform: translate(1.2px, -4px)  rotate(-0.05deg); }
  75%  { transform: translate(0.4px, -2.4px) rotate(-0.15deg); }
  90%  { transform: translate(-0.2px, -0.8px) rotate(-0.06deg); }
  100% { transform: translate(0px, 0px)     rotate(0deg); }
}

/* 4 · Float card — biên độ nhỏ hơn ảnh, chu kỳ khác (10s ≠ 8.5s) ⇒ không bao giờ
 * đồng pha với ảnh = tự nhiên. */
@keyframes mas-card-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-2px); } }

/* ---------------------------------------------------------------------------
 * 6 · TRÌNH TỰ XUẤT HIỆN (một lần khi load) — chỉ dưới html.mas-anim
 * Title 0 · Description 150ms · Buttons 300ms · Image 450ms · Card 700ms.
 * Ảnh & card: load-in xong mới bắt đầu chuyển động liên tục (delay = load + dur).
 * ------------------------------------------------------------------------- */
html.mas-anim .mas-home-hero .mas-overline{ animation: mas-hero-in .7s var(--ease) 0s both; }
html.mas-anim .mas-home-hero .mas-hero__title{ animation: mas-hero-in .7s var(--ease) 0s both; }
html.mas-anim .mas-home-hero .mas-hero__lead{ animation: mas-hero-in .7s var(--ease) .15s both; }
html.mas-anim .mas-home-hero .mas-btn-group{ animation: mas-hero-in .7s var(--ease) .3s both; }

/* Ảnh: fade-in (delay .45s) → sway (bắt đầu ~1.15s = .45+.7) */
html.mas-anim .mas-home-hero .mas-hero__media img{
  animation:
    mas-hero-in   .7s var(--ease) .45s both,
    mas-hero-sway 8.5s ease-in-out 1.15s infinite;
}

/* Card: huỷ reveal §20 để chạy trình tự riêng; fade-in (delay .7s) → float (~1.6s).
 * transition giữ cho HOVER (translate/box-shadow) mượt; opacity/transform do animation lo. */
html.mas-anim .mas-home-hero .mas-hero__tb{
  opacity: 1;
  transition: translate .3s var(--ease), box-shadow .3s var(--ease);
  animation:
    mas-hero-in    .7s var(--ease) .7s both,
    mas-card-float 10s ease-in-out 1.6s infinite;
}

/* ---------------------------------------------------------------------------
 * 7 · Reduced-motion: bỏ mọi animation liên tục; giữ hover (micro-interaction).
 * (Load-in tự tắt vì html.mas-anim không được đặt khi reduced-motion.)
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .mas-tape,
  .mas-home-hero .mas-frame::after,
  .mas-home-hero .mas-hero__media img,
  .mas-home-hero .mas-hero__tb{ animation: none !important; }
}