/* stitchfly animations · v1 · 2026-04-26
   Use sparingly. Respect prefers-reduced-motion. */

/* Fade-in-up (Intersection Observer toggles .is-visible) */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.fade-in-up.is-visible { opacity: 1; transform: translateY(0); }

/* Fade-in (no Y shift) */
.fade-in { opacity: 0; transition: opacity .5s ease; }
.fade-in.is-visible { opacity: 1; }

/* Skeleton loader (gray pulse blocks) */
.sf-skeleton {
  background: linear-gradient(90deg, #f0f0f0 0%, #e8e8e8 50%, #f0f0f0 100%);
  background-size: 200% 100%;
  animation: sfSkeleton 1.5s ease-in-out infinite;
  border-radius: 8px;
  display: block;
}
@keyframes sfSkeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.sf-skeleton-card {
  height: 220px;
  margin-bottom: 14px;
}
.sf-skeleton-line { height: 14px; margin-bottom: 8px; }
.sf-skeleton-line-short { width: 60%; }
.sf-skeleton-line-mid   { width: 80%; }

/* 4-dot orbiting loader (brand-spójny) */
.sf-loader {
  display: inline-flex;
  width: 48px; height: 48px;
  position: relative;
}
.sf-loader span {
  position: absolute;
  width: 10px; height: 10px;
  background: #c9a84c;
  border-radius: 50%;
  animation: sfOrbit 1.4s cubic-bezier(.5,0,.5,1) infinite;
}
.sf-loader span:nth-child(1) { animation-delay: 0s;     top: 0; left: 50%; }
.sf-loader span:nth-child(2) { animation-delay: -0.35s; top: 50%; right: 0; }
.sf-loader span:nth-child(3) { animation-delay: -0.7s;  bottom: 0; left: 50%; }
.sf-loader span:nth-child(4) { animation-delay: -1.05s; top: 50%; left: 0; }
@keyframes sfOrbit {
  0%, 80%, 100% { transform: scale(0.6); opacity: .3; }
  40%           { transform: scale(1.2); opacity: 1;  }
}

/* Number counter (handled by animations.js) */
.sf-counter { font-variant-numeric: tabular-nums; transition: color .3s; }

/* Hero parallax (CSS only — translateY based on data-speed in JS) */
.sf-parallax-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  will-change: transform;
  transform: translateZ(0);
}

/* Hover cards (lift + shadow) */
.sf-card-hover {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.sf-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .12);
}

/* Button ripple effect (pure CSS, ::after triggered on :active) */
.sf-ripple {
  position: relative;
  overflow: hidden;
}
.sf-ripple::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 60%);
  opacity: 0;
  transform: scale(0);
  transition: transform .5s ease, opacity .8s ease;
  pointer-events: none;
}
.sf-ripple:active::after {
  opacity: 1;
  transform: scale(2);
  transition: 0s;
}

/* Form field focus animation (label float) */
.sf-floating-label {
  position: relative;
}
.sf-floating-label input {
  width: 100%;
  padding: 18px 14px 8px;
  border: 1px solid #d8d8de;
  border-radius: 10px;
  font-size: 15px;
  background: transparent;
  transition: border .2s;
}
.sf-floating-label label {
  position: absolute;
  top: 50%; left: 14px;
  transform: translateY(-50%);
  color: #888;
  font-size: 14px;
  pointer-events: none;
  transition: top .2s, font-size .2s, color .2s;
  background: #fff; padding: 0 4px;
}
.sf-floating-label input:focus + label,
.sf-floating-label input:not(:placeholder-shown) + label {
  top: 0;
  font-size: 11px;
  color: #c9a84c;
}

/* Bounce-in (success states) */
.sf-bounce-in { animation: sfBounce .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sfBounce {
  0%   { opacity: 0; transform: scale(.7); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* Heart pulse (wishlist add) */
.sf-heart-pulse { animation: sfHeart .5s cubic-bezier(.2,.8,.2,1); }
@keyframes sfHeart {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); }
  60%  { transform: scale(.9); }
  100% { transform: scale(1); }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up, .fade-in {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .sf-skeleton, .sf-loader span, .dot-pulse, .sf-counter, .sf-bounce-in, .sf-heart-pulse {
    animation: none !important;
  }
}