/* ══════════════════════════════════════
   Animations & Transitions
   ══════════════════════════════════════ */

/* Step transitions */
.step.slide-in-right {
    animation: slideInRight 0.4s ease forwards;
}

.step.slide-out-left {
    animation: slideOutLeft 0.4s ease forwards;
}

.step.slide-in-left {
    animation: slideInLeft 0.4s ease forwards;
}

.step.slide-out-right {
    animation: slideOutRight 0.4s ease forwards;
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(-60px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(60px); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-60px); }
}

/* Splash animations */
.splash-container {
    animation: fadeInUp 0.8s ease;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Card entrance */
.occasion-card,
.template-card {
    animation: cardPop 0.4s ease backwards;
}

.occasion-card:nth-child(1), .template-card:nth-child(1) { animation-delay: 0.05s; }
.occasion-card:nth-child(2), .template-card:nth-child(2) { animation-delay: 0.1s; }
.occasion-card:nth-child(3), .template-card:nth-child(3) { animation-delay: 0.15s; }
.occasion-card:nth-child(4), .template-card:nth-child(4) { animation-delay: 0.2s; }
.template-card:nth-child(5) { animation-delay: 0.25s; }
.template-card:nth-child(6) { animation-delay: 0.3s; }

@keyframes cardPop {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Result bounce */
.result-card-wrapper {
    animation: bounceIn 0.5s ease;
}

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.8); }
    60% { transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}

/* Pulse effect for generate button */
.btn-generate:not(:disabled) {
    animation: subtlePulse 2s ease-in-out infinite;
}

@keyframes subtlePulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(26, 58, 108, 0.2); }
    50% { box-shadow: 0 4px 24px rgba(26, 58, 108, 0.4); }
}