/* Custom CSS for FridaMores Cafe */

/* 
   Custom font animations and utility styles not covered by Tailwind
*/

@layer utilities {
    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    
    .scroll-smooth {
        scroll-behavior: smooth;
    }
}

/* 
   Loading animation for the hero text 
   Note: This is strictly for the hero overlay text which is above the fold
   but the animation is CSS-only (no JS dependency for visibility)
*/
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-in-down {
    animation: fadeInDown 1s ease-out forwards;
}

/* 
   Custom selection color to match the brand 
*/
::selection {
    background: #A84D6C;
    color: white;
}

::-moz-selection {
    background: #A84D6C;
    color: white;
}

/* 
   Smooth transitions for interactive elements
*/
a, button {
    transition: all 0.3s ease;
}

/* 
   Form focus states
*/
input:focus, textarea:focus {
    outline: none;
    border-color: #A84D6C;
    box-shadow: 0 0 0 2px rgba(168, 77, 108, 0.2);
}