/* Custom Animations & Styles */

/* Micro-bounce for buttons */
@keyframes micro-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.98); }
}

.btn-bounce:active {
    animation: micro-bounce 0.2s ease-in-out;
}

/* Slide Transitions */
.slide-out-left {
    animation: slideOutLeft 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.slide-in-right {
    animation: slideInRight 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

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

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

/* Option Selected State */
.option-selected {
    background-color: #F0FDF4; /* green-50 */
    border-color: #F8B229; /* christmas-gold */
    box-shadow: 0 0 0 2px #F8B229;
}

/* Gift Tag Shape (Optional - using CSS clip-path or just rounded corners for simplicity first) */
.gift-tag {
    position: relative;
}

/* Gingerbread Texture */
.gingerbread-border {
    border-image: url("data:image/svg+xml;...") 30 round; /* Placeholder for advanced SVG border */
}

/* Confetti Animation */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #f00;
    animation: confetti-fall 3s linear infinite;
}

@keyframes confetti-fall {
    0% { transform: translateY(-100vh) rotate(0deg); }
    100% { transform: translateY(100vh) rotate(720deg); }
}

/* Sales Page Typography */
.prose h2 {
    font-family: 'Playfair Display', serif;
    color: #5D4037;
}

.prose p {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #4B5563;
}

/* Utility */
.hidden {
    display: none !important;
}