/* =========================================================
   Cake It Until You Make It — Animations
   ========================================================= */

@keyframes floatCake {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes floatHeart {
  0% {
    transform: translateY(20px) rotate(0deg);
    opacity: 0;
  }
  15% { opacity: 0.28; }
  85% { opacity: 0.18; }
  100% {
    transform: translateY(-100vh) rotate(18deg);
    opacity: 0;
  }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(4deg); }
}

@keyframes clipReveal {
  from { clip-path: inset(0 40% 0 0); opacity: 0.7; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes drawScript {
  from {
    opacity: 0;
    letter-spacing: 0.08em;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    letter-spacing: normal;
    transform: translateY(0);
  }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.75s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Hero entrance */
.hero.is-ready .hero__heading {
  animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero.is-ready .hero__script {
  animation: drawScript 1s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero.is-ready .hero__text {
  animation: fadeUp 0.85s 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero.is-ready .hero__actions .btn:nth-child(1) {
  animation: fadeUp 0.7s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero.is-ready .hero__actions .btn:nth-child(2) {
  animation: fadeUp 0.7s 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero.is-ready .hero__media {
  animation: fadeIn 1.1s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero.is-ready .hero-feature {
  animation: scaleIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero.is-ready .hero-feature:nth-child(1) { animation-delay: 0.7s; }
.hero.is-ready .hero-feature:nth-child(2) { animation-delay: 0.82s; }
.hero.is-ready .hero-feature:nth-child(3) { animation-delay: 0.94s; }

/* Stagger category cards */
.categories-grid .category-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s, box-shadow 0.4s, translate 0.4s;
}
.categories-grid.is-visible .category-card {
  opacity: 1;
  transform: translateY(0);
}
.categories-grid.is-visible .category-card:nth-child(1) { transition-delay: 0.05s; }
.categories-grid.is-visible .category-card:nth-child(2) { transition-delay: 0.12s; }
.categories-grid.is-visible .category-card:nth-child(3) { transition-delay: 0.19s; }
.categories-grid.is-visible .category-card:nth-child(4) { transition-delay: 0.26s; }
.categories-grid.is-visible .category-card:nth-child(5) { transition-delay: 0.33s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .categories-grid .category-card,
  .hero.is-ready .hero__heading,
  .hero.is-ready .hero__script,
  .hero.is-ready .hero__text,
  .hero.is-ready .hero__actions .btn,
  .hero.is-ready .hero__media,
  .hero.is-ready .hero-feature {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}