/* ==========================================================================
   FROGA — trang Hành trình: cảnh "đường nhảy" đầu trang và chuyển động
   ==========================================================================
   Anh Mừng 06/09/2026 tối: "Trang hành trình tôi cần làm wow hơn nữa."

   Ba thứ mới, tất cả chỉ chạy khi <html> có lớp `froga-dong` (công tắc chung
   của chuyen-dong.php: tắt khi máy đặt prefers-reduced-motion hoặc không có
   IntersectionObserver). Không có lớp đó thì mọi thứ hiện sẵn, tĩnh, đủ nghĩa.

   1. Cảnh đầu trang (.froga-ht-canh): SVG bốn lá sen theo đúng bốn bậc của lộ
      trình, đường chấm tự vẽ ra từ lá 1 tới lá 4 (mask có dashoffset), lá bật
      lên lần lượt, sóng lan quanh lá 1, lá 4 (toàn cầu) sáng nhấp nháy. Con
      ếch là ảnh thật đặt đè lên lá 1 (ảnh raster nét hơn vẽ lại bằng SVG).
   2. Số liệu (.froga-so-dem) đếm từ 0 lên khi cuộn tới — JS ở hanh-trinh.php.
   3. Thẻ hiện dần theo nhịp (.froga-cho-hien, dùng chung luật ở ban-hang.css)
      và con ếch trên bậc 1 nhảy mạnh hai nhịp khi cầu thang lọt vào khung.
   ========================================================================== */

/* Cột chữ đầu trang nằm TRÊN vòng sóng (vòng ngoài của cảnh lan sang nửa trái). */
.froga-ht-chu { position: relative; z-index: 1; }
.froga-ht-canh {
	position: relative;
	z-index: 0;
	justify-self: center;
	width: min(100%, 540px);
	aspect-ratio: 560 / 420;
}
.froga-ht-canh svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	/* Tấm tranh bo góc 30px có bóng nhẹ, tách khỏi nền gradient của đầu trang. */
	filter: drop-shadow(0 18px 32px rgba(30, 59, 39, .16));
}
/* Con ếch đứng trên lá sen 1 của dòng sông: toạ độ từ sinh-canh-song.py (ECH pct). */
.froga-ht-ech {
	position: absolute;
	left: 26.79%;
	top: 82.14%;
	width: 16%;
	max-width: none;
	transform: translate(-50%, -84%);
	filter: drop-shadow(0 16px 24px rgba(30, 59, 39, .3));
	z-index: 2;
}
html.froga-dong .froga-ht-ech { animation: htEchTho 3.4s ease-in-out infinite; }
@keyframes htEchTho {
	0%, 100% { transform: translate(-50%, -84%); }
	50% { transform: translate(-50%, -90%); }
}

/* Chữ trong cảnh */
.froga-ht-ten { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 17px; fill: #1E3B27; }
.froga-ht-phu { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 12.5px; fill: #5F6B58; letter-spacing: .4px; }
.froga-ht-so { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 15px; fill: #FFFFFF; }
/* Tên hai quần đảo: chữ có viền trắng để đọc được khi đường nhảy đi ngang qua. */
.froga-ht-dao { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-style: italic; font-size: 11.5px; fill: #1A582C; paint-order: stroke; stroke: #FFFFFF; stroke-width: 3px; stroke-linejoin: round; }

/* Đường chấm: tĩnh thì hiện đủ; có chuyển động thì mask tự vẽ từ lá 1 tới lá 4. */
.froga-ht-ve { stroke-dashoffset: 0; }
html.froga-dong .froga-ht-ve {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: htVe 2.4s cubic-bezier(.4, 0, .2, 1) .35s forwards;
}
@keyframes htVe { to { stroke-dashoffset: 0; } }

/* Bốn lá bật lên lần lượt, cách nhau 0,38s, lá 1 trước. */
.froga-ht-bac { transform-box: fill-box; transform-origin: center; }
html.froga-dong .froga-ht-bac {
	opacity: 0;
	animation: htBat .62s cubic-bezier(.2, .9, .3, 1.25) both;
	animation-delay: calc(var(--i, 0) * .38s + .25s);
}
@keyframes htBat {
	from { opacity: 0; transform: scale(.35); }
	to { opacity: 1; transform: scale(1); }
}

/* Hai vệt nước trôi chậm dọc dòng sông (cảnh A, 06/09/2026) */
.froga-ht-troi { stroke-dasharray: 90 70; }
html.froga-dong .froga-ht-troi { animation: htTroi 9s linear infinite; }
html.froga-dong .froga-ht-troi:nth-of-type(2) { animation-duration: 12s; }
@keyframes htTroi { to { stroke-dashoffset: -160; } }

/* Sóng lan quanh lá 1 và quầng sáng lá 4 */
.froga-ht-song { transform-box: fill-box; transform-origin: center; opacity: 0; }
html.froga-dong .froga-ht-song { animation: htSong 2.8s ease-out infinite; }
html.froga-dong .froga-ht-song:nth-child(2) { animation-delay: 1.4s; }
@keyframes htSong {
	0% { transform: scale(.6); opacity: .55; }
	100% { transform: scale(1.9); opacity: 0; }
}
.froga-ht-sang { opacity: .35; }
html.froga-dong .froga-ht-sang { animation: htSang 2.4s ease-in-out infinite; }
@keyframes htSang {
	0%, 100% { opacity: .3; }
	50% { opacity: .85; }
}

/* Cầu thang bốn bậc: con ếch trên bậc 1 nhảy mạnh hai nhịp khi cầu thang lọt
   vào khung (JS gắn lớp), rồi về nhịp thở cũ. */
html.froga-dong .froga-ht-nhay-manh { animation: htNhayManh 1.6s cubic-bezier(.3, 0, .2, 1) 2 !important; }
@keyframes htNhayManh {
	0%, 100% { transform: translateY(0); }
	40% { transform: translateY(-38px) rotate(-4deg); }
	55% { transform: translateY(-38px) rotate(4deg); }
}

/* Thẻ số liệu: con số đổi màu nhẹ lúc đếm xong */
.froga-so-dem { display: inline-block; font-variant-numeric: tabular-nums; }
html.froga-dong .froga-so-dem.froga-dem-xong { animation: htDemXong .5s ease; }
@keyframes htDemXong {
	0% { transform: scale(1); }
	40% { transform: scale(1.08); }
	100% { transform: scale(1); }
}

/* Thẻ nổi lên khi rê chuột (máy tính) */
html.froga-dong .froga-ht-the { transition: transform .25s ease, box-shadow .25s ease; }
html.froga-dong .froga-ht-the:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(30, 59, 39, .12); }

@media (prefers-reduced-motion: reduce) {
	.froga-ht-ech, .froga-ht-ve, .froga-ht-bac, .froga-ht-song, .froga-ht-sang, .froga-ht-troi, .froga-so-dem { animation: none !important; }
	.froga-ht-bac { opacity: 1; }
}