/* ============================================================
   Agro Sun — motion layer (v1)
   Loaded on every page. Everything is opt-in via html.ags-on so
   that nothing is hidden when JS is unavailable.
   ============================================================ */



/* ------------------------------------------------------------
   1. HERO — Ken Burns + gentle parallax container
   ------------------------------------------------------------ */
.ags-on main > section:nth-of-type(1) > div.absolute.inset-0.grid {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.ags-on main > section:nth-of-type(1) > div.absolute.inset-0.grid > img {
  animation: ags-kenburns 30s ease-in-out infinite alternate;
  will-change: transform;
}
.ags-on main > section:nth-of-type(1) > div.absolute.inset-0.grid > img:nth-child(2) {
  animation-name: ags-kenburns-alt;
}

@keyframes ags-kenburns {
  0%   { transform: scale(1.03) translate3d(0, 0, 0); }
  100% { transform: scale(1.14) translate3d(-2.2%, -1.6%, 0); }
}
@keyframes ags-kenburns-alt {
  0%   { transform: scale(1.03) translate3d(0, 0, 0); }
  100% { transform: scale(1.14) translate3d(2.2%, 1.6%, 0); }
}

/* ------------------------------------------------------------
   2. HERO — staggered entrance (badge → title → buttons)
   ------------------------------------------------------------ */
@keyframes ags-rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}

.ags-on main > section:nth-of-type(1) p.inline-flex {
  animation: ags-rise .8s cubic-bezier(.2,.7,.2,1) both,
             ags-badge 6s ease-in-out 3.2s infinite;
  animation-delay: 2.0s, 3.2s;
}
.ags-on main > section:nth-of-type(1) h1 {
  animation: ags-rise 1s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: 2.22s;
}
.ags-on main > section:nth-of-type(1) > div.relative .flex.flex-wrap > *:nth-child(1) {
  animation: ags-rise .75s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: 2.3s;
}
.ags-on main > section:nth-of-type(1) > div.relative .flex.flex-wrap > *:nth-child(2) {
  animation: ags-rise .75s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: 2.42s;
}

/* soft pulse on the hero badge */
@keyframes ags-badge {
  0%, 90%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  93%           { box-shadow: 0 0 0 6px rgba(255, 255, 255, .10); }
  96%           { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}

/* ------------------------------------------------------------
   3. Generic scroll reveal (used by the JS layer)
   ------------------------------------------------------------ */
.ags-on .ags-rev {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.ags-on .ags-rev.ags-in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   4. STATS — cards pop in one after another
   ------------------------------------------------------------ */
.ags-on main > section:nth-of-type(2) .rounded-3xl > div.ags-rev {
  transform: translate3d(0, 28px, 0) scale(.97);
}
.ags-on main > section:nth-of-type(2) .rounded-3xl > div.ags-rev.ags-in {
  transform: none;
}
.ags-on main > section:nth-of-type(2) .tabular {
  display: inline-block;
}

/* ------------------------------------------------------------
   5. PRODUCT CARDS — hover: lift, deeper shadow, arrow slides
   ------------------------------------------------------------ */
.ags-on main .group.relative.block {
  transition: transform .4s cubic-bezier(.2,.7,.2,1),
              box-shadow .4s ease;
}
.ags-on main .group.relative.block:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 32px 60px -28px rgba(10, 30, 24, .65);
}
.ags-on main .group.relative.block span svg {
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.ags-on main .group.relative.block:hover span svg {
  transform: translateX(6px);
}

/* ------------------------------------------------------------
   6. PRIVATE LABEL — panel fades in, ticks land one by one
   ------------------------------------------------------------ */
#private-label .pl-panel.ags-rev {
  transform: translate3d(-18px, 0, 0);
}
#private-label .pl-panel.ags-rev.ags-in {
  transform: none;
}
.ags-on #private-label .pl-list li.ags-rev {
  transform: translate3d(14px, 0, 0);
}
.ags-on #private-label .pl-list li.ags-rev.ags-in {
  transform: none;
}
.ags-on #private-label .pl-tick {
  display: inline-block;
}

/* ------------------------------------------------------------
   7. QUALITY JOURNEY — connector line draws as you scroll
   ------------------------------------------------------------ */
.ags-on main > section:nth-of-type(5) .grid {
  position: relative;
}
.ags-on main > section:nth-of-type(5) .grid::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 46px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
              rgba(25, 53, 44, 0) 0%,
              rgba(25, 53, 44, .28) 12%,
              rgba(200, 30, 58, .35) 50%,
              rgba(25, 53, 44, .28) 88%,
              rgba(25, 53, 44, 0) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1) .15s;
  pointer-events: none;
}
.ags-on main > section:nth-of-type(5).ags-seen .grid::before {
  transform: scaleX(1);
}

/* step icons breathe on hover */
.ags-on main > section:nth-of-type(5) .group:hover svg {
  animation: ags-bob .9s ease-in-out;
}
@keyframes ags-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  30%      { transform: translateY(-4px) rotate(-6deg); }
  65%      { transform: translateY(2px) rotate(4deg); }
}

/* ------------------------------------------------------------
   8. CERTIFICATE MARQUEE — keep it but soften + slow down
   ------------------------------------------------------------ */
.ags-on main section .animate-\[marquee_30s_linear_infinite\] {
  animation-duration: 42s !important;
}

/* ------------------------------------------------------------
   9. MARKETS — chips + quote come in in sequence
   ------------------------------------------------------------ */
.ags-on main > section:nth-of-type(7) blockquote.ags-rev {
  transform: translate3d(0, 30px, 0);
}

/* ------------------------------------------------------------
   10. BUTTONS — every button/link button grows a touch on hover
   ------------------------------------------------------------ */
.ags-on a[class*="rounded-full"],
.ags-on button[class*="rounded-full"],
.ags-on a.pl-btn,
.ags-on .pl-btn {
  transition: transform .25s cubic-bezier(.2,.7,.2,1),
              box-shadow .25s ease,
              filter .25s ease;
}
.ags-on a[class*="rounded-full"]:hover,
.ags-on button[class*="rounded-full"]:hover,
.ags-on a.pl-btn:hover {
  transform: translateY(-2px) scale(1.035);
  box-shadow: 0 16px 34px -14px rgba(10, 30, 24, .55);
}

/* ------------------------------------------------------------
   11. FLOATING ACCENTS — little marks drift very slowly
   ------------------------------------------------------------ */
@keyframes ags-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(-1.2deg); }
}
.ags-on main img[src*="agrosun-mark"] {
  animation: ags-float 9s ease-in-out infinite;
  will-change: transform;
}
.ags-on main img[src*="agrosun-mark"]:nth-of-type(2n) {
  animation-duration: 11s;
  animation-direction: alternate-reverse;
}

/* ------------------------------------------------------------
   12. SCROLL PROGRESS BAR (injected by JS)
   ------------------------------------------------------------ */
#ags-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #C81E3A, #E4572E);
  z-index: 2147483000;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(200, 30, 58, .45);
  transition: transform .08s linear;
}
html[dir="rtl"] #ags-progress {
  transform-origin: 100% 50%;
}

/* ------------------------------------------------------------
   13. Respect reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ags-on *,
  .ags-on *::before,
  .ags-on *::after {
    animation: none !important;
    transition: none !important;
  }
  .ags-on .ags-rev {
    opacity: 1 !important;
    transform: none !important;
  }
  #ags-progress { display: none; }
}