@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --brand-orange: #f15a24;
    --brand-charcoal: #111111;
    --brand-cloud: #f2f2f2;
}

body {
    font-family: 'Outfit', sans-serif;
    background: radial-gradient(circle at 0% 0%, #ffe6db 0%, #fff7f3 35%, #ffffff 100%);
    color: var(--brand-charcoal);
}

@layer base {
    input::placeholder,
    textarea::placeholder {
        color: #9ca3af;
        font-weight: 400;
        opacity: 1;
    }

    input:focus::placeholder,
    textarea:focus::placeholder {
        color: #c4c9d1;
    }
}

[x-cloak] {
    display: none;
}

@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

.hero-animate {
    opacity: 0;
    animation: hero-rise 0.7s ease-out forwards;
}

.hero-animate-delay-1 {
    animation-delay: 0.05s;
}

.hero-animate-delay-2 {
    animation-delay: 0.18s;
}

.hero-animate-delay-3 {
    animation-delay: 0.3s;
}

.hero-animate-delay-4 {
    animation-delay: 0.42s;
}

.cuisine-tile {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cuisine-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(17, 17, 17, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    .hero-animate {
        opacity: 1;
        animation: none;
    }

    .cuisine-tile,
    .cuisine-tile img {
        transition: none;
    }
}