@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@400;500;600;700&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
}

.font-display {
    font-family: 'Playfair Display', serif;
}

.bg-party {
    background: url('/bg-kq.jpg') bottom center / cover no-repeat fixed;
    position: relative;
}

.bg-lucky {
    background: url('/bg-lucky.jpg') center center / cover no-repeat fixed;
    position: relative;
}

.img-shadow {
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
}

.text-shadow {
    letter-spacing: 0.08em;
    text-shadow: 0 2px 12px #000, 0 1px 0 #fff;
}

.bg-video {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Hiệu ứng lấp lánh */
    mix-blend-mode: lighten;
    opacity: 5;

    pointer-events: none;
    z-index: 0;
}

.sparkle-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Chỉ tạo hiệu ứng ánh sáng */



    /* Không ảnh hưởng click */
    pointer-events: none;

    /* Nằm trên background nhưng dưới nội dung */
    z-index: 1;
}


.bg-party>* {
    position: relative;
    z-index: 1;
}

.text-gradient-gold {
    background: linear-gradient(135deg, #f5af19 0%, #f12711 50%, #f5af19 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.border-gold {
    border-color: #d4af37;
}

.glow-gold {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.animate-sparkle {
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.tracking-in-expand {
    -webkit-animation: tracking-in-expand .7s cubic-bezier(.215, .61, .355, 1.000) both;
    animation: tracking-in-expand .7s cubic-bezier(.215, .61, .355, 1.000) both
}

@keyframes tracking-in-expand {
    0% {
        letter-spacing: -.5em;
        opacity: 0
    }

    40% {
        opacity: .6
    }

    100% {
        opacity: 1
    }
}

.tracking-in-contract {
    animation: tracking-in-contract 1s cubic-bezier(.215, .61, .355, 1.000) infinite both
}

@keyframes tracking-in-contract {
    0% {
        letter-spacing: 1em;
        opacity: 0
    }

    40% {
        opacity: .6
    }

    100% {
        letter-spacing: normal;
        opacity: 1
    }
}

.wobble-hor-bottom {
    animation: wobble-hor-bottom .8s both
}

@keyframes wobble-hor-bottom {

    0%,
    100% {
        transform: translateX(0);
        transform-origin: 50% 50%
    }

    15% {
        transform: translateX(-30px) rotate(-6deg)
    }

    30% {
        transform: translateX(15px) rotate(6deg)
    }

    45% {
        transform: translateX(-15px) rotate(-3.6deg)
    }

    60% {
        transform: translateX(9px) rotate(2.4deg)
    }

    75% {
        transform: translateX(-6px) rotate(-1.2deg)
    }
}


.flicker-1 {
    animation: flicker-1 2s linear infinite both
}

@keyframes flicker-1 {

    0%,
    100% {
        opacity: 1
    }

    41.99% {
        opacity: 1
    }

    42% {
        opacity: 0
    }

    43% {
        opacity: 0
    }

    43.01% {
        opacity: 1
    }

    47.99% {
        opacity: 1
    }

    48% {
        opacity: 0
    }

    49% {
        opacity: 0
    }

    49.01% {
        opacity: 1
    }
}

.heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite both
}

@keyframes heartbeat {
    from {
        transform: scale(1);
        transform-origin: center center;
        animation-timing-function: ease-out
    }

    10% {
        transform: scale(.91);
        animation-timing-function: ease-in
    }

    17% {
        transform: scale(.98);
        animation-timing-function: ease-out
    }

    33% {
        transform: scale(.87);
        animation-timing-function: ease-in
    }

    45% {
        transform: scale(1);
        animation-timing-function: ease-out
    }
}

.text-flicker-in-glow {
    animation: text-flicker-in-glow 4s linear both
}

@keyframes text-flicker-in-glow {
    0% {
        opacity: 0
    }

    10% {
        opacity: 0;
        text-shadow: none
    }

    10.1% {
        opacity: 1;
        text-shadow: none
    }

    10.2% {
        opacity: 0;
        text-shadow: none
    }

    20% {
        opacity: 0;
        text-shadow: none
    }

    20.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .25)
    }

    20.6% {
        opacity: 0;
        text-shadow: none
    }

    30% {
        opacity: 0;
        text-shadow: none
    }

    30.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 255, 255, .25)
    }

    30.5% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 255, 255, .25)
    }

    30.6% {
        opacity: 0;
        text-shadow: none
    }

    45% {
        opacity: 0;
        text-shadow: none
    }

    45.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 255, 255, .25)
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 255, 255, .25)
    }

    55% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 255, 255, .25)
    }

    55.1% {
        opacity: 0;
        text-shadow: none
    }

    57% {
        opacity: 0;
        text-shadow: none
    }

    57.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .35)
    }

    60% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .35)
    }

    60.1% {
        opacity: 0;
        text-shadow: none
    }

    65% {
        opacity: 0;
        text-shadow: none
    }

    65.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .35), 0 0 100px rgba(255, 255, 255, .1)
    }

    75% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .35), 0 0 100px rgba(255, 255, 255, .1)
    }

    75.1% {
        opacity: 0;
        text-shadow: none
    }

    77% {
        opacity: 0;
        text-shadow: none
    }

    77.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .4), 0 0 110px rgba(255, 255, 255, .2), 0 0 100px rgba(255, 255, 255, .1)
    }

    85% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .4), 0 0 110px rgba(255, 255, 255, .2), 0 0 100px rgba(255, 255, 255, .1)
    }

    85.1% {
        opacity: 0;
        text-shadow: none
    }

    86% {
        opacity: 0;
        text-shadow: none
    }

    86.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .6), 0 0 60px rgba(255, 255, 255, .45), 0 0 110px rgba(255, 255, 255, .25), 0 0 100px rgba(255, 255, 255, .1)
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .6), 0 0 60px rgba(255, 255, 255, .45), 0 0 110px rgba(255, 255, 255, .25), 0 0 100px rgba(255, 255, 255, .1)
    }
}

.tracking-in-contract-bck-bottom {
    animation: tracking-in-contract-bck-bottom 2s cubic-bezier(.215, .61, .355, 1.000) both
}

@keyframes tracking-in-contract-bck-bottom {
    0% {
        letter-spacing: 1em;
        transform: translateZ(400px) translateY(300px);
        opacity: 0
    }

    40% {
        opacity: .6
    }

    100% {
        transform: translateZ(0) translateY(0);
        opacity: 1
    }
}