/* ==========================================================================
   Personalise Par - Motion
   All transitions 0.3s ease unless the motion needs a longer settle.
   Everything below is disabled under prefers-reduced-motion.
   ========================================================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes cartBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@keyframes ballTurn {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* --------------------------------------------------------------------------
   Page load sequence - header, then hero content in a short cascade
   -------------------------------------------------------------------------- */
.site-header { animation: fadeUp 0.5s ease both; }
.hero__grid > * { animation: fadeUp 0.6s ease both; }
.hero__grid > *:nth-child(2) { animation-delay: 0.12s; }

/* --------------------------------------------------------------------------
   Scroll reveal - JS adds .is-visible via IntersectionObserver
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Staggered children - set --i on each child in markup or JS */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Micro-interactions
   -------------------------------------------------------------------------- */
.toast { animation: toastIn 0.28s ease both; }
.cart-btn.is-bumped .cart-btn__count { animation: cartBump 0.45s ease; }
.field.is-shaking { animation: shake 0.5s ease; }

.spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

/* Slow idle turn on the hero ball so the preview reads as three-dimensional */
.ball--turning { animation: ballTurn 14s linear infinite; transform-style: preserve-3d; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}