/* ============================================================
   THE BATH & BODY SPOT — Animations & Keyframes
   ============================================================ */

/* ── Entrance Animations ─────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.75) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(110%); }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes slideInUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── Loading Screen ──────────────────────────────── */
@keyframes logoReveal {
  0%   { opacity: 0; transform: scale(0.85) translateY(20px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes taglineReveal {
  from { opacity: 0; letter-spacing: 0.4em; }
  to   { opacity: 1; letter-spacing: 0.18em; }
}

@keyframes loadingBar {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ── Petal Fall Animation ────────────────────────── */
@keyframes petalFall {
  0%   { transform: translateY(-20px) rotate(0deg) translateX(0); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg) translateX(60px); opacity: 0; }
}

@keyframes petalSway {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%  { transform: translateX(15px) rotate(5deg); }
  75%  { transform: translateX(-15px) rotate(-5deg); }
}

/* ── Hero Slider ─────────────────────────────────── */
@keyframes sliderFadeIn {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes sliderPanLeft {
  from { transform: scale(1.08) translateX(2%); }
  to   { transform: scale(1.02) translateX(0); }
}

/* ── Announcement Bar Marquee ────────────────────── */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Floating WhatsApp Button ────────────────────── */
@keyframes waPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ── Heart / Wishlist ────────────────────────────── */
@keyframes heartPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.45); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ── Cart Badge ──────────────────────────────────── */
@keyframes badgeBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  70%  { transform: scale(0.85); }
  100% { transform: scale(1); }
}

/* ── Skeleton Shimmer ────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Sparkle / Glitter ───────────────────────────── */
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50%  { opacity: 1; transform: scale(1) rotate(180deg); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.2); }
}

/* ── Gold Shimmer (for promo banners) ────────────── */
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Gentle Float ────────────────────────────────── */
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0px); }
  50%  { transform: translateY(-8px); }
}

/* ── Ripple ──────────────────────────────────────── */
@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}

/* ── Progress Ring ───────────────────────────────── */
@keyframes progressRing {
  from { stroke-dashoffset: 283; }
  to   { stroke-dashoffset: 0; }
}

/* ── Spin ────────────────────────────────────────── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Bounce ──────────────────────────────────────── */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ── Soft Shake ──────────────────────────────────── */
@keyframes softShake {
  0%, 100% { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
}

/* ── Utility Animation Classes ───────────────────── */
.animate-fade-in    { animation: fadeIn var(--ease-slow) forwards; }
.animate-fade-up    { animation: fadeInUp 0.6s var(--ease-slow) forwards; }
.animate-scale-in   { animation: scaleIn 0.4s var(--ease-bounce) forwards; }
.animate-float      { animation: gentleFloat 3s ease-in-out infinite; }
.animate-spin       { animation: spin 1s linear infinite; }
.animate-bounce     { animation: bounce 1.5s ease-in-out infinite; }
.animate-shimmer    { animation: goldShimmer 2.5s linear infinite; }

/* ── Scroll-Reveal (add via JS IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.revealed {
  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; }

/* ── Stagger children ────────────────────────────── */
.stagger > *:nth-child(1) { transition-delay: 0.05s; }
.stagger > *:nth-child(2) { transition-delay: 0.10s; }
.stagger > *:nth-child(3) { transition-delay: 0.15s; }
.stagger > *:nth-child(4) { transition-delay: 0.20s; }
.stagger > *:nth-child(5) { transition-delay: 0.25s; }
.stagger > *:nth-child(6) { transition-delay: 0.30s; }

/* ── Particle / Petal overlay ────────────────────── */
.petal-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-loading);
  overflow: hidden;
}

.petal {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50% 0 50% 50%;
  opacity: 0;
  animation: petalFall linear forwards;
}

/* ── Loading Screen Styles ───────────────────────── */
#loading-screen {
  position: fixed;
  inset: 0;
  background: var(--ivory);
  z-index: var(--z-loading);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loading-screen.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-logo {
  width: 160px;
  height: 160px;
  object-fit: contain;
  animation: logoReveal 0.9s var(--ease-bounce) both;
}

@media (min-width: 768px) {
  .loading-logo {
    width: 320px;
    height: 320px;
  }
}

.loading-tagline {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
  animation: taglineReveal 1.2s 0.4s ease both;
}

.loading-bar-track {
  width: 120px;
  height: 2px;
  background: var(--blush-mid);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--sp-2);
}

.loading-bar-fill {
  height: 100%;
  background: var(--grad-rose-gold);
  border-radius: var(--radius-full);
  animation: loadingBar 1.8s ease-in-out both;
}