/* ============================================
   EXTRA DECORATIVE ELEMENTS & POLISH
   ============================================ */

/* === COMIC BOOK STYLE BORDERS === */
.section-padding-100,
.section-padding-100-70,
.darky {
    position: relative;
}

/* Add comic book dots pattern */
.section-padding-100::after,
.darky::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle, rgba(255, 215, 0, 0.1) 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 107, 53, 0.1) 1px, transparent 1px);
    background-size: 20px 20px, 40px 40px;
    background-position: 0 0, 10px 10px;
    pointer-events: none;
    opacity: 0.3;
    z-index: 0;
}

/* === MEME-STYLE SPEECH BUBBLES === */
.welcome-content p:first-of-type::before {
    content: '';
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: #FFD700;
    border-radius: 50%;
    opacity: 0.6;
}

/* === 3D TEXT EFFECT === */
.section-heading h2,
.welcome-content h1 {
    position: relative;
}

.section-heading h2::after {
    content: attr(data-text);
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: -1;
    color: rgba(0, 0, 0, 0.3);
}

/* === NEON GLOW ACCENTS === */
@keyframes neonPulse {
    0%, 100% {
        text-shadow:
            0 0 10px #FFD700,
            0 0 20px #FFD700,
            0 0 30px #FF6B35,
            0 0 40px #FF6B35;
    }
    50% {
        text-shadow:
            0 0 20px #FFD700,
            0 0 30px #FFD700,
            0 0 40px #FF6B35,
            0 0 50px #FF6B35,
            0 0 60px #FF1493;
    }
}

h2, h3 {
    animation: neonPulse 2s ease-in-out infinite;
}

/* === STARBURST BACKGROUNDS === */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.service_single_content::after,
.services-block-four::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg 45deg,
        rgba(255, 215, 0, 0.1) 45deg 90deg,
        transparent 90deg 135deg,
        rgba(255, 107, 53, 0.1) 135deg 180deg,
        transparent 180deg 225deg,
        rgba(255, 20, 147, 0.1) 225deg 270deg,
        transparent 270deg 315deg,
        rgba(255, 215, 0, 0.1) 315deg 360deg
    );
    transform: translate(-50%, -50%);
    animation: rotate 20s linear infinite;
    z-index: -1;
    opacity: 0.3;
}

/* === GLITCH EFFECT ON HOVER === */
@keyframes glitch {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
}

.copy-btn:active {
    animation: glitch 0.3s;
}

/* === WAVY UNDERLINES === */
.welcome-content h1::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 6px;
    background-image: repeating-linear-gradient(
        45deg,
        #FFD700 0px,
        #FFD700 10px,
        #FF6B35 10px,
        #FF6B35 20px,
        #FF1493 20px,
        #FF1493 30px
    );
    transform: skewY(-1deg);
}

/* === PARTICLE EFFECTS === */
@keyframes float-particle {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-1000px) translateX(100px) scale(0);
        opacity: 0;
    }
}

.hero-section::after {
    content: '💫';
    position: absolute;
    bottom: 0;
    left: 50%;
    font-size: 30px;
    animation: float-particle 8s ease-in infinite;
}

/* === BOLD PRICE/TOKEN HIGHLIGHTS === */
.bold {
    font-weight: 900 !important;
    color: #FFD700 !important;
    text-shadow:
        2px 2px 0 #000,
        0 0 10px rgba(255, 215, 0, 0.8);
    letter-spacing: 1px;
}

/* === EXPLOSIVE ENTRANCE ANIMATIONS === */
@keyframes explodeIn {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.service_single_content,
.services-block-four {
    animation: explodeIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.service_single_content:nth-child(2) { animation-delay: 0.2s; }
.service_single_content:nth-child(3) { animation-delay: 0.4s; }

/* === LIGHTNING BORDERS === */
@keyframes lightning {
    0%, 100% {
        box-shadow:
            0 0 20px #FFD700,
            0 0 40px #FF6B35,
            inset 0 0 20px rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow:
            0 0 40px #FFD700,
            0 0 80px #FF1493,
            inset 0 0 40px rgba(255, 215, 0, 0.4);
    }
}

.contract-add {
    animation: lightning 2s ease-in-out infinite;
}

/* === RETRO PIXEL SHADOWS === */
.navbar {
    box-shadow:
        0 8px 0 rgba(0, 0, 0, 0.2),
        0 12px 0 #FFD700,
        0 20px 40px rgba(255, 215, 0, 0.3) !important;
}

/* === CHUNKY SCROLL INDICATOR === */
#scrollUp {
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, #FFD700 0%, #FF6B35 100%) !important;
    border: 4px solid #000 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 9px !important;
    color: #000 !important;
    transform: rotate(0deg) !important;
    box-shadow: 4px 4px 0 #FF1493 !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    overflow: hidden !important;
}

#scrollUp:hover {
    transform: scale(1.2) rotate(15deg) !important;
    box-shadow: 6px 6px 0 #FF1493 !important;
}

#scrollUp::before {
    content: '' !important;
    display: none !important;
}

/* === BADGE RIBBONS === */
.section-heading::after {
    content: 'TO THE MOON! 🚀';
    position: absolute;
    top: -50px;
    right: -30px;
    background: linear-gradient(135deg, #FF1493 0%, #FF6B35 100%);
    color: #fff;
    padding: 10px 30px;
    font-size: 16px;
    font-weight: 900;
    border: 4px solid #FFD700;
    border-radius: 25px;
    transform: rotate(15deg);
    box-shadow:
        4px 4px 0 rgba(0, 0, 0, 0.3),
        0 0 30px rgba(255, 20, 147, 0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* === GRID OVERLAY === */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255, 215, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 215, 0, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 9999;
}

/* === MARQUEE EFFECT FOR SPECIAL TEXT === */
@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* === HOLOGRAPHIC SHINE === */
@keyframes holographic {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

.copy-btn, .btn {
    background: linear-gradient(
        90deg,
        #FFD700 0%,
        #FF8C42 25%,
        #FFD700 50%,
        #FF1493 75%,
        #FFD700 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: holographic 3s linear infinite !important;
}

/* === SHADOW LAYERS === */
.hero-section {
    box-shadow:
        inset 0 0 100px rgba(255, 215, 0, 0.1),
        inset 0 0 200px rgba(255, 107, 53, 0.05);
}

/* === POP CULTURE REFERENCES === */
.token-information li img {
    filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
    transition: all 0.3s ease;
}

.token-information li:hover img {
    filter: brightness(1.4) contrast(1.3) drop-shadow(0 0 20px rgba(255, 215, 0, 1));
    transform: scale(1.2);
}
