/* custom.css - animations, marquee, hover effects, responsive tweaks */

/* Basic container */
.site-content { max-width: var(--container-width); margin: 0 auto; padding: 1rem; }

/* Image hover: scale + subtle shadow */
img.hover-zoom { transition: transform 0.6s ease, box-shadow 0.6s ease; will-change: transform; }
img.hover-zoom:hover { transform: scale(1.05); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }

/* Continuous marquee-like image animation container */
.marquee-wrap { overflow: hidden; position: relative; height: 120px; }
.marquee-track { display: flex; gap: 1rem; width: max-content; animation: marquee 14s linear infinite; }
.marquee-item img { display:block; height: 100px; }

/* Pause on hover */
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* Keyframes */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); } /* duplicated content recommended for seamless */
}

/* On-scroll animation helper classes */
.os-anim { opacity: 0; transform: translateX(40px); transition: opacity 0.6s ease, transform 0.8s cubic-bezier(.2,.9,.2,1); }
.os-anim.in-view { opacity: 1; transform: translateX(0); }

/* Responsive tweaks */
@media (max-width: 768px) {
  .marquee-wrap { height: 80px; }
  .marquee-item img { height: 70px; }
}