/**
 * @file style.css
 * @package DapurQueenak
 *
 * @description
 * File CSS kustom yang mendefinisikan:
 * 1. CSS Custom Properties (variabel warna brand DapurQueenak)
 * 2. Utility class tambahan yang tidak ada di Tailwind standar
 * 3. Animasi fade-in untuk menggantikan Framer Motion dari versi React
 * 4. Custom scrollbar styling
 *
 * @note
 * File ini hanya berisi style yang TIDAK bisa dilakukan dengan Tailwind utility class.
 * Untuk style umum, selalu gunakan class Tailwind langsung di HTML.
 * Warna brand utama (#f32911 dan #fbcf6c) diintegrasikan via Tailwind config di head.php.
 */

/* ============================================================
   1. CSS CUSTOM PROPERTIES (BRAND VARIABLES)
   Mendefinisikan warna brand agar mudah diubah di satu tempat.
   ============================================================ */
:root {
    --brand-primary: #f32911;
    /* Merah DapurQueenak — digunakan untuk elemen utama */
    --brand-primary-dark: #c01e08;
    /* Versi gelap untuk hover state */
    --brand-primary-light: #fde8e5;
    /* Versi terang untuk background subtle */
    --brand-secondary: #fbcf6c;
    /* Kuning hangat — aksen dan highlight */
    --brand-secondary-dark: #775900;
    /* Teks di atas background secondary */
}

/* ============================================================
   2. FOOD CARD SHADOW
   Shadow kustom dengan warna brand untuk memberi kesan warm & premium.
   Tidak ada padanan langsung di Tailwind standar.
   ============================================================ */

/**
 * Shadow default untuk kartu menu.
 * Menggunakan warna merah brand yang transparan untuk kesan hangat.
 */
.food-card-shadow {
    box-shadow: 0 4px 20px rgba(243, 41, 17, 0.12);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/**
 * Shadow lebih dalam saat hover untuk efek "mengangkat" kartu.
 * Dikombinasikan dengan hover:-translate-y-2 di Tailwind.
 */
.food-card-shadow:hover {
    box-shadow: 0 12px 40px rgba(243, 41, 17, 0.20);
}

/* ============================================================
   3. ANIMASI FADE-IN-UP
   Menggantikan animasi Framer Motion dari versi React.
   Digunakan pada elemen hero dan section penting.
   ============================================================ */

/**
 * Definisi keyframe: elemen muncul sambil bergerak ke atas.
 * Mirip dengan { initial: {opacity:0, y:20}, animate: {opacity:1, y:0} }
 * di Framer Motion.
 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

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

/**
 * Keyframe untuk animasi dari kiri (hero section).
 */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

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

/**
 * Keyframe untuk animasi scale-in (gambar hero).
 */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Utility class untuk animasi fade-in-up */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

/* Utility class dengan delay bertingkat */
.animate-fade-in-up-delay-1 {
    animation: fadeInUp 0.6s ease 0.1s forwards;
    opacity: 0;
}

.animate-fade-in-up-delay-2 {
    animation: fadeInUp 0.6s ease 0.2s forwards;
    opacity: 0;
}

.animate-fade-in-up-delay-3 {
    animation: fadeInUp 0.6s ease 0.3s forwards;
    opacity: 0;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.7s ease forwards;
}

.animate-scale-in {
    animation: scaleIn 0.8s ease forwards;
}

/* ============================================================
   4. ANIMASI BOUNCE UNTUK MAP PIN
   Bounce continuous untuk marker lokasi di halaman Kontak.
   ============================================================ */
@keyframes bouncePulse {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-bounce-pin {
    animation: bouncePulse 1.5s ease-in-out infinite;
}

/* ============================================================
   5. DROPDOWN MENU ANIMATION
   Animasi dropdown navbar yang halus.
   ============================================================ */
@keyframes dropdownOpen {
    from {
        opacity: 0;
        transform: translateY(-8px) scaleY(0.95);
    }

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

.dropdown-menu {
    animation: dropdownOpen 0.2s ease forwards;
    transform-origin: top center;
}

/* ============================================================
   6. MOBILE MENU SLIDE-DOWN
   Animasi menu mobile yang muncul dari atas.
   ============================================================ */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }

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

.mobile-menu-open {
    animation: slideDown 0.25s ease forwards;
}

/* ============================================================
   7. CUSTOM SCROLLBAR
   Scrollbar yang lebih tipis dan sesuai warna brand.
   Hanya berfungsi di browser berbasis WebKit (Chrome, Safari, Edge).
   ============================================================ */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f8f9fa;
}

::-webkit-scrollbar-thumb {
    background: #e8bdb5;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #f32911;
}

/* ============================================================
   8. NO SCROLLBAR UTILITY (untuk filter bar horizontal)
   Menyembunyikan scrollbar horizontal pada filter kategori menu
   sambil tetap mempertahankan kemampuan scroll.
   ============================================================ */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    /* IE & Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* ============================================================
   9. GRADIENT OVERLAY UTILITY
   Digunakan pada portfolio cards dan hero section.
   ============================================================ */
.gradient-overlay-bottom {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.88) 0%,
            rgba(0, 0, 0, 0.20) 60%,
            transparent 100%);
}

/* ============================================================
   10. ROTATE HOVER (Hero Image)
   Efek miring pada frame gambar hero desktop.
   ============================================================ */
.rotate-3-hover {
    transform: rotate(3deg);
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rotate-3-hover:hover {
    transform: rotate(0deg);
}

/* ============================================================
   11. FLOATING CART BADGE ANIMATION
   Animasi bounce halus pada badge angka keranjang belanja
   untuk menarik perhatian pengguna.
   ============================================================ */
@keyframes bounceBadge {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }
}

.animate-bounce-badge {
    animation: bounceBadge 2s ease-in-out infinite;
}

/* ============================================================
   12. MODAL SLIDE-UP ANIMATION
   Animasi modal ringkasan pesanan yang muncul dari bawah.
   ============================================================ */
@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
    }

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

.modal-slide-up {
    animation: modalSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ============================================================
   13. EVENT DOCUMENTATION CAROUSEL
   Horizontal carousel di halaman Tentang Kami.
   ============================================================ */
.event-carousel-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0.5rem 0.25rem 1.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.event-carousel-track::-webkit-scrollbar {
    height: 8px;
}

.event-carousel-track::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 9999px;
}

.event-carousel-track::-webkit-scrollbar-thumb {
    background: #e8bdb5;
    border-radius: 9999px;
}

.event-carousel-card {
    position: relative;
    flex: 0 0 calc((100% - 4rem) / 3);
    min-width: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 1.5rem;
    background: #111827;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.18);
    scroll-snap-align: start;
}

.event-carousel-btn {
    position: absolute;
    top: 50%;
    z-index: 20;
    width: 3.25rem;
    height: 3.25rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9999px;
    background: #ffffff;
    color: var(--brand-primary);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease,
        transform 0.2s ease;
}

.event-carousel-btn:hover {
    background: var(--brand-primary);
    color: #ffffff;
    transform: translateY(-50%) scale(1.04);
}

.event-carousel-btn:disabled {
    opacity: 0.35;
    cursor: default;
    transform: translateY(-50%);
}

.event-carousel-btn-prev {
    left: -1.625rem;
}

.event-carousel-btn-next {
    right: -1.625rem;
}

@media (max-width: 1023px) {
    .event-carousel-track {
        gap: 1.5rem;
    }

    .event-carousel-card {
        flex-basis: calc((100% - 1.5rem) / 2);
    }
}

@media (max-width: 640px) {
    .event-carousel-track {
        gap: 1rem;
        padding-bottom: 1rem;
    }

    .event-carousel-card {
        flex-basis: min(82vw, 360px);
        border-radius: 1.25rem;
    }
}