/* ==========================================================================
   PRADHAN SNACKS — ANIMATION EFFECTS
   Created     : 27 July 2026
   Last Updated: 28 July 2026
   Version     : 1.2.0
   Description : Genuine, lightweight CSS animations. No design changes.
                 All animations respect prefers-reduced-motion.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. KEYFRAME DEFINITIONS
   -------------------------------------------------------------------------- */

/* Gentle float — used on product images */
@-webkit-keyframes pradhan-float {
    0%   { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50%  { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
    100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes pradhan-float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Pulse shimmer — used on category boxes on hover */
@-webkit-keyframes pradhan-shimmer {
    0%   { box-shadow: inset 0 0 0 2000px rgba(16,16,16,0.65); }
    50%  { box-shadow: inset 0 0 0 2000px rgba(16,16,16,0.35); }
    100% { box-shadow: inset 0 0 0 2000px rgba(16,16,16,0.65); }
}
@keyframes pradhan-shimmer {
    0%   { box-shadow: inset 0 0 0 2000px rgba(16,16,16,0.65); }
    50%  { box-shadow: inset 0 0 0 2000px rgba(16,16,16,0.35); }
    100% { box-shadow: inset 0 0 0 2000px rgba(16,16,16,0.65); }
}

/* Fade-in from bottom — section headings and content blocks */
@-webkit-keyframes pradhan-fadeup {
    0%   { opacity: 0; -webkit-transform: translateY(32px); transform: translateY(32px); }
    100% { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}
@keyframes pradhan-fadeup {
    0%   { opacity: 0; transform: translateY(32px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Fade-in from left */
@-webkit-keyframes pradhan-fadeleft {
    0%   { opacity: 0; -webkit-transform: translateX(-40px); transform: translateX(-40px); }
    100% { opacity: 1; -webkit-transform: translateX(0);     transform: translateX(0); }
}
@keyframes pradhan-fadeleft {
    0%   { opacity: 0; transform: translateX(-40px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Fade-in from right */
@-webkit-keyframes pradhan-faderight {
    0%   { opacity: 0; -webkit-transform: translateX(40px); transform: translateX(40px); }
    100% { opacity: 1; -webkit-transform: translateX(0);    transform: translateX(0); }
}
@keyframes pradhan-faderight {
    0%   { opacity: 0; transform: translateX(40px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Scale bounce — WhatsApp / topbtn appear */
@-webkit-keyframes pradhan-bouncein {
    0%   { opacity: 0; -webkit-transform: scale(0.4); transform: scale(0.4); }
    60%  { -webkit-transform: scale(1.15); transform: scale(1.15); }
    80%  { -webkit-transform: scale(0.95); transform: scale(0.95); }
    100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes pradhan-bouncein {
    0%   { opacity: 0; transform: scale(0.4); }
    60%  { transform: scale(1.15); }
    80%  { transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* Subtle scale pulse — logo on load */
@-webkit-keyframes pradhan-logopulse {
    0%   { -webkit-transform: scale(1);    transform: scale(1); }
    50%  { -webkit-transform: scale(1.04); transform: scale(1.04); }
    100% { -webkit-transform: scale(1);    transform: scale(1); }
}
@keyframes pradhan-logopulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* Slide-in from below — mobile menu */
@-webkit-keyframes pradhan-slidein {
    0%   { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; }
    100% { -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; }
}
@keyframes pradhan-slidein {
    0%   { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0);    opacity: 1; }
}

/* Spin — loading elements */
@-webkit-keyframes pradhan-spin {
    0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pradhan-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* --------------------------------------------------------------------------
   2. PRODUCT CARDS — float on hover
   -------------------------------------------------------------------------- */

/* Product image on home page: smooth float on hover */
.pr_product:hover img {
    -webkit-animation: pradhan-float 2.2s ease-in-out infinite;
    animation: pradhan-float 2.2s ease-in-out infinite;
}

/* Smooth transition on pr_product itself */
.pr_product {
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        box-shadow 0.35s ease;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.35s ease;
}
.pr_product:hover {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(250, 122, 28, 0.28);
}


/* --------------------------------------------------------------------------
   3. CATEGORY BOXES — shimmer on hover
   -------------------------------------------------------------------------- */

.pcat_box {
    -webkit-transition: -webkit-transform 0.32s ease, box-shadow 0.32s ease;
    transition: transform 0.32s ease, box-shadow 0.32s ease;
    cursor: pointer;
}
.pcat_box:hover {
    -webkit-transform: translateY(-5px) scale(1.02);
    transform: translateY(-5px) scale(1.02);
    -webkit-animation: pradhan-shimmer 1.4s ease-in-out infinite;
    animation: pradhan-shimmer 1.4s ease-in-out infinite;
    box-shadow: 0 16px 36px rgba(0,0,0,0.32);
}


/* --------------------------------------------------------------------------
   4. HEADER LOGO — subtle pulse on page load
   -------------------------------------------------------------------------- */

.hdrlogoimg {
    -webkit-animation: pradhan-logopulse 3s ease-in-out infinite;
    animation: pradhan-logopulse 3s ease-in-out infinite;
}


/* --------------------------------------------------------------------------
   5. NAV LINKS — underline transition (already exists, enhanced)
   -------------------------------------------------------------------------- */

.hdr_nav_section .nav-link {
    -webkit-transition: color 0.3s ease, padding-bottom 0.3s ease;
    transition: color 0.3s ease, padding-bottom 0.3s ease;
}


/* --------------------------------------------------------------------------
   6. MOBILE MENU — slide-in animation
   -------------------------------------------------------------------------- */

.mob_menu_dropdown {
    -webkit-animation: pradhan-slidein 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: pradhan-slidein 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.mob_menu_link {
    -webkit-transition: color 0.25s ease, letter-spacing 0.25s ease;
    transition: color 0.25s ease, letter-spacing 0.25s ease;
}
.mob_menu_link:hover {
    letter-spacing: 0.04em;
    color: #fff;
}


/* --------------------------------------------------------------------------
   7. SOCIAL MEDIA ARROWS — hover scale
   -------------------------------------------------------------------------- */

.social_media_section .blog-arrow {
    -webkit-transition: background 0.25s ease, -webkit-transform 0.25s ease;
    transition: background 0.25s ease, transform 0.25s ease;
}
.social_media_section .blog-arrow:hover {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    background: #b01018;
}


/* --------------------------------------------------------------------------
   8. PRODUCT BOX (products page) — enhanced hover
   -------------------------------------------------------------------------- */

.product_box {
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        box-shadow 0.3s ease;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s ease;
}
.product_box:hover {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    box-shadow: 0 20px 44px rgba(0,0,0,0.14);
}
.product_box img {
    -webkit-transition: -webkit-transform 0.45s ease;
    transition: transform 0.45s ease;
}
.product_box:hover img {
    -webkit-transform: translateY(-10px) scale(1.04);
    transform: translateY(-10px) scale(1.04);
}

/* "View Product" button pulse on card hover */
.product_box:hover .btn {
    -webkit-animation: pradhan-bouncein 0.5s ease both;
    animation: pradhan-bouncein 0.5s ease both;
}


/* --------------------------------------------------------------------------
   9. FOOTER SOCIAL ICONS — hover rotate + scale
   -------------------------------------------------------------------------- */

.footer_social a {
    display: inline-block;
    -webkit-transition: -webkit-transform 0.3s ease, color 0.3s ease;
    transition: transform 0.3s ease, color 0.3s ease;
}
.footer_social a:hover {
    -webkit-transform: rotate(-10deg) scale(1.2);
    transform: rotate(-10deg) scale(1.2);
    color: #fa7a1c;
}

.hdr_social a {
    display: inline-block;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
}
.hdr_social a:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}


/* --------------------------------------------------------------------------
   10. WHATSAPP BUTTON — bounce-in on appear + float
   -------------------------------------------------------------------------- */

.whatsapp {
    -webkit-animation: pradhan-float 3s ease-in-out infinite;
    animation: pradhan-float 3s ease-in-out infinite;
}
.whatsapp img {
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
}
.whatsapp:hover img {
    -webkit-transform: scale(1.12);
    transform: scale(1.12);
}

/* Top scroll button — grow on hover */
.topbtn {
    -webkit-transition: background 0.4s ease, color 0.3s ease, font-size 0.3s ease,
                        -webkit-transform 0.3s ease;
    transition: background 0.4s ease, color 0.3s ease, font-size 0.3s ease,
                transform 0.3s ease;
}
.topbtn:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


/* --------------------------------------------------------------------------
   11. SECTION HEADINGS — fade-up on scroll (via AOS fallback)
       These classes can be added to elements alongside AOS attrs.
       When JS/AOS is unavailable the fallback is visible content.
   -------------------------------------------------------------------------- */

.pradhan-anim-fadeup {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-transition: opacity 0.65s ease, -webkit-transform 0.65s ease;
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.pradhan-anim-fadeup.is-visible {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}


/* --------------------------------------------------------------------------
   12. MISSION / VISION BOXES — slide in from sides
   -------------------------------------------------------------------------- */

.mission_box {
    -webkit-transition: -webkit-transform 0.4s ease, box-shadow 0.4s ease;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.mission_box:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(215, 16, 21, 0.28);
}

.vision_box {
    -webkit-transition: -webkit-transform 0.4s ease, box-shadow 0.4s ease;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.vision_box:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(250, 122, 28, 0.28);
}


/* --------------------------------------------------------------------------
   13. FORM INPUTS — focus highlight animation
   -------------------------------------------------------------------------- */

.frm_input,
.distributor_form_section .form-control {
    -webkit-transition: border-color 0.3s ease, box-shadow 0.3s ease,
                        -webkit-transform 0.2s ease;
    transition: border-color 0.3s ease, box-shadow 0.3s ease,
                transform 0.2s ease;
}
.frm_input:focus,
.distributor_form_section .form-control:focus {
    border-color: #fa7a1c !important;
    box-shadow: 0 0 0 3px rgba(250, 122, 28, 0.18);
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
    outline: none;
}


/* --------------------------------------------------------------------------
   14. PRODUCT QUICK-VIEW OVERLAY — enhanced transition
   -------------------------------------------------------------------------- */

.pq-overlay {
    -webkit-transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        visibility 0.4s ease,
                        -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                visibility 0.4s ease,
                transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pq-right img {
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    -webkit-animation: pradhan-float 4s ease-in-out infinite;
    animation: pradhan-float 4s ease-in-out infinite;
}

.pq-close {
    -webkit-transition: background 0.25s ease, color 0.25s ease,
                        -webkit-transform 0.25s ease;
    transition: background 0.25s ease, color 0.25s ease,
                transform 0.25s ease;
}


/* --------------------------------------------------------------------------
   15. FOOTER NAVIGATION LINKS — subtle left-slide on hover
   -------------------------------------------------------------------------- */

.footer_navigation ul li a {
    display: inline-block;
    -webkit-transition: -webkit-transform 0.25s ease, color 0.25s ease;
    transition: transform 0.25s ease, color 0.25s ease;
}
.footer_navigation ul li a:hover {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
    color: #fa7a1c;
}


/* --------------------------------------------------------------------------
   16. TEAR SECTION IMAGES — smooth scale on page load
   -------------------------------------------------------------------------- */

.tear_top_section img,
.tear_bottom_section img,
.tear_bottom_section2 img {
    display: block;
    width: 100%;
}


/* --------------------------------------------------------------------------
   17. INSTAGRAM BLOG CARD — active card glow pulse
   -------------------------------------------------------------------------- */

@-webkit-keyframes pradhan-cardglow {
    0%   { box-shadow: 0 22px 48px rgba(159, 16, 22, 0.18); }
    50%  { box-shadow: 0 28px 56px rgba(159, 16, 22, 0.32); }
    100% { box-shadow: 0 22px 48px rgba(159, 16, 22, 0.18); }
}
@keyframes pradhan-cardglow {
    0%   { box-shadow: 0 22px 48px rgba(159, 16, 22, 0.18); }
    50%  { box-shadow: 0 28px 56px rgba(159, 16, 22, 0.32); }
    100% { box-shadow: 0 22px 48px rgba(159, 16, 22, 0.18); }
}

.social_media_section .blog-card.is-active {
    -webkit-animation: pradhan-cardglow 2.5s ease-in-out infinite;
    animation: pradhan-cardglow 2.5s ease-in-out infinite;
}


/* --------------------------------------------------------------------------
   18. DISTRIBUTOR FORM SECTION — border pulse on hover
   -------------------------------------------------------------------------- */

.distributor_form_section {
    -webkit-transition: box-shadow 0.4s ease;
    transition: box-shadow 0.4s ease;
}
.distributor_form_section:hover {
    box-shadow: 0 0 0 4px rgba(215, 16, 21, 0.15), 0 12px 36px rgba(0,0,0,0.08);
}


/* --------------------------------------------------------------------------
   ACCESSIBILITY — Respect user preference for reduced motion
   ========================================================================== */

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


/* ==========================================================================
   v1.2.0 ADDITIONS — 28 July 2026
   Higher-impact, professional-grade visual polish. No design/colour/layout
   changes — entrance reveals, hero motion, button micro-interactions,
   and a scroll progress indicator.
   ========================================================================== */


/* --------------------------------------------------------------------------
   19. HERO CAROUSEL — slow Ken Burns zoom on the active slide
   -------------------------------------------------------------------------- */

@-webkit-keyframes pradhan-kenburns {
    0%   { -webkit-transform: scale(1);     transform: scale(1); }
    100% { -webkit-transform: scale(1.09);  transform: scale(1.09); }
}
@keyframes pradhan-kenburns {
    0%   { transform: scale(1); }
    100% { transform: scale(1.09); }
}

#carouselExampleFade .carousel-item {
    overflow: hidden;
}
#carouselExampleFade .carousel-item img {
    -webkit-transform: scale(1);
    transform: scale(1);
    will-change: transform;
}
#carouselExampleFade .carousel-item.active img {
    -webkit-animation: pradhan-kenburns 7s ease-out forwards;
    animation: pradhan-kenburns 7s ease-out forwards;
}


/* --------------------------------------------------------------------------
   20. BUTTON SHINE SWEEP — premium light-sweep on hover
   -------------------------------------------------------------------------- */

.theme_button,
.hdr_button,
.product_box .btn,
.btn211 {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.theme_button::before,
.hdr_button::before,
.product_box .btn::before,
.btn211::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    -webkit-transition: left 0.65s ease;
    transition: left 0.65s ease;
    pointer-events: none;
    z-index: 2;
}
.theme_button:hover::before,
.hdr_button:hover::before,
.product_box .btn:hover::before,
.btn211:hover::before {
    left: 130%;
}


/* --------------------------------------------------------------------------
   21. SCROLL PROGRESS BAR — thin gradient bar tracking page scroll
   -------------------------------------------------------------------------- */

#pradhanScrollProgress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: -webkit-linear-gradient(left, #d71015 0%, #fa7a1c 100%);
    background: linear-gradient(90deg, #d71015 0%, #fa7a1c 100%);
    z-index: 10000;
    -webkit-transition: width 0.12s ease-out;
    transition: width 0.12s ease-out;
    pointer-events: none;
}


/* --------------------------------------------------------------------------
   22. MOBILE MENU LINKS — staggered fade-in when menu opens
   -------------------------------------------------------------------------- */

@-webkit-keyframes pradhan-menuitem {
    0%   { opacity: 0; -webkit-transform: translateY(14px); transform: translateY(14px); }
    100% { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}
@keyframes pradhan-menuitem {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}

.mob_menu_dropdown .mob_menu_link {
    opacity: 0;
    -webkit-animation: pradhan-menuitem 0.45s ease forwards;
    animation: pradhan-menuitem 0.45s ease forwards;
}
.mob_menu_dropdown .mob_menu_link:nth-child(1) { -webkit-animation-delay: 0.05s; animation-delay: 0.05s; }
.mob_menu_dropdown .mob_menu_link:nth-child(2) { -webkit-animation-delay: 0.12s; animation-delay: 0.12s; }
.mob_menu_dropdown .mob_menu_link:nth-child(3) { -webkit-animation-delay: 0.19s; animation-delay: 0.19s; }
.mob_menu_dropdown .mob_menu_link:nth-child(4) { -webkit-animation-delay: 0.26s; animation-delay: 0.26s; }
.mob_menu_dropdown .mob_menu_link:nth-child(5) { -webkit-animation-delay: 0.33s; animation-delay: 0.33s; }


/* --------------------------------------------------------------------------
   23. FOOTER COLUMNS — gentle staggered rise (paired with data-aos in markup)
   -------------------------------------------------------------------------- */

.footer_section [data-aos] {
    /* AOS handles the reveal; this just ensures no layout shift pre-init */
    will-change: transform, opacity;
}


/* --------------------------------------------------------------------------
   24. CATEGORY BOX — gradient shine sweep on hover (adds to existing shimmer)
   -------------------------------------------------------------------------- */

.pcat_box {
    position: relative;
    overflow: hidden;
}
.pcat_box::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    -webkit-transition: left 0.75s ease;
    transition: left 0.75s ease;
    pointer-events: none;
}
.pcat_box:hover::after {
    left: 130%;
}


/* --------------------------------------------------------------------------
   25. NAV LINKS (desktop) — refined underline + colour shift on hover
   -------------------------------------------------------------------------- */

.hdr_nav_section .nav-link:hover {
    color: #fa7a1c;
}


/* --------------------------------------------------------------------------
   26. SMOOTH ANCHOR SCROLLING (native, no JS)
   -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}


/* --------------------------------------------------------------------------
   27. PAGE ENTRANCE — subtle fade-in on first paint
   -------------------------------------------------------------------------- */

@-webkit-keyframes pradhan-pagefade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes pradhan-pagefade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

.ts-page-wrapper {
    -webkit-animation: pradhan-pagefade 0.5s ease;
    animation: pradhan-pagefade 0.5s ease;
}