/* AJR home page: motion objects for sections below the hero (hero is untouched) */

/* Content sits above floating decoration */
#categories > .container, #compare > .container, #serve > .container, #how > .container,
#faq-mini > .container, #contact > .container, #delivery > .container, #journey > .container,
#brands > .container, #what-we-do > .container{ position: relative; z-index: 2; }
#categories, #compare, #serve, #how, #faq-mini, #contact, #delivery, #journey, #brands, #what-we-do{ overflow: hidden; }

/* Parallax floaters */
.hm-floater{ position: absolute; color: var(--accent); opacity: 0.06; pointer-events: none; z-index: 0; will-change: transform; }
.hm-floater:nth-of-type(even){ color: var(--amber); opacity: 0.07; }

/* Journey: dashed road with a driving truck */
.hm-road{ position: relative; height: 46px; margin-top: 22px; }
.hm-road-line{ position: absolute; left: 0; right: 0; bottom: 8px; height: 0; border-top: 3px dashed rgba(242,183,5,.45); animation: hmRoad 1.2s linear infinite; }
@keyframes hmRoad{ from{ background-position: 0 0; } to{ background-position: 0 0; } }
.hm-truck{ position: absolute; bottom: 12px; left: 0; font-size: 26px; color: var(--accent); animation: hmDrive 9s linear infinite; filter: drop-shadow(0 0 8px rgba(232,84,44,.5)); }
@keyframes hmDrive{ 0%{ left: -4%; } 100%{ left: 102%; } }
.jstep i{ animation: hmPulse 2.8s ease-in-out infinite; }
.jstep:nth-child(2) i{ animation-delay: .5s; } .jstep:nth-child(3) i{ animation-delay: 1s; } .jstep:nth-child(4) i{ animation-delay: 1.5s; }
@keyframes hmPulse{ 0%,100%{ transform: scale(1); text-shadow: 0 0 0 rgba(242,183,5,0); } 50%{ transform: scale(1.18); text-shadow: 0 0 14px rgba(242,183,5,.6); } }

/* Brands marquee */
.brand-list.hm-marquee{ display: block; overflow: hidden; white-space: nowrap; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hm-track{ display: inline-flex; gap: 12px; animation: hmMarquee 38s linear infinite; }
.hm-track .brand-pill{ flex: 0 0 auto; }
.hm-marquee:hover .hm-track{ animation-play-state: paused; }
@keyframes hmMarquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* Delivery: orbiting globe */
.hm-orbit{ position: absolute; right: 4%; top: 50%; width: 300px; height: 300px; margin-top: -150px; pointer-events: none; z-index: 1; }
.hm-globe{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 84px; color: var(--accent); opacity: .9; animation: hmGlobe 6s ease-in-out infinite; }
@keyframes hmGlobe{ 0%,100%{ transform: translate(-50%,-50%) scale(1); } 50%{ transform: translate(-50%,-50%) scale(1.07); } }
.hm-ring{ position: absolute; inset: 0; border: 1px dashed rgba(242,183,5,.35); border-radius: 50%; animation: hmSpin 14s linear infinite; }
.hm-ring i{ position: absolute; top: -12px; left: 50%; margin-left: -12px; font-size: 22px; color: var(--amber); background: var(--bg); border-radius: 50%; padding: 2px; }
.hm-ring.r2{ inset: 40px; animation-duration: 9s; animation-direction: reverse; }
.hm-ring.r3{ inset: 80px; animation-duration: 6s; }
.hm-ring.r2 i{ color: var(--accent); } .hm-ring.r1 i{ transform: rotate(0); }
@keyframes hmSpin{ to{ transform: rotate(360deg); } }
@media (max-width: 1100px){ .hm-orbit{ display: none; } }

/* Steps: pulsing numbers and a travelling glow */
.step-num{ display: inline-block; animation: hmNum 3.2s ease-in-out infinite; }
.step:nth-child(2) .step-num{ animation-delay: .6s; } .step:nth-child(3) .step-num{ animation-delay: 1.2s; }
@keyframes hmNum{ 0%,100%{ transform: translateY(0); opacity: .85; } 50%{ transform: translateY(-5px); opacity: 1; text-shadow: 0 0 16px rgba(232,84,44,.55); } }

/* CTA band: light sweep + wiggling WhatsApp icon */
.cta-band{ position: relative; overflow: hidden; }
.cta-band::after{ content: ''; position: absolute; top: 0; bottom: 0; width: 120px; left: -160px; background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-18deg); animation: hmSweep 5s ease-in-out infinite; pointer-events: none; }
@keyframes hmSweep{ 0%,55%{ left: -160px; } 100%{ left: 110%; } }
.cta-band .btn i{ animation: hmWiggle 2.6s ease-in-out infinite; transform-origin: 50% 70%; }
@keyframes hmWiggle{ 0%,70%,100%{ transform: rotate(0); } 75%{ transform: rotate(-16deg); } 82%{ transform: rotate(14deg); } 89%{ transform: rotate(-8deg); } }

/* Testimonial stars twinkle in sequence */
.testi-stars i{ animation: hmTwinkle 2.4s ease-in-out infinite; }
.testi-stars i:nth-child(2){ animation-delay: .2s; } .testi-stars i:nth-child(3){ animation-delay: .4s; } .testi-stars i:nth-child(4){ animation-delay: .6s; } .testi-stars i:nth-child(5){ animation-delay: .8s; }
@keyframes hmTwinkle{ 0%,100%{ transform: scale(1); filter: none; } 45%{ transform: scale(1.3) rotate(12deg); filter: drop-shadow(0 0 6px rgba(242,183,5,.8)); } }

/* Contact rows: icons ring like a phone */
.contact-row i{ transition: transform .3s; }
.contact-row:hover i{ animation: hmWiggle .9s ease-in-out; }

/* Footer: rolling wheel */
.hm-wheel{ position: absolute; bottom: 4px; left: 0; font-size: 18px; color: var(--amber); opacity: .7; animation: hmRoll 16s linear infinite; pointer-events: none; }
@keyframes hmRoll{ from{ left: -30px; transform: rotate(0); } to{ left: 100%; transform: rotate(1440deg); } }

@media (prefers-reduced-motion: reduce){
  .hm-truck,.hm-track,.hm-globe,.hm-ring,.jstep i,.step-num,.cta-band::after,.cta-band .btn i,.testi-stars i,.hm-wheel{ animation: none !important; }
}