/* ============================================================
   Rockitten NFT — animations.css
   Keyframe animations + initial-hidden states
   ============================================================ */

/* ============================================================
   Float / breathe — used by blobs and decorative SVGs
   ============================================================ */
@keyframes float-1 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(8%, -6%) scale(1.08) rotate(8deg); }
  100% { transform: translate(-4%, 4%) scale(0.96) rotate(-6deg); }
}

@keyframes float-2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-10%, 8%) scale(1.1); }
  100% { transform: translate(4%, -4%) scale(0.95); }
}

@keyframes float-slow {
  0%   { transform: translateY(-50%) translateX(0) scale(1) rotate(0deg); }
  100% { transform: translateY(-50%) translateX(3%) scale(1.06) rotate(10deg); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Apply floats */
.blob-purple {
  animation: float-1 11s ease-in-out infinite alternate, pulse-glow 6s ease-in-out infinite;
}
.blob-blue {
  animation: float-2 13s ease-in-out infinite alternate, pulse-glow 8s ease-in-out infinite;
}
.blob-tr-soft {
  animation: float-2 10s ease-in-out infinite alternate, pulse-glow 7s ease-in-out infinite;
}

/* ============================================================
   Initial-hidden state for animated elements
   (GSAP will animate them in on slide activation)
   ============================================================ */
[data-anim] {
  opacity: 0;
  will-change: transform, opacity;
}

.mascot {
  will-change: transform, opacity;
}

/* ============================================================
   Subtle entry animation for elements that should always animate
   ============================================================ */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   Hero subtitle — subtle gradient sweep on the line
   ============================================================ */
.hero-sub-2 {
  display: inline-block;
  position: relative;
  background: linear-gradient(90deg, var(--accent-pink) 0%, var(--accent-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 62, 181, 0.6)) drop-shadow(0 0 8px rgba(0, 212, 255, 0.4));
  font-weight: 700;
}

/* ============================================================
   Reduced motion — disable everything
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-anim] { opacity: 1 !important; transform: none !important; }
}