/* =========================================================
 * Hiệu ứng trang trí Tết Trung Thu — Trăng phát sáng + Đèn lồng trôi
 * File này chỉ được enqueue khi admin bật tính năng trong
 * Settings → CoBooks Club → Trang trí Trung Thu.
 *
 * Toàn bộ giá trị tuỳ chỉnh (màu, kích thước, tốc độ) được in ra
 * như biến CSS trong thẻ <style id="bc-tt-vars"> bởi PHP (xem
 * includes/trung-thu.php: bc_trungthu_print_css_vars), nên file
 * này KHÔNG hard-code giá trị, chỉ định nghĩa hành vi/animation.
 * ========================================================= */

/* =========================================================
   TRĂNG PHÁT SÁNG (GLOWING MOON)
   ========================================================= */
.bc-tt-moon {
    position: fixed;
    top: var(--bc-tt-moon-top, 24px);
    right: var(--bc-tt-moon-right, 32px);
    width: calc(var(--bc-tt-moon-size, 90px) * var(--bc-tt-moon-scale, 1));
    height: calc(var(--bc-tt-moon-size, 90px) * var(--bc-tt-moon-scale, 1));
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffdf3, var(--bc-tt-moon-color, #fff6d5));
    box-shadow: 0 0 calc(var(--bc-tt-moon-glow-intensity, 55px) * var(--bc-tt-moon-scale, 1)) var(--bc-tt-moon-glow-color, #ffe9a8);
    pointer-events: none;
    z-index: 2;
    animation: bc-tt-moon-pulse var(--bc-tt-moon-pulse-duration, 4s) ease-in-out infinite;
}

@keyframes bc-tt-moon-pulse {
    0%, 100% {
        box-shadow: 0 0 calc(var(--bc-tt-moon-glow-intensity, 55px) * var(--bc-tt-moon-scale, 1) * 0.75) var(--bc-tt-moon-glow-color, #ffe9a8);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 calc(var(--bc-tt-moon-glow-intensity, 55px) * var(--bc-tt-moon-scale, 1)) var(--bc-tt-moon-glow-color, #ffe9a8);
        filter: brightness(1.08);
    }
}

/* Trên màn hình ≤600px, trăng mặc định trông quá to so với màn hình nhỏ —
   giảm còn 2/3 kích thước (giảm 1/3) bằng cách hạ --bc-tt-moon-scale.
   Đổi biến này thay vì width/height trực tiếp để glow (box-shadow)
   cũng thu nhỏ theo tỉ lệ tương ứng, không bị "vầng sáng" to hơn thân trăng. */
@media (max-width: 600px) {
    :root {
        --bc-tt-moon-scale: 0.667;
    }
}

/* =========================================================
   ĐÈN LỒNG TRÔI (FLOATING LANTERNS)
   Mỗi đèn lồng là 1 thẻ .bc-tt-lantern với --bc-tt-x, --bc-tt-delay
   gán inline bởi JS (assets/js/tet-trung-thu.js) dựa trên config
   admin đã lưu, để bay lệch nhau tự nhiên.
   ========================================================= */
.bc-tt-lantern-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.bc-tt-lantern {
    position: absolute;
    bottom: -80px;
    left: var(--bc-tt-x, 10%);
    width: var(--bc-tt-lantern-size, 46px);
    height: calc(var(--bc-tt-lantern-size, 46px) * 1.15);
    opacity: 0;
    animation:
        bc-tt-rise var(--bc-tt-lantern-rise-duration, 14s) linear infinite,
        bc-tt-sway var(--bc-tt-lantern-sway-duration, 3.2s) ease-in-out infinite;
    animation-delay: var(--bc-tt-delay, 0s), 0s;
}

.bc-tt-lantern svg { width: 100%; height: 100%; display: block; }

@keyframes bc-tt-rise {
    0%   { transform: translateY(0); opacity: 0; }
    8%   { opacity: 0.95; }
    80%  { opacity: 0.9; }
    100% { transform: translateY(-115vh); opacity: 0; }
}

@keyframes bc-tt-sway {
    0%, 100% { margin-left: -10px; }
    50%      { margin-left: 10px; }
}

/* Tôn trọng người dùng bật "prefers-reduced-motion" — tắt animation,
   chỉ giữ hình tĩnh để không gây khó chịu/chóng mặt. */
@media (prefers-reduced-motion: reduce) {
    .bc-tt-moon { animation: none; }
    .bc-tt-lantern { animation: none; opacity: 0.85; bottom: 20%; }
}