/* ============================================
   OCE TOGETHER - PREMIUM ANIMATIONS
   Complex, Long-Code CSS Animations
   ============================================ */

/* ============================================
   1. HOLOGRAPHIC 3D CARD EFFECT
   ============================================ */
@property --holo-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --holo-x {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

@property --holo-y {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

.holographic-card {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.3s ease-out;
}

.holographic-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--holo-angle, 0deg),
    #ff0055 0deg,
    #ff7700 60deg,
    #00ff88 120deg,
    #00ccff 180deg,
    #8a2be2 240deg,
    #ff00ff 300deg,
    #ff0055 360deg
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  filter: blur(15px);
  z-index: -1;
  animation: holoRotate 4s linear infinite;
}

.holographic-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    calc(var(--holo-angle, 0deg) + 90deg),
    transparent 0%,
    rgba(255, 255, 255, 0.1) 25%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.1) 75%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.holographic-card:hover {
  transform: rotateY(calc(var(--holo-x, 0) * 15deg)) rotateX(calc(var(--holo-y, 0) * -15deg)) translateZ(30px);
}

.holographic-card:hover::before,
.holographic-card:hover::after {
  opacity: 1;
}

@keyframes holoRotate {
  0% { --holo-angle: 0deg; }
  100% { --holo-angle: 360deg; }
}

/* ============================================
   2. ADVANCED GLITCH TEXT EFFECT
   ============================================ */
.glitch-text {
  position: relative;
  display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.glitch-text::before {
  color: #ff0055;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translateX(-3px);
}

.glitch-text::after {
  color: #00ccff;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  transform: translateX(3px);
}

.glitch-text:hover::before {
  opacity: 0.8;
  animation: glitchTop 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

.glitch-text:hover::after {
  opacity: 0.8;
  animation: glitchBottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

@keyframes glitchTop {
  0% { transform: translateX(-3px) translateY(0); }
  20% { transform: translateX(3px) translateY(-2px); }
  40% { transform: translateX(-5px) translateY(1px); }
  60% { transform: translateX(2px) translateY(-1px); }
  80% { transform: translateX(-2px) translateY(2px); }
  100% { transform: translateX(-3px) translateY(0); }
}

@keyframes glitchBottom {
  0% { transform: translateX(3px) translateY(0); }
  20% { transform: translateX(-3px) translateY(2px); }
  40% { transform: translateX(5px) translateY(-1px); }
  60% { transform: translateX(-2px) translateY(1px); }
  80% { transform: translateX(2px) translateY(-2px); }
  100% { transform: translateX(3px) translateY(0); }
}

/* ============================================
   3. SHIMMER LOADING EFFECT
   ============================================ */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 25%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0) 100%,
    transparent 100%
  );
  animation: shimmerSweep 2s infinite;
}

@keyframes shimmerSweep {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* ============================================
   4. NEON PULSE GLOW
   ============================================ */
.neon-pulse {
  position: relative;
}

.neon-pulse::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(45deg, #00ff88, #00ccff, #8a2be2, #ff0055, #00ff88);
  background-size: 400% 400%;
  z-index: -1;
  filter: blur(15px);
  opacity: 0.7;
  animation: neonGradient 3s ease infinite, neonPulse 2s ease-in-out infinite;
}

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

@keyframes neonPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.02); }
}

/* ============================================
   5. MAGNETIC BUTTON EFFECT
   ============================================ */
.magnetic-btn {
  position: relative;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.magnetic-btn::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(0, 255, 136, 0.3) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.magnetic-btn:hover::before {
  opacity: 1;
}

/* ============================================
   6. LIQUID MORPHING BLOB
   ============================================ */
.liquid-blob {
  position: relative;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: liquidMorph 8s ease-in-out infinite;
  overflow: hidden;
}

.liquid-blob::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: linear-gradient(45deg, #00ff88, #00ccff, #8a2be2);
  background-size: 400% 400%;
  z-index: -1;
  filter: blur(30px);
  animation: liquidMorph 8s ease-in-out infinite reverse, neonGradient 5s ease infinite;
}

@keyframes liquidMorph {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
  75% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* ============================================
   7. PARTICLE BACKGROUND SYSTEM
   ============================================ */
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(0, 255, 136, 0.6);
  border-radius: 50%;
  animation: particleFloat 15s infinite;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
.particle:nth-child(2) { left: 20%; animation-delay: 1s; animation-duration: 18s; background: rgba(0, 200, 255, 0.6); }
.particle:nth-child(3) { left: 30%; animation-delay: 2s; animation-duration: 14s; background: rgba(138, 43, 226, 0.6); }
.particle:nth-child(4) { left: 40%; animation-delay: 0.5s; animation-duration: 16s; }
.particle:nth-child(5) { left: 50%; animation-delay: 3s; animation-duration: 20s; background: rgba(255, 0, 85, 0.6); }
.particle:nth-child(6) { left: 60%; animation-delay: 1.5s; animation-duration: 13s; background: rgba(0, 200, 255, 0.6); }
.particle:nth-child(7) { left: 70%; animation-delay: 2.5s; animation-duration: 17s; }
.particle:nth-child(8) { left: 80%; animation-delay: 0.8s; animation-duration: 15s; background: rgba(138, 43, 226, 0.6); }
.particle:nth-child(9) { left: 90%; animation-delay: 3.5s; animation-duration: 19s; }
.particle:nth-child(10) { left: 5%; animation-delay: 4s; animation-duration: 11s; background: rgba(255, 215, 0, 0.6); }
.particle:nth-child(11) { left: 15%; animation-delay: 2.2s; animation-duration: 14s; }
.particle:nth-child(12) { left: 25%; animation-delay: 1.2s; animation-duration: 16s; background: rgba(0, 200, 255, 0.6); }
.particle:nth-child(13) { left: 35%; animation-delay: 3.8s; animation-duration: 18s; }
.particle:nth-child(14) { left: 45%; animation-delay: 0.3s; animation-duration: 13s; background: rgba(138, 43, 226, 0.6); }
.particle:nth-child(15) { left: 55%; animation-delay: 2.8s; animation-duration: 15s; }
.particle:nth-child(16) { left: 65%; animation-delay: 1.8s; animation-duration: 17s; background: rgba(255, 0, 85, 0.6); }
.particle:nth-child(17) { left: 75%; animation-delay: 4.2s; animation-duration: 12s; }
.particle:nth-child(18) { left: 85%; animation-delay: 0.6s; animation-duration: 19s; background: rgba(0, 200, 255, 0.6); }
.particle:nth-child(19) { left: 95%; animation-delay: 3.2s; animation-duration: 14s; }
.particle:nth-child(20) { left: 50%; animation-delay: 5s; animation-duration: 21s; background: rgba(255, 215, 0, 0.6); }

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) rotate(0deg) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(90vh) rotate(36deg) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(10vh) rotate(324deg) scale(1);
  }
  100% {
    transform: translateY(-10vh) rotate(360deg) scale(0);
    opacity: 0;
  }
}

/* ============================================
   8. SCANLINE EFFECT
   ============================================ */
.scanlines {
  position: relative;
}

.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  pointer-events: none;
  animation: scanlineMove 10s linear infinite;
}

@keyframes scanlineMove {
  0% { background-position: 0 0; }
  100% { background-position: 0 100vh; }
}

/* ============================================
   9. TEXT REVEAL ANIMATION
   ============================================ */
.text-reveal {
  overflow: hidden;
}

.text-reveal span {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  animation: textReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.text-reveal span:nth-child(1) { animation-delay: 0s; }
.text-reveal span:nth-child(2) { animation-delay: 0.05s; }
.text-reveal span:nth-child(3) { animation-delay: 0.1s; }
.text-reveal span:nth-child(4) { animation-delay: 0.15s; }
.text-reveal span:nth-child(5) { animation-delay: 0.2s; }
.text-reveal span:nth-child(6) { animation-delay: 0.25s; }
.text-reveal span:nth-child(7) { animation-delay: 0.3s; }
.text-reveal span:nth-child(8) { animation-delay: 0.35s; }
.text-reveal span:nth-child(9) { animation-delay: 0.4s; }
.text-reveal span:nth-child(10) { animation-delay: 0.45s; }
.text-reveal span:nth-child(11) { animation-delay: 0.5s; }
.text-reveal span:nth-child(12) { animation-delay: 0.55s; }
.text-reveal span:nth-child(13) { animation-delay: 0.6s; }
.text-reveal span:nth-child(14) { animation-delay: 0.65s; }
.text-reveal span:nth-child(15) { animation-delay: 0.7s; }

@keyframes textReveal {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================
   10. BORDER DRAW ANIMATION
   ============================================ */
.border-draw {
  position: relative;
}

.border-draw::before,
.border-draw::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.border-draw::before {
  border: 2px solid transparent;
  border-top-color: var(--primary, #00ff88);
  border-right-color: var(--primary, #00ff88);
  animation: borderDraw1 1s linear forwards;
}

.border-draw::after {
  border: 2px solid transparent;
  border-bottom-color: var(--secondary, #00ccff);
  border-left-color: var(--secondary, #00ccff);
  animation: borderDraw2 1s linear forwards 0.5s;
}

@keyframes borderDraw1 {
  0% { clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
  50% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes borderDraw2 {
  0% { clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%); }
  50% { clip-path: polygon(100% 100%, 0 100%, 0 100%, 100% 100%); }
  100% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0); }
}

/* ============================================
   11. FLIP CARD 3D
   ============================================ */
.flip-card {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* ============================================
   12. RIPPLE EFFECT
   ============================================ */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
}

.ripple:active::after {
  width: 300px;
  height: 300px;
  opacity: 0;
  transition: 0s;
}

/* ============================================
   13. TILT EFFECT
   ============================================ */
.tilt-card {
  transform-style: preserve-3d;
  transform: perspective(1000px);
  transition: transform 0.1s ease-out;
}

.tilt-card-content {
  transform: translateZ(50px);
}

.tilt-card-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.tilt-card:hover .tilt-card-glare {
  opacity: 1;
}

/* ============================================
   14. STAGGERED GRID REVEAL
   ============================================ */
.stagger-reveal > * {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  animation: staggerReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.stagger-reveal > *:nth-child(1) { animation-delay: 0s; }
.stagger-reveal > *:nth-child(2) { animation-delay: 0.08s; }
.stagger-reveal > *:nth-child(3) { animation-delay: 0.16s; }
.stagger-reveal > *:nth-child(4) { animation-delay: 0.24s; }
.stagger-reveal > *:nth-child(5) { animation-delay: 0.32s; }
.stagger-reveal > *:nth-child(6) { animation-delay: 0.4s; }
.stagger-reveal > *:nth-child(7) { animation-delay: 0.48s; }
.stagger-reveal > *:nth-child(8) { animation-delay: 0.56s; }
.stagger-reveal > *:nth-child(9) { animation-delay: 0.64s; }
.stagger-reveal > *:nth-child(10) { animation-delay: 0.72s; }
.stagger-reveal > *:nth-child(11) { animation-delay: 0.8s; }
.stagger-reveal > *:nth-child(12) { animation-delay: 0.88s; }

@keyframes staggerReveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================
   15. BREATHING GLOW
   ============================================ */
.breathing-glow {
  animation: breathingGlow 4s ease-in-out infinite;
}

@keyframes breathingGlow {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(0, 255, 136, 0.3),
      0 0 40px rgba(0, 255, 136, 0.2),
      0 0 60px rgba(0, 255, 136, 0.1);
  }
  50% {
    box-shadow: 
      0 0 30px rgba(0, 255, 136, 0.5),
      0 0 60px rgba(0, 255, 136, 0.3),
      0 0 90px rgba(0, 255, 136, 0.2);
  }
}

/* ============================================
   16. WAVE TEXT ANIMATION
   ============================================ */
.wave-text span {
  display: inline-block;
  animation: waveText 1.5s ease-in-out infinite;
}

.wave-text span:nth-child(1) { animation-delay: 0s; }
.wave-text span:nth-child(2) { animation-delay: 0.1s; }
.wave-text span:nth-child(3) { animation-delay: 0.2s; }
.wave-text span:nth-child(4) { animation-delay: 0.3s; }
.wave-text span:nth-child(5) { animation-delay: 0.4s; }
.wave-text span:nth-child(6) { animation-delay: 0.5s; }
.wave-text span:nth-child(7) { animation-delay: 0.6s; }
.wave-text span:nth-child(8) { animation-delay: 0.7s; }
.wave-text span:nth-child(9) { animation-delay: 0.8s; }
.wave-text span:nth-child(10) { animation-delay: 0.9s; }

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

/* ============================================
   17. CONFETTI BUTTON
   ============================================ */
.confetti-btn {
  position: relative;
}

.confetti-btn .confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #00ff88;
  opacity: 0;
  pointer-events: none;
}

.confetti-btn:hover .confetti-piece {
  animation: confettiExplode 0.8s ease-out forwards;
}

.confetti-btn .confetti-piece:nth-child(1) { background: #ff0055; animation-delay: 0s; }
.confetti-btn .confetti-piece:nth-child(2) { background: #00ccff; animation-delay: 0.05s; }
.confetti-btn .confetti-piece:nth-child(3) { background: #8a2be2; animation-delay: 0.1s; }
.confetti-btn .confetti-piece:nth-child(4) { background: #ffd700; animation-delay: 0.15s; }
.confetti-btn .confetti-piece:nth-child(5) { background: #00ff88; animation-delay: 0.2s; }

@keyframes confettiExplode {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x, 50px), var(--y, -100px)) rotate(720deg) scale(0);
    opacity: 0;
  }
}

/* ============================================
   18. RAINBOW TEXT GRADIENT ANIMATION
   ============================================ */
.rainbow-text {
  background: linear-gradient(
    90deg,
    #ff0055 0%,
    #ff7700 14%,
    #ffd700 28%,
    #00ff88 42%,
    #00ccff 56%,
    #8a2be2 70%,
    #ff00ff 84%,
    #ff0055 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowShift 3s linear infinite;
}

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

/* ============================================
   19. FLOATING ORBS BACKGROUND
   ============================================ */
.floating-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.floating-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  animation: orbFloatComplex 20s ease-in-out infinite;
}

.floating-orb:nth-child(1) {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 255, 136, 0.6) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  animation-delay: 0s;
}

.floating-orb:nth-child(2) {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 200, 255, 0.6) 0%, transparent 70%);
  bottom: -50px;
  left: -50px;
  animation-delay: -5s;
}

.floating-orb:nth-child(3) {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(138, 43, 226, 0.6) 0%, transparent 70%);
  top: 50%;
  left: 30%;
  animation-delay: -10s;
}

.floating-orb:nth-child(4) {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(255, 0, 85, 0.4) 0%, transparent 70%);
  top: 20%;
  right: 20%;
  animation-delay: -15s;
}

@keyframes orbFloatComplex {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  20% {
    transform: translate(30px, -40px) scale(1.1) rotate(72deg);
  }
  40% {
    transform: translate(-20px, 30px) scale(0.95) rotate(144deg);
  }
  60% {
    transform: translate(-40px, -20px) scale(1.05) rotate(216deg);
  }
  80% {
    transform: translate(20px, 40px) scale(0.98) rotate(288deg);
  }
}

/* ============================================
   20. CREATOR CARD PREMIUM STYLES
   ============================================ */
.creator-card-premium {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.creator-card-premium::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  background: linear-gradient(
    135deg,
    rgba(0, 255, 136, 0.5) 0%,
    rgba(0, 200, 255, 0.5) 25%,
    rgba(138, 43, 226, 0.5) 50%,
    rgba(0, 200, 255, 0.5) 75%,
    rgba(0, 255, 136, 0.5) 100%
  );
  background-size: 400% 400%;
  opacity: 0;
  z-index: -1;
  filter: blur(20px);
  transition: opacity 0.4s ease;
  animation: gradientShift 3s ease infinite;
}

.creator-card-premium:hover::before {
  opacity: 0.6;
}

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

/* Creator PFP Premium */
.creator-pfp-premium {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.creator-pfp-premium::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00ff88, #00ccff, #8a2be2, #ff0055);
  background-size: 400% 400%;
  z-index: -1;
  animation: pfpBorderRotate 3s linear infinite;
}

.creator-pfp-premium::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00ff88, #00ccff, #8a2be2, #ff0055);
  background-size: 400% 400%;
  z-index: -1;
  filter: blur(15px);
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: pfpBorderRotate 3s linear infinite;
}

.creator-card-premium:hover .creator-pfp-premium {
  transform: scale(1.15) rotate(5deg);
}

.creator-card-premium:hover .creator-pfp-premium::after {
  opacity: 0.7;
}

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

.creator-pfp-premium img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.4s ease;
}

.creator-card-premium:hover .creator-pfp-premium img {
  transform: scale(1.1);
}

/* ============================================
   21. SCROLL TRIGGERED ANIMATIONS
   ============================================ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.scroll-reveal-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ============================================
   22. UNDERLINE EXPAND EFFECT
   ============================================ */
.underline-expand {
  position: relative;
  display: inline-block;
}

.underline-expand::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #00ff88, #00ccff);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.underline-expand:hover::after {
  width: 100%;
  left: 0;
}

/* ============================================
   23. ICON BOUNCE ANIMATION
   ============================================ */
.icon-bounce {
  animation: iconBounce 2s ease-in-out infinite;
}

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

/* ============================================
   24. GRADIENT BORDER ANIMATION
   ============================================ */
.gradient-border-anim {
  position: relative;
  background: var(--bg-dark, #0a0a0f);
  border-radius: 16px;
}

.gradient-border-anim::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: linear-gradient(
    90deg,
    #00ff88,
    #00ccff,
    #8a2be2,
    #ff0055,
    #00ff88
  );
  background-size: 300% 100%;
  z-index: -1;
  animation: gradientBorderMove 3s linear infinite;
}

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

/* ============================================
   25. PULSE RING EFFECT
   ============================================ */
.pulse-ring {
  position: relative;
}

.pulse-ring::before,
.pulse-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--primary, #00ff88);
  opacity: 0;
  animation: pulseRing 2s ease-out infinite;
}

.pulse-ring::after {
  animation-delay: 1s;
}

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