/* ==========================================================================
   Animations & Decorative Elements
   ========================================================================== */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(.85); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes ripple {
    to { transform: scale(2.5); opacity: 0; }
}
@keyframes confetti {
    0% { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,157,.4); }
    50% { box-shadow: 0 0 0 16px rgba(255,107,157,0); }
}

.anim-fade-up { animation: fadeUp .8s ease both; }
.anim-fade-in { animation: fadeIn 1s ease both; }
.anim-scale-in { animation: scaleIn .7s ease both; }
.anim-delay-100 { animation-delay: .1s; }
.anim-delay-200 { animation-delay: .2s; }
.anim-delay-300 { animation-delay: .3s; }
.anim-delay-400 { animation-delay: .4s; }
.anim-delay-500 { animation-delay: .5s; }

/* Confetti container */
.confetti-piece {
    position: fixed; top: -10px;
    width: 10px; height: 16px;
    pointer-events: none;
    animation: confetti linear forwards;
    z-index: 9998;
}

/* Decorative blob */
.deco-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    opacity: .35;
    pointer-events: none;
}
.deco-blob.blob-pink { background: var(--brand-primary); }
.deco-blob.blob-yellow { background: var(--brand-secondary); }
.deco-blob.blob-mint { background: var(--brand-accent); }
.deco-blob.blob-purple { background: var(--brand-purple); }

/* Number counter visual */
.number-counter { display: inline-block; }

/* Wave divider */
.wave-divider {
    width: 100%; height: 80px;
    margin-bottom: -1px;
}

/* Sparkles inline */
.sparkle {
    display: inline-block;
    animation: spark 1.6s ease-in-out infinite;
}
@keyframes spark {
    0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
    50% { transform: scale(.6) rotate(180deg); opacity: .5; }
}

/* Tilt on hover */
.tilt-hover { transition: transform .3s; }
.tilt-hover:hover { transform: rotate(-2deg) scale(1.03); }

/* Mascot bobble */
.mascot {
    position: fixed; bottom: 20px; left: 20px;
    z-index: 50;
    width: 80px; height: 80px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 44px;
    box-shadow: 0 12px 28px -10px var(--brand-primary);
    cursor: pointer;
    animation: bobble 3s ease-in-out infinite;
}
@keyframes bobble {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-10px) rotate(3deg); }
}
.mascot-bubble {
    position: absolute; bottom: 90px; left: 0;
    background: #fff;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 13px;
    width: max-content; max-width: 240px;
    box-shadow: 0 8px 20px -8px rgba(45,48,71,.2);
    opacity: 0; visibility: hidden;
    transform: translateY(8px);
    transition: all .25s;
}
.mascot-bubble::after {
    content: ''; position: absolute; bottom: -8px; left: 30px;
    width: 16px; height: 16px;
    background: #fff; transform: rotate(45deg);
}
.mascot:hover .mascot-bubble { opacity: 1; visibility: visible; transform: translateY(0); }

@media (max-width: 767px) { .mascot { width: 60px; height: 60px; font-size: 32px; bottom: 80px; left: 12px; } }