/* เอฟเฟกต์ขยับ */
.glow-move {
    display: inline-block;
    animation:
        floatMove 4s infinite ease-in-out;
    will-change: transform;
}

@keyframes floatMove {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}



/* เอฟเฟกต์แสง */
.glow-effect2 {
    display: inline-block;
    animation: glowPulse2 3s infinite alternate ease-in-out;
}

@keyframes glowPulse2 {
    from {
        filter: drop-shadow(0 0 5px #ffdab080);
        transform: scale(1);
    }

    to {
        filter: drop-shadow(0 0 20px #ffcc40be);
        transform: scale(1.1);
    }
}


/* เอฟเฟกต์แสง */
.glow-effect3 {
    display: inline-block;
    animation: glowPulse3 2s infinite alternate ease-in-out;
}

@keyframes glowPulse3 {
    from {
        filter: drop-shadow(0 0 5px #ffffffef);
        transform: scale(1);
    }

    to {
        filter: drop-shadow(0 0 10px #ffffff);
    }
}

/* เอฟเฟกต์แสง */
.glow-effect4 {
    display: inline-block;
    animation: glowPulse4 3s infinite alternate ease-in-out;
}

@keyframes glowPulse4 {
    from {
        filter: drop-shadow(0 0 5px #8eacfff1);
        transform: scale(1);
    }

    to {
        filter: drop-shadow(0 0 20px #ffffff);
        transform: scale(1.1);
    }
}


/* เอฟเฟกต์ขยายใหญ่ขึ้น */
.glow-scale {
    display: inline-block;
    animation: scaleUpDown 5s infinite ease-in-out;
}

@keyframes scaleUpDown {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}

.glow-effect5 {
    animation: glowGold2 2.5s ease-in-out infinite;
}

@keyframes glowGold2 {

    0%,
    100% {
        filter:
            drop-shadow(0 0 8px rgba(255, 191, 0, .5)) drop-shadow(0 0 15px rgba(255, 140, 0, .3));
    }

    50% {
        filter:
            drop-shadow(0 0 15px rgba(255, 215, 0, .8)) drop-shadow(0 0 30px rgba(255, 170, 0, .5));
    }
}




.ro-light-particles {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
}

/* =========================
   PARTICLE
========================= */

.ro-particle {
    position: absolute;
    z-index: 20;
    bottom: -20px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(255, 255, 255, .95) 0%,
            rgba(255, 255, 255, .4) 45%,
            transparent 75%);

    filter: blur(.4px);

    will-change: transform, opacity;

    animation:
        particleFloat linear infinite,
        particleGlow ease-in-out infinite;
}

/* =========================
   RANDOM POSITION
========================= */

.ro-particle:nth-child(1) {
    left: 8%;
    width: 5px;
    height: 5px;
    animation-duration: 8s, 2s;
    animation-delay: 0s;
}

.ro-particle:nth-child(2) {
    left: 18%;
    width: 8px;
    height: 8px;
    animation-duration: 10s, 3s;
    animation-delay: 1s;
}

.ro-particle:nth-child(3) {
    left: 32%;
    width: 4px;
    height: 4px;
    animation-duration: 7s, 2.5s;
    animation-delay: .5s;
}

.ro-particle:nth-child(4) {
    left: 47%;
    width: 7px;
    height: 7px;
    animation-duration: 11s, 4s;
    animation-delay: 2s;
}

.ro-particle:nth-child(5) {
    left: 62%;
    width: 5px;
    height: 5px;
    animation-duration: 9s, 2s;
    animation-delay: 1.5s;
}

.ro-particle:nth-child(6) {
    left: 74%;
    width: 9px;
    height: 9px;
    animation-duration: 13s, 3s;
    animation-delay: .3s;
}

.ro-particle:nth-child(7) {
    left: 85%;
    width: 5px;
    height: 5px;
    animation-duration: 8s, 2.5s;
    animation-delay: 2.2s;
}

.ro-particle:nth-child(8) {
    left: 94%;
    width: 6px;
    height: 6px;
    animation-duration: 10s, 3s;
    animation-delay: .8s;
}

/* =========================
   ANIMATION
========================= */

@keyframes particleFloat {
    0% {
        transform:
            translateY(0) translateX(0) scale(.6);

        opacity: 0;
    }

    15% {
        opacity: .8;
    }

    50% {
        transform:
            translateY(-45vh) translateX(12px) scale(1);
    }

    100% {
        transform:
            translateY(-100vh) translateX(-18px) scale(.4);

        opacity: 0;
    }
}

@keyframes particleGlow {

    0%,
    100% {
        opacity: .3;
    }

    50% {
        opacity: 1;
    }
}


/* ========================= */
/* TOURNAMENT BUTTON */
/* ========================= */

.tournamentTeam {
    position: relative;
    overflow: hidden;

    width: 350px;
    background: transparent;
    border: none;

    cursor: pointer;

    will-change: transform, filter;

    transition:
        transform 0.45s ease,
        filter 0.45s ease;

    filter: drop-shadow(0 0 0 transparent);
}

.tournamentTeam img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* hover */
.tournamentTeam:hover {
    transform: translateY(-6px) scale(1.04);

    filter:
        drop-shadow(0 0 12px #ffbf49ce) drop-shadow(0 0 35px #ffe0a380);
}

/* glow bg */
/* .tournamentTeam:hover::before {
    content: "";

    position: absolute;
    inset: -20%;

    background:
        radial-gradient(#ffffff62 0%, #ffffff00 35%, transparent 70%);
    transition: opacity .4s ease;

    pointer-events: none;
} */

.tournamentTeam:hover::before {
    opacity: 1;
}

/* ========================= */
/* PARTICLES */
/* ========================= */

.particles {
    position: absolute;
    inset: 0;

    overflow: hidden;
    pointer-events: none;
}

/* particle */
.particles span {
    position: absolute;

    bottom: -20px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    opacity: 0;

    background:
        radial-gradient(circle,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 220, 120, 1) 40%,
            rgba(255, 170, 0, 0.8) 70%,
            transparent 100%);

    filter:
        blur(0.2px) drop-shadow(0 0 6px #ffd36b) drop-shadow(0 0 12px #ffae00);

    animation: sparkFloat linear infinite;
    animation-play-state: paused;
}

/* play animation on hover */
.tournamentTeam:hover .particles span {
    animation-play-state: running;
}

/* random positions + timings */

.particles span:nth-child(1) {
    left: 5%;
    animation-duration: 2.2s;
    animation-delay: 0s;
}

.particles span:nth-child(2) {
    left: 12%;
    width: 4px;
    height: 4px;
    animation-duration: 1.8s;
    animation-delay: .4s;
}

.particles span:nth-child(3) {
    left: 20%;
    width: 8px;
    height: 8px;
    animation-duration: 2.5s;
    animation-delay: .8s;
}

.particles span:nth-child(4) {
    left: 28%;
    animation-duration: 1.9s;
    animation-delay: .2s;
}

.particles span:nth-child(5) {
    left: 35%;
    width: 5px;
    height: 5px;
    animation-duration: 2.8s;
    animation-delay: 1s;
}

.particles span:nth-child(6) {
    left: 43%;
    animation-duration: 2.1s;
    animation-delay: .5s;
}

.particles span:nth-child(7) {
    left: 50%;
    width: 9px;
    height: 9px;
    animation-duration: 3s;
    animation-delay: .7s;
}

.particles span:nth-child(8) {
    left: 58%;
    animation-duration: 2.3s;
    animation-delay: 1.2s;
}

.particles span:nth-child(9) {
    left: 66%;
    width: 5px;
    height: 5px;
    animation-duration: 2s;
    animation-delay: .3s;
}

.particles span:nth-child(10) {
    left: 74%;
    animation-duration: 2.6s;
    animation-delay: .9s;
}

.particles span:nth-child(11) {
    left: 82%;
    width: 7px;
    height: 7px;
    animation-duration: 2.1s;
    animation-delay: .6s;
}

.particles span:nth-child(12) {
    left: 92%;
    animation-duration: 1.7s;
    animation-delay: 1.1s;
}

/* ========================= */
/* FLOAT ANIMATION */
/* ========================= */

@keyframes sparkFloat {

    0% {
        transform:
            translateY(0) translateX(0) scale(0);

        opacity: 0;
    }

    10% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 1;

        transform:
            translateY(-90px) translateX(-15px) scale(1);
    }

    100% {
        transform:
            translateY(-180px) translateX(20px) scale(0);

        opacity: 0;
    }
}

/* =========================
   FULL SCREEN WIND FX
========================= */

.windFX {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

/* =========================
   เส้นลม
========================= */

.windLine {
    position: absolute;

    width: 220px;
    height: 2px;

    border-radius: 999px;

    opacity: 0;

    will-change: transform, opacity;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.925),
            transparent);

    filter:
        blur(1px) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

/* แต่ละเส้น */

.windLine:nth-child(1) {
    top: 12%;
    left: -20%;
    animation: windMove 7s linear infinite;
}

.windLine:nth-child(2) {
    top: 22%;
    left: -25%;
    width: 320px;
    animation: windMove 9s linear infinite 1s;
}

.windLine:nth-child(3) {
    top: 35%;
    left: -15%;
    width: 180px;
    animation: windMove 6s linear infinite 2s;
}

.windLine:nth-child(4) {
    top: 48%;
    left: -30%;
    width: 400px;
    animation: windMove 11s linear infinite;
}

.windLine:nth-child(5) {
    top: 60%;
    left: -20%;
    width: 260px;
    animation: windMove 8s linear infinite 3s;
}

.windLine:nth-child(6) {
    top: 72%;
    left: -15%;
    width: 160px;
    animation: windMove 6.5s linear infinite 1.5s;
}

.windLine:nth-child(7) {
    top: 82%;
    left: -20%;
    width: 340px;
    animation: windMove 10s linear infinite 4s;
}

.windLine:nth-child(8) {
    top: 90%;
    left: -15%;
    width: 200px;
    animation: windMove 7s linear infinite 2s;
}

/* =========================
   ละอองลม
========================= */

.windDust {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.8);

    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.6),
        0 0 20px rgba(255, 255, 255, 0.3);

    opacity: 0;
}

.windDust:nth-of-type(1) {
    top: 18%;
    left: -5%;
    animation: dustFly 12s linear infinite;
}

.windDust:nth-of-type(2) {
    top: 38%;
    left: -10%;
    animation: dustFly 15s linear infinite 2s;
}

.windDust:nth-of-type(3) {
    top: 56%;
    left: -5%;
    animation: dustFly 10s linear infinite 4s;
}

.windDust:nth-of-type(4) {
    top: 70%;
    left: -8%;
    animation: dustFly 13s linear infinite 1s;
}

.windDust:nth-of-type(5) {
    top: 85%;
    left: -6%;
    animation: dustFly 16s linear infinite 3s;
}

/* =========================
   Animation
========================= */

@keyframes windMove {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 0;
    }

    10% {
        opacity: .7;
    }

    50% {
        opacity: .35;
    }

    100% {
        transform: translateX(140vw) translateY(-15px);
        opacity: 0;
    }
}

@keyframes dustFly {
    0% {
        transform: translateX(0) translateY(0) scale(0.6);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform:
            translateX(120vw) translateY(-40px) scale(1.4);

        opacity: 0;
    }
}


/* =========================
   MAGIC FLOOR
========================= */

.magicFloor {
    position: absolute;

    bottom: -120px;
    left: 50%;

    transform: translateX(-50%);

    width: 100%;
    height: 300px;

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

/* =========================
   พื้นเรืองแสง
========================= */

.floorGlow {
    position: absolute;

    bottom: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 750px;
    height: 220px;

    border-radius: 50%;

    background:
        radial-gradient(ellipse at center, #ffffff 0%, #ffeccd8c 30%, #ff96282e 60%, transparent 100%);
    filter: blur(35px) drop-shadow(0 0 40px #ffd375e6) drop-shadow(0 0 80px #ffcb70b3);

    animation: glowPulse 4s ease-in-out infinite;
}

/* =========================
   วงแสง
========================= */

.floorRing {
    position: absolute;

    bottom: 60px;
    left: 50%;

    transform: translateX(-50%);

    width: 520px;
    height: 120px;

    border-radius: 50%;

    border: 2px solid rgba(255, 240, 180, 0.65);

    filter:
        blur(.5px) drop-shadow(0 0 20px rgba(255, 231, 164, 0.8));

    animation: ringPulse 5s ease-in-out infinite;
}

.floorRing.ring2 {
    width: 680px;
    height: 160px;

    opacity: .5;

    animation-delay: 2s;
}

/* =========================
   ละออง
========================= */

.particles span {
    position: absolute;

    bottom: 70px;
    left: 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: rgba(255, 240, 180, 0.95);

    box-shadow:
        0 0 10px rgba(255, 255, 200, 0.9),
        0 0 20px rgba(255, 220, 120, 0.9),
        0 0 40px rgba(255, 180, 80, 0.7);

    opacity: 0;
}

/* กระจายตำแหน่ง */

.particles span:nth-child(1) {
    margin-left: -220px;
    animation: floatParticle 6s linear infinite;
}

.particles span:nth-child(2) {
    margin-left: -150px;
    animation: floatParticle 5s linear infinite 1s;
}

.particles span:nth-child(3) {
    margin-left: -80px;
    animation: floatParticle 7s linear infinite 2s;
}

.particles span:nth-child(4) {
    margin-left: 0px;
    animation: floatParticle 4.5s linear infinite .5s;
}

.particles span:nth-child(5) {
    margin-left: 90px;
    animation: floatParticle 6.5s linear infinite 1.5s;
}

.particles span:nth-child(6) {
    margin-left: 170px;
    animation: floatParticle 5.5s linear infinite 2.5s;
}

.particles span:nth-child(7) {
    margin-left: 250px;
    animation: floatParticle 7s linear infinite 3s;
}

.particles span:nth-child(8) {
    margin-left: -280px;
    animation: floatParticle 6s linear infinite 4s;
}

/* =========================
   ANIMATION
========================= */

@keyframes glowPulse {

    0% {
        transform: translateX(-50%) scale(1);
        opacity: .8;
    }

    50% {
        transform: translateX(-50%) scale(1.08);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) scale(1);
        opacity: .8;
    }
}

@keyframes ringPulse {

    0% {
        transform: translateX(-50%) scale(.95);
        opacity: .2;
    }

    50% {
        transform: translateX(-50%) scale(1.05);
        opacity: .9;
    }

    100% {
        transform: translateX(-50%) scale(.95);
        opacity: .2;
    }
}

@keyframes floatParticle {

    0% {
        transform:
            translateY(0) scale(.4);

        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform:
            translateY(-260px) translateX(40px) scale(1.4);

        opacity: 0;
    }
}