/* ============================================
   US Surplus Recovery Inc - Animations
   ============================================ */

/* --- Scroll-triggered Animations --- */
.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
.animate-on-scroll.delay-1 { transition-delay: .1s; }
.animate-on-scroll.delay-2 { transition-delay: .2s; }
.animate-on-scroll.delay-3 { transition-delay: .3s; }
.animate-on-scroll.delay-4 { transition-delay: .4s; }

/* --- Fade In Variations --- */
.fade-in { opacity: 0; transition: opacity .8s ease; }
.fade-in.visible { opacity: 1; }
.fade-in-left { opacity: 0; transform: translateX(-30px); transition: opacity .8s ease, transform .8s ease; }
.fade-in-left.visible { opacity: 1; transform: translateX(0); }
.fade-in-right { opacity: 0; transform: translateX(30px); transition: opacity .8s ease, transform .8s ease; }
.fade-in-right.visible { opacity: 1; transform: translateX(0); }
.scale-in { opacity: 0; transform: scale(.9); transition: opacity .8s ease, transform .8s ease; }
.scale-in.visible { opacity: 1; transform: scale(1); }

/* --- Star Decorations (floating sparkles) --- */
@keyframes float-star-1 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(3px, -5px) rotate(5deg); } 50% { transform: translate(-2px, -8px) rotate(-3deg); } 75% { transform: translate(4px, -3px) rotate(2deg); } }
@keyframes float-star-2 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-4px, -6px) rotate(-4deg); } 50% { transform: translate(3px, -10px) rotate(6deg); } 75% { transform: translate(-2px, -4px) rotate(-2deg); } }
@keyframes float-star-3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, -7px); } }
.star-wrap { width: 194px; height: 205px; position: relative; }
.star-wrap img { position: absolute; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.star-wrap img:nth-child(odd) { animation-name: float-star-1; }
.star-wrap img:nth-child(even) { animation-name: float-star-2; }
.star-wrap img:nth-child(3n) { animation-name: float-star-3; animation-duration: 5s; }

/* --- Partner Circle Spin --- */
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.partner-circle-text { animation: spin-slow 20s linear infinite; }

/* --- Counter Animation (handled via JS, this is the visual pulse) --- */
@keyframes counter-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.counter-animated { animation: counter-pulse .5s ease; }

/* --- Marquee (Partner Logos) --- */
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: marquee-scroll 30s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

/* --- Testimonial Slide Transitions --- */
.testimonial-slide { opacity: 0; transition: opacity .5s ease; position: absolute; top: 0; left: 0; width: 100%; }
.testimonial-slide.active { opacity: 1; position: relative; }

/* --- FAQ Accordion --- */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-item.open .faq-answer { max-height: 500px; }

/* --- Button Hover Effects --- */
.btn-primary::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.1); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; z-index: -1; }
.btn-primary:hover::before { transform: scaleX(1); }

/* --- Navbar Scroll Transform --- */
.navbar { transition: box-shadow .3s ease, padding .3s ease; }
.navbar.scrolled { padding: 12px 0; }

/* --- Smooth Height Transition for Mobile Menu --- */
.mobile-menu { transition: right .3s cubic-bezier(0.4, 0, 0.2, 1); }

/* --- Skeleton Loading (for images) --- */
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200px 100%; animation: shimmer 1.5s infinite; }

/* --- Form Step Transitions --- */
.form-panel { opacity: 0; transform: translateX(20px); transition: opacity .3s ease, transform .3s ease; }
.form-panel.active { opacity: 1; transform: translateX(0); }

/* --- Scroll to Top Button --- */
.scroll-top { transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background .3s ease; }