/**
 * Zibll Advanced Customizer - Seasonal & Festival Effects CSS
 * Hiệu ứng Canvas theo mùa & Trang trí Lễ hội Halloween (GPU Composited 60fps)
 */

/* =========================================================================
   1. CANVAS HIỆU ỨNG RƠI THEO MÙA (CANVAS ENGINE)
   ========================================================================= */
#zac-seasonal-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 99998;
}

/* =========================================================================
   2. TRANG TRÍ LỄ HỘI HALLOWEEN (HALLOWEEN DECORATIONS)
   ========================================================================= */
.zac-halloween-wrapper {
    position: relative;
    pointer-events: none;
}

/* A. Mạng nhện giăng 2 góc trên màn hình */
.zac-halloween-cobweb {
    position: fixed;
    top: 0;
    width: 135px;
    height: 135px;
    z-index: 99997;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.45);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
    transition: opacity 0.3s ease;
    animation: zacCobwebBreathe 6s ease-in-out infinite alternate;
}

.zac-cobweb-left {
    left: 0;
}

.zac-cobweb-right {
    right: 0;
}

.white-theme .zac-halloween-cobweb {
    color: rgba(40, 40, 50, 0.25);
}

.dark-theme .zac-halloween-cobweb,
.header.show-slide .zac-halloween-cobweb {
    color: rgba(255, 255, 255, 0.5);
}

@keyframes zacCobwebBreathe {
    0% {
        opacity: 0.75;
        transform: scale(1);
    }
    100% {
        opacity: 0.95;
        transform: scale(1.02);
    }
}

/* B. Nhện đu tơ nhấp nhô */
.zac-halloween-spider {
    position: fixed;
    top: 0;
    right: 18%;
    z-index: 99996;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: zacSpiderDrop 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.zac-spider-thread {
    width: 1px;
    height: 90px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

.white-theme .zac-spider-thread {
    background: rgba(0, 0, 0, 0.3);
}

.zac-spider-body {
    transform-origin: top center;
    animation: zacSpiderSwing 3s ease-in-out infinite alternate;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}

@keyframes zacSpiderDrop {
    0% {
        transform: translateY(-80px);
    }
    20% {
        transform: translateY(20px);
    }
    30% {
        transform: translateY(5px);
    }
    50% {
        transform: translateY(45px);
    }
    75% {
        transform: translateY(15px);
    }
    100% {
        transform: translateY(-80px);
    }
}

@keyframes zacSpiderSwing {
    0% {
        transform: rotate(-12deg);
    }
    100% {
        transform: rotate(12deg);
    }
}

/* C. Phù thủy cưỡi chổi bay ngang bầu trời */
.zac-halloween-witch {
    position: fixed;
    top: 110px;
    right: -120px;
    z-index: 99995;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
    animation: zacWitchFly 24s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

@keyframes zacWitchFly {
    0% {
        right: -120px;
        top: 130px;
        opacity: 0;
        transform: scale(0.85) rotate(-3deg);
    }
    5% {
        opacity: 0.85;
    }
    30% {
        top: 95px;
        transform: scale(1) rotate(4deg);
    }
    55% {
        top: 125px;
        transform: scale(0.95) rotate(-2deg);
    }
    85% {
        opacity: 0.85;
    }
    95%, 100% {
        right: calc(100vw + 120px);
        top: 105px;
        opacity: 0;
        transform: scale(0.9) rotate(3deg);
    }
}

/* D. Hồn ma nhỏ lơ lửng đung đưa */
.zac-halloween-ghost {
    position: fixed;
    bottom: 95px;
    right: 25px;
    z-index: 99992;
    pointer-events: none;
    animation: zacGhostFloat 4.5s ease-in-out infinite alternate;
}

@keyframes zacGhostFloat {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.45));
    }
    50% {
        transform: translate3d(-8px, -18px, 0) rotate(-6deg);
        filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.5));
    }
    100% {
        transform: translate3d(6px, -32px, 0) rotate(6deg);
        filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.6));
    }
}

/* E. Đèn lồng bí ngô phát sáng lập lòe góc màn hình */
.zac-halloween-pumpkin {
    position: fixed;
    bottom: 22px;
    left: 22px;
    z-index: 99993;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 4px 14px rgba(234, 88, 12, 0.45));
}

.zac-halloween-pumpkin:hover {
    transform: scale(1.15) rotate(-6deg);
    filter: drop-shadow(0 0 20px rgba(249, 115, 22, 0.75)) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}

.zac-halloween-pumpkin:active {
    transform: scale(0.96) rotate(3deg);
}

/* Ánh nến bí ngô lập lòe ma quái */
.zac-pumpkin-eye,
.zac-pumpkin-nose,
.zac-pumpkin-mouth {
    animation: zacCandleFlicker 2.8s ease-in-out infinite alternate;
}

@keyframes zacCandleFlicker {
    0%, 100% {
        fill: #fef08a;
        filter: drop-shadow(0 0 4px #eab308);
        opacity: 0.95;
    }
    25% {
        fill: #ffedd5;
        filter: drop-shadow(0 0 8px #f97316);
        opacity: 1;
    }
    45% {
        fill: #fef08a;
        filter: drop-shadow(0 0 3px #ca8a04);
        opacity: 0.8;
    }
    70% {
        fill: #fff7ed;
        filter: drop-shadow(0 0 10px #ea580c);
        opacity: 1;
    }
    85% {
        fill: #fef9c3;
        filter: drop-shadow(0 0 5px #eab308);
        opacity: 0.88;
    }
}

/* Bong bóng thoại khi nhấp vào bí ngô */
.zac-pumpkin-speech {
    position: absolute;
    bottom: 60px;
    left: 0;
    white-space: nowrap;
    background: rgba(15, 23, 42, 0.9);
    color: #fef08a;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(249, 115, 22, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(249, 115, 22, 0.35);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.9);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 99994;
}

.zac-pumpkin-speech.is-show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* =========================================================================
   3. TỐI ƯU GIAO DIỆN DI ĐỘNG (MOBILE RESPONSIVE)
   ========================================================================= */
@media (max-width: 768px) {
    .zac-halloween-wrapper.is-mobile-hidden {
        display: none !important;
    }

    .zac-halloween-cobweb {
        width: 80px;
        height: 80px;
    }

    .zac-halloween-spider {
        display: none; /* Ẩn bớt để không che chữ trên mobile */
    }

    .zac-halloween-witch {
        top: 75px;
        transform: scale(0.65);
    }

    .zac-halloween-ghost {
        bottom: 80px;
        right: 12px;
        transform: scale(0.75);
    }

    .zac-halloween-pumpkin {
        bottom: 16px;
        left: 14px;
        transform: scale(0.78);
        transform-origin: bottom left;
    }

    .zac-halloween-pumpkin:hover {
        transform: scale(0.85);
    }
}