.anim-up {
    opacity: 0;
    transform: translateY(16px);
    animation: slideUp 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    animation-delay: var(--d, 0s);
}

.anim-fade {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
    animation-delay: var(--d, 0s);
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.forever-item {
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: var(--d, 0s);
}

.forever-item.visible {
    opacity: 1;
    transform: translateX(0);
}

.forever-item:active {
    transform: scale(0.96) !important;
}

.forever-item.tapped .forever-text {
    color: var(--text-primary);
    font-weight: 600;
}

.forever-item.tapped .forever-dot {
    transform: scale(1.5);
    box-shadow: 0 0 12px var(--c, var(--pink));
}

.forever-dot {
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.forever-text {
    transition: all 0.3s ease;
}

.greeting-name {
    transition: color 0.3s ease;
}

.deco-balloon {
    transition: transform 0.15s ease-out;
}

.deco-balloon:active {
    transform: scale(1.3) !important;
}

@media (prefers-reduced-motion: reduce) {
    .anim-up,
    .anim-fade,
    .char,
    .forever-item,
    .tap-hint {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .forever-item.visible {
        opacity: 1;
        transform: none;
    }

    .deco-balloon,
    .deco-star,
    .deco-cloud,
    .greeting-name,
    .forever-dot,
    .forever-text {
        transition: none;
        animation: none;
    }
}