/*==========================================================
  animations.css — Varniraj Organic Agro
  Site-wide hover animations using GPU-accelerated transforms.
  Load after all other CSS files.
==========================================================*/

/* ---- Global smooth base ---- */
*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
}

/*----------------------------------------------------------
  1. NAV LINKS — sliding underline + colour lift
----------------------------------------------------------*/
.navbar-link {
  transition: color 0.22s, background 0.22s, transform 0.22s !important;
}

@media (min-width: 992px) {
  .navbar-link:hover,
  .navbar-link.active {
    transform: translateY(-1px);
  }
}

/* Logo icon spin on hover */
.nav-logo:hover .nav-logo-icon {
  animation: logoSpin 0.55s cubic-bezier(0.33, 0.85, 0.4, 0.96) forwards;
}
@keyframes logoSpin {
  0%   { transform: rotate(0)     scale(1); }
  40%  { transform: rotate(-18deg) scale(1.15); }
  100% { transform: rotate(-10deg) scale(1.1); }
}

/* hamburger bars morph on open */
.nav-open-btn:hover span:nth-child(1) { transform: translateY(-2px); }
.nav-open-btn:hover span:nth-child(3) { transform: translateY(2px); }
.nav-open-btn span { transition: transform 0.2s, background 0.22s; }

/*----------------------------------------------------------
  2. HEADER ACTION BUTTONS — pop scale
----------------------------------------------------------*/
.header-action-btn {
  transition: background 0.22s, border-color 0.22s, color 0.22s,
              transform 0.22s !important;
}
.header-action-btn:hover { transform: scale(1.1) !important; }

.header-enquire-btn {
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s !important;
  position: relative; overflow: hidden;
}
/* shimmer sweep on hover */
.header-enquire-btn::after {
  content: "";
  position: absolute;
  top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    hsla(0,0%,100%,0.25) 50%,
    transparent 70%
  );
  transform: skewX(-15deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.header-enquire-btn:hover::after { left: 125%; }

/*----------------------------------------------------------
  3. HERO — stat items pulse on hover
----------------------------------------------------------*/
.hero-stat {
  transition: background 0.3s, border-color 0.3s, transform 0.3s !important;
}
.hero-stat:hover {
  transform: translateY(-6px) scale(1.04) !important;
}

/* floating cards ripple */
.hero-float {
  transition: transform 0.3s, box-shadow 0.3s !important;
}
.hero-float:hover {
  transform: translateY(-4px) scale(1.04) !important;
  box-shadow: 0 14px 36px hsla(0,0%,0%,0.2) !important;
}

/* CTA buttons glow */
.hero-btn-primary,
.hero-btn-ghost,
.shop-hero-cta-primary,
.shop-hero-cta-ghost {
  position: relative; overflow: hidden;
}
.hero-btn-primary::after,
.hero-btn-ghost::after,
.shop-hero-cta-primary::after,
.shop-hero-cta-ghost::after {
  content: "";
  position: absolute;
  top: -50%; left: -80%;
  width: 50%; height: 200%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    hsla(0,0%,100%,0.22) 50%,
    transparent 70%
  );
  transform: skewX(-15deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.hero-btn-primary:hover::after,
.hero-btn-ghost:hover::after,
.shop-hero-cta-primary:hover::after,
.shop-hero-cta-ghost:hover::after {
  left: 130%;
}

/*----------------------------------------------------------
  4. PRODUCT CARDS — lift + border glow + image zoom
----------------------------------------------------------*/
.shop-card {
  transition: transform 0.38s cubic-bezier(0.33, 0.85, 0.4, 0.96),
              box-shadow 0.38s,
              border-color 0.38s !important;
}
.shop-card:hover {
  transform: translateY(-12px) !important;
  box-shadow: 0 32px 72px hsla(152,88%,22%,0.18) !important;
}

/* card image zoom */
.shop-card-photo {
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.shop-card:hover .shop-card-photo { transform: scale(1.1) !important; }

/* card CTA button icon slide */
.shop-card-cta ion-icon {
  transition: transform 0.25s !important;
}
.shop-card-cta:hover ion-icon { transform: translateX(4px) !important; }

/* status badge pulse on card hover */
.shop-card:hover .shop-card-status {
  animation: badgePulse 0.5s ease forwards;
}
@keyframes badgePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/*----------------------------------------------------------
  5. ORDER TYPE CARDS — lift + icon spin
----------------------------------------------------------*/
.order-type-card {
  transition: transform 0.35s cubic-bezier(0.33, 0.85, 0.4, 0.96),
              box-shadow 0.35s, border-color 0.35s !important;
}
.order-type-card:hover { transform: translateY(-10px) !important; }
.ot-icon-wrap { transition: transform 0.4s cubic-bezier(0.33, 0.85, 0.4, 0.96) !important; }
.order-type-card:hover .ot-icon-wrap {
  transform: rotate(-12deg) scale(1.14) !important;
}

/* ot button shimmer */
.ot-btn { position: relative; overflow: hidden; }
.ot-btn::after {
  content: "";
  position: absolute;
  top: -50%; left: -80%;
  width: 50%; height: 200%;
  background: linear-gradient(105deg, transparent 30%, hsla(0,0%,100%,0.2) 50%, transparent 70%);
  transform: skewX(-15deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.ot-btn:hover::after { left: 130%; }

/*----------------------------------------------------------
  6. ABOUT PAGE — intro image, value chips, vm/farm/team cards
----------------------------------------------------------*/
.about-intro-img-wrap { overflow: hidden; }
.about-intro-img {
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.about-intro-img-wrap:hover .about-intro-img { transform: scale(1.06) !important; }

.about-value-chip {
  transition: background-color 0.28s, color 0.28s, transform 0.28s,
              box-shadow 0.28s !important;
}
.about-value-chip:hover {
  transform: translateY(-4px) scale(1.04) !important;
  box-shadow: 0 8px 22px hsla(152,88%,30%,0.25) !important;
}

.vm-card {
  transition: transform 0.35s, box-shadow 0.35s !important;
}
.vm-card:hover { transform: translateY(-10px) scale(1.01) !important; }
.vm-icon { transition: transform 0.4s !important; }
.vm-card:hover .vm-icon { transform: rotate(-12deg) scale(1.15) !important; }

.farm-card {
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s !important;
}
.farm-card:hover { transform: translateY(-8px) !important; }
.farm-icon { transition: transform 0.4s !important; }
.farm-card:hover .farm-icon { transform: rotate(-12deg) scale(1.15) !important; }

.team-card {
  transition: transform 0.35s, box-shadow 0.35s !important;
}
.team-card:hover { transform: translateY(-8px) !important; }

.team-avatar-placeholder {
  transition: transform 0.4s, box-shadow 0.4s !important;
}
.team-card:hover .team-avatar-placeholder {
  transform: scale(1.08) !important;
  box-shadow: 0 12px 32px hsla(152,95%,39%,0.4) !important;
}

/*----------------------------------------------------------
  7. CONTACT PAGE — contact cards, sidebar icon, submit btn
----------------------------------------------------------*/
.contact-info-card {
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s !important;
}
.contact-info-card:hover { transform: translateY(-10px) scale(1.01) !important; }

.card-icon-wrap {
  transition: transform 0.4s !important;
}
.contact-info-card:hover .card-icon-wrap {
  transform: rotate(-12deg) scale(1.15) !important;
}

.contact-submit-btn {
  position: relative; overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s !important;
}
.contact-submit-btn::after {
  content: "";
  position: absolute;
  top: -50%; left: -80%;
  width: 50%; height: 200%;
  background: linear-gradient(105deg, transparent 30%, hsla(0,0%,100%,0.2) 50%, transparent 70%);
  transform: skewX(-15deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.contact-submit-btn:hover::after { left: 130%; }
.contact-submit-btn:hover ion-icon { transform: translateX(5px) !important; }
.contact-submit-btn ion-icon { transition: transform 0.25s !important; }

.sidebar-icon {
  transition: background 0.25s, transform 0.25s !important;
}
.sidebar-info-block:hover .sidebar-icon {
  transform: scale(1.1) rotate(-6deg) !important;
}

/*----------------------------------------------------------
  8. FOOTER — social icons spin, nav links slide, cert items
----------------------------------------------------------*/
.footer-social-link {
  transition: background 0.25s, color 0.25s, border-color 0.25s,
              transform 0.28s cubic-bezier(0.33, 0.85, 0.4, 0.96) !important;
}
.footer-social-link:hover {
  transform: translateY(-5px) scale(1.12) !important;
}

.footer-nav-link {
  transition: color 0.22s, gap 0.22s, transform 0.22s !important;
}
.footer-nav-link:hover {
  transform: translateX(4px) !important;
}

.footer-cert-badge {
  transition: background 0.25s, color 0.25s, transform 0.25s,
              border-color 0.25s !important;
}
.footer-cert-badge:hover {
  background: hsl(152,88%,26%) !important;
  color: #fff !important;
  transform: translateY(-3px) scale(1.04) !important;
}
.footer-cert-badge:hover ion-icon { color: hsl(46,100%,65%) !important; }

.footer-contact-icon {
  transition: background 0.25s, border-color 0.25s,
              transform 0.3s cubic-bezier(0.33, 0.85, 0.4, 0.96) !important;
}
.footer-contact-item:hover .footer-contact-icon {
  transform: scale(1.12) rotate(-8deg) !important;
}

.footer-cta-btn-primary,
.footer-cta-btn-wa {
  position: relative; overflow: hidden;
}
.footer-cta-btn-primary::after,
.footer-cta-btn-wa::after {
  content: "";
  position: absolute;
  top: -50%; left: -80%;
  width: 50%; height: 200%;
  background: linear-gradient(105deg, transparent 30%, hsla(0,0%,100%,0.2) 50%, transparent 70%);
  transform: skewX(-15deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.footer-cta-btn-primary:hover::after,
.footer-cta-btn-wa:hover::after { left: 130%; }

/*----------------------------------------------------------
  9. BACK-TO-TOP — bounce on hover
----------------------------------------------------------*/
.back-to-top {
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s,
              background-color 0.25s !important;
}
.back-to-top:hover {
  animation: bounceUp 0.5s cubic-bezier(0.33, 0.85, 0.4, 0.96) !important;
}
@keyframes bounceUp {
  0%   { transform: translateY(-10px) scale(1.05); }
  40%  { transform: translateY(-22px) scale(1.1); }
  70%  { transform: translateY(-14px) scale(1.06); }
  100% { transform: translateY(-10px) scale(1.05); }
}

/*----------------------------------------------------------
  10. MARQUEE BAR — pause icon on hover handled globally
      Trust strip items — icon bounce
----------------------------------------------------------*/
.trust-item {
  transition: transform 0.25s !important;
  cursor: default;
}
.trust-item:hover { transform: translateY(-2px) scale(1.04) !important; }
.trust-item:hover ion-icon {
  animation: iconBounce 0.4s ease forwards;
}
@keyframes iconBounce {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-5px) scale(1.2); }
  65%  { transform: translateY(-2px) scale(1.1); }
  100% { transform: translateY(0)    scale(1); }
}

/*----------------------------------------------------------
  11. WHY BANNER & WHY STRIP items
----------------------------------------------------------*/
.why-feature-item {
  transition: transform 0.3s !important;
  cursor: default;
}
.why-feature-item:hover { transform: translateY(-6px) !important; }
.why-feature-icon {
  transition: background 0.35s, border-color 0.35s,
              transform 0.35s, box-shadow 0.35s !important;
}

.shop-why-item {
  transition: background 0.25s !important;
  cursor: default;
}
.shop-why-item:hover { background: hsla(0,0%,100%,0.06) !important; }
.shop-why-icon {
  transition: background 0.25s, transform 0.35s !important;
}
.shop-why-item:hover .shop-why-icon {
  background: hsl(152,88%,26%) !important;
  transform: rotate(-8deg) scale(1.15) !important;
}

/*----------------------------------------------------------
  12. SERVICE ITEMS — icon rotate on hover
----------------------------------------------------------*/
.service-item {
  transition: background 0.4s, transform 0.4s, box-shadow 0.4s !important;
}
.service-item:hover { transform: translateY(-10px) !important; }
.item-icon { transition: background 0.4s, border-color 0.4s, transform 0.4s !important; }
.service-item:hover .item-icon {
  background: hsl(36,100%,50%) !important;
  border-color: hsl(36,100%,50%) !important;
  transform: rotate(-10deg) scale(1.18) !important;
}

/*----------------------------------------------------------
  13. BREADCRUMB LINK — underline slide
----------------------------------------------------------*/
.breadcumb-link {
  position: relative;
  transition: color 0.22s !important;
}
.breadcumb-link::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: hsl(152,95%,60%);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.breadcumb-link:hover::after { width: 100%; }

/*----------------------------------------------------------
  14. PAGE SCROLL REVEAL — elements animate in on scroll
      Uses Intersection Observer added in script.js
----------------------------------------------------------*/
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s cubic-bezier(0.33, 0.85, 0.4, 0.96),
              transform 0.6s cubic-bezier(0.33, 0.85, 0.4, 0.96);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.65s, transform 0.65s;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.65s, transform 0.65s;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* stagger delay helpers */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }

/*----------------------------------------------------------
  15. DISABLE all hover animations on touch devices
      (prevents sticky hover states on tap)
----------------------------------------------------------*/
@media (hover: none) {
  .shop-card:hover       { transform: none !important; box-shadow: none !important; }
  .order-type-card:hover { transform: none !important; }
  .vm-card:hover         { transform: none !important; }
  .farm-card:hover       { transform: none !important; }
  .team-card:hover       { transform: none !important; }
  .contact-info-card:hover { transform: none !important; }
  .hero-stat:hover       { transform: none !important; }
  .footer-social-link:hover { transform: none !important; }
  .about-value-chip:hover   { transform: none !important; }
  .shop-why-item:hover      { background: none !important; }
  .trust-item:hover         { transform: none !important; }
  .service-item:hover       { transform: none !important; }
}