/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Page fade-in on load */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: pageFadeIn 350ms ease-out both;
}

/* Hero text entrance */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-anim {
  opacity: 0;
  animation: heroUp 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-anim-1 { animation-delay: 250ms; }
.hero-anim-2 { animation-delay: 420ms; }
.hero-anim-3 { animation-delay: 580ms; }

/* Scroll-triggered reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Product card stagger (pure CSS — animates on DOM insertion) */
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
#shopify-products .product-card {
  animation: cardReveal 450ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
#shopify-products .product-card:nth-child(1) { animation-delay: 0ms; }
#shopify-products .product-card:nth-child(2) { animation-delay: 80ms; }
#shopify-products .product-card:nth-child(3) { animation-delay: 160ms; }
#shopify-products .product-card:nth-child(4) { animation-delay: 240ms; }

/* Modal box scale-in entrance */
.shopify-modal-box {
  transform: scale(0.95);
  opacity: 0;
  transition:
    transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 220ms ease;
}
#shopify-modal.open .shopify-modal-box {
  transform: scale(1);
  opacity: 1;
}

/* FAQ chevron — bounce easing */
details .group-open\:rotate-180 {
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  transition-duration: 350ms !important;
}

/* Consistent hover color transition for footer links */
footer a {
  transition: color 200ms ease;
}

/* Bottom nav icon hover */
nav.fixed a {
  transition: color 200ms ease;
}

/* Blur-up placeholder für Produktbilder */
.product-card-img {
  transition: filter 500ms ease, transform 0.5s ease;
}
.product-card-img.img-blur {
  filter: blur(12px);
  transform: scale(1.04);
}

/* prefers-reduced-motion: alle Animationen deaktivieren */
@media (prefers-reduced-motion: reduce) {
  body { animation: none !important; opacity: 1 !important; }
  .hero-anim { animation: none !important; opacity: 1 !important; transform: none !important; }
  .reveal, .reveal.visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  .product-card-img { transition: none !important; filter: none !important; }
  #shopify-products .product-card { animation: none !important; opacity: 1 !important; }
  .shopify-modal-box { transform: none !important; opacity: 1 !important; transition: none !important; }
}