/* =================================================================== */
/*    PARTIAL: ANIMATIONS                                              */
/*    Contains: All @keyframes definitions, transitions, and class     */
/*    definitions for site-wide animations and effects.                */
/* =================================================================== */

/* --- Page Transition Fade Animation --- */
@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* --- Project Item Scale-Up Animation --- */
@keyframes scaleUp {
    0% { transform: scale(0.5); }
    100% { transform: scale(1); }
}

/* --- NEW: Cart Icon Arrival Bounce --- */
@keyframes cartBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.cart-icon-bounce {
  animation: cartBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- NEW: Success Pulse Animation (Add to Cart Feedback) --- */
@keyframes successPulse {
    0% { box-shadow: 0 0 0 0 hsla(45, 100%, 72%, 0.7); }
    70% { box-shadow: 0 0 0 20px hsla(45, 100%, 72%, 0); }
    100% { box-shadow: 0 0 0 0 hsla(45, 100%, 72%, 0); }
}

.form-btn.success {
    animation: successPulse 0.6s ease-out;
    background: var(--bg-gradient-yellow1) !important;
}

/* --- NEW: Flying Item Style --- */
.flying-product-clone {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  object-fit: cover;
  border: 2px solid var(--orange-yellow-crayola);
}

/* --- Icon Animations --- */
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

@keyframes bob {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* --- Marquee Scrolling Animation --- */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- Applying Animations and Effects --- */

/* Contact Icon Hover */
.contact-item:hover .icon-box {
  animation: pulse 1s ease-in-out;
}

/* Card Block Hover Animation */
.service-item,
.testimonials-item .content-card {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.service-item:hover,
.testimonials-item .content-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow4);
}

/* Avatar Glow Animation */
.avatar-box:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px 5px var(--accent-glow-color);
}


/* --- Page Transition (Swup) Animations --- */
#swup {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

html.is-leaving #swup {
  opacity: 0;
  transform: translateY(-20px);
}

/* --- On-Scroll Reveal Animations --- */
.fade-up {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.6s ease-out;
  transition-delay: var(--delay, 0ms);
}

.fade-up.in-view {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

/* --- Marquee Scroller Logic --- */
.autoscroll-enabled.list-wrapper {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.autoscroll-enabled .marquee {
  width: max-content;
  flex-wrap: nowrap;
  animation: marquee var(--marquee-duration, 40s) linear infinite;
  overflow-x: hidden;
}

.autoscroll-enabled.list-wrapper:hover .marquee {
  animation-play-state: paused;
}

.marquee .clients-item,
.marquee .testimonials-item {
  flex-shrink: 0;
  padding: 0 20px;
}

.marquee .clients-item { min-width: 150px; }
.marquee .testimonials-item { min-width: 300px; }

.testimonials-item { display: flex; align-items: stretch; }
.testimonials-item .content-card { width: 100%; }

/* Ensure marquee items are flexible */
.marquee .clients-item img {
    transition: transform 0.3s ease;
}

/* Remove filter for gallery items specifically */
.bottom-box .marquee .clients-item img {
    filter: none !important;
}

.marquee .clients-item:hover img {
    transform: scale(1.05);
    border-color: var(--orange-yellow-crayola) !important;
}

/* --- Theme-Aware "Stellar" Hover Effects --- */
.project-item > a,
.blog-post-item > a,
.form-btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-item > a:hover,
.blog-post-item > a:hover,
.form-btn:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px -5px var(--accent-glow-color);
}

.form-btn:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px -5px var(--accent-glow-color);
  background: var(--bg-gradient-yellow1);
}
.form-btn:hover::before {
  background: var(--bg-gradient-yellow2);
}

.form-btn:disabled:hover {
  transform: translateY(0);
  box-shadow: none;
  background: var(--border-gradient-onyx);
}
.form-btn:disabled:hover::before {
    background: var(--bg-gradient-jet);
}

.social-item .social-link {
  transition: var(--transition1);
}

.social-item .social-link:hover {
  color: var(--white1);
  transform: scale(1.15);
}

.theme-toggle-btn .sun-icon,
.theme-toggle-btn .moon-icon {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.theme-toggle-btn:hover .sun-icon,
.theme-toggle-btn:hover .moon-icon {
  transform: rotate(45deg) scale(1.1);
}

/* --- High-End Variant Transition --- */
/* Target the specific modal image and ensure no other styles override the timing */
.project-modal-img-wrapper img[data-catalog-detail-img] {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                filter 0.3s ease !important;
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
}

/* The "Hidden" state used during the swap */
.variant-img-transitioning {
    opacity: 0 !important;
    transform: scale(0.95) !important;
    filter: blur(8px) !important;
}

/* Custom Green State for Pay Now Buttons */
.form-btn.success:hover {
    background: #4cae4c !important;
    box-shadow: 0 10px 25px -5px rgba(92, 184, 92, 0.4);
    transform: translateY(-4px);
}