/* ═══════════════════════════════════════════════════════════
   HEYDUDES — ANIMATIONS.CSS
   Pure CSS + GPU-only properties (transform, opacity)
   No layout-triggering properties animated (no width/height/top/left)
   Uses will-change sparingly, removed after animation via JS
   Respects prefers-reduced-motion
═══════════════════════════════════════════════════════════ */

/* ── REDUCED MOTION: kill everything ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════
   1. HERO CANVAS — particle background
══════════════════════════════════════ */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
.hero-section { position: relative; }
.hero-section > * { position: relative; z-index: 1; }

/* ══════════════════════════════════════
   2. HERO TEXT — staggered word reveal
══════════════════════════════════════ */
.hero-animate .hero-badge {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeSlideUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s forwards;
}
.hero-animate h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  animation: fadeSlideUp 0.65s cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero-animate .hero-tagline {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeSlideUp 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero-animate .hero-ctas {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeSlideUp 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero-animate .delivery-pill {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeSlideUp 0.5s cubic-bezier(0.22,1,0.36,1) forwards;
}

/* Hero image entrance */
.hero-animate .hero-image {
  opacity: 0;
  transform: translateX(32px) scale(0.95);
  animation: heroImgIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.25s forwards;
}
@keyframes heroImgIn {
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* ══════════════════════════════════════
   3. SCROLL REVEAL — intersection-based
══════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1),
              transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* stagger children inside a reveal-group */
.reveal-group > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1),
              transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.reveal-group.revealed > *:nth-child(1) { transition-delay: 0s; }
.reveal-group.revealed > *:nth-child(2) { transition-delay: 0.07s; }
.reveal-group.revealed > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-group.revealed > *:nth-child(4) { transition-delay: 0.21s; }
.reveal-group.revealed > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-group.revealed > *:nth-child(6) { transition-delay: 0.35s; }
.reveal-group.revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════
   4. CAKE CARDS — magnetic tilt on hover
══════════════════════════════════════ */
.cake-card {
  transform-style: preserve-3d;
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1),
              border-color 0.2s,
              box-shadow 0.2s;
}
/* JS sets --rx and --ry via style attribute */
.cake-card:hover {
  box-shadow: 0 16px 48px rgba(155,93,229,0.18),
              0 4px 16px rgba(0,0,0,0.3);
}
/* Shimmer highlight layer */
.cake-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.0) 60%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.cake-card:hover::after { opacity: 1; }
.cake-card { position: relative; overflow: hidden; }

/* ══════════════════════════════════════
   5. BUTTONS — ripple + pulse
══════════════════════════════════════ */
.btn-primary, .btn-outline, .btn-gold, .add-cart-btn {
  position: relative;
  overflow: hidden;
}
/* Ripple injected by JS */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  transform: scale(0);
  animation: rippleAnim 0.55s linear forwards;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* CTA primary pulse ring */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(155,93,229,0.5);
  opacity: 0;
  transform: scale(1);
  transition: none;
}
.btn-primary:hover::before {
  animation: pulseRing 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes pulseRing {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.1); opacity: 0; }
}

/* ══════════════════════════════════════
   6. DELIVERY BANNER — moving van
══════════════════════════════════════ */
.van-icon {
  display: inline-block;
  animation: vanDrive 3.5s cubic-bezier(0.45,0,0.55,1) infinite;
}
@keyframes vanDrive {
  0%,100% { transform: translateX(0) rotate(0deg); }
  25%      { transform: translateX(6px) rotate(-1deg); }
  75%      { transform: translateX(-4px) rotate(1deg); }
}

/* ══════════════════════════════════════
   7. COUNTDOWN / LIVE DOT PULSE
══════════════════════════════════════ */
.live-dot {
  animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(46,204,113,0.6); }
  50%     { box-shadow: 0 0 0 6px rgba(46,204,113,0); }
}

/* ══════════════════════════════════════
   8. STEP ICONS — bounce on hover
══════════════════════════════════════ */
.step-item:hover .step-icon {
  animation: stepBounce 0.5s cubic-bezier(0.36,0.07,0.19,0.97);
}
@keyframes stepBounce {
  0%,100% { transform: translateY(0) scale(1); }
  30%     { transform: translateY(-8px) scale(1.05); }
  60%     { transform: translateY(-3px) scale(1.02); }
}

/* ══════════════════════════════════════
   9. SECTION TITLE — underline draw
══════════════════════════════════════ */
.section-title {
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--purple-light));
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(0.22,1,0.36,1);
}
.revealed .section-title::after,
.hd-section.in-view .section-title::after { width: 48px; }

/* ══════════════════════════════════════
  10. PRODUCT IMAGE — zoom + glow on hover
══════════════════════════════════════ */
.cake-thumb img,
.woocommerce ul.products li.product a img {
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.cake-card:hover .cake-thumb img,
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.07);
}

/* ══════════════════════════════════════
  11. FLOATING PARTICLES (hero canvas fallback)
      CSS-only version for browsers without canvas
══════════════════════════════════════ */
.hero-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ══════════════════════════════════════
  12. NAV — active link indicator slide
══════════════════════════════════════ */
.desktop-nav > ul > li > a {
  position: relative;
}
.desktop-nav > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%;
  width: 0; height: 2px;
  background: var(--purple-light);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.25s cubic-bezier(0.22,1,0.36,1);
}
.desktop-nav > ul > li > a:hover::after,
.desktop-nav > ul > li > a.active::after { width: 60%; }

/* ══════════════════════════════════════
  13. CART BUTTON — pop on item add
══════════════════════════════════════ */
.nav-cart-btn.pop {
  animation: cartPop 0.4s cubic-bezier(0.36,0.07,0.19,0.97);
}
@keyframes cartPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3) rotate(-8deg); }
  70%  { transform: scale(0.92) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ══════════════════════════════════════
  14. INSTAGRAM GRID — scale in stagger
══════════════════════════════════════ */
.insta-item {
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1),
              border-color 0.2s;
}
.insta-item:hover {
  transform: scale(1.06);
  border-color: rgba(155,93,229,0.4);
  z-index: 2;
}

/* ══════════════════════════════════════
  15. TESTIMONIAL CARDS — slide in from sides
══════════════════════════════════════ */
.testi-card {
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
              border-color 0.2s,
              box-shadow 0.2s;
}
.testi-card:hover {
  transform: translateY(-4px);
  border-color: rgba(155,93,229,0.3);
  box-shadow: 0 8px 32px rgba(155,93,229,0.1);
}

/* ══════════════════════════════════════
  16. PAGE TRANSITION — fade in on load
══════════════════════════════════════ */
.site-content {
  animation: pageFadeIn 0.4s ease forwards;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════
  17. SKELETON LOADING — product cards
══════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════
  18. SCROLL PROGRESS BAR (top of page)
══════════════════════════════════════ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--purple-light), var(--gold));
  width: 0%;
  z-index: 9999;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ══════════════════════════════════════
  19. GLOBAL KEYFRAMES
══════════════════════════════════════ */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes floatUp {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-14px) rotate(1deg); }
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.3; }
}