/* public/css/ho-bong.css — Hiệu ứng & Chuyển động Hồ Bống */

.san-khau-ho {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}

.ho-bong-khung {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 200px;
  max-height: 520px;
  background-color: #d4f1f9;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-default);
  transition: background-color 800ms var(--ease-standard);
}

.ho-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Lá sen nhún nhảy nhẹ */
.la-sen-nhun {
  transform-origin: 120px 65px;
  animation: laSenBapBenh 4s ease-in-out infinite alternate;
}

@keyframes laSenBapBenh {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(3px) rotate(1deg); }
  100% { transform: translateY(-2px) rotate(-1deg); }
}

/* Ánh sáng laptop nhấp nháy làm việc */
#laptop-man-hinh {
  transition: fill 500ms ease, opacity 500ms ease;
}
#laptop-anh-sang {
  transition: opacity 500ms ease;
}

/* Khi ngủ: laptop tắt */
.canh-ngu #laptop-man-hinh {
  fill: #04122f !important;
  opacity: 0.3 !important;
}
.canh-ngu #laptop-anh-sang {
  opacity: 0 !important;
}

/* Cảnh đêm & Bầu trời sao */
.canh-dem {
  transition: opacity 800ms ease;
}

/* Bóng mẹ con Cám lấp ló */
.bong-cam {
  transition: opacity 600ms ease, transform 600ms ease;
  transform-origin: bottom center;
}

.bong-cam.hien {
  opacity: 1 !important;
  animation: camLenLut 5s ease-in-out infinite alternate;
}

@keyframes camLenLut {
  0% { transform: translate(750px, 220px) scale(0.98); }
  40% { transform: translate(740px, 205px) scale(1.02); }
  70% { transform: translate(755px, 215px) scale(1); }
  100% { transform: translate(745px, 210px) scale(1.03); }
}

/* Mực nước và sóng */
#duong-nuoc {
  transition: fill 800ms ease, d 800ms ease;
}

#nuoc-tran {
  transition: opacity 800ms ease;
}

#gon-song ellipse {
  animation: gonSongLan 6s ease-in-out infinite alternate;
}
#gon-song ellipse:nth-child(2) {
  animation-delay: -2s;
}
#gon-song ellipse:nth-child(3) {
  animation-delay: -4s;
}

@keyframes gonSongLan {
  0% { transform: scaleX(0.95) translateY(0); opacity: 0.3; }
  50% { transform: scaleX(1.05) translateY(-3px); opacity: 0.6; }
  100% { transform: scaleX(1) translateY(2px); opacity: 0.4; }
}

/* Bong bóng nước */
#bong-bong-nuoc circle {
  animation: bongBongNoi 3.5s cubic-bezier(.4, 0, .2, 1) infinite;
}
#bong-bong-nuoc circle:nth-child(2) {
  animation-delay: 1.2s;
}
#bong-bong-nuoc circle:nth-child(3) {
  animation-delay: 2.3s;
}

@keyframes bongBongNoi {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  20% { opacity: 0.7; }
  80% { opacity: 0.5; }
  100% { transform: translateY(-70px) scale(1.2); opacity: 0; }
}

/* ---- MASCOT BỐNG V2 CHUYỂN ĐỘNG THEO CHUẨN HUB ---- */
.bm2 {
  --bm-em: cubic-bezier(.45, 0, .55, 1);
}

.bm2 .bm-tho,
.bm2 .bm-tail,
.bm2 .bm-vay-truoc,
.bm2 .bm-eyeball,
.bm2 .bm-pupil,
.bm2 .bm-pearl {
  transform-box: fill-box;
}

/* Thở nhịp */
.bm2 .bm-tho {
  transform-origin: 50% 75%;
  animation: bmTho 2.6s var(--bm-em) infinite alternate;
}

/* Vẫy đuôi */
.bm2 .bm-tail {
  transform-origin: 100% 50%;
  animation: bmVay 1.7s var(--bm-em) infinite alternate;
}
.bm2 .bm-tail-front {
  animation-delay: 150ms;
}

/* Vây trước chèo */
.bm2 .bm-vay-truoc {
  transform-origin: 85% 15%;
  animation: bmCheo 3.1s var(--bm-em) infinite alternate;
}

/* Ngọc sáng */
.bm2 .bm-pearl {
  transform-origin: center;
  animation: bmNgoc 3.4s var(--bm-em) infinite alternate;
}

/* Chớp mắt */
.bm2 .bm-eyeball {
  transform-origin: center;
  animation: bmChop 7s linear infinite;
}

/* Liếc mắt */
.bm2 .bm-pupil {
  animation: bmLiec 11s var(--bm-em) infinite;
}

@keyframes bmTho { from { transform: none; } to { transform: translateY(-1.2px) scale(1.018); } }
@keyframes bmNhun { from { transform: none; } to { transform: translateY(-3px) scale(1.03); } }
@keyframes bmVay { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes bmQuay { 0%, 100% { transform: none; } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes bmCheo { from { transform: rotate(-5deg); } to { transform: rotate(7deg); } }
@keyframes bmNgoc { from { transform: none; } to { transform: scale(1.1); } }
@keyframes bmChop {
  0%, 40% { transform: none; animation-timing-function: ease-in; }
  41.2% { transform: scaleY(.1); animation-timing-function: ease-out; }
  43%, 86% { transform: none; animation-timing-function: ease-in; }
  87.2% { transform: scaleY(.1); animation-timing-function: ease-out; }
  88.6% { transform: none; animation-timing-function: ease-in; }
  89.8% { transform: scaleY(.1); animation-timing-function: ease-out; }
  91.6%, 100% { transform: none; }
}
@keyframes bmLiec {
  0%, 30%, 52%, 66%, 86%, 100% { transform: none; }
  34%, 48% { transform: translate(-1.2px, .4px); }
  70%, 82% { transform: translate(.4px, -.5px); }
}

/* Biến thể chuyển động theo 5 tâm trạng */

/* 1. NO NÊ (p >= 1): Bống nhảy tưng bừng, quẫy cực sung */
.ho-bong-khung[data-tam-trang="no_ne"] .bm2 .bm-tho {
  animation: bmNhun 1.1s var(--bm-em) infinite alternate;
}
.ho-bong-khung[data-tam-trang="no_ne"] .bm2 .bm-tail {
  animation: bmQuay 300ms var(--bm-em) infinite;
}
.ho-bong-khung[data-tam-trang="no_ne"] .ca-bong-boi {
  animation: boiNhayNoNe 5s ease-in-out infinite;
}

/* 2. VUI: nhún nhanh, đuôi quẫy tươi tắn */
.ho-bong-khung[data-tam-trang="vui"] .bm2 .bm-tho {
  animation: bmNhun 1.4s var(--bm-em) infinite alternate;
}
.ho-bong-khung[data-tam-trang="vui"] .bm2 .bm-tail {
  animation: bmVay 0.9s var(--bm-em) infinite alternate;
}
.ho-bong-khung[data-tam-trang="vui"] .ca-bong-boi {
  animation: boiVui 7s ease-in-out infinite;
}

/* 3. BÌNH THƯỜNG: bơi êm ả, khoan thai */
.ho-bong-khung[data-tam-trang="binh_thuong"] .bm2 .bm-tho {
  animation: bmTho 2.6s var(--bm-em) infinite alternate;
}
.ho-bong-khung[data-tam-trang="binh_thuong"] .bm2 .bm-tail {
  animation: bmVay 1.7s var(--bm-em) infinite alternate;
}
.ho-bong-khung[data-tam-trang="binh_thuong"] .ca-bong-boi {
  animation: boiBinhThuong 10s ease-in-out infinite;
}

/* 4. ĐÓI: bơi chậm, uể oải */
.ho-bong-khung[data-tam-trang="doi"] .bm2 .bm-tho {
  animation: bmTho 4.2s var(--bm-em) infinite alternate;
}
.ho-bong-khung[data-tam-trang="doi"] .bm2 .bm-tail {
  animation: bmVay 3.2s var(--bm-em) infinite alternate;
}
.ho-bong-khung[data-tam-trang="doi"] .ca-bong-boi {
  animation: boiDoi 15s ease-in-out infinite;
}

/* 5. HOẢNG: nước cạn, quẫy đuôi gấp gáp, co cụm ở đáy */
.ho-bong-khung[data-tam-trang="hoang"] .bm2 .bm-tho {
  animation: bmRun 0.4s ease-in-out infinite;
}
.ho-bong-khung[data-tam-trang="hoang"] .bm2 .bm-tail {
  animation: bmQuay 220ms var(--bm-em) infinite;
}
.ho-bong-khung[data-tam-trang="hoang"] .ca-bong-boi {
  animation: boiHoang 4.5s ease-in-out infinite;
}

@keyframes bmRun {
  0% { transform: translateY(0); }
  50% { transform: translateY(-2px) rotate(1deg); }
  100% { transform: translateY(1px) rotate(-1deg); }
}

/* ĐƯỜNG BƠI CỦA BỐNG TRONG HỒ (viewBox 1000 x 560) */
@keyframes boiNhayNoNe {
  0% { transform: translate(320px, 390px) rotate(2deg) scale(1); }
  25% { transform: translate(520px, 350px) rotate(-8deg) scale(1.05); }
  45% { transform: translate(660px, 290px) rotate(-18deg) scale(1.1); } /* Nhảy vọt lên gần mặt nước */
  55% { transform: translate(720px, 340px) rotate(12deg) scale(1.05); }
  75% { transform: translate(480px, 420px) rotate(5deg) scale(0.98); }
  100% { transform: translate(320px, 390px) rotate(2deg) scale(1); }
}

@keyframes boiVui {
  0% { transform: translate(300px, 380px) rotate(0deg); }
  30% { transform: translate(540px, 340px) rotate(-6deg); }
  50% { transform: translate(680px, 360px) rotate(4deg); }
  75% { transform: translate(450px, 430px) rotate(6deg); }
  100% { transform: translate(300px, 380px) rotate(0deg); }
}

@keyframes boiBinhThuong {
  0% { transform: translate(280px, 400px) rotate(0deg); }
  35% { transform: translate(480px, 360px) rotate(-4deg); }
  65% { transform: translate(650px, 380px) rotate(3deg); }
  85% { transform: translate(420px, 440px) rotate(5deg); }
  100% { transform: translate(280px, 400px) rotate(0deg); }
}

@keyframes boiDoi {
  0% { transform: translate(260px, 405px) rotate(0deg); }
  40% { transform: translate(420px, 395px) rotate(-2deg); }
  70% { transform: translate(560px, 410px) rotate(2deg); }
  100% { transform: translate(260px, 405px) rotate(0deg); }
}

@keyframes boiHoang {
  0% { transform: translate(310px, 420px) rotate(-5deg); }
  20% { transform: translate(380px, 405px) rotate(8deg); }
  40% { transform: translate(330px, 415px) rotate(-10deg); }
  65% { transform: translate(420px, 425px) rotate(12deg); }
  85% { transform: translate(350px, 415px) rotate(-6deg); }
  100% { transform: translate(310px, 420px) rotate(-5deg); }
}

/* CẢNH NGỦ */
.ho-bong-khung.canh-ngu .ca-bong-boi {
  animation: boiNgu 6s ease-in-out infinite alternate !important;
  transform: translate(620px, 370px) !important;
}
.ho-bong-khung.canh-ngu .bm2 .bm-eyeball,
.ho-bong-khung.canh-ngu .bm2 .bm-pupil {
  animation: none !important;
}
.ho-bong-khung.canh-ngu .bm2 .bm-tho {
  animation-duration: 4.8s !important;
}
.ho-bong-khung.canh-ngu .bm2 .bm-tail {
  animation-duration: 3.5s !important;
}

@keyframes boiNgu {
  0% { transform: translate(615px, 368px) rotate(-2deg); }
  100% { transform: translate(625px, 374px) rotate(1deg); }
}

/* BONG BÓNG THOẠI CỦA BỐNG */
.bong-thoai {
  position: absolute;
  top: 18px;
  left: 20px;
  max-width: min(380px, calc(100% - 40px));
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  padding: 12px 18px;
  border-radius: var(--radius-bubble);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-md);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--navy-900);
  line-height: 1.45;
  pointer-events: none;
  z-index: 10;
  transition: opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard);
}

.bong-thoai::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 36px;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.95);
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  transform: rotate(45deg);
}

/* BAR TEST TRÊN LOCALHOST CHO NAM & NGHIỆM THU */
.thanh-thu-nghiem {
  margin-top: 14px;
  background: var(--white);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-card);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.thanh-thu-nghiem span {
  font-weight: 600;
  color: var(--navy-900);
}

.thanh-thu-nghiem button {
  background: var(--gray-100);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--navy-900);
  transition: all 120ms ease;
}

.thanh-thu-nghiem button:hover {
  background: var(--teal-50);
  border-color: var(--teal-500);
  color: var(--teal-500);
}

.thanh-thu-nghiem button.dang-chon {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}

/* PREFERS-REDUCED-MOTION: BỐNG ĐỨNG YÊN HOÀN TOÀN */
@media (prefers-reduced-motion: reduce) {
  .bm2,
  .bm2 .bm-tho,
  .bm2 .bm-tail,
  .bm2 .bm-vay-truoc,
  .bm2 .bm-eyeball,
  .bm2 .bm-pupil,
  .bm2 .bm-pearl,
  .ca-bong-boi,
  .la-sen-nhun,
  .bong-cam,
  #gon-song ellipse,
  #bong-bong-nuoc circle {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
  .ca-bong-boi {
    transform: translate(450px, 390px) !important;
  }
}