/* ============================================
   JUSTKLEEK – ASHFIELD | ANIMATIONS
   Scroll-triggered animations, 3D transforms, fade-up effects
   ============================================ */

/* ============================================
   SCROLL ANIMATIONS (Modern CSS)
   ============================================ */

@supports (animation-timeline: view()) {
    .fade-up {
        animation: fadeUp linear;
        animation-timeline: view();
        animation-range: entry 0% entry 50%;
    }

    .fade-left {
        animation: fadeLeft linear;
        animation-timeline: view();
        animation-range: entry 0% entry 50%;
    }

    .fade-right {
        animation: fadeRight linear;
        animation-timeline: view();
        animation-range: entry 0% entry 50%;
    }

    .scale-in {
        animation: scaleIn linear;
        animation-timeline: view();
        animation-range: entry 0% entry 50%;
    }

    .slide-up {
        animation: slideUp linear;
        animation-timeline: view();
        animation-range: entry 0% entry 50%;
    }
}

/* Fallback for browsers without animation-timeline support */
@supports not (animation-timeline: view()) {
    .fade-up,
    .fade-left,
    .fade-right,
    .scale-in,
    .slide-up {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .fade-up.visible,
    .fade-left.visible,
    .fade-right.visible,
    .scale-in.visible,
    .slide-up.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(50px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-50px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateZ(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(50px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateZ(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateZ(0);
    }
    to {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

/* ============================================
   POPUP MODAL ANIMATIONS
   ============================================ */

@keyframes popupIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateZ(50px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
}

@keyframes popupOut {
    from {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
    to {
        opacity: 0;
        transform: scale(0.8) translateZ(50px);
    }
}

.order-modal.active .modal-content {
    animation: popupIn 0.4s ease forwards;
}

.order-modal.closing .modal-content {
    animation: popupOut 0.3s ease forwards;
}

/* ============================================
   HERO TEXT ANIMATIONS
   ============================================ */

.hero-title {
    animation: heroSlideIn 1s ease-out forwards;
    opacity: 0;
}

.hero-main {
    animation: heroFadeIn 1s ease-out 0.3s forwards;
    opacity: 0;
}

.hero-sub {
    animation: heroFadeIn 1s ease-out 0.6s forwards;
    opacity: 0;
}

.hero-tagline {
    animation: heroFadeIn 1s ease-out 0.9s forwards;
    opacity: 0;
}

.btn-book {
    animation: heroFadeIn 1s ease-out 1.2s forwards;
    opacity: 0;
}

@keyframes heroSlideIn {
    from {
        opacity: 0;
        transform: translateX(-100px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateZ(0);
    }
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

/* ============================================
   MENU CARD STAGGER ANIMATION
   ============================================ */

.menu-card {
    opacity: 0;
    transform: translateY(30px) translateZ(0);
    animation: menuCardFadeUp 0.6s ease forwards;
}

.menu-card:nth-child(1) { animation-delay: 0.1s; }
.menu-card:nth-child(2) { animation-delay: 0.2s; }
.menu-card:nth-child(3) { animation-delay: 0.3s; }
.menu-card:nth-child(4) { animation-delay: 0.4s; }
.menu-card:nth-child(5) { animation-delay: 0.5s; }
.menu-card:nth-child(6) { animation-delay: 0.6s; }
.menu-card:nth-child(7) { animation-delay: 0.7s; }
.menu-card:nth-child(8) { animation-delay: 0.8s; }
.menu-card:nth-child(9) { animation-delay: 0.9s; }
.menu-card:nth-child(10) { animation-delay: 1s; }
.menu-card:nth-child(n+11) { animation-delay: 1.1s; }

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

/* ============================================
   3D HOVER EFFECTS
   ============================================ */

.menu-card,
.category-pill,
.btn-book,
.btn-submit,
.btn-order-now {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.menu-card:hover {
    transform: translateY(-10px) translateZ(20px) rotateX(2deg);
}

.category-pill:hover {
    transform: translateY(-5px) scale(1.05) translateZ(10px);
}

/* ============================================
   PARALLAX EFFECTS
   ============================================ */

.about-section {
    position: relative;
}

.about-image {
    transform-style: preserve-3d;
}

@supports (animation-timeline: view()) {
    .about-image {
        animation: parallaxMove linear;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }

    @keyframes parallaxMove {
        from {
            transform: translateZ(0) translateY(0);
        }
        to {
            transform: translateZ(40px) translateY(-20px);
        }
    }
}

/* ============================================
   NAVBAR FADE-IN
   ============================================ */

.navbar {
    animation: navbarFadeIn 0.8s ease-out forwards;
}

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

/* ============================================
   SECTION REVEAL ANIMATIONS
   ============================================ */

.categories-section,
.about-section,
.contact-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.categories-section.visible,
.about-section.visible,
.contact-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   BUTTON MAGNETIC HOVER EFFECT
   ============================================ */

.btn-book,
.btn-submit,
.btn-order-now {
    position: relative;
    overflow: hidden;
}

.btn-book::after,
.btn-submit::after,
.btn-order-now::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-book:hover::after,
.btn-submit:hover::after,
.btn-order-now:hover::after {
    width: 300px;
    height: 300px;
}

/* ============================================
   GOLD GLOW ANIMATIONS
   ============================================ */

@keyframes goldGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(200, 169, 126, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(200, 169, 126, 0.6);
    }
}

.menu-card:hover,
.category-pill:hover,
.btn-book:hover,
.btn-submit:hover,
.btn-order-now:hover {
    animation: goldGlow 2s ease-in-out infinite;
}

/* ============================================
   LOADING ANIMATIONS
   ============================================ */

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.loading {
    background: linear-gradient(
        90deg,
        rgba(232, 216, 190, 0.3) 0%,
        rgba(200, 169, 126, 0.5) 50%,
        rgba(232, 216, 190, 0.3) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* ============================================
   SCROLL INDICATOR
   ============================================ */

@keyframes scrollBounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(10px);
        opacity: 0.5;
    }
}

.scroll-arrow {
    animation: scrollBounce 2s infinite;
}

/* ============================================
   CATEGORY TABS SCROLL ANIMATION
   ============================================ */

.category-tab {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-tab.active {
    animation: tabActivate 0.3s ease;
}

@keyframes tabActivate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* ============================================
   RESPONSIVE ANIMATION ADJUSTMENTS
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 768px) {
    .menu-card {
        animation-delay: 0s !important;
    }
}