/* ===== ADVANCED MORPHING & TRANSFORMATION EFFECTS ===== */

/* Liquid Morphing Effects */
@keyframes liquidMorph {
  0% {
    border-radius: 50% 50% 50% 50%;
    transform: rotate(0deg) scale(1);
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  }
  25% {
    border-radius: 80% 20% 60% 40%;
    transform: rotate(90deg) scale(1.1);
    background: linear-gradient(135deg, #4ecdc4, #45b7d1);
  }
  50% {
    border-radius: 30% 70% 70% 30%;
    transform: rotate(180deg) scale(0.9);
    background: linear-gradient(225deg, #45b7d1, #f9ca24);
  }
  75% {
    border-radius: 60% 40% 30% 70%;
    transform: rotate(270deg) scale(1.2);
    background: linear-gradient(315deg, #f9ca24, #f0932b);
  }
  100% {
    border-radius: 50% 50% 50% 50%;
    transform: rotate(360deg) scale(1);
    background: linear-gradient(45deg, #f0932b, #ff6b6b);
  }
}

@keyframes blobMorph {
  0%, 100% {
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    transform: translate(0, 0) rotate(0deg);
  }
  14% {
    border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
    transform: translate(-20px, -10px) rotate(51deg);
  }
  28% {
    border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
    transform: translate(-20px, 20px) rotate(102deg);
  }
  42% {
    border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
    transform: translate(0px, 30px) rotate(153deg);
  }
  56% {
    border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
    transform: translate(20px, 20px) rotate(204deg);
  }
  70% {
    border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
    transform: translate(20px, -10px) rotate(255deg);
  }
  84% {
    border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
    transform: translate(0px, -20px) rotate(306deg);
  }
}

@keyframes fluidTransition {
  0% {
    clip-path: circle(20% at 20% 50%);
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  }
  25% {
    clip-path: ellipse(40% 30% at 40% 40%);
    background: linear-gradient(180deg, #764ba2 0%, #f093fb 100%);
  }
  50% {
    clip-path: polygon(50% 0%, 80% 50%, 50% 100%, 20% 50%);
    background: linear-gradient(270deg, #f093fb 0%, #f5576c 100%);
  }
  75% {
    clip-path: ellipse(60% 40% at 60% 60%);
    background: linear-gradient(360deg, #f5576c 0%, #4facfe 100%);
  }
  100% {
    clip-path: circle(80% at 80% 50%);
    background: linear-gradient(90deg, #4facfe 0%, #667eea 100%);
  }
}

/* Geometric Shape Morphing */
@keyframes shapeMorph {
  0% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transform: rotate(0deg);
  }
  20% {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    transform: rotate(72deg);
  }
  40% {
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    transform: rotate(144deg);
  }
  60% {
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    transform: rotate(216deg);
  }
  80% {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    transform: rotate(288deg);
  }
  100% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transform: rotate(360deg);
  }
}

@keyframes polygonMorph {
  0% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
  16.66% {
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  }
  33.33% {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  }
  50% {
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
  }
  66.66% {
    clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
  }
  83.33% {
    clip-path: polygon(40% 0%, 60% 0%, 100% 40%, 100% 60%, 60% 100%, 40% 100%, 0% 60%, 0% 40%);
  }
  100% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
}

/* Advanced 3D Morphing */
@keyframes cube3DMorph {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
  }
  25% {
    transform: rotateX(90deg) rotateY(45deg) rotateZ(0deg) scale3d(1.2, 0.8, 1);
  }
  50% {
    transform: rotateX(180deg) rotateY(90deg) rotateZ(90deg) scale3d(0.8, 1.2, 1);
  }
  75% {
    transform: rotateX(270deg) rotateY(135deg) rotateZ(180deg) scale3d(1, 1, 0.8);
  }
  100% {
    transform: rotateX(360deg) rotateY(180deg) rotateZ(270deg) scale3d(1, 1, 1);
  }
}

@keyframes sphereMorph {
  0%, 100% {
    border-radius: 50%;
    transform: scale3d(1, 1, 1) rotateX(0deg);
  }
  25% {
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    transform: scale3d(1.3, 0.7, 1) rotateX(90deg);
  }
  50% {
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    transform: scale3d(0.7, 1.3, 1) rotateX(180deg);
  }
  75% {
    border-radius: 50% 50% 50% 50% / 80% 20% 80% 20%;
    transform: scale3d(1.1, 0.9, 1) rotateX(270deg);
  }
}

/* Organic Morphing Effects */
@keyframes organicGrowth {
  0% {
    transform: scale(0.1) rotate(0deg);
    border-radius: 50%;
    opacity: 0;
  }
  25% {
    transform: scale(0.5) rotate(90deg);
    border-radius: 60% 40% 60% 40%;
    opacity: 0.7;
  }
  50% {
    transform: scale(1) rotate(180deg);
    border-radius: 40% 60% 40% 60%;
    opacity: 1;
  }
  75% {
    transform: scale(1.2) rotate(270deg);
    border-radius: 70% 30% 70% 30%;
    opacity: 0.8;
  }
  100% {
    transform: scale(1) rotate(360deg);
    border-radius: 50%;
    opacity: 1;
  }
}

@keyframes cellDivision {
  0% {
    transform: scale(1);
    border-radius: 50%;
  }
  30% {
    transform: scale(1.2);
    border-radius: 60% 40% 60% 40%;
  }
  60% {
    transform: scale(1.4);
    border-radius: 40% 60% 40% 60%;
  }
  80% {
    transform: scale(1.6);
    border-radius: 30% 70% 30% 70%;
  }
  100% {
    transform: scale(2);
    border-radius: 50% 50% 50% 50%;
    opacity: 0;
  }
}

/* Text Morphing Effects */
@keyframes textMorph {
  0%, 100% {
    transform: perspective(400px) rotateY(0deg) scale(1);
    text-shadow: 0 0 0 transparent;
  }
  25% {
    transform: perspective(400px) rotateY(90deg) scale(0.8);
    text-shadow: 10px 0 20px rgba(0,0,0,0.3);
  }
  50% {
    transform: perspective(400px) rotateY(180deg) scale(0.6);
    text-shadow: 0 0 30px rgba(0,0,0,0.5);
  }
  75% {
    transform: perspective(400px) rotateY(270deg) scale(0.8);
    text-shadow: -10px 0 20px rgba(0,0,0,0.3);
  }
}

@keyframes letterMorph {
  0% {
    transform: rotateX(0deg) rotateY(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg) scale(0.5);
    opacity: 0.3;
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) scale(1);
    opacity: 1;
  }
}

/* Utility Classes */
.liquid-morph {
  animation: liquidMorph 6s infinite ease-in-out;
  width: 100px;
  height: 100px;
  display: inline-block;
}

.blob-morph {
  animation: blobMorph 8s infinite ease-in-out;
  width: 150px;
  height: 150px;
  background: linear-gradient(45deg, #ff9a9e, #fecfef, #fecfef);
  display: inline-block;
}

.fluid-transition {
  animation: fluidTransition 5s infinite ease-in-out;
  width: 200px;
  height: 200px;
  display: inline-block;
}

.shape-morph {
  animation: shapeMorph 4s infinite linear;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: inline-block;
}

.polygon-morph {
  animation: polygonMorph 6s infinite ease-in-out;
  width: 120px;
  height: 120px;
  background: linear-gradient(45deg, #f093fb, #f5576c);
  display: inline-block;
}

.cube-3d-morph {
  animation: cube3DMorph 8s infinite ease-in-out;
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  display: inline-block;
  transform-style: preserve-3d;
}

.sphere-morph {
  animation: sphereMorph 5s infinite ease-in-out;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #ff6b6b, #ee5a24);
  display: inline-block;
  transform-style: preserve-3d;
}

.organic-growth {
  animation: organicGrowth 4s infinite ease-in-out;
  width: 60px;
  height: 60px;
  background: linear-gradient(45deg, #a8edea, #fed6e3);
  display: inline-block;
}

.cell-division {
  animation: cellDivision 3s infinite ease-out;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, #d299c2, #fef9d7);
  display: inline-block;
}

.text-morph {
  animation: textMorph 4s infinite ease-in-out;
  display: inline-block;
  transform-style: preserve-3d;
}

.letter-morph {
  animation: letterMorph 2s infinite ease-in-out;
  display: inline-block;
  transform-style: preserve-3d;
}

/* Interactive Morphing */
.morph-container:hover .liquid-morph {
  animation-duration: 2s;
}

.morph-container:hover .blob-morph {
  animation-direction: reverse;
}

.morph-container:hover .shape-morph {
  animation-play-state: paused;
}

/* Staggered Morphing */
.morph-group .morph-item:nth-child(1) { animation-delay: 0s; }
.morph-group .morph-item:nth-child(2) { animation-delay: 0.5s; }
.morph-group .morph-item:nth-child(3) { animation-delay: 1s; }
.morph-group .morph-item:nth-child(4) { animation-delay: 1.5s; }
.morph-group .morph-item:nth-child(5) { animation-delay: 2s; }

/* Performance Optimizations */
.morph-container {
  will-change: transform, border-radius, clip-path;
  backface-visibility: hidden;
  perspective: 1000px;
}

.morph-container * {
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .liquid-morph,
  .blob-morph,
  .shape-morph {
    width: 80px;
    height: 80px;
  }
  
  .fluid-transition {
    width: 150px;
    height: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-morph,
  .blob-morph,
  .fluid-transition,
  .shape-morph,
  .polygon-morph,
  .cube-3d-morph,
  .sphere-morph,
  .organic-growth,
  .cell-division,
  .text-morph,
  .letter-morph {
    animation-duration: 10s;
    animation-iteration-count: 1;
  }
}