/* SPLIVMAX Social Effects + 3D ambient */

.spliv-3d-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  overflow: hidden;
}
.spliv-3d-bg canvas { width: 100% !important; height: 100% !important; }

.hero-banner, .landing-hero, .detail-hero, .search-hero--modern {
  position: relative;
  overflow: hidden;
}
.hero-banner > *:not(.spliv-3d-bg),
.landing-hero > *:not(.spliv-3d-bg),
.detail-hero > *:not(.spliv-3d-bg) {
  position: relative;
  z-index: 1;
}

/* Like heart burst */
.social-heart-particle {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  font-size: 1.25rem;
  animation: heartBurst 0.85s ease-out forwards;
}
@keyframes heartBurst {
  0% { opacity: 1; transform: translate(0, 0) scale(0.5); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1.2); }
}

.social-ripple {
  animation: socialRipple 0.55s ease-out;
}
@keyframes socialRipple {
  0% { box-shadow: 0 0 0 0 rgba(255, 0, 60, 0.5); }
  100% { box-shadow: 0 0 0 18px rgba(255, 0, 60, 0); }
}

.comment-card--new {
  animation: commentSlideIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  border-color: rgba(157, 0, 255, 0.4) !important;
}
@keyframes commentSlideIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.social-comment-sent .comment-compose-input {
  animation: commentFlash 0.5s ease;
}
@keyframes commentFlash {
  0%, 100% { border-color: var(--surface-border); }
  50% { border-color: var(--primary); box-shadow: 0 0 20px var(--primary-glow); }
}

.is-thumb-like.is-thumb-active {
  color: var(--primary) !important;
  filter: drop-shadow(0 0 8px var(--primary-glow));
}

.thumb-bounce {
  animation: thumbPop 0.52s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes thumbPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Player intro premium */
.spliv-intro {
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.spliv-intro.active { opacity: 1; }
.spliv-intro.done { opacity: 0; pointer-events: none; }
.spliv-intro-bar {
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  margin: 0 auto 1.5rem;
  max-width: 200px;
  animation: introBar 2s ease forwards;
}
@keyframes introBar {
  to { width: 100%; }
}
.spliv-intro-text {
  animation: introTextGlow 2s ease infinite alternate;
}
@keyframes introTextGlow {
  from { filter: drop-shadow(0 0 8px rgba(255,0,60,0.4)); }
  to { filter: drop-shadow(0 0 24px rgba(157,0,255,0.6)); }
}

.sp-player-wrap video {
  transition: opacity 0.6s ease;
}
.sp-player-wrap.sp-video-ready video { opacity: 1; }
.sp-player-wrap:not(.sp-video-ready) video { opacity: 0; }