/* ===== LIQUID SUMMER SPLASH ===== */
.summer_splash-shape {
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  direction: ltr;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  --fluid-wave-height: 10px;
  --liquid-blur: 2px;
}

/* Liquid Edge Effects */
.summer_splash-shape-top {
  top: -1px;
  mask: 
    linear-gradient(to bottom, #000 calc(100% - var(--fluid-wave-height)), 
    radial-gradient(ellipse at bottom, #000 var(--liquid-blur), transparent calc(100% + 2px)));
}

.summer_splash-shape-bottom {
  bottom: -1px;
  mask: 
    linear-gradient(to top, #000 calc(100% - var(--fluid-wave-height)), 
    radial-gradient(ellipse at top, #000 var(--liquid-blur), transparent calc(100% + 2px)));
}

/* Dynamic 3D Layers */
.summer_splash-shape-top:not([data-negative="false"]) svg,
.summer_splash-shape-bottom:not([data-negative="true"]) svg {
  z-index: -1;
  filter: 
    drop-shadow(0 2px 5px rgba(0,0,0,0.1))
    blur(var(--liquid-blur));
}

/* Fluid Rotation */
.summer_splash-shape[data-negative="false"].summer_splash-shape-bottom,
.summer_splash-shape[data-negative="true"].summer_splash-shape-top {
  transform: rotate(180deg);
  transform-style: preserve-3d;
}

/* Liquid SVG Distortion */
.summer_splash-shape svg {
  display: block;
  width: calc(100% + 1.3px);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  min-height: 24px;
  transition: all 0.7s cubic-bezier(0.17,0.84,0.44,1);
}

/* Chromatic Fill Effect */
.summer_splash-shape-fill {
  fill: var(--splash-color, #fff);
  transform-origin: center;
  opacity: var(--splash-opacity, 0.98);
  transition: 
    fill 0.45s ease,
    transform 0.8s cubic-bezier(0.34,1.56,0.64,1),
    opacity 0.3s ease;
  paint-order: fill markers stroke;
}

/* Interactive Liquid Effect */
@media (hover: hover) {
  .summer_splash-shape:hover .summer_splash-shape-fill {
    transform: 
      rotateY(12deg) 
      scaleY(1.08) 
      skewX(2deg);
    fill: var(--splash-hover, hsl(195 100% 98% / 0.92));
    filter: url('#liquid-turbulence');
  }
}

/* Mobile Fluid Adaptations */
@media (max-width: 768px) {
  .summer_splash-shape {
    --fluid-wave-height: 6px;
    --liquid-blur: 1px;
  }
  .summer_splash-shape svg {
    width: calc(160% + 1.3px);
  }
}

/* Advanced Animations */
[data-splash-animate="wave"] {
  animation: liquidRipple 8s ease-in-out infinite;
}

[data-splash-animate="pulse"] .summer_splash-shape-fill {
  animation: 
    chromaticPulse 5s ease infinite,
    subtleWobble 12s ease-in-out infinite;
}

@keyframes liquidRipple {
  0%, 100% { transform: translateX(-50%) scaleY(1); }
  50% { transform: translateX(-50%) scaleY(1.1); }
}

@keyframes chromaticPulse {
  0%, 100% { opacity: 0.96; fill: var(--splash-color, #fff); }
  50% { opacity: 1; fill: var(--splash-pulse, hsl(200 100% 99%)); }
}

@keyframes subtleWobble {
  0%, 100% { transform: rotateY(0deg); }
  25% { transform: rotateY(1deg); }
  75% { transform: rotateY(-1deg); }
}

/* SVG Filter for Liquid Effect */
.svg-filters {
  position: absolute;
  width: 0;
  height: 0;
}