/*
 * GOLPOOGRO - Component: Cinematic Visual Effects & Photo Filters
 * Provides Instagram-level CSS blend-modes, SVG matrix filters and animations
 */

/* Story Filters */
.filter-normal { filter: none; }
.filter-vintage { filter: sepia(0.55) contrast(0.9) brightness(0.95); }
.filter-cyber { filter: hue-rotate(180deg) saturate(1.8) contrast(1.1); }
.filter-noir { filter: grayscale(1) contrast(1.2) brightness(0.8); }
.filter-cosmic { filter: saturate(1.55) hue-rotate(-24deg) contrast(1.05); }
.filter-warm { filter: sepia(0.2) saturate(1.3) contrast(0.95) brightness(1.02); }

/* Liquid Gradient Backdrops (For animated text mode or music quotes) */
.liquid-bg-cosmic {
  background: linear-gradient(135deg, #090e24 0%, #1e1b4b 35%, #311042 70%, #030712 100%);
  background-size: 400% 400%;
  animation: liquidShift 12s ease infinite alternate;
}

.liquid-bg-solar {
  background: linear-gradient(135deg, #1c1917 0%, #7c2d12 40%, #c2410c 75%, #0c0a09 100%);
  background-size: 400% 400%;
  animation: liquidShift 12s ease infinite alternate;
}

.liquid-bg-ocean {
  background: linear-gradient(135deg, #022c22 0%, #0f766e 40%, #0369a1 75%, #050505 100%);
  background-size: 400% 400%;
  animation: liquidShift 12s ease infinite alternate;
}

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

/* Floating Light Sparkles Particles */
.particle-canvas-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.story-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  filter: blur(1px);
  animation: floatParticle 8s linear infinite;
  opacity: 0;
}

@keyframes floatParticle {
  0% {
    transform: translateY(105%) translateX(0px) scale(0.6);
    opacity: 0;
  }
  15% { opacity: 0.7; }
  85% { opacity: 0.7; }
  100% {
    transform: translateY(-10%) translateX(40px) scale(1.1);
    opacity: 0;
  }
}

/* Glassy pulse cursor indicator inside tap transitions */
.tap-ripple-effect {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transform: scale(0);
  pointer-events: none;
  z-index: 20;
  animation: tapRippleAnim 0.5s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes tapRippleAnim {
  0% { transform: scale(0); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}