/* ==========================================================================
   21st.dev Animated Icons System for Cristal Fibras Piscinas
   Ultra-smooth GPU-accelerated micro-interactions & SVG animations
   ========================================================================== */

/* Base SVG Icon Container */
.icon-21st {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
  will-change: transform;
}

.icon-21st svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Global hover lift for interactive icon badges/cards */
.group:hover .icon-21st,
.icon-21st:hover {
  transform: scale(1.12);
}

/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */

/* 1. Water Waves (Pool & Water drop) */
@keyframes waveFlowFront {
  0% { transform: translateX(0); }
  50% { transform: translateX(-4px) translateY(0.5px); }
  100% { transform: translateX(0); }
}

@keyframes waveFlowBack {
  0% { transform: translateX(0); }
  50% { transform: translateX(4px) translateY(-0.5px); }
  100% { transform: translateX(0); }
}

.icon-animated-pool .wave-1 {
  animation: waveFlowFront 2.8s ease-in-out infinite;
}

.icon-animated-pool .wave-2 {
  animation: waveFlowBack 3.4s ease-in-out infinite;
  opacity: 0.6;
}

.group:hover .icon-animated-pool .wave-1,
.group:hover .icon-animated-pool .wave-2 {
  animation-duration: 1.4s;
}

/* 2. Water Droplet Ripple */
@keyframes dropBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px) scale(1.05); }
}

@keyframes rippleExpand {
  0% { r: 1; opacity: 0.9; stroke-width: 1.5; }
  100% { r: 7; opacity: 0; stroke-width: 0.5; }
}

.icon-animated-drop .droplet {
  transform-origin: center;
  animation: dropBounce 3s ease-in-out infinite;
}

.icon-animated-drop .ripple {
  transform-origin: center;
  animation: rippleExpand 2s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}

/* 3. Shield Warranty Shimmer & Tilt */
@keyframes shieldShimmerSweep {
  0% { transform: translateX(-100%) rotate(25deg); opacity: 0; }
  20% { opacity: 0.8; }
  40% { transform: translateX(200%) rotate(25deg); opacity: 0; }
  100% { transform: translateX(200%) rotate(25deg); opacity: 0; }
}

@keyframes shieldPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.3)); }
  50% { transform: scale(1.04); filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.65)); }
}

.icon-animated-shield {
  animation: shieldPulse 3.5s ease-in-out infinite;
}

.icon-animated-shield .shimmer-line {
  animation: shieldShimmerSweep 4s ease-in-out infinite;
}

.group:hover .icon-animated-shield {
  animation: shieldPulse 1.8s ease-in-out infinite;
  transform: scale(1.15) rotate(4deg);
}

/* 4. Industrial Factory Gear & Smoke */
@keyframes gearSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes smokePuff {
  0% { transform: translateY(0) scale(0.7); opacity: 0.8; }
  50% { opacity: 0.5; }
  100% { transform: translateY(-5px) scale(1.3); opacity: 0; }
}

.icon-animated-factory .gear {
  transform-origin: center;
  animation: gearSpin 8s linear infinite;
}

.group:hover .icon-animated-factory .gear {
  animation-duration: 2.5s;
}

.icon-animated-factory .smoke {
  animation: smokePuff 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 5. Electric Bolt Spark */
@keyframes boltSpark {
  0%, 90%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(6, 182, 212, 0)); }
  92% { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.9)); }
  96% { transform: scale(1.05); filter: drop-shadow(0 0 3px rgba(6, 182, 212, 0.5)); }
}

.icon-animated-bolt {
  animation: boltSpark 3s ease-in-out infinite;
}

.group:hover .icon-animated-bolt {
  animation: boltSpark 1s ease-in-out infinite;
}

/* 6. Savings Piggy & Coin Bounce */
@keyframes coinDrop {
  0% { transform: translateY(-7px); opacity: 0; }
  30% { opacity: 1; }
  70% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}

.icon-animated-savings .coin {
  animation: coinDrop 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.group:hover .icon-animated-savings {
  transform: scale(1.12) rotate(-5deg);
}

/* 7. Key Turn */
@keyframes keyTurnAction {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(-30deg); }
  60% { transform: rotate(15deg); }
}

.icon-animated-key .key-stem {
  transform-origin: 6px 18px;
}

.group:hover .icon-animated-key .key-stem {
  animation: keyTurnAction 1.2s ease-in-out;
}

/* 8. Layers Hover Lift */
@keyframes layerFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.icon-animated-layers .layer-top {
  animation: layerFloat 3s ease-in-out infinite;
}

.group:hover .icon-animated-layers .layer-top {
  transform: translateY(-4px);
  transition: transform 0.3s ease;
}

.group:hover .icon-animated-layers .layer-mid {
  transform: translateY(-2px);
  transition: transform 0.3s ease;
}

/* 9. Solar Sun Rays Rotation */
@keyframes sunSpinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes sunGlowPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.7)); }
}

.icon-animated-sun .sun-rays {
  transform-origin: center;
  animation: sunSpinSlow 16s linear infinite;
}

.icon-animated-sun .sun-core {
  transform-origin: center;
  animation: sunGlowPulse 3s ease-in-out infinite;
}

.group:hover .icon-animated-sun .sun-rays {
  animation-duration: 4s;
}

/* 10. Cascata / Waterfall Streaming Drops */
@keyframes streamDown {
  0% { transform: translateY(-4px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(6px); opacity: 0; }
}

.icon-animated-waterfall .water-drop-1 {
  animation: streamDown 1.4s linear infinite;
}
.icon-animated-waterfall .water-drop-2 {
  animation: streamDown 1.4s linear 0.45s infinite;
}
.icon-animated-waterfall .water-drop-3 {
  animation: streamDown 1.4s linear 0.9s infinite;
}

/* 11. LED Lightbulb Glow & Filament */
@keyframes bulbPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 0.9; transform: scale(1.2); filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.8)); }
}

.icon-animated-bulb .bulb-glow {
  transform-origin: center;
  animation: bulbPulse 2.5s ease-in-out infinite;
}

.group:hover .icon-animated-bulb .bulb-glow {
  animation-duration: 1.2s;
}

/* 12. Filter Pump Turbine */
@keyframes turbineSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon-animated-filter .turbine {
  transform-origin: center;
  animation: turbineSpin 6s linear infinite;
}

.group:hover .icon-animated-filter .turbine {
  animation-duration: 1.5s;
}

/* 13. WhatsApp & Chat Bubble Bounce */
@keyframes chatBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08) translateY(-1px); }
}

@keyframes typingDots {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

.icon-animated-chat {
  animation: chatBounce 3s ease-in-out infinite;
}

.icon-animated-chat .dot-1 { animation: typingDots 1.4s ease-in-out 0s infinite; }
.icon-animated-chat .dot-2 { animation: typingDots 1.4s ease-in-out 0.2s infinite; }
.icon-animated-chat .dot-3 { animation: typingDots 1.4s ease-in-out 0.4s infinite; }

.group:hover .icon-animated-chat {
  animation: chatBounce 1.5s ease-in-out infinite;
}

/* 14. Telephone Vibrate */
@keyframes phoneVibrate {
  0%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(-8deg); }
  20%, 40% { transform: rotate(8deg); }
  50% { transform: rotate(0deg); }
}

.icon-animated-phone:hover,
.group:hover .icon-animated-phone {
  animation: phoneVibrate 0.6s ease-in-out;
}

/* 15. Location Pin Bounce */
@keyframes pinBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes pinShadow {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(0.6); opacity: 0.15; }
}

.icon-animated-pin .pin-head {
  animation: pinBounce 2.5s ease-in-out infinite;
}

.icon-animated-pin .pin-shadow {
  transform-origin: center;
  animation: pinShadow 2.5s ease-in-out infinite;
}

/* 16. Steaming Coffee */
@keyframes steamCurl {
  0% { transform: translateY(0) scaleX(1); opacity: 0.8; }
  50% { transform: translateY(-3px) scaleX(1.15); opacity: 0.5; }
  100% { transform: translateY(-6px) scaleX(1.3); opacity: 0; }
}

.icon-animated-coffee .steam-1 {
  animation: steamCurl 2s ease-in-out infinite;
}

.icon-animated-coffee .steam-2 {
  animation: steamCurl 2s ease-in-out 0.6s infinite;
}

/* 17. Star Sparkle */
@keyframes starTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 1px rgba(245, 158, 11, 0.4)); }
  50% { transform: scale(1.18) rotate(15deg); filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.85)); }
}

.icon-animated-star {
  animation: starTwinkle 3s ease-in-out infinite;
}

.group:hover .icon-animated-star {
  animation-duration: 1.5s;
}

/* 18. Verified Checkmark Draw */
@keyframes checkmarkDraw {
  0% { stroke-dashoffset: 20; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

.icon-animated-check path.check-line {
  stroke-dasharray: 20;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s ease;
}

.group:hover .icon-animated-check path.check-line {
  animation: checkmarkDraw 0.5s ease-out forwards;
}

/* 19. Download Arrow Pulse */
@keyframes downloadBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.icon-animated-download .arrow-down {
  animation: downloadBounce 2s ease-in-out infinite;
}

.group:hover .icon-animated-download .arrow-down {
  animation-duration: 0.8s;
}

/* 20. Forward Arrow Glide */
.icon-animated-arrow .arrow-stem {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.group:hover .icon-animated-arrow .arrow-stem {
  transform: translateX(4px);
}

/* ==========================================================================
   ACCESSIBILITY: PREFERS-REDUCED-MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .icon-21st,
  .icon-21st *,
  .wave-1, .wave-2,
  .droplet, .ripple,
  .shimmer-line,
  .gear, .smoke,
  .coin, .sun-rays,
  .water-drop-1, .water-drop-2, .water-drop-3,
  .bulb-glow, .turbine,
  .pin-head, .pin-shadow,
  .steam-1, .steam-2 {
    animation: none !important;
    transition: none !important;
  }
}