body {
    background: #0f172a;
    background-image:
        radial-gradient(at 0% 0%, hsla(253, 16%, 7%, 1) 0, transparent 50%),
        radial-gradient(at 50% 0%, hsla(225, 39%, 30%, 1) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(339, 49%, 30%, 1) 0, transparent 50%);
    background-size: cover;
    background-attachment: fixed;
}

.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Banner cupons */
.banner-cupom {
    display: inline-block;
    background: rgba(236, 72, 153, 0.15);
    border: 1px solid rgba(236, 72, 153, 0.35);
    color: #f9a8d4;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    animation: banner-pulse 2s ease-in-out infinite;
}

@keyframes banner-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.3); }
    50%       { box-shadow: 0 0 0 6px rgba(236, 72, 153, 0); }
}

/* Seta bounce */
@keyframes bounce-arrow {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(8px); }
}

.bounce-arrow {
    display: inline-block;
    animation: bounce-arrow 0.8s ease-in-out infinite;
}

/* Borda RGB girando — @property para rotação suave do conic-gradient */
@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes border-rotate {
    to { --border-angle: 360deg; }
}

.rgb-border-outer {
    border-radius: 14px;
    padding: 2px;
    background: conic-gradient(
        from var(--border-angle),
        #ff0080, #ff7700, #ffff00, #00ff88, #00aaff, #aa00ff, #ff0080
    );
    animation: border-rotate 3s linear infinite;
}

.rgb-input {
    display: block;
    width: 100%;
    background: #0f172a;
    border-radius: 12px;
    border: none;
    outline: none;
    padding: 0.75rem;
    font-size: 0.875rem;
    color: white;
    font-family: inherit;
}

.rgb-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

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

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Avatar glow pulse */
@keyframes pulse-glow {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50%       { opacity: 1;    transform: scale(1.05); }
}

.avatar-glow {
    animation: pulse-glow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Botão pulse */
@keyframes pulse-btn {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.02); }
}

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

.btn-pulse:hover {
    animation: none;
}

/* Notificação flutuante */
@keyframes slide-in {
    from { transform: translateX(-120%); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

@keyframes slide-out {
    from { transform: translateX(0);     opacity: 1; }
    to   { transform: translateX(-120%); opacity: 0; }
}

.notification-enter { animation: slide-in 0.4s ease forwards; }
.notification-leave { animation: slide-out 0.4s ease forwards; }