/* ============================================================
   Agro Sun — motion layer (v2)
   Adds the remaining editorial motion on top of v1:
   - softer / slightly quicker hero Ken Burns
   - staggered product cards + hover lift
   - quality-journey icon micro-motion
   - stronger private-label entrance
   - market chips + quote polish
   - magnetic primary buttons (JS)
   Loaded after animations-v1.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. HERO — softer, slightly quicker Ken Burns
   ------------------------------------------------------------ */
@keyframes ags-kenburns {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  100% { transform: scale(1.08) translate3d(-1.4%, -0.9%, 0); }
}
@keyframes ags-kenburns-alt {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  100% { transform: scale(1.08) translate3d(1.4%, 0.9%, 0); }
}
.ags-on main > section:nth-of-type(1) > div.absolute.inset-0.grid > img {
  animation-duration: 12s;
}

/* ------------------------------------------------------------
   2. PRODUCT CARDS — stagger reveal + hover lift
   ------------------------------------------------------------ */
.ags-on main div.max-w-4xl.grid > article.ags-prod {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .65s ease,
              transform .65s cubic-bezier(.22, 1, .36, 1),
              box-shadow .45s ease;
  will-change: opacity, transform;
}

.ags-on main div.max-w-4xl.grid > article.ags-prod.ags-prod-in {
  opacity: 1;
  transform: none;
}

.ags-on main div.max-w-4xl.grid > article.ags-prod.ags-prod-in:hover {
  transform: translate3d(0, -8px, 0) scale(1.012);
  box-shadow: 0 34px 70px -32px rgba(10, 30, 24, .55);
}

.ags-on main div.max-w-4xl.grid > article.ags-prod .relative img {
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.ags-on main div.max-w-4xl.grid > article.ags-prod:hover .relative img {
  transform: scale(1.05);
}

/* Home category cards: align the zoom with the requested 1.05 */
.ags-on .home-cat-card img {
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.ags-on .home-cat-card:hover img {
  transform: scale(1.05);
}

html[dir="rtl"] .ags-on .home-cat-card:hover span svg {
  transform: translateX(-6px);
}

/* ------------------------------------------------------------
   3. QUALITY JOURNEY — icon micro-motion when the section is seen
   ------------------------------------------------------------ */
.ags-on main > section:nth-of-type(5).ags-seen .lucide-sprout {
  animation: ags-sway 6.5s ease-in-out infinite;
  transform-origin: 50% 92%;
}

.ags-on main > section:nth-of-type(5).ags-seen .lucide-truck {
  animation: ags-truck 5.5s ease-in-out infinite;
}

.ags-on main > section:nth-of-type(5).ags-seen .lucide-package-check {
  animation: ags-pack 5s ease-in-out infinite;
}

.ags-on main > section:nth-of-type(5).ags-seen .lucide-snowflake {
  animation: ags-twinkle 4.5s ease-in-out infinite;
}

.ags-on main > section:nth-of-type(5).ags-seen .lucide-earth {
  animation: ags-spin 24s linear infinite;
}

@keyframes ags-sway {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(-4deg); }
}

@keyframes ags-truck {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

@keyframes ags-pack {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.03); }
}

@keyframes ags-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .65; transform: scale(1.08); }
}

@keyframes ags-spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------
   4. PRIVATE LABEL — stronger side entrance + tick pop
   ------------------------------------------------------------ */
#private-label .pl-panel.ags-rev {
  transform: translate3d(-38px, 0, 0);
}

#private-label .pl-panel.ags-rev.ags-in {
  transform: none;
}

.ags-on #private-label .pl-list li.ags-rev {
  transform: translate3d(18px, 0, 0);
}

.ags-on #private-label .pl-list li.ags-rev.ags-in {
  transform: none;
}

.ags-on #private-label .pl-tick {
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.ags-on #private-label .pl-list li.ags-in .pl-tick {
  transform: scale(1.08);
}

/* ------------------------------------------------------------
   5. MARKETS — chips lift + quote soft shadow
   ------------------------------------------------------------ */
.ags-on main > section:nth-of-type(7) .flex.flex-wrap > span.ags-rev {
  transform: translate3d(0, 18px, 0) scale(.97);
}

.ags-on main > section:nth-of-type(7) .flex.flex-wrap > span.ags-rev.ags-in {
  transform: none;
}

.ags-on main > section:nth-of-type(7) blockquote.ags-rev {
  box-shadow: 0 30px 60px -38px rgba(10, 30, 24, .55);
}

.ags-on main > section:nth-of-type(7) blockquote.ags-rev.ags-in {
  box-shadow: 0 26px 54px -34px rgba(10, 30, 24, .45);
}

/* ------------------------------------------------------------
   6. MAGNETIC BUTTONS — JS sets the transform, CSS keeps it smooth
   ------------------------------------------------------------ */
.ags-on .ags-magnetic {
  transition: transform .25s cubic-bezier(.2, .7, .2, 1),
              box-shadow .25s ease,
              filter .25s ease !important;
  will-change: transform;
}

/* ------------------------------------------------------------
   7. Respect reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ags-on .ags-prod {
    opacity: 1 !important;
    transform: none !important;
  }

  .ags-on main > section:nth-of-type(5) svg {
    animation: none !important;
  }

  .ags-on .ags-magnetic {
    transform: none !important;
  }
}