/* Amogas page and section animations. */

/* Hero banner motion. Selectors use Elementor custom classes. */
html.amogas-motion-preload .amogas-hero-banner:not(.amogas-banner-motion-ready) .amogas-hero-eyebrow h4,
html.amogas-motion-preload .amogas-hero-banner:not(.amogas-banner-motion-ready) .amogas-hero-title-primary h1,
html.amogas-motion-preload .amogas-hero-banner:not(.amogas-banner-motion-ready) .amogas-hero-title-secondary h1,
html.amogas-motion-preload .amogas-hero-banner:not(.amogas-banner-motion-ready) .amogas-hero-description p,
html.amogas-motion-preload .amogas-hero-banner:not(.amogas-banner-motion-ready) .amogas-hero-cta,
html.amogas-motion-preload .amogas-hero-banner:not(.amogas-banner-motion-ready) .amogas-hero-object {
    opacity: 0;
}

.amogas-hero-banner.amogas-banner-motion-ready::before {
    transform-origin: 50% 50%;
    animation: amogas-banner-backdrop 16s ease-in-out infinite alternate;
    will-change: transform;
}

.amogas-banner-motion-ready .amogas-hero-eyebrow h4,
.amogas-banner-motion-ready .amogas-hero-title-primary h1,
.amogas-banner-motion-ready .amogas-hero-title-secondary h1,
.amogas-banner-motion-ready .amogas-hero-description p,
.amogas-banner-motion-ready .amogas-hero-cta {
    opacity: 0;
    animation: amogas-banner-content-reveal 820ms cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: opacity, transform, clip-path;
}

.amogas-banner-motion-ready .amogas-hero-eyebrow h4 {
    animation-delay: 100ms;
}

.amogas-banner-motion-ready .amogas-hero-title-primary h1 {
    animation-delay: 210ms;
}

.amogas-banner-motion-ready .amogas-hero-title-secondary h1 {
    animation-delay: 320ms;
}

.amogas-banner-motion-ready .amogas-hero-description p {
    animation-delay: 450ms;
}

.amogas-banner-motion-ready .amogas-hero-cta {
    animation-delay: 570ms;
    animation-name: amogas-banner-cta-reveal;
    overflow: visible;
}

.amogas-banner-motion-ready .amogas-hero-cta a {
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.amogas-banner-motion-ready .amogas-hero-cta a:hover,
.amogas-banner-motion-ready .amogas-hero-cta a:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.amogas-banner-motion-layer {
    --amogas-reveal-x: 0px;
    --amogas-parallax-x: 0px;
    --amogas-parallax-y: 0px;
    --amogas-float-distance: 7px;
    --amogas-float-duration: 7s;
    --amogas-float-delay: 0s;
    --amogas-tilt: 0deg;
    opacity: 0;
    filter: blur(5px);
    animation: amogas-banner-layer-reveal 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--amogas-reveal-delay, 400ms) forwards;
}

.amogas-banner-motion-layer.is-motion-revealed {
    opacity: 1;
    filter: none;
    animation: none;
}

.amogas-banner-motion-layer img {
    transform-origin: center;
    animation: amogas-banner-object-float var(--amogas-float-duration) ease-in-out var(--amogas-float-delay) infinite;
    will-change: transform;
}

.amogas-hero-mango-slices {
    --amogas-float-distance: 7px;
    --amogas-float-duration: 6.8s;
    --amogas-float-delay: -1.2s;
    --amogas-tilt: -0.35deg;
}

.amogas-hero-curry-leaves {
    --amogas-float-distance: 11px;
    --amogas-float-duration: 8.4s;
    --amogas-float-delay: -3.1s;
    --amogas-tilt: 0.5deg;
}

.amogas-hero-mango-cluster {
    --amogas-float-distance: 6px;
    --amogas-float-duration: 7.6s;
    --amogas-float-delay: -2.2s;
    --amogas-tilt: -0.4deg;
}

.amogas-hero-tomatoes {
    --amogas-float-distance: 8px;
    --amogas-float-duration: 7.2s;
    --amogas-float-delay: -4s;
    --amogas-tilt: 0.35deg;
}

.amogas-hero-main-jar {
    --amogas-float-distance: 6px;
    --amogas-float-duration: 6.4s;
    --amogas-float-delay: -2.8s;
    --amogas-tilt: -0.8deg;
}

.amogas-hero-side-jar,
.amogas-hero-side-product,
.amogas-hero-mortar {
    --amogas-float-distance: 9px;
    --amogas-float-duration: 9s;
    --amogas-float-delay: -3.6s;
    --amogas-tilt: 0.7deg;
}

.amogas-hero-side-jar {
    --amogas-reveal-x: -180px;
}

.amogas-hero-side-product,
.amogas-hero-mortar {
    --amogas-reveal-x: 180px;
}

.amogas-hero-garlic-badge,
.amogas-hero-chilli,
.amogas-hero-garlic-cluster {
    --amogas-float-distance: 8px;
    --amogas-float-duration: 7.8s;
    --amogas-float-delay: -4.5s;
    --amogas-tilt: -0.6deg;
}

.amogas-hero-clove-left,
.amogas-hero-clove-right {
    --amogas-float-distance: 12px;
    --amogas-float-duration: 6.2s;
    --amogas-float-delay: -2s;
    --amogas-tilt: 1deg;
}

@keyframes amogas-banner-content-reveal {
    0% {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        transform: translate3d(0, 34px, 0);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes amogas-banner-layer-reveal {
    0% {
        opacity: 0;
        filter: blur(5px);
        translate: var(--amogas-reveal-x) 0;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        translate: 0 0;
    }
}

@keyframes amogas-banner-cta-reveal {
    0% {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes amogas-banner-object-float {
    0%,
    100% {
        transform: translate3d(
            var(--amogas-parallax-x),
            calc(var(--amogas-parallax-y) - var(--amogas-float-distance)),
            0
        ) rotate(var(--amogas-tilt));
    }
    50% {
        transform: translate3d(
            var(--amogas-parallax-x),
            calc(var(--amogas-parallax-y) + var(--amogas-float-distance)),
            0
        ) rotate(calc(var(--amogas-tilt) + 0.7deg));
    }
}

@keyframes amogas-banner-backdrop {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.035);
    }
}


/* Homepage section motion. All hooks are semantic Elementor custom classes. */
html.amogas-motion-preload :is(.amogas-home-section, .amogas-scroll-section) .amogas-section-heading,
html.amogas-motion-preload :is(.amogas-home-section, .amogas-scroll-section) .amogas-section-copy,
html.amogas-motion-preload :is(.amogas-home-section, .amogas-scroll-section) .amogas-section-content,
html.amogas-motion-preload :is(.amogas-home-section, .amogas-scroll-section) .amogas-promo-card,
html.amogas-motion-preload :is(.amogas-home-section, .amogas-scroll-section) .amogas-organic-cta-button,
html.amogas-motion-preload :is(.amogas-home-section, .amogas-scroll-section) .amogas-benefit-card,
html.amogas-motion-preload :is(.amogas-home-section, .amogas-scroll-section) .amogas-about-eyebrow,
html.amogas-motion-preload :is(.amogas-home-section, .amogas-scroll-section) .amogas-about-stat-card,
html.amogas-motion-preload :is(.amogas-home-section, .amogas-scroll-section) .amogas-about-value-card,
html.amogas-motion-preload :is(.amogas-home-section, .amogas-scroll-section) .amogas-section-decoration:not(.amogas-section-wave-top):not(.amogas-section-wave-bottom) img {
    opacity: 0;
}

.amogas-home-reveal-item {
    --amogas-home-reveal-x: 0px;
    --amogas-home-reveal-y: 36px;
    --amogas-home-reveal-scale: 0.985;
    --amogas-home-reveal-rotate: 0deg;
    transition:
        opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--amogas-home-reveal-delay, 0ms);
}

html.amogas-home-motion-enabled :is(.amogas-home-section, .amogas-scroll-section):not(.is-in-view) .amogas-home-reveal-item {
    opacity: 0;
    transform: translate3d(
        var(--amogas-home-reveal-x),
        var(--amogas-home-reveal-y),
        0
    ) scale(var(--amogas-home-reveal-scale)) rotate(var(--amogas-home-reveal-rotate));
}

html.amogas-home-motion-enabled :is(.amogas-home-section, .amogas-scroll-section).is-in-view .amogas-home-reveal-item {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}

.amogas-section-heading.amogas-home-reveal-item {
    --amogas-home-reveal-y: 30px;
}

.amogas-section-copy.amogas-home-reveal-item {
    --amogas-home-reveal-y: 24px;
}

.amogas-section-content.amogas-home-reveal-item {
    --amogas-home-reveal-y: 34px;
    --amogas-home-reveal-scale: 0.99;
}

.amogas-promo-card-primary.amogas-home-reveal-item {
    --amogas-home-reveal-x: -64px;
    --amogas-home-reveal-y: 0px;
    --amogas-home-reveal-scale: 0.97;
}

.amogas-promo-card-secondary.amogas-home-reveal-item {
    --amogas-home-reveal-x: 64px;
    --amogas-home-reveal-y: 0px;
    --amogas-home-reveal-scale: 0.97;
}

.amogas-organic-cta-button.amogas-home-reveal-item {
    --amogas-home-reveal-y: 22px;
    --amogas-home-reveal-scale: 0.95;
}

.amogas-benefit-card.amogas-home-reveal-item {
    --amogas-home-reveal-y: 42px;
    --amogas-home-reveal-scale: 0.96;
}

.amogas-about-eyebrow.amogas-home-reveal-item {
    --amogas-home-reveal-y: 18px;
    --amogas-home-reveal-scale: 0.98;
}

.amogas-about-stat-card.amogas-home-reveal-item,
.amogas-about-value-card.amogas-home-reveal-item {
    --amogas-home-reveal-y: 42px;
    --amogas-home-reveal-scale: 0.96;
}

.amogas-section-decoration img.amogas-home-reveal-item {
    --amogas-home-reveal-y: 26px;
    --amogas-home-reveal-scale: 0.9;
}

.amogas-featured-decor-one img.amogas-home-reveal-item,
.amogas-organic-decor-one img.amogas-home-reveal-item {
    --amogas-home-reveal-x: -38px;
    --amogas-home-reveal-rotate: -2deg;
}

.amogas-featured-decor-two img.amogas-home-reveal-item,
.amogas-organic-decor-three img.amogas-home-reveal-item,
.amogas-best-deals-decoration img.amogas-home-reveal-item {
    --amogas-home-reveal-x: 38px;
    --amogas-home-reveal-rotate: 2deg;
}

.amogas-organic-decor-two img.amogas-home-reveal-item,
.amogas-promo-product-image img.amogas-home-reveal-item {
    --amogas-home-reveal-y: 38px;
    --amogas-home-reveal-scale: 0.92;
}

.amogas-about-story-image img.amogas-home-reveal-item,
.amogas-about-values-image img.amogas-home-reveal-item {
    --amogas-home-reveal-x: -52px;
    --amogas-home-reveal-y: 0px;
    --amogas-home-reveal-scale: 0.94;
    --amogas-home-reveal-rotate: -1deg;
}


/* Responsive animation adjustments. Keep breakpoints at the end of the file. */
@media (max-width: 767px) {
    .amogas-banner-motion-layer {
        --amogas-float-distance: 3px;
    }

    .amogas-banner-motion-ready .amogas-hero-cta a:hover,
    .amogas-banner-motion-ready .amogas-hero-cta a:focus-visible {
        transform: translateY(-2px);
    }

    .amogas-promo-card-primary.amogas-home-reveal-item,
    .amogas-promo-card-secondary.amogas-home-reveal-item,
    .amogas-about-story-image img.amogas-home-reveal-item,
    .amogas-about-values-image img.amogas-home-reveal-item,
    .amogas-section-decoration img.amogas-home-reveal-item {
        --amogas-home-reveal-x: 0px;
        --amogas-home-reveal-y: 26px;
        --amogas-home-reveal-rotate: 0deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .amogas-hero-banner.amogas-banner-motion-ready::before,
    .amogas-banner-motion-ready .amogas-hero-eyebrow h4,
    .amogas-banner-motion-ready .amogas-hero-title-primary h1,
    .amogas-banner-motion-ready .amogas-hero-title-secondary h1,
    .amogas-banner-motion-ready .amogas-hero-description p,
    .amogas-banner-motion-ready .amogas-hero-cta,
    .amogas-banner-motion-ready .amogas-hero-cta svg,
    .amogas-banner-motion-layer,
    .amogas-banner-motion-layer img {
        opacity: 1;
        filter: none;
        animation: none !important;
        transform: none;
        clip-path: none;
    }

    .amogas-home-reveal-item,
    html.amogas-home-motion-enabled :is(.amogas-home-section, .amogas-scroll-section):not(.is-in-view) .amogas-home-reveal-item,
    html.amogas-home-motion-enabled :is(.amogas-home-section, .amogas-scroll-section).is-in-view .amogas-home-reveal-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}