/* css/animations.css — UK MUSCLE MART Cinematic Motion System */

:root {
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ease-in-out-smooth: cubic-bezier(0.42, 0, 0.58, 1);
}

/* ==========================================================================
   1. Floating & Ambient Motion Keyframes
   ========================================================================== */
@keyframes heroFloat {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-16px) rotate(1.5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes heroFloatOpposite {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(14px) rotate(-1.5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes badgeFloat {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes redAmbientPulse {
  0% {
    opacity: 0.15;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.08);
  }
  100% {
    opacity: 0.15;
    transform: scale(1);
  }
}

@keyframes shimmerSweep {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.5);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(230, 57, 70, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);
  }
}

@keyframes whatsappPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* ==========================================================================
   2. Motion Utilities
   ========================================================================== */
.motion-float-slow {
  animation: heroFloat 6s ease-in-out infinite;
  will-change: transform;
}

.motion-float-reverse {
  animation: heroFloatOpposite 6.5s ease-in-out infinite;
  will-change: transform;
}

.motion-badge-1 {
  animation: badgeFloat 5s ease-in-out infinite;
}

.motion-badge-2 {
  animation: badgeFloat 5.8s ease-in-out infinite 1s;
}

.motion-badge-3 {
  animation: badgeFloat 6.2s ease-in-out infinite 1.8s;
}

.ambient-glow-pulse {
  animation: redAmbientPulse 8s ease-in-out infinite;
}

/* ==========================================================================
   3. Scroll Reveal Engine (Blur-to-sharp & Spring Easing)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  filter: blur(6px);
  transition: opacity 0.8s var(--ease-spring), transform 0.8s var(--ease-spring), filter 0.8s var(--ease-spring);
  will-change: opacity, transform, filter;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px) scale(0.97);
  filter: blur(6px);
  transition: opacity 0.85s var(--ease-spring), transform 0.85s var(--ease-spring), filter 0.85s var(--ease-spring);
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0px);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px) scale(0.97);
  filter: blur(6px);
  transition: opacity 0.85s var(--ease-spring), transform 0.85s var(--ease-spring), filter 0.85s var(--ease-spring);
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0px);
}

/* Stagger Delays */
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }
.stagger-5 { transition-delay: 0.40s; }

/* ==========================================================================
   4. Micro-Interactions (Buttons, Cards, Links)
   ========================================================================== */
.btn {
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease-spring), background-color 0.25s var(--ease-spring), border-color 0.25s var(--ease-spring);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transition: left 0.6s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn:hover {
  transform: translateY(-2.5px) scale(1.02);
}

.btn:active {
  transform: translateY(0px) scale(0.98);
}

.btn-primary:hover {
  box-shadow: 0 8px 24px rgba(230, 57, 70, 0.4), 0 0 12px rgba(230, 57, 70, 0.25);
}

.btn-whatsapp {
  animation: whatsappPulse 3s infinite 2s;
}

.btn-whatsapp:hover {
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
}

/* Interactive Card Tilt & Lift */
.interactive-card {
  transition: transform 0.35s var(--ease-spring), border-color 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring);
  will-change: transform;
}

.interactive-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(230, 57, 70, 0.5);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(230, 57, 70, 0.2);
}

/* ==========================================================================
   5. Hero Subtle Center-Outward Energy Sparks
   ========================================================================== */
.hero-sparks-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.hero-spark {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 77, 90, 0.75) 0%, rgba(220, 45, 60, 0.45) 60%, transparent 100%);
  box-shadow: 0 0 4px 1px rgba(220, 45, 60, 0.3);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Sparks flowing outward LEFT from center toward left flexed arm */
.hero-spark.s1  { width: 1.5px; height: 1.5px; top: 28%; left: 49%; animation: sparkOutwardLeft1 11s ease-in-out infinite 0.2s; }
.hero-spark.s2  { width: 2px;   height: 2px;   top: 32%; left: 48%; animation: sparkOutwardLeft2 13s ease-in-out infinite 1.8s; }
.hero-spark.s3  { width: 1.5px; height: 1.5px; top: 24%; left: 50%; animation: sparkOutwardLeft3 10s ease-in-out infinite 3.5s; }
.hero-spark.s4  { width: 2.5px; height: 2.5px; top: 36%; left: 47%; animation: sparkOutwardLeft1 14s ease-in-out infinite 0.9s; }
.hero-spark.s5  { width: 1.5px; height: 1.5px; top: 30%; left: 51%; animation: sparkOutwardLeft2 12s ease-in-out infinite 2.4s; }
.hero-spark.s6  { width: 2px;   height: 2px;   top: 26%; left: 49%; animation: sparkOutwardLeft3 15s ease-in-out infinite 4.1s; }
.hero-spark.s7  { width: 1.5px; height: 1.5px; top: 34%; left: 48%; animation: sparkOutwardLeft1 11s ease-in-out infinite 1.3s; }
.hero-spark.s8  { width: 2px;   height: 2px;   top: 22%; left: 50%; animation: sparkOutwardLeft2 13s ease-in-out infinite 3.0s; }
.hero-spark.s9  { width: 1.5px; height: 1.5px; top: 38%; left: 47%; animation: sparkOutwardLeft3 16s ease-in-out infinite 2.2s; }
.hero-spark.s10 { width: 2.5px; height: 2.5px; top: 29%; left: 49%; animation: sparkOutwardLeft1 12s ease-in-out infinite 4.7s; }

/* Sparks flowing outward RIGHT from center toward right flexed arm */
.hero-spark.s11 { width: 1.5px; height: 1.5px; top: 28%; left: 51%; animation: sparkOutwardRight1 11s ease-in-out infinite 0.5s; }
.hero-spark.s12 { width: 2px;   height: 2px;   top: 32%; left: 52%; animation: sparkOutwardRight2 13s ease-in-out infinite 2.1s; }
.hero-spark.s13 { width: 1.5px; height: 1.5px; top: 24%; left: 50%; animation: sparkOutwardRight3 10s ease-in-out infinite 3.8s; }
.hero-spark.s14 { width: 2.5px; height: 2.5px; top: 36%; left: 53%; animation: sparkOutwardRight1 14s ease-in-out infinite 1.2s; }
.hero-spark.s15 { width: 1.5px; height: 1.5px; top: 30%; left: 49%; animation: sparkOutwardRight2 12s ease-in-out infinite 2.7s; }
.hero-spark.s16 { width: 2px;   height: 2px;   top: 26%; left: 51%; animation: sparkOutwardRight3 15s ease-in-out infinite 4.4s; }
.hero-spark.s17 { width: 1.5px; height: 1.5px; top: 34%; left: 52%; animation: sparkOutwardRight1 11s ease-in-out infinite 1.6s; }
.hero-spark.s18 { width: 2px;   height: 2px;   top: 22%; left: 50%; animation: sparkOutwardRight2 13s ease-in-out infinite 3.3s; }
.hero-spark.s19 { width: 1.5px; height: 1.5px; top: 38%; left: 53%; animation: sparkOutwardRight3 16s ease-in-out infinite 2.5s; }
.hero-spark.s20 { width: 2.5px; height: 2.5px; top: 29%; left: 51%; animation: sparkOutwardRight1 12s ease-in-out infinite 5.0s; }

/* Outward Left Trajectory Keyframes */
@keyframes sparkOutwardLeft1 {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) scale(0.6);
  }
  20% {
    opacity: 0.28;
  }
  50% {
    opacity: 0.35;
    transform: translate(-140px, -15px) scale(1.0);
  }
  75% {
    opacity: 0.18;
  }
  100% {
    opacity: 0;
    transform: translate(-280px, -30px) scale(0.5);
  }
}

@keyframes sparkOutwardLeft2 {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) scale(0.7);
  }
  25% {
    opacity: 0.30;
  }
  55% {
    opacity: 0.35;
    transform: translate(-160px, 12px) scale(1.05);
  }
  80% {
    opacity: 0.15;
  }
  100% {
    opacity: 0;
    transform: translate(-310px, 22px) scale(0.5);
  }
}

@keyframes sparkOutwardLeft3 {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) scale(0.6);
  }
  20% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.32;
    transform: translate(-120px, -6px) scale(0.95);
  }
  75% {
    opacity: 0.16;
  }
  100% {
    opacity: 0;
    transform: translate(-250px, -14px) scale(0.45);
  }
}

/* Outward Right Trajectory Keyframes */
@keyframes sparkOutwardRight1 {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) scale(0.6);
  }
  20% {
    opacity: 0.28;
  }
  50% {
    opacity: 0.35;
    transform: translate(140px, -15px) scale(1.0);
  }
  75% {
    opacity: 0.18;
  }
  100% {
    opacity: 0;
    transform: translate(280px, -30px) scale(0.5);
  }
}

@keyframes sparkOutwardRight2 {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) scale(0.7);
  }
  25% {
    opacity: 0.30;
  }
  55% {
    opacity: 0.35;
    transform: translate(160px, 12px) scale(1.05);
  }
  80% {
    opacity: 0.15;
  }
  100% {
    opacity: 0;
    transform: translate(310px, 22px) scale(0.5);
  }
}

@keyframes sparkOutwardRight3 {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) scale(0.6);
  }
  20% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.32;
    transform: translate(120px, -6px) scale(0.95);
  }
  75% {
    opacity: 0.16;
  }
  100% {
    opacity: 0;
    transform: translate(250px, -14px) scale(0.45);
  }
}

/* Responsive Particle Throttling */
@media (max-width: 1024px) {
  .hero-spark.s6,
  .hero-spark.s7,
  .hero-spark.s8,
  .hero-spark.s9,
  .hero-spark.s10,
  .hero-spark.s16,
  .hero-spark.s17,
  .hero-spark.s18,
  .hero-spark.s19,
  .hero-spark.s20 {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hero-spark.s3,
  .hero-spark.s4,
  .hero-spark.s5,
  .hero-spark.s13,
  .hero-spark.s14,
  .hero-spark.s15 {
    display: none !important;
  }
  .hero-spark {
    box-shadow: 0 0 3px 1px rgba(220, 45, 60, 0.25);
  }
}

/* ==========================================================================
   6. Reduced Motion Override
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  .hero-sparks-layer,
  .hero-spark {
    animation: none !important;
    display: none !important;
  }
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}