/* ------------------------------------------------------------------
   Extras for the MVC version.
   Layout/colours come from tailwind.css (compiled from the React build);
   this file only replaces framer-motion animations and a few helpers.
   ------------------------------------------------------------------ */

html { scroll-behavior: smooth; }

/* Reveal-on-scroll (replaces framer-motion initial/whileInView).
   Per-element tuning via inline CSS variables:
   --tx / --ty : start offset, --sc : start scale, --delay, --dur          */
.reveal {
    opacity: 0;
    transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--sc, 1));
    transition: opacity var(--dur, .8s) ease-out var(--delay, 0s),
                transform var(--dur, .8s) ease-out var(--delay, 0s);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* Floating dots in the stats section */
.float-dot {
    opacity: .2;
    animation-name: agromax-float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes agromax-float {
    0%, 100% { transform: translateY(0);     opacity: .2; }
    50%      { transform: translateY(-20px); opacity: .8; }
}

/* Hide scrollbar on the services carousel */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Team photo hover zoom (was framer-motion whileHover) */
.team-photo { transition: transform .4s; }
.team-photo:hover { transform: scale(1.05); }

/* Team popup (was AnimatePresence) */
.modal-backdrop {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; }
.modal-backdrop .modal-box {
    transform: scale(.8);
    opacity: 0;
    transition: transform .3s, opacity .3s;
}
.modal-backdrop.is-open .modal-box { transform: scale(1); opacity: 1; }