/* DmApp Floating Text Animations */

/* ===== FLOATING ANIMATIONS ===== */

/* Gentle floating - subtle up/down motion */
@keyframes floatGentle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Bounce floating - playful bounce effect */
@keyframes floatBounce {
    0% {
        transform: translateY(0) scale(1);
    }
    30% {
        transform: translateY(-15px) scale(1.05);
    }
    50% {
        transform: translateY(-10px) scale(1.03);
    }
    70% {
        transform: translateY(-15px) scale(1.05);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

/* Wave floating - wave-like motion */
@keyframes floatWave {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-5px) translateX(-3px);
    }
    75% {
        transform: translateY(-5px) translateX(3px);
    }
}

/* Text-specific floating */
@keyframes textFloat {
    0%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(-6px);
        opacity: 0.9;
    }
}

/* Text bounce */
@keyframes textBounce {
    0%, 100% {
        transform: scale(1) translateY(0);
    }
    30% {
        transform: scale(1.2) translateY(-5px);
    }
    50% {
        transform: scale(1.1) translateY(-3px);
    }
    70% {
        transform: scale(1.15) translateY(-4px);
    }
}

/* Ambient floating - continuous subtle animation */
@keyframes ambientFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* Number pulse animation */
@keyframes numberPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
}

/* Float up effect (for +1, notifications) */
@keyframes floatUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-40px) scale(0.8);
        opacity: 0;
    }
}

/* Float up and fade */
@keyframes floatUpFade {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-30px);
        opacity: 0;
    }
}

/* Celebration bounce */
@keyframes celebrationBounce {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(-5deg);
    }
    75% {
        transform: scale(1.1) rotate(5deg);
    }
}

/* Sparkle float animation */
@keyframes sparkleFloat {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(0);
        opacity: 0;
    }
}

/* Character pop (for typing effect) */
@keyframes charPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Letter wave */
@keyframes letterWave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Elastic bounce */
@keyframes elasticBounce {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.3);
    }
    40% {
        transform: scale(0.9);
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* Jiggle effects */
@keyframes jiggleNormal {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-3deg);
    }
    75% {
        transform: rotate(3deg);
    }
}

@keyframes jiggleStrong {
    0%, 100% {
        transform: rotate(0deg) translateX(0);
    }
    10% {
        transform: rotate(-5deg) translateX(-3px);
    }
    30% {
        transform: rotate(5deg) translateX(3px);
    }
    50% {
        transform: rotate(-5deg) translateX(-3px);
    }
    70% {
        transform: rotate(5deg) translateX(3px);
    }
    90% {
        transform: rotate(-3deg) translateX(-2px);
    }
}

/* ===== INTERACTIVE ELEMENT STYLES ===== */

/* Make certain elements "alive" with ambient floating */
.floating-text {
    animation: ambientFloat 3s ease-in-out infinite;
}

.floating-gentle {
    animation: floatGentle 2s ease-in-out infinite;
}

/* Plus one effect */
.plus-one-effect {
    position: fixed;
    animation: floatUp 1s ease-out forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Floating label */
.floating-label {
    position: fixed;
    animation: floatUpFade 2s ease-out forwards;
    pointer-events: none;
    z-index: 9999;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}

/* Sparkle particles */
.sparkle-particle {
    position: fixed;
    animation: sparkleFloat 0.8s ease-out forwards;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.8);
}

/* Activity card floating on hover */
.activity-card:hover {
    animation: floatGentle 2s ease-in-out infinite;
}

.announcement-card:hover {
    animation: floatWave 1.5s ease-in-out infinite;
}

/* Text elements that float */
.activity-author-name,
.activity-caption,
.announcement-text {
    transition: transform 0.3s ease;
}

.activity-author-name:hover,
.activity-caption:hover,
.announcement-text:hover {
    animation: textFloat 0.8s ease-in-out;
}

/* Interactive text on focus */
input:focus,
textarea:focus {
    animation: floatBounce 0.6s ease-out;
}

/* Button text bounce on click */
.action-btn:active span,
.icon-btn:active span {
    animation: textBounce 0.3s ease-out;
}

/* Stats counter animation */
.stat-item:active,
.content-stats span:active {
    animation: numberPulse 0.4s ease-out;
}

/* Make user names playful */
.user-name,
.author-name {
    display: inline-block;
    transition: transform 0.2s ease;
}

.user-name:hover,
.author-name:hover {
    animation: textBounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Profile bio floating */
.profile-bio {
    animation: ambientFloat 4s ease-in-out infinite;
}

/* Comment/review text */
.review-text,
.comment-text {
    animation: ambientFloat 3.5s ease-in-out infinite;
}

/* Notification badges */
.notification-badge {
    animation: elasticBounce 0.8s ease-out;
}

/* ===== PLAYFUL INTERACTIONS ===== */

/* Text selection animation */
::selection {
    background: rgba(0, 255, 0, 0.3);
    animation: textFloat 0.5s ease-out;
}

/* Cursor hover effects */
.playful-text {
    cursor: pointer;
    user-select: none;
}

.playful-text:hover {
    animation: letterWave 0.6s ease-in-out;
}

/* Link hover floating */
a:hover {
    animation: textFloat 0.6s ease-out;
}

/* Tag floating */
.tag,
.topic-tag {
    transition: transform 0.2s ease;
}

.tag:hover,
.topic-tag:hover {
    animation: floatBounce 0.5s ease-out;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* GPU acceleration */
.activity-card,
.announcement-card,
.floating-text,
[data-floating] {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Reduce animation intensity on mobile */
    @keyframes floatGentle {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-4px); }
    }
    
    @keyframes floatBounce {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-8px) scale(1.02); }
    }
}

/* ===== STAGGER DELAYS ===== */

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* ===== CONTINUOUS ANIMATIONS ===== */

.pulse-glow {
    animation: numberPulse 2s ease-in-out infinite;
}

.float-continuous {
    animation: floatGentle 3s ease-in-out infinite;
}

.bounce-continuous {
    animation: floatBounce 2s ease-in-out infinite;
}

/* ===== SPECIAL EFFECTS ===== */

/* Rainbow text shimmer */
@keyframes rainbowShimmer {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(180deg); }
}

.rainbow-text {
    animation: rainbowShimmer 3s linear infinite;
}

/* Glow pulse */
@keyframes glowPulse {
    0%, 100% {
        text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
    }
    50% {
        text-shadow: 0 0 20px rgba(0, 255, 0, 1);
    }
}

.glow-text {
    animation: glowPulse 2s ease-in-out infinite;
}