/* =========================================================
   KAMA FOODS - UNIVERSAL ANIMATION SYSTEM
   Scroll Animations + Hero Slider + Stagger + Hover Effects
========================================================= */

/* =========================================================
   1. GLOBAL ANIMATION SETTINGS
========================================================= */

[data-scroll] {
    --scroll-duration: 0.8s;
    --scroll-delay: 0s;
    --scroll-distance: 35px;

    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);

    transition:
        opacity var(--scroll-duration) ease,
        transform var(--scroll-duration) cubic-bezier(0.22, 1, 0.36, 1),
        clip-path var(--scroll-duration) cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: var(--scroll-delay);
    will-change: opacity, transform;
}

/*
   Hide elements only after the animation system is ready.
   If JavaScript does not initialize, content stays visible.
*/

html.kama-scroll-ready [data-scroll]:not(.is-visible) {
    opacity: 0;
}

/* =========================================================
   2. SCROLL ANIMATION TYPES
========================================================= */

/* Fade Up */

html.kama-scroll-ready [data-scroll="fade-up"]:not(.is-visible) {
    transform: translate3d(0, var(--scroll-distance), 0);
}

/* Fade Down */

html.kama-scroll-ready [data-scroll="fade-down"]:not(.is-visible) {
    transform: translate3d(0, calc(var(--scroll-distance) * -1), 0);
}

/* Fade Left */

html.kama-scroll-ready [data-scroll="fade-left"]:not(.is-visible) {
    transform: translate3d(var(--scroll-distance), 0, 0);
}

/* Fade Right */

html.kama-scroll-ready [data-scroll="fade-right"]:not(.is-visible) {
    transform: translate3d(calc(var(--scroll-distance) * -1), 0, 0);
}

/* Zoom In */

html.kama-scroll-ready [data-scroll="zoom-in"]:not(.is-visible) {
    transform: scale(0.92);
}

/* Reveal from Bottom */

html.kama-scroll-ready [data-scroll="reveal"]:not(.is-visible) {
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 15px, 0);
}

/* Visible State */

[data-scroll].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    clip-path: inset(0 0 0 0);
    will-change: auto;
}

/* =========================================================
   3. STAGGER ANIMATION FOR CARDS
========================================================= */

[data-scroll-stagger="cards"]>* {
    --scroll-duration: 0.7s;
}

/* Sequential delays */

[data-scroll-stagger="cards"]> :nth-child(1) {
    --scroll-delay: 0.05s;
}

[data-scroll-stagger="cards"]> :nth-child(2) {
    --scroll-delay: 0.12s;
}

[data-scroll-stagger="cards"]> :nth-child(3) {
    --scroll-delay: 0.19s;
}

[data-scroll-stagger="cards"]> :nth-child(4) {
    --scroll-delay: 0.26s;
}

[data-scroll-stagger="cards"]> :nth-child(5) {
    --scroll-delay: 0.33s;
}

[data-scroll-stagger="cards"]> :nth-child(6) {
    --scroll-delay: 0.40s;
}

[data-scroll-stagger="cards"]> :nth-child(7) {
    --scroll-delay: 0.47s;
}

[data-scroll-stagger="cards"]> :nth-child(8) {
    --scroll-delay: 0.54s;
}

/* =========================================================
   4. KAMA FOODS HERO SLIDER ANIMATIONS
========================================================= */

/*
   Animate only the content inside the hero slide.
   Do not hide the Swiper slide itself.
*/

.kf-hero-swiper .kf-hero-animate-ready {
    opacity: 0;
    transform: translate3d(0, 24px, 0);

    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: var(--hero-animation-delay, 0ms);
}

/* Hero content visible state */

.kf-hero-swiper .kf-hero-animate-ready.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/*
   Optional animation for individual hero elements.
   These classes work when applied by the Hero JavaScript.
*/

.kf-hero-swiper .kf-hero-eyebrow,
.kf-hero-swiper .kf-hero-title,
.kf-hero-swiper .kf-hero-description,
.kf-hero-swiper .kf-hero-buttons,
.kf-hero-swiper .kf-hero-btn,
.kf-hero-swiper .kf-hero-bottom {
    backface-visibility: hidden;
}

/* Keep Swiper responsible for slide transitions */

.kf-hero-swiper .swiper-slide {
    will-change: opacity;
}

/* Prevent hidden hero content from affecting inactive slides */

.kf-hero-swiper .swiper-slide:not(.swiper-slide-active) .kf-hero-animate-ready {
    pointer-events: none;
}

/* =========================================================
   5. HOVER EFFECTS
========================================================= */

.kama-hover-lift {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .kama-hover-lift:hover {
        transform: translateY(-6px);
    }
}

/* =========================================================
   6. HEADER ANIMATION SUPPORT
========================================================= */

/*
   Header elements use the same data-scroll / is-visible system.
   Avoid adding transforms to the entire fixed header.
*/

.kf-header [data-scroll],
.kf-topbar [data-scroll] {
    backface-visibility: hidden;
}

/* =========================================================
   7. MOBILE RESPONSIVE ANIMATIONS
========================================================= */

@media (max-width: 767px) {
    [data-scroll] {
        --scroll-duration: 0.65s;
        --scroll-distance: 22px;
    }

    .kf-hero-swiper .kf-hero-animate-ready {
        transform: translate3d(0, 18px, 0);
        transition-duration: 0.6s;
    }

    .kf-hero-swiper .kf-hero-animate-ready.is-visible {
        transform: translate3d(0, 0, 0);
    }
}

/* =========================================================
   8. ACCESSIBILITY: REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    [data-scroll],
    [data-scroll-stagger="cards"]>*,
    .kf-hero-swiper .kf-hero-animate-ready,
    .kama-hover-lift {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        clip-path: none !important;
        opacity: 1 !important;
        transition-delay: 0s !important;
        will-change: auto !important;
    }

    .kf-hero-swiper .swiper-slide {
        will-change: auto;
    }
}




/* Scroll animation visibility */
html.kama-scroll-ready [data-scroll]:not(.is-visible) {
    opacity: 0;
    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
    transition-delay: var(--scroll-delay, 0ms);
}

html.kama-scroll-ready [data-scroll="fade-up"]:not(.is-visible) {
    transform: translate3d(0, 28px, 0);
}

html.kama-scroll-ready [data-scroll="fade-down"]:not(.is-visible) {
    transform: translate3d(0, -24px, 0);
}

html.kama-scroll-ready [data-scroll="fade-left"]:not(.is-visible) {
    transform: translate3d(28px, 0, 0);
}

html.kama-scroll-ready [data-scroll="fade-right"]:not(.is-visible) {
    transform: translate3d(-28px, 0, 0);
}

html.kama-scroll-ready [data-scroll="zoom-in"]:not(.is-visible) {
    transform: scale(0.96);
}

html.kama-scroll-ready [data-scroll].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    html.kama-scroll-ready [data-scroll],
    html.kama-scroll-ready [data-scroll].is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}