/* ==========================================================
   SNZ Electro — Scroll Animations & Micro-Interactions
   ========================================================== */

/* --- Initial hidden states (before IntersectionObserver triggers) --- */
.snz-anim { opacity: 0; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }

.snz-anim-fade-up    { transform: translateY(32px); }
.snz-anim-fade-down  { transform: translateY(-32px); }
.snz-anim-fade-left  { transform: translateX(32px); }
.snz-anim-fade-right { transform: translateX(-32px); }
.snz-anim-fade       { transform: none; }
.snz-anim-scale      { transform: scale(0.95); }
.snz-anim-slide-up   { transform: translateY(48px); }

/* --- Revealed state --- */
.snz-anim.snz-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* --- Stagger delays (applied via data-snz-delay or auto) --- */
.snz-anim[data-snz-delay="1"] { transition-delay: 0.06s; }
.snz-anim[data-snz-delay="2"] { transition-delay: 0.12s; }
.snz-anim[data-snz-delay="3"] { transition-delay: 0.18s; }
.snz-anim[data-snz-delay="4"] { transition-delay: 0.24s; }
.snz-anim[data-snz-delay="5"] { transition-delay: 0.30s; }
.snz-anim[data-snz-delay="6"] { transition-delay: 0.36s; }
.snz-anim[data-snz-delay="7"] { transition-delay: 0.42s; }
.snz-anim[data-snz-delay="8"] { transition-delay: 0.48s; }

/* --- Hover micro-interactions --- */
.snz-hover-lift { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease; }
.snz-hover-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -4px rgba(10, 45, 92, 0.12); }

.snz-hover-glow { transition: box-shadow 0.25s ease; }
.snz-hover-glow:hover { box-shadow: 0 0 0 3px rgba(251, 122, 36, 0.25), 0 8px 16px -4px rgba(251, 122, 36, 0.15); }

.snz-hover-scale { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.snz-hover-scale:hover { transform: scale(1.03); }

.snz-hover-underline { position: relative; }
.snz-hover-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--brand-accent); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.snz-hover-underline:hover::after { width: 100%; }

/* --- Button press effect --- */
.snz-btn-press { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.snz-btn-press:active { transform: scale(0.97); box-shadow: none; }

/* --- Image zoom on card hover --- */
.snz-img-zoom { overflow: hidden; }
.snz-img-zoom img { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.snz-img-zoom:hover img { transform: scale(1.08); }

/* --- Orange pulse for CTA --- */
@keyframes snz-pulse-orange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 122, 36, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(251, 122, 36, 0); }
}
.snz-pulse-cta { animation: snz-pulse-orange 2s infinite; }

/* --- Floating entrance keyframe --- */
@keyframes snz-float-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Skeleton shimmer --- */
@keyframes snz-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.snz-skeleton { background: linear-gradient(90deg, var(--surface-muted) 25%, var(--border) 50%, var(--surface-muted) 75%); background-size: 200% 100%; animation: snz-shimmer 1.5s infinite; border-radius: var(--radius); }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .snz-anim { opacity: 1; transform: none; transition: none; }
  .snz-hover-lift, .snz-hover-scale, .snz-hover-glow, .snz-btn-press { transition: none; }
  .snz-img-zoom img { transition: none; }
  .snz-hover-underline::after { transition: none; }
  .snz-pulse-cta { animation: none; }
  .snz-skeleton { animation: none; }
}

/* --- cursor-pointer utility --- */
a, button, [role="button"], .snz-btn, .snz-btn-primary, .snz-btn-white, .snz-btn-outline-white, .snz-btn-blue, .snz-cart-btn, .snz-hero-card, .snz-cat-card, .snz-product-card, .snz-collection-card, .snz-inspiration-card, .snz-link-arrow, .snz-link-underline { cursor: pointer; }