/* La onda se recorta dentro de la cápsula; las gotas se funden fuera de ella. */
.liquid-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.action-effect { --liquid-color: var(--red); overflow: visible; border-radius: 100px; }
.action-effect::before { content: none; }
.action-effect > .effect-label { z-index: 2; transition: color .18s ease; }
.liquid-layer { position: absolute; z-index: 1; inset: -1px; pointer-events: none; filter: url('#reana-liquid-merge'); }
.liquid-body { position: absolute; inset: 0; border-radius: 100px; overflow: hidden; opacity: 0; transform: scale(.9, .8) translateY(10px); transition: opacity .25s ease, transform .55s cubic-bezier(.16, 1, .3, 1); }
.liquid-wave { position: absolute; width: 140%; height: 180%; left: -20%; top: 0; background: var(--liquid-color); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 25C30 4 55 45 85 23S140 4 170 23S215 45 240 22V180H0Z'/%3E%3C/svg%3E") 50% 0 / 100% 100% no-repeat; transform: translateY(90%); transition: transform .65s cubic-bezier(.16, 1, .3, 1); }
.liquid-drop { position: absolute; background: var(--liquid-color); border-radius: 50%; width: 12px; height: 12px; opacity: 0; transform: scale(0); }
.drop-top-a { left: 22%; top: 0; --drop-distance: -18px; }
.drop-top-b { right: 22%; top: 0; width: 8px; height: 8px; --drop-distance: -13px; }
.drop-bottom-a { left: 35%; bottom: 0; width: 9px; height: 9px; --drop-distance: 14px; }
.drop-bottom-b { right: 16%; bottom: 0; width: 13px; height: 13px; --drop-distance: 18px; }
.action-effect.is-liquid .liquid-body { opacity: 1; transform: scale(1.025, 1.055) translateY(0); }
.action-effect.is-liquid .liquid-wave { transform: translateY(-8%); }
.action-effect.is-liquid .liquid-drop { animation: liquid-pearl 1.6s cubic-bezier(.16, 1, .3, 1) both infinite; }
.action-effect.is-liquid .drop-top-b { animation-delay: .18s; }
.action-effect.is-liquid .drop-bottom-a { animation-delay: .3s; }
.action-effect.is-liquid .drop-bottom-b { animation-delay: .08s; }
.header nav > a.action-effect.is-liquid,
.header nav > a.action-effect.is-liquid:hover,
.button.action-effect.is-liquid { color: white; box-shadow: 0 5px 18px #ce202b2b; }
.action-effect.is-draining .liquid-body { opacity: 0; transform: scale(.96, .75) translateY(15px); transition-duration: .5s; }
.action-effect.is-draining .liquid-wave { transform: translateY(90%); transition: transform .5s cubic-bezier(.55, .055, .675, .19); }
.action-effect.is-draining .liquid-drop { animation: liquid-fall .5s ease-in both; }
.action-effect.is-zapping { color: var(--red-deep) !important; background: white !important; outline: 1px solid var(--red); animation: liquid-zap 420ms ease-out both; }
.action-effect.is-zapping .liquid-layer { opacity: 0; }
.action-effect.is-zapping > .effect-label { animation: liquid-zap-label 420ms steps(2, end) both; }
@keyframes liquid-pearl {
  0% { opacity: 0; transform: translateY(0) scale(.15); }
  12% { opacity: 1; transform: translateY(calc(var(--drop-distance) * .45)) scale(1.1, 1.2); }
  35% { opacity: 1; transform: translateY(var(--drop-distance)) scale(.85, 1.1); }
  57% { opacity: 1; transform: translateY(calc(var(--drop-distance) * .4)) scale(1.1, .8); }
  72%, 100% { opacity: 0; transform: translateY(0) scale(.1); }
}
@keyframes liquid-fall {
  0% { opacity: .8; transform: translateY(var(--drop-distance)) scale(.85); }
  65% { opacity: .7; transform: translateY(18px) scale(.65, 1.1); }
  100% { opacity: 0; transform: translateY(28px) scale(.1); }
}
@keyframes liquid-zap {
  0%, 100% { transform: translate(0); }
  10%, 30% { transform: translate(-3px, 1px) rotate(-1deg); }
  20%, 40% { transform: translate(3px, -1px) rotate(1deg); }
  55% { transform: translate(-2px, 0); }
  70% { transform: translate(2px, 0); }
  85% { transform: translate(-1px, 0); }
}
@keyframes liquid-zap-label {
  0%, 100% { transform: translate(0); text-shadow: none; }
  15%, 45% { transform: translateX(-1px); text-shadow: 2px 0 #ce202b80, -2px 0 #17334750; }
  30%, 60% { transform: translateX(1px); text-shadow: -2px 0 #ce202b80, 2px 0 #17334750; }
  80% { transform: translate(0); text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-layer { display: none; }
  .action-effect, .action-effect > .effect-label { animation: none !important; transition: none; }
}