/* Hiệu ứng giao diện: ảnh đầu trang, hiện dần khi cuộn, thẻ set quà, giỏ nảy, hoa rơi thưa.
   Chỉ dùng transform và opacity. Tắt hết khi người dùng bật giảm chuyển động.
   Phụ thuộc biến màu trong styles.css, nên phải nạp SAU styles.css. */

:root {
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fx-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fx-lift: 0 2px 4px oklch(29% 0.09 295 / 0.08), 0 18px 32px -18px oklch(29% 0.09 295 / 0.45);
  --fx-warm: oklch(93% 0.06 70);
  --fx-rose: oklch(92% 0.05 15);
}

/* ---------- Đầu trang: nền ấm, ảnh thật xòe ra rồi trôi chậm ---------- */
.hero {
  background-image:
    radial-gradient(70% 55% at 88% 18%, oklch(93% 0.06 70 / 0.75), transparent 70%),
    radial-gradient(55% 45% at 4% 96%, oklch(93% 0.045 20 / 0.6), transparent 72%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, var(--cell) var(--cell), var(--cell) var(--cell);
}
.hero__grid { position: relative; z-index: 1; }

.hero__photos .photo {
  animation: fx-fan 900ms var(--fx-ease) both, fx-float 7s ease-in-out 900ms infinite alternate;
  transition: box-shadow 300ms ease;
}
.hero__photos .photo--a { --fx-from: 0 22px; --fx-float: 0 -6px; z-index: 2; }
.hero__photos .photo--b { --fx-from: 46px 14px; --fx-float: -3px -9px; animation-delay: 60ms, 1.4s; }
.hero__photos .photo--c { --fx-from: -46px 14px; --fx-float: 3px -7px; animation-delay: 120ms, 2.1s; }
@keyframes fx-fan { from { translate: var(--fx-from); scale: 0.94; } to { translate: 0 0; scale: 1; } }
@keyframes fx-float { from { translate: 0 0; } to { translate: var(--fx-float); } }
@media (hover: hover) {
  .hero__photos .photo:hover { box-shadow: var(--fx-lift); z-index: 3; }
}
.fx-lite .hero__photos .photo,
.fx-paused .hero__photos .photo { animation-play-state: running, paused; }

/* Màn hình điện thoại: ảnh lên trước chữ, xòe 3 tấm nghiêng, nút "Xem set và giá" vẫn trong màn đầu */
@media (max-width: 760px) {
  .hero__grid { gap: var(--s4); padding-block: var(--s4) var(--s7); }
  .hero__photos { order: -1; aspect-ratio: auto; height: 172px; }
  .hero__photos .photo { width: auto; height: 148px; aspect-ratio: 3 / 4; border-width: 4px; top: 14px; bottom: auto; }
  .hero__photos .photo--a { left: calc(50% - 60px); top: 0; height: 164px; transform: rotate(1.5deg); }
  .hero__photos .photo--b { left: 2%; right: auto; transform: rotate(-7deg); }
  .hero__photos .photo--c { left: auto; right: 2%; transform: rotate(6deg); }
  .hero .eyebrow { margin-bottom: var(--s2); }
  .hero .lead { margin-block: var(--s3) var(--s4); font-size: 1rem; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: 2.125rem; }
  .hero__cta { gap: var(--s2); }
}

/* Hoa rơi rất thưa, chỉ trong khung đầu trang, nằm sau chữ, không bắt chạm */
.fx-petals { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fx-petal {
  position: absolute; top: -24px; left: var(--x);
  width: var(--s, 12px); height: calc(var(--s, 12px) * 1.3);
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, var(--c, var(--fx-rose)), oklch(97% 0.02 60));
  opacity: 0.75;
  animation: fx-fall var(--d, 14s) linear var(--delay, 0s) infinite;
}
@keyframes fx-fall {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(var(--dx, 40px), var(--fall, 900px), 0) rotate(var(--r, 320deg)); }
}
.fx-paused .fx-petal { animation-play-state: paused; }

/* ---------- Hiện dần khi cuộn tới ---------- */
/* Chỉ ẩn khi effects.js đã chạy (lớp fx-ready), nên không có JS thì nội dung vẫn hiện đủ. */
.fx-ready .fx-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 600ms var(--fx-ease) var(--fx-d, 0ms), transform 700ms var(--fx-ease) var(--fx-d, 0ms);
}
.fx-ready .fx-reveal.fx-in { opacity: 1; transform: none; }

/* ---------- Thẻ set quà ---------- */
.card__photo {
  box-shadow: 0 1px 2px oklch(29% 0.09 295 / 0.08);
  transition: transform 320ms var(--fx-ease), box-shadow 320ms var(--fx-ease);
}
.card__photo img { transition: transform 600ms var(--fx-ease); }
.card__name { transition: color 200ms ease; }
@media (hover: hover) {
  .card__btn:hover .card__photo { transform: translateY(-4px); box-shadow: var(--fx-lift); }
  .card__btn:hover img { transform: scale(1.07); }
  .card__btn:hover .card__name { color: var(--red-deep); }
}
.card__btn:focus-visible .card__photo { transform: translateY(-4px); box-shadow: var(--fx-lift); }
/* Trên điện thoại: chạm vào thấy thẻ lún nhẹ và ảnh phóng lên */
.card__btn:active .card__photo { transform: scale(0.97); box-shadow: var(--fx-lift); transition-duration: 120ms; }
.card__btn:active img { transform: scale(1.06); transition-duration: 200ms; }
.card__btn { -webkit-tap-highlight-color: transparent; }

/* Nhãn trên ảnh, chỉ hiện khi dữ liệu set có trường nhãn thật (xem plan.md) */
.card__photo { position: relative; }
.card__tag {
  position: absolute; top: var(--s2); left: var(--s2); z-index: 1;
  padding: 2px var(--s2); border-radius: 999px;
  background: var(--red); color: oklch(99% 0.01 88);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
  box-shadow: 0 4px 10px -4px oklch(43% 0.17 28 / 0.6);
}
.card__tag--new { background: var(--ink); }

/* ---------- Giỏ quà: số nảy lên, ảnh bay vào giỏ ---------- */
.cart-btn.fx-bump { animation: fx-wiggle 520ms var(--fx-ease); }
.cart-btn.fx-bump .cart-btn__count { animation: fx-pop 520ms var(--fx-pop); background: oklch(88% 0.09 85); }
@keyframes fx-pop { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes fx-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 55% { transform: rotate(3deg); } 80% { transform: rotate(-1deg); } }
.fx-flyer {
  position: fixed; z-index: 10; margin: 0; pointer-events: none; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--fx-lift); transform-origin: center;
}

/* ---------- Nhịp giữa các phần ---------- */
/* Nét bút đỏ dưới tiêu đề mỗi phần, như cô gạch chân khi chấm bài */
main .section h2::after,
main .game h2::after {
  content: ""; display: block; width: 56px; height: 4px; margin-top: var(--s3);
  border-radius: 4px 2px 4px 2px; background: var(--red); opacity: 0.85;
  transform: rotate(-1.5deg); transform-origin: left;
}
.fx-ready main .fx-reveal h2::after,
.fx-ready main h2.fx-reveal::after { transform: rotate(-1.5deg) scaleX(0); transition: transform 700ms var(--fx-ease) calc(var(--fx-d, 0ms) + 250ms); }
.fx-ready main .fx-reveal.fx-in h2::after,
.fx-ready main h2.fx-reveal.fx-in::after { transform: rotate(-1.5deg) scaleX(1); }

/* Hai phần nền giấy liền nhau thì kẻ một đường chấm để mắt biết sang phần mới */
.section:not(.section--tint):not(.game) + .section:not(.section--tint) { border-top: 1px dashed var(--line); }
/* Phần mua cho cả lớp và phần cộng tác viên có nền ấm riêng cho đỡ đơn điệu */
.bulk { background: linear-gradient(180deg, var(--red-tint), var(--paper) 85%); border-top: 0 !important; }
.ctv { background: linear-gradient(180deg, var(--paper-deep), var(--paper)); }

/* Nút chính: ánh sáng lướt qua chậm một lần khi vào trang, rồi thôi */
.hero .btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.hero .btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, oklch(99% 0.01 88 / 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: fx-shine 1.6s var(--fx-ease) 1.2s 1 both;
}
@keyframes fx-shine { to { transform: translateX(120%); } }

/* Hỏi đáp: mũi tên xoay mềm khi mở */
.faq__item summary { list-style: none; justify-content: space-between; gap: var(--s3); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--line); color: var(--red); font-weight: 700; transition: transform 250ms var(--fx-ease), background 200ms ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); background: var(--red-tint); }

/* ---------- Giảm chuyển động: tắt hoàn toàn ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-petals, .fx-flyer { display: none !important; }
  .fx-ready .fx-reveal { opacity: 1 !important; transform: none !important; }
  .hero__photos .photo, .hero .btn--primary::after, .cart-btn.fx-bump, .cart-btn.fx-bump .cart-btn__count { animation: none !important; }
  .card__btn:hover .card__photo, .card__btn:active .card__photo, .card__btn:focus-visible .card__photo,
  .card__btn:hover img, .card__btn:active img { transform: none !important; }
  main h2::after { transform: rotate(-1.5deg) !important; }
}