/* ==============================================
   KODOMART ANIMATIONS CSS
   ============================================== */

/* Reveal on scroll */
.reveal-item{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease}
.reveal-item.is-revealed{opacity:1;transform:translateY(0)}
.reveal-section .reveal-item:nth-child(1){transition-delay:0ms}
.reveal-section .reveal-item:nth-child(2){transition-delay:80ms}
.reveal-section .reveal-item:nth-child(3){transition-delay:160ms}
.reveal-section .reveal-item:nth-child(4){transition-delay:240ms}
.reveal-section .reveal-item:nth-child(5){transition-delay:320ms}
.reveal-section .reveal-item:nth-child(6){transition-delay:400ms}
.reveal-section .reveal-item:nth-child(n+7){transition-delay:480ms}

/* Hero text entrance */
.hero-slide.is-active .hero-slide__eyebrow{animation:fadeInUp 0.7s ease 0.1s both}
.hero-slide.is-active .hero-slide__badge{animation:fadeInUp 0.7s ease 0s both}
.hero-slide.is-active .hero-slide__title{animation:fadeInUp 0.7s ease 0.2s both}
.hero-slide.is-active .hero-slide__sub{animation:fadeInUp 0.7s ease 0.35s both}
.hero-slide.is-active .hero-slide__actions{animation:fadeInUp 0.7s ease 0.5s both}
.hero-slide.is-active .hero-slide__visual{animation:fadeIn 1s ease 0.4s both}

/* Sticky header scroll shrink */
.site-header.is-scrolled .header-main__inner{height:60px;transition:height 0.3s ease}
.site-header.is-scrolled .header-topbar{display:none}

/* Slide-in sidebar */
@keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.shop-sidebar.is-open{animation:slideInLeft 0.35s ease}

/* Product card quick-action slide */
.product-card__actions{will-change:transform}

/* Hamburger open state */
.mobile-menu-toggle.is-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle.is-open .hamburger span:nth-child(2){opacity:0;transform:scaleX(0)}
.mobile-menu-toggle.is-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Loading spinner for AJAX add to cart */
.loading::after{content:'';display:inline-block;width:14px;height:14px;border:2px solid rgba(0,0,0,0.3);border-top-color:#000;border-radius:50%;animation:spin 0.6s linear infinite;margin-left:8px;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* Smooth mobile sub-menu reveal */
.mobile-sub-menu{max-height:0;overflow:hidden;transition:max-height 0.3s ease}
.mobile-sub-menu.is-open{max-height:600px}

/* Page transition overlay */
.page-transition{position:fixed;inset:0;background:var(--color-black);z-index:9999;pointer-events:none;opacity:0;transition:opacity 0.3s ease}
.page-transition.is-active{opacity:1}

/* Prefers reduced motion */
@media(prefers-reduced-motion:reduce){
  .reveal-item,.hero-slide.is-active .hero-slide__eyebrow,.hero-slide.is-active .hero-slide__badge,.hero-slide.is-active .hero-slide__title,.hero-slide.is-active .hero-slide__sub,.hero-slide.is-active .hero-slide__actions,.hero-slide.is-active .hero-slide__visual{animation:none;transition:none;opacity:1;transform:none}
  .hero-graphic-circle--1,.hero-graphic-circle--2{animation:none}
  .product-card:hover .product-card__inner{transform:none}
}