/* =========================================
   CATAFEL KAWAII - ANIMATIONS & EFFECTS
   ========================================= */

/* =========================================
   KEYFRAME ANIMATIONS
   ========================================= */

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

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

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

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

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

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

@keyframes pulseScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.4); opacity: 1; }
}

@keyframes floatCard {
  0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
  50% { transform: translate(-50%, -50%) translateY(-12px); }
}

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

@keyframes floatElem {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  5% { opacity: 0.6; }
  95% { opacity: 0.6; }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

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

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

@keyframes sparkle {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  50% { transform: scale(1) rotate(180deg); opacity: 1; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes sparklePop {
  0% { transform: scale(0) rotate(-10deg); opacity: 1; }
  40% { transform: scale(1.4) rotate(10deg); opacity: 1; }
  100% { transform: scale(0.8) rotate(0deg) translateY(-30px); opacity: 0; }
}

@keyframes rainbowText {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

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

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

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

@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: translateY(-10px); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

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

@keyframes sakuraFall {
  0% {
    transform: translate(0, -10%) rotateZ(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(80px, 50vh) rotateZ(180deg);
    opacity: 0.9;
  }
  100% {
    transform: translate(-40px, 110vh) rotateZ(360deg);
    opacity: 0;
  }
}

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

@keyframes morphGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes wobbly {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

@keyframes cartWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg) scale(1.1); }
  75% { transform: rotate(8deg) scale(1.1); }
}

@keyframes starBurst {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  100% { transform: scale(2.5) rotate(180deg); opacity: 0; }
}

@keyframes ribbonWave {
  0%, 100% { transform: skewX(-3deg); }
  50% { transform: skewX(3deg); }
}

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

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

/* =========================================
   SAKURA PETALS
   ========================================= */
.sakura-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.sakura-petal {
  position: absolute;
  top: -10px;
  font-size: 1.2rem;
  animation: sakuraFall linear infinite;
  opacity: 0.7;
  filter: drop-shadow(0 2px 4px rgba(255,133,161,0.3));
}

.sakura-petal:nth-child(1) { left: 5%; animation-duration: 8s; animation-delay: 0s; font-size: 1rem; }
.sakura-petal:nth-child(2) { left: 15%; animation-duration: 10s; animation-delay: 1s; font-size: 1.4rem; }
.sakura-petal:nth-child(3) { left: 25%; animation-duration: 7s; animation-delay: 2s; font-size: 0.9rem; }
.sakura-petal:nth-child(4) { left: 35%; animation-duration: 9s; animation-delay: 0.5s; font-size: 1.2rem; }
.sakura-petal:nth-child(5) { left: 45%; animation-duration: 11s; animation-delay: 1.5s; font-size: 1rem; }
.sakura-petal:nth-child(6) { left: 55%; animation-duration: 8.5s; animation-delay: 3s; font-size: 1.3rem; }
.sakura-petal:nth-child(7) { left: 65%; animation-duration: 9.5s; animation-delay: 0.8s; font-size: 1.1rem; }
.sakura-petal:nth-child(8) { left: 75%; animation-duration: 7.5s; animation-delay: 2.2s; font-size: 0.8rem; }
.sakura-petal:nth-child(9) { left: 85%; animation-duration: 10.5s; animation-delay: 1.8s; font-size: 1.5rem; }
.sakura-petal:nth-child(10) { left: 92%; animation-duration: 8s; animation-delay: 0.3s; font-size: 1rem; }

/* =========================================
   TWINKLING STARS
   ========================================= */
.stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.star-particle {
  position: absolute;
  font-size: 0.7rem;
  animation: twinkle ease-in-out infinite;
  color: var(--yellow);
  opacity: 0.4;
}

/* =========================================
   KAWAII FALLING ITEMS
   ========================================= */
@keyframes kawaiiFall {
  0% {
    transform: translateY(-80px) rotate(0deg) scale(1);
    opacity: 0;
  }
  8% { opacity: 0.85; }
  88% { opacity: 0.7; }
  100% {
    transform: translateY(110vh) rotate(540deg) scale(0.7);
    opacity: 0;
  }
}

@keyframes kawaiiFallUp {
  0% {
    transform: translateY(80px) rotate(0deg) scale(1);
    opacity: 0;
  }
  8% { opacity: 0.85; }
  88% { opacity: 0.7; }
  100% {
    transform: translateY(-110vh) rotate(-540deg) scale(0.7);
    opacity: 0;
  }
}

@keyframes kawaiiDrift {
  0%   { transform: translateX(0); }
  33%  { transform: translateX(25px); }
  66%  { transform: translateX(-25px); }
  100% { transform: translateX(0); }
}

/* Container — fixed to viewport, clips items that go out of bounds */
.kawaii-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.kawaii-fall-item {
  position: absolute;
  top: 0;
  pointer-events: none;
  font-size: 1.2rem;
  animation: kawaiiFall linear infinite;
  user-select: none;
}

.kawaii-fall-item.rising {
  top: auto;
  bottom: 0;
  animation-name: kawaiiFallUp;
}

.kawaii-fall-item-inner {
  animation: kawaiiDrift ease-in-out infinite;
  display: block;
}

/* Click-burst heart */
@keyframes clickBurst {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  60%  { transform: translate(-50%, -80%) scale(1.2); opacity: 0.8; }
  100% { transform: translate(-50%, -120%) scale(0.8); opacity: 0; }
}

.click-burst {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  font-size: 1.4rem;
  animation: clickBurst 0.7s ease-out forwards;
  user-select: none;
}

/* =========================================
   RAINBOW GRADIENT TEXT
   ========================================= */
.rainbow-text {
  background: linear-gradient(270deg, #FF85A1, #FFD93D, #8BD8BD, #9FD8E3, #C9B8FF, #FF85A1);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowText 4s ease infinite;
}

/* =========================================
   SHIMMER EFFECT
   ========================================= */
.shimmer {
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.7) 50%,
    transparent 60%
  );
  background-size: 200% auto;
  animation: shimmer 2s linear infinite;
}

.shimmer-card {
  background: linear-gradient(
    90deg,
    var(--pink-pale) 25%,
    rgba(255,255,255,0.8) 50%,
    var(--pink-pale) 75%
  );
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--radius-md);
}

/* =========================================
   SCROLL REVEAL ANIMATIONS
   ========================================= */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.stagger-children > *:nth-child(1) { transition-delay: 0s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.2s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.3s; }
.stagger-children > *:nth-child(5) { transition-delay: 0.4s; }
.stagger-children > *:nth-child(6) { transition-delay: 0.5s; }
.stagger-children > *:nth-child(7) { transition-delay: 0.6s; }
.stagger-children > *:nth-child(8) { transition-delay: 0.7s; }

/* =========================================
   HOVER EFFECTS
   ========================================= */
.hover-float {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-float:hover {
  transform: translateY(-6px);
}

.hover-scale {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-glow {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(255,133,161,0.4), 0 8px 30px rgba(255,133,161,0.2);
  transform: translateY(-3px);
}

/* =========================================
   MORPHING BACKGROUND
   ========================================= */
.morphing-bg {
  background: linear-gradient(270deg, #FFE4EF, #EEE4FF, #E4F5FF, #E4FFEF);
  background-size: 400% 400%;
  animation: morphGradient 8s ease infinite;
}

/* =========================================
   WOBBLY SHAPES
   ========================================= */
.wobbly-shape {
  animation: wobbly 6s ease-in-out infinite;
}

/* =========================================
   ANIMATED GRADIENT BUTTON
   ========================================= */
.btn-animated {
  background: linear-gradient(270deg, #FF85A1, #C9B8FF, #8BD8BD, #FF85A1);
  background-size: 300% 300%;
  animation: morphGradient 3s ease infinite;
  color: white;
  border: none;
}

/* =========================================
   CART ADD ANIMATION
   ========================================= */
.cart-bounce {
  animation: cartWiggle 0.5s ease;
}

/* =========================================
   CONFETTI CANVAS
   ========================================= */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99995;
}

/* =========================================
   PRODUCT CARD HOVER GLOW
   ========================================= */
.product-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,133,161,0.3), rgba(201,184,255,0.3));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  filter: blur(8px);
}

.product-card:hover::after {
  opacity: 1;
}

/* =========================================
   PULSING RING (for special items)
   ========================================= */
.pulsing-ring {
  position: relative;
}

.pulsing-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--pink);
  animation: pulseRing 2s ease-out infinite;
  opacity: 0;
}

@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* =========================================
   LOADING SKELETON
   ========================================= */
.skeleton {
  background: linear-gradient(90deg, var(--pink-pale) 25%, rgba(255,255,255,0.8) 50%, var(--pink-pale) 75%);
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--radius-sm);
}

.skeleton-card {
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}

.skeleton-image {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(90deg, var(--pink-pale) 25%, rgba(255,255,255,0.8) 50%, var(--pink-pale) 75%);
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
}

.skeleton-line {
  height: 12px;
  background: linear-gradient(90deg, var(--pink-pale) 25%, rgba(255,255,255,0.8) 50%, var(--pink-pale) 75%);
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }
.skeleton-line.full { width: 100%; }

/* =========================================
   FLOATING ICONS DECORATION
   ========================================= */
.deco-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.deco-icon {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0.15;
  animation: float 4s ease-in-out infinite;
}

.deco-icon:nth-child(odd) {
  animation-direction: alternate;
}

/* =========================================
   PAGE TRANSITION
   ========================================= */
.page-wrapper {
  animation: pageIn 0.5s ease both;
}

/* =========================================
   SPECIAL BADGE ANIMATIONS
   ========================================= */
.badge-new {
  animation: pulseScale 2s ease-in-out infinite;
}

.badge-hot {
  position: relative;
  overflow: hidden;
}

.badge-hot::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 2s linear infinite;
}

/* =========================================
   HEART TRAIL
   ========================================= */
.heart-trail {
  position: fixed;
  pointer-events: none;
  z-index: 99990;
  font-size: 1rem;
  animation: heartTrail 0.8s ease forwards;
}

@keyframes heartTrail {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0.8; }
  100% { transform: translate(var(--dx, 0), var(--dy, -40px)) scale(1.2); opacity: 0; }
}

/* =========================================
   STAR BURST ON ADD TO CART
   ========================================= */
.star-burst {
  position: fixed;
  pointer-events: none;
  z-index: 99991;
  font-size: 1.5rem;
  animation: starBurst 0.7s ease forwards;
}

/* =========================================
   GLOW PULSE
   ========================================= */
.glow-pulse {
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,133,161,0.3), 0 0 20px rgba(255,133,161,0.1); }
  50% { box-shadow: 0 0 20px rgba(255,133,161,0.6), 0 0 40px rgba(255,133,161,0.2); }
}

/* =========================================
   RIBBON ANIMATION
   ========================================= */
.ribbon {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 80px;
  height: 80px;
  overflow: hidden;
  pointer-events: none;
}

.ribbon::before,
.ribbon::after {
  content: '';
  position: absolute;
}

.ribbon-text {
  position: absolute;
  right: -22px;
  top: 14px;
  width: 100px;
  background: var(--pink-dark);
  color: white;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 4px 0;
  transform: rotate(45deg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  animation: ribbonWave 2s ease-in-out infinite;
}

/* =========================================
   BACK TO TOP BUTTON
   ========================================= */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: 48px;
  height: 48px;
  background: var(--grad-pink);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow-pink);
  transition: var(--transition-bounce);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  z-index: 200;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 12px 30px rgba(255,133,161,0.5);
}

/* =========================================
   ANIMATED COUNTER
   ========================================= */
.counter-value {
  animation: countUp 0.6s ease both;
}

/* =========================================
   WISHLIST HEART ANIMATION
   ========================================= */
.wishlist-btn.liked {
  animation: heartBeat 0.5s ease;
  color: var(--coral) !important;
}

/* =========================================
   PRICE CHANGE FLASH
   ========================================= */
.price-updated {
  animation: priceFlash 1s ease;
}

@keyframes priceFlash {
  0%, 100% { background: transparent; color: var(--pink-dark); }
  30% { background: var(--yellow-light); color: var(--text-dark); border-radius: 4px; }
}

/* =========================================
   STOCK LOW PULSE
   ========================================= */
.stock-low-pulse {
  animation: stockPulse 1.5s ease-in-out infinite;
}

@keyframes stockPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* =========================================
   SMOOTH TRANSITIONS
   ========================================= */
.transition-all {
  transition: var(--transition);
}

.transition-bounce {
  transition: var(--transition-bounce);
}

/* =========================================
   NEON GLOW (for special elements)
   ========================================= */
.neon-pink {
  text-shadow: 0 0 10px var(--pink), 0 0 20px var(--pink), 0 0 40px var(--pink-light);
}

/* =========================================
   GLITTER OVERLAY
   ========================================= */
.glitter-overlay {
  position: relative;
  overflow: hidden;
}

.glitter-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.3) 1px, transparent 1px),
    radial-gradient(circle at 70% 15%, rgba(255,255,255,0.2) 1px, transparent 1px),
    radial-gradient(circle at 45% 75%, rgba(255,255,255,0.3) 1px, transparent 1px),
    radial-gradient(circle at 85% 60%, rgba(255,255,255,0.2) 1px, transparent 1px),
    radial-gradient(circle at 10% 80%, rgba(255,255,255,0.3) 1px, transparent 1px);
  background-size: 200px 200px;
  animation: glitterMove 4s linear infinite;
  pointer-events: none;
}

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