/* =============================================
   WIVSY — Animation Keyframes & Reveal System
   ============================================= */

/* ===== SCROLL REVEAL VARIANTS ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

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

/* Reveal from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

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

/* Reveal from right */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

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

/* Reveal with scale */
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

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

/* Staggered children delays */
.stagger-children .reveal:nth-child(1),
.stagger-children .reveal-left:nth-child(1),
.stagger-children .reveal-scale:nth-child(1) { transition-delay: 0s; }
.stagger-children .reveal:nth-child(2),
.stagger-children .reveal-left:nth-child(2),
.stagger-children .reveal-scale:nth-child(2) { transition-delay: 0.12s; }
.stagger-children .reveal:nth-child(3),
.stagger-children .reveal-left:nth-child(3),
.stagger-children .reveal-scale:nth-child(3) { transition-delay: 0.24s; }
.stagger-children .reveal:nth-child(4),
.stagger-children .reveal-left:nth-child(4),
.stagger-children .reveal-scale:nth-child(4) { transition-delay: 0.36s; }

/* ===== HERO BAG FLOAT ===== */
@keyframes floatBag {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-15px) rotate(2deg); }
}

/* ===== HERO BLOB MORPH ===== */
@keyframes morphBlob {
  0%   { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: rotate(0deg); }
  25%  { border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; }
  50%  { border-radius: 35% 65% 55% 45% / 65% 35% 60% 40%; transform: rotate(180deg); }
  75%  { border-radius: 55% 45% 45% 55% / 40% 55% 45% 60%; }
  100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: rotate(360deg); }
}

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

/* ===== HERO TEXT SLIDE IN ===== */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

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

/* Hero content animations */
.hero-badge {
  animation: slideInLeft 0.6s ease-out 0.2s both;
}

.hero h1 {
  animation: slideInLeft 0.7s ease-out 0.4s both;
}

.hero-sub {
  animation: slideInLeft 0.7s ease-out 0.6s both;
}

.hero-buttons {
  animation: slideInUp 0.6s ease-out 0.8s both;
}

.hero-visual {
  animation: fadeIn 1s ease-out 0.5s both;
}

/* ===== SHIMMER EFFECT ===== */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ===== GRADIENT SHIFT ===== */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== MARQUEE / INFINITE SCROLL ===== */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== SPIN SLOW ===== */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===== BOUNCE SUBTLE ===== */
@keyframes bounceSoft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ===== CTA ARROW BOUNCE ===== */
@keyframes arrowBounce {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}

/* Button arrow animation on hover */
.btn-mint:hover {
  letter-spacing: 0.5px;
}