/* ========================================
   PÁGINA DE ANIVERSÁRIO — ESTILOS ESPECÍFICOS
   Reaproveita variáveis e paleta de ../css/main.css
   ======================================== */

.back-link {
    display: inline-flex;
    align-items: center;
    color: var(--secondary, #c2185b);
    font-weight: 500;
    margin-bottom: 1rem;
    transition: var(--transition, all 0.3s ease);
}

.back-link:hover {
    color: var(--primary, #880e4f);
    transform: translateX(-4px);
}

.anniversary-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary, #880e4f), var(--secondary, #c2185b));
    color: #fff;
    padding: 0.5rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 1px;
    box-shadow: var(--shadow-md, 0 4px 15px rgba(136, 14, 79, 0.15));
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Corações flutuando na tela no modo comemoração */
#heartsLayer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.floating-heart {
    position: absolute;
    bottom: -10%;
    font-size: 1.5rem;
    opacity: 0.7;
    animation: floatUp linear forwards;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-110vh) translateX(var(--drift, 20px)) rotate(360deg);
        opacity: 0;
    }
}

.container {
    position: relative;
}