/**
 * ลูกเล่นเทศกาล — อยู่ใน .hl-rate-banner__surface--festive เท่านั้น (ไม่ล้น container นอก card)
 */

/* ── Card boundary ── */
.home .hl-rate-banner__surface--festive {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.home .hl-rate-banner__surface--festive > .hl-rate-banner__festive {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.home .hl-rate-banner__surface--festive > :not(.hl-rate-banner__festive) {
    position: relative;
    z-index: 3;
}

/* ── Keyframes ── */
@keyframes hl-festive-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.75; }
    50% { transform: translate3d(0, -10px, 0) rotate(3deg); opacity: 1; }
}

@keyframes hl-festive-splash-pop {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; }
    40% { transform: translate3d(0, -6px, 0) scale(1.08); opacity: 1; }
    70% { transform: translate3d(2px, 2px, 0) scale(0.98); opacity: 0.85; }
}

@keyframes hl-festive-glow-breathe {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.65; }
}

@keyframes hl-festive-wave-roll {
    0% { transform: translateX(-3%) skewX(-2deg); }
    100% { transform: translateX(3%) skewX(2deg); }
}

@keyframes hl-festive-confetti-fall {
    0% { transform: translate3d(0, -100%, 0) rotate(0deg); opacity: 0; }
    15% { opacity: 0.9; }
    100% { transform: translate3d(var(--cdx, 12px), 120%, 0) rotate(480deg); opacity: 0; }
}

@keyframes hl-festive-streak {
    0% { transform: translateX(-120%) skewX(-16deg); opacity: 0; }
    25% { opacity: 0.7; }
    100% { transform: translateX(200%) skewX(-16deg); opacity: 0; }
}

@keyframes hl-festive-shine {
    0% { transform: translateX(-130%) skewX(-12deg); }
    100% { transform: translateX(230%) skewX(-12deg); }
}

@keyframes hl-festive-enter {
    from { opacity: 0.9; }
    to { opacity: 1; }
}

.home .hl-rate-banner__surface--festive {
    animation: hl-festive-enter 0.55s ease-out both;
}

/* Glow ภายใน card */
.home .hl-rate-banner__surface--festive .hl-rate-banner__festive-layer--glow {
    background: radial-gradient(ellipse 70% 55% at 50% 40%, var(--hl-festive-glow, rgba(255, 255, 255, 0.2)), transparent 68%);
    animation: hl-festive-glow-breathe 3.5s ease-in-out infinite;
}

.home .hl-rate-banner__festive--festive_cny .hl-rate-banner__festive-layer--glow {
    --hl-festive-glow: rgba(251, 191, 36, 0.28);
}

.home .hl-rate-banner__festive--festive_songkran .hl-rate-banner__festive-layer--glow {
    --hl-festive-glow: rgba(56, 189, 248, 0.32);
}

.home .hl-rate-banner__festive--festive_double11 .hl-rate-banner__festive-layer--glow {
    --hl-festive-glow: rgba(234, 88, 12, 0.28);
}

/* Shine sweep — เฉพาะใน card */
.home .hl-rate-banner__surface--festive::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.12) 48%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0.12) 52%,
        transparent 60%
    );
    animation: hl-festive-shine 5.5s ease-in-out infinite;
    pointer-events: none;
}

/* ── Image assets ── */
.home .hl-festive-asset {
    position: absolute;
    left: var(--fx, 50%);
    top: var(--fy, 50%);
    transform: translate(-50%, -50%);
    animation-delay: calc(var(--fi, 0) * 0.18s);
    line-height: 0;
}

.home .hl-festive-asset img {
    display: block;
    width: auto;
    height: auto;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
}

.home .hl-festive-asset--float {
    animation: hl-festive-float 3.2s ease-in-out infinite;
}

.home .hl-festive-asset--float img {
    width: clamp(24px, 4vw, 40px);
    max-height: clamp(28px, 4.5vw, 48px);
    opacity: 0.92;
}

.home .hl-festive-asset--splash {
    animation: hl-festive-splash-pop 2.4s ease-in-out infinite;
}

.home .hl-festive-asset--splash img {
    width: clamp(52px, 9vw, 88px);
    max-height: clamp(52px, 9vw, 88px);
}

.home .hl-festive-asset--prop {
    animation: hl-festive-float 4s ease-in-out infinite;
}

.home .hl-festive-asset--prop img {
    width: clamp(36px, 6vw, 64px);
    max-height: clamp(40px, 7vw, 72px);
}

/* Songkran — สาดน้ำใหญ่ขึ้น */
.home .hl-rate-banner__festive--festive_songkran .hl-festive-asset--splash img {
    width: clamp(64px, 11vw, 100px);
    max-height: clamp(64px, 11vw, 100px);
    filter: drop-shadow(0 6px 14px rgba(14, 165, 233, 0.35));
}

.home .hl-rate-banner__festive--festive_songkran .hl-festive-wave {
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: -6%;
    height: 38%;
    border-radius: 50% 50% 0 0;
    opacity: 0.35;
    animation: hl-festive-wave-roll 4s ease-in-out infinite alternate;
}

.home .hl-rate-banner__festive--festive_songkran .hl-festive-wave--1 {
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.5) 0%, rgba(14, 165, 233, 0.08) 100%);
}

.home .hl-rate-banner__festive--festive_songkran .hl-festive-wave--2 {
    bottom: -12%;
    height: 32%;
    opacity: 0.22;
    animation-delay: 0.7s;
    background: linear-gradient(180deg, rgba(253, 224, 71, 0.35) 0%, transparent 100%);
}

/* CNY confetti */
.home .hl-festive-confetti {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    top: -8%;
    animation: hl-festive-confetti-fall 4.2s linear infinite;
}

.home .hl-festive-confetti--1 { left: 15%; --cdx: 14px; background: #ef4444; }
.home .hl-festive-confetti--2 { left: 32%; --cdx: -10px; background: #fbbf24; animation-delay: 0.5s; }
.home .hl-festive-confetti--3 { left: 50%; --cdx: 18px; background: #f97316; animation-delay: 1s; }
.home .hl-festive-confetti--4 { left: 65%; --cdx: -14px; background: #fde047; animation-delay: 0.2s; }
.home .hl-festive-confetti--5 { left: 78%; --cdx: 10px; background: #dc2626; animation-delay: 1.4s; }
.home .hl-festive-confetti--6 { left: 90%; --cdx: -18px; background: #fbbf24; animation-delay: 2s; }
.home .hl-festive-confetti--7 { left: 8%; --cdx: 12px; background: #fca5a5; animation-delay: 0.8s; width: 6px; height: 6px; }
.home .hl-festive-confetti--8 { left: 42%; --cdx: -16px; background: #fde047; animation-delay: 1.8s; }
.home .hl-festive-confetti--9 { left: 58%; --cdx: 8px; background: #ef4444; animation-delay: 2.4s; }
.home .hl-festive-confetti--10 { left: 85%; --cdx: -12px; background: #f97316; animation-delay: 0.4s; width: 5px; height: 5px; }

/* 11.11 streak */
.home .hl-festive-sale-streak {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: hl-festive-streak 3.2s ease-in-out infinite;
}

.home .hl-festive-sale-streak--2 {
    animation-delay: 1.6s;
    opacity: 0.55;
}

.home .hl-festive-sale-streak--3 {
    animation-delay: 2.8s;
    opacity: 0.4;
    width: 24%;
}

/* Double11 badge ใหญ่ */
.home .hl-rate-banner__festive--festive_double11 .hl-festive-asset--badge_main img,
.home .hl-rate-banner__festive--festive_double11 [data-festive-slot="badge_main"] img {
    width: clamp(72px, 12vw, 120px);
}

.home .hl-rate-banner__festive--festive_double11 .hl-festive-asset--tag_sale img {
    width: clamp(56px, 8vw, 80px);
}

/* CNY โคม */
.home .hl-rate-banner__festive--festive_cny .hl-festive-asset--lantern_l img,
.home .hl-rate-banner__festive--festive_cny .hl-festive-asset--lantern_r img {
    width: clamp(32px, 5vw, 48px);
    max-height: clamp(48px, 8vw, 72px);
    filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.45));
}

/* ── Variant tuning (ยังอยู่ใน card) ── */
.home .hl-module--rate-banner[data-hl-variant="compact_strip"] .hl-festive-asset--splash img {
    width: clamp(40px, 7vw, 64px);
}

.home .hl-module--rate-banner[data-hl-variant="compact_strip"] .hl-festive-asset--prop img,
.home .hl-module--rate-banner[data-hl-variant="compact_strip"] .hl-festive-asset--float img {
    width: clamp(22px, 3.5vw, 34px);
}

.home .hl-module--rate-banner[data-hl-variant="dark_luxe"] .hl-festive-asset img {
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.25));
}

/* พรีวิว builder — โทนเทศกาลชั่วคราว (ไม่บันทึก) */
body.hl-admin-embed .hl-rate-banner--builder-preview {
    outline: 2px dashed rgba(249, 115, 22, 0.45);
    outline-offset: 2px;
}

body.hl-admin-embed .hl-module--rate-banner.hl-rate-banner--builder-preview::after {
    content: "ตัวอย่างโทนเทศกาล · ยังไม่บันทึก";
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #9a3412;
    background: #fff7ed;
    border: 1px solid #fdba74;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

body.hl-admin-embed .hl-module--rate-banner.hl-rate-banner--builder-preview {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .home .hl-rate-banner__surface--festive,
    .home .hl-rate-banner__surface--festive::after,
    .home .hl-rate-banner__surface--festive .hl-rate-banner__festive *,
    .home .hl-festive-asset {
        animation: none !important;
    }
}