/**
 * wildercs — Visual Effects: Water droplets, floating CTA, sticky banner
 */

/* ============================================
   WATER DROPLET CURSOR
   ============================================ */
.water-drop {
    position: absolute;
    border-radius: 50%;
    background: rgba(61, 90, 115, 0.3);
    pointer-events: none;
    z-index: 9999;
    animation: dropFall linear forwards;
}

@keyframes dropFall {
    0% { opacity: 0.6; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(80px) scale(0.3); }
}

/* ============================================
   FLOATING CALL BUTTON
   ============================================ */
.floating-call-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(184, 115, 51, 0.4);
    z-index: 1000;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    animation: callPulse 2s ease-in-out infinite;
}

.floating-call-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(184, 115, 51, 0.6);
    color: #fff;
}

.floating-call-btn .icon { color: #fff; }

@keyframes callPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(184, 115, 51, 0.4); }
    50% { box-shadow: 0 4px 24px rgba(184, 115, 51, 0.7); }
}

/* ============================================
   STICKY BANNER
   ============================================ */
.sticky-banner {
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-sm);
    text-align: center;
    position: relative;
    z-index: 101;
}

.sticky-banner-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-sm) var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

.sticky-banner a { color: #fff; text-decoration: underline; }

.sticky-banner-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 var(--space-sm);
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}
.sticky-banner-close:hover { opacity: 1; }
