/* ============================================
   MEMO BEAUTY PARLOUR — Animation Keyframes
   Premium Micro-Animations & Effects
   ============================================ */

/* ── Preloader ── */
@keyframes preloaderFill {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

/* ── Hero ── */
@keyframes heroZoom {
  0% { transform: scale(1.1); }
  100% { transform: scale(1.2); }
}

@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);
  }
}

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

/* ── Pulse ── */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(183, 110, 121, 0.4);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(183, 110, 121, 0);
  }
}

/* ── Scroll Wheel ── */
@keyframes scrollWheel {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
}

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

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-10px) rotate(1deg); }
  66% { transform: translateY(5px) rotate(-1deg); }
}

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

/* ── Scale In ── */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Particle Float ── */
@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(100vh) translateX(0) scale(0);
  }
  10% {
    opacity: 1;
    transform: translateY(80vh) translateX(20px) scale(1);
  }
  90% {
    opacity: 0.5;
    transform: translateY(10vh) translateX(-30px) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateY(0vh) translateX(10px) scale(0);
  }
}

/* ── Glow Pulse ── */
@keyframes glowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(183, 110, 121, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(183, 110, 121, 0.6));
  }
}

/* ── Border Glow ── */
@keyframes borderGlow {
  0%, 100% {
    border-color: rgba(183, 110, 121, 0.2);
    box-shadow: 0 0 5px rgba(183, 110, 121, 0.1);
  }
  50% {
    border-color: rgba(183, 110, 121, 0.5);
    box-shadow: 0 0 20px rgba(183, 110, 121, 0.2);
  }
}

/* ── Text Reveal ── */
@keyframes textReveal {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* ── Line Draw ── */
@keyframes lineDraw {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* ── Confetti ── */
@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translateY(-100px) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(400px) rotate(720deg) scale(0.3);
  }
}

/* ── Counter ── */
@keyframes countUp {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Magnetic Hover ── */
@keyframes magneticHover {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(2px, -2px); }
  50% { transform: translate(-1px, 2px); }
  75% { transform: translate(1px, 1px); }
}

/* ── Gradient Move ── */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

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

/* ── Loading Dots ── */
@keyframes loadingDots {
  0%, 20% { opacity: 0; }
  50% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

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

/* ── Decorative Shapes ── */
.deco-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(183, 110, 121, 0.1);
  pointer-events: none;
}

.deco-circle-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  right: -150px;
  animation: floatSlow 15s ease-in-out infinite;
}

.deco-circle-2 {
  width: 200px;
  height: 200px;
  bottom: 20%;
  left: -100px;
  animation: floatSlow 12s ease-in-out infinite 2s;
}

.deco-circle-3 {
  width: 150px;
  height: 150px;
  top: 40%;
  left: 10%;
  animation: floatSlow 18s ease-in-out infinite 5s;
}

/* ── Particle Styles ── */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--rose-gold);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

.particle-1 { animation: particleFloat 8s linear infinite; left: 10%; animation-delay: 0s; }
.particle-2 { animation: particleFloat 10s linear infinite; left: 20%; animation-delay: 1s; }
.particle-3 { animation: particleFloat 7s linear infinite; left: 30%; animation-delay: 2s; }
.particle-4 { animation: particleFloat 12s linear infinite; left: 40%; animation-delay: 0.5s; }
.particle-5 { animation: particleFloat 9s linear infinite; left: 50%; animation-delay: 3s; }
.particle-6 { animation: particleFloat 11s linear infinite; left: 60%; animation-delay: 1.5s; }
.particle-7 { animation: particleFloat 8s linear infinite; left: 70%; animation-delay: 4s; }
.particle-8 { animation: particleFloat 13s linear infinite; left: 80%; animation-delay: 2.5s; }
.particle-9 { animation: particleFloat 10s linear infinite; left: 90%; animation-delay: 0.8s; }
.particle-10 { animation: particleFloat 9s linear infinite; left: 15%; animation-delay: 5s; }
.particle-11 { animation: particleFloat 14s linear infinite; left: 45%; animation-delay: 3.5s; }
.particle-12 { animation: particleFloat 8s linear infinite; left: 75%; animation-delay: 6s; }

/* Sparkle particles */
.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  pointer-events: none;
}

.sparkle::before,
.sparkle::after {
  content: '';
  position: absolute;
  background: var(--gold);
}

.sparkle::before {
  width: 100%;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.sparkle::after {
  width: 2px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.sparkle-1 { top: 15%; left: 8%; animation: sparkle 3s ease-in-out infinite; }
.sparkle-2 { top: 25%; right: 12%; animation: sparkle 4s ease-in-out infinite 1s; }
.sparkle-3 { bottom: 30%; left: 15%; animation: sparkle 3.5s ease-in-out infinite 0.5s; }
.sparkle-4 { top: 40%; right: 20%; animation: sparkle 5s ease-in-out infinite 2s; }
.sparkle-5 { bottom: 20%; right: 8%; animation: sparkle 4.5s ease-in-out infinite 1.5s; }

/* ── Marquee Band ── */
.marquee-band {
  overflow: hidden;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  background: rgba(183,110,121,0.05);
}

.marquee-content {
  display: flex;
  gap: var(--space-3xl);
  animation: marquee 30s linear infinite;
  white-space: nowrap;
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--gray-2);
  text-transform: uppercase;
  letter-spacing: 3px;
  flex-shrink: 0;
}

.marquee-dot {
  width: 6px;
  height: 6px;
  background: var(--rose-gold);
  border-radius: 50%;
}