﻿.info-img-block {
    position: relative;
    width: 900px;
    max-width: 90vw;
    margin: 3rem auto 0 auto;
    margin-right: 140px;
    min-height: 350px;
}

.news-bg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    pointer-events: none;
}

/* Premium Rotating Circle Button Effect */
.center-rotating-circle {
    position: absolute;
    left: 49%;
    top: 83%;
    transform: translate(-50%, -50%);
    width: 201px;
    height: 190px;
    pointer-events: none;
    z-index: 2;
    animation: spin-circle 2.4s linear infinite;
    /* Glowing pulse */
    box-shadow:
        0 0 36px 16px #ffd77655,
        0 0 48px 12px #ffae0055,
        0 0 10px 2px #ffae0030;
    border-radius: 50%;
    transition: filter 0.18s, box-shadow 0.22s;
    /* Add an overlay for the shimmer, see below */
    overflow: visible;
}


@keyframes spin-circle {
    100% { transform: translate(-50%, -50%) rotate(360deg);}
}


@keyframes pulse-glow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 22px #ffe77477);}
    50%      { filter: brightness(1.09) drop-shadow(0 0 44px #ffe774cc);}
}
.center-rotating-circle {
    animation:
        spin-circle 2.4s linear infinite,
        pulse-glow 1.8s ease-in-out infinite;
}


.center-rotating-circle::after {
    content: '';
    position: absolute;
    left: 15%;
    top: 0;
    width: 70%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.0) 60%,
        rgba(255,255,255,0.24) 80%,
        rgba(255,255,255,0.0) 100%
    );
    opacity: 0.75;
    transform: skewX(-16deg) translateX(-120%);
    animation: sweep-shine 2.8s cubic-bezier(.7,0,.2,1) infinite;
}
@keyframes sweep-shine {
    0% { transform: skewX(-16deg) translateX(-120%);}
    15% { opacity: 1;}
    55% { opacity: 0.55;}
    100% { transform: skewX(-16deg) translateX(120%); opacity: 0.7;}
}

/* Your invisible clickable zones */
.news-btns-inside-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 3;
}

.real-btn {
    position: absolute;
    top: 85%;
    width: 28%;
    height: 8%;
    background: rgba(255,255,255,0); /* Invisible */
    cursor: pointer;
    border-radius: 16px;
    outline: none;
}

.real-btn.left-btn { left: 12%; }
.real-btn.right-btn { right: 10%; }

@media (max-width: 700px) {
    .info-img-block {
        width: 98vw;
        min-height: 150px;
        margin-right: 0;
    }
    .center-rotating-circle {
        width: 80px;
        height: 80px;
    }
    .real-btn {
        top: 76%;
        width: 35%;
        height: 15%;
        border-radius: 10px;
    }
}


.center-pulse-vip {
    position: absolute;
    left: 95%;
    top: 68%;
    transform: translate(-50%, -50%);
    width: 64px;   /* Tweak to your preferred size */
    height: 45px;
    z-index: 3;    /* Above the circle, below buttons if needed */
    pointer-events: none;
    animation: pulse-vip 1.6s cubic-bezier(.4,0,.6,1) infinite;
}


@keyframes pulse-vip {
    0%, 100%   { transform: translate(-50%, -50%) scale(1); }
    45%        { transform: translate(-50%, -50%) scale(1.19); }
    60%        { transform: translate(-50%, -50%) scale(1.05); }
    80%        { transform: translate(-50%, -50%) scale(1.14); }
}





.fire-effect-left {
    position: absolute;
    left: 13%;   /* Adjust to fit over the character */
    top: 47%;   /* Adjust to fit over the weapon/hand/feet */
    width: 22px;    /* Tweak to match your image and area */
    height: auto;
    pointer-events: none;
    z-index: 5;
    /* Flicker/fire animation */
    animation: fire-flicker 1.1s infinite alternate;
    opacity: 0.82;
}

@keyframes fire-flicker {
    0% { filter: brightness(1.2) blur(0.5px); opacity: 0.82; }
    35% { filter: brightness(1.5) blur(1.1px); opacity: 1; }
    70% { filter: brightness(1.1) blur(0.6px); opacity: 0.9; }
    100% { filter: brightness(1.3) blur(0.3px); opacity: 0.7; }
}

.blue-effect-right {
    position: absolute;
    right: 15.5%;   /* Placement stays */
    top: 58%;
    width: 30px;
    height: auto;
    pointer-events: none;
    z-index: 5;
    opacity: 0.75;
    animation: blue-magic-pulse 2.2s ease-in-out infinite alternate;
}

@keyframes blue-magic-pulse {
    0% {
        filter:
            drop-shadow(0 0 10px #3a9fff)
            drop-shadow(0 0 2px #85e6ff)
            brightness(1.06);
        opacity: 0.60;
    }
    45% {
        filter:
            drop-shadow(0 0 16px #85e6ff)
            drop-shadow(0 0 6px #3a9fff)
            brightness(1.18);
        opacity: 0.95;
    }
    100% {
        filter:
            drop-shadow(0 0 10px #3569e6)
            drop-shadow(0 0 2px #5cb1ff)
            brightness(1.07);
        opacity: 0.65;
    }
}


@media (max-width: 768px) {
    .center-pulse-vip {
        left: 97%;
        top: 70%;
        width: 46px;
        height: 32px;
    }

    .fire-effect-left {
        left: 13%;
        top: 45%;
        width: 16px;
    }

    .blue-effect-right {
        right: 15%;
        top: 55%;
        width: 22px;
    }
}