/* =============================================
   XMedia Monster — Анимации и WOW-эффекты
   ============================================= */

/* --- 1. Параллакс фона --- */
.parallax-bg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* --- 2. Fade-in + Slide-up при скролле --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

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

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

/* --- 3. Пульсация золотым свечением для иконок --- */
@keyframes iconPulse {
  0%, 100% {
    filter: drop-shadow(0 0 0px rgba(212,175,55,0));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(212,175,55,0.8));
    transform: scale(1.05);
  }
}

.icon-pulse:hover {
  animation: iconPulse 1s ease-in-out infinite;
}

/* --- 4. Анимация счётчиков --- */
.counter-value {
  display: inline-block;
  transition: all 0.1s;
}

/* --- 5. Hero title gradient animation --- */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-text {
  background: linear-gradient(270deg, #D4AF37, #FF2D78, #D4AF37);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

/* --- 6. Floating animation for hero elements --- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.float-anim {
  animation: float 3s ease-in-out infinite;
}

/* --- 7. Shimmer loading effect --- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(90deg,
    var(--bg-secondary) 25%,
    rgba(212,175,55,0.1) 50%,
    var(--bg-secondary) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* --- 8. Glow border animation --- */
@keyframes glowBorder {
  0%, 100% { border-color: var(--accent-gold); box-shadow: 0 0 5px rgba(212,175,55,0.3); }
  50%       { border-color: var(--accent-pink); box-shadow: 0 0 20px rgba(255,45,120,0.5); }
}

.glow-border {
  animation: glowBorder 3s ease-in-out infinite;
}

/* --- 9. Step number animation --- */
@keyframes stepReveal {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- 10. Video play button pulse --- */
@keyframes playPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(212,175,55,0.6);
  }
  50% {
    box-shadow: 0 0 0 16px rgba(212,175,55,0);
  }
}

.play-btn {
  animation: playPulse 2s ease-in-out infinite;
}

/* --- 11. Carousel slide animation --- */
@keyframes slideLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* --- 12. Particle / sparkle effect --- */
@keyframes sparkle {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  50%  { opacity: 1; transform: scale(1) rotate(180deg); }
  100% { opacity: 0; transform: scale(0) rotate(360deg); }
}

/* --- 13. Typewriter cursor --- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--accent-gold);
  margin-left: 4px;
  animation: blink 1s step-end infinite;
  vertical-align: middle;
}

/* --- 14. Hover card lift --- */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(212,175,55,0.1);
}

/* --- 15. Ripple effect on buttons --- */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

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

.btn-ripple:active::after {
  width: 300px;
  height: 300px;
  opacity: 1;
}

/* --- 16. Scroll indicator --- */
@keyframes scrollDown {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}

.scroll-indicator {
  width: 24px;
  height: 40px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  position: relative;
  margin: 0 auto;
}

.scroll-indicator::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: var(--accent-gold);
  border-radius: 2px;
  animation: scrollDown 1.5s ease-in-out infinite;
}

/* --- 17. Gold underline hover for links --- */
.link-gold {
  position: relative;
  color: var(--text-white);
}

.link-gold::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-gold);
  transition: width var(--transition);
}

.link-gold:hover::after {
  width: 100%;
}

/* --- 18. Image zoom on hover --- */
.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform 0.5s ease;
}

.img-zoom:hover img {
  transform: scale(1.08);
}

/* --- 19. Stagger animation for grid items --- */
.stagger-item:nth-child(1) { animation-delay: 0.05s; }
.stagger-item:nth-child(2) { animation-delay: 0.10s; }
.stagger-item:nth-child(3) { animation-delay: 0.15s; }
.stagger-item:nth-child(4) { animation-delay: 0.20s; }
.stagger-item:nth-child(5) { animation-delay: 0.25s; }
.stagger-item:nth-child(6) { animation-delay: 0.30s; }

/* --- 20. Neon glow text --- */
.neon-text {
  color: var(--accent-pink);
  text-shadow:
    0 0 7px rgba(255,45,120,0.8),
    0 0 10px rgba(255,45,120,0.5),
    0 0 21px rgba(255,45,120,0.3);
}