/* ═══════════════════════════════════════════════════════
   Thư viện Sơn Nhai — Morph Effects System
   Smooth morphing animations, blob shapes & fluid transitions
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   1. MORPH REVEAL — Elements morph from organic blobs
      to their final rectangular shape on scroll
   ───────────────────────────────────────────────────── */
.morph-reveal {
  opacity: 0;
  clip-path: polygon(
    8% 15%, 20% 2%, 42% 5%, 60% 0%, 78% 8%, 95% 2%,
    100% 18%, 98% 42%, 100% 62%, 97% 80%, 100% 95%,
    82% 100%, 60% 98%, 40% 100%, 20% 97%, 5% 100%,
    0% 82%, 2% 60%, 0% 38%, 3% 18%
  );
  transform: scale(0.92);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.morph-reveal.visible {
  opacity: 1;
  clip-path: polygon(
    0% 0%, 25% 0%, 50% 0%, 75% 0%, 100% 0%,
    100% 0%, 100% 25%, 100% 50%, 100% 75%, 100% 100%,
    100% 100%, 75% 100%, 50% 100%, 25% 100%, 0% 100%,
    0% 100%, 0% 75%, 0% 50%, 0% 25%, 0% 0%
  );
  transform: scale(1);
}


/* ─────────────────────────────────────────────────────
   2. MORPH IMAGE HOVER — Images warp organically on hover
   ───────────────────────────────────────────────────── */
.morph-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.morph-img-wrap img,
.morph-img-wrap .card-thumb,
.morph-img-wrap .p-thumb {
  transition:
    clip-path 0.65s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.5s ease;
  clip-path: inset(0% 0% 0% 0% round 0px);
}

.morph-img-wrap:hover img,
.morph-img-wrap:hover .card-thumb,
.morph-img-wrap:hover .p-thumb {
  clip-path: inset(3% 3% 3% 3% round 16px);
  transform: scale(1.08);
  filter: brightness(1.08) saturate(1.1);
}


/* ─────────────────────────────────────────────────────
   3. MORPH BLOB — Animated floating blob shapes
      Used as decorative background elements
   ───────────────────────────────────────────────────── */
.morph-blob {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: radial-gradient(
    ellipse at 30% 30%,
    rgba(0, 212, 212, 0.12) 0%,
    rgba(0, 212, 212, 0.04) 50%,
    transparent 80%
  );
  filter: blur(30px);
  animation: morphBlob 12s ease-in-out infinite alternate;
  will-change: border-radius, transform;
}

.morph-blob-2 {
  animation-delay: -4s;
  animation-duration: 15s;
  background: radial-gradient(
    ellipse at 70% 60%,
    rgba(0, 180, 216, 0.08) 0%,
    rgba(0, 100, 180, 0.03) 50%,
    transparent 80%
  );
}

.morph-blob-3 {
  animation-delay: -8s;
  animation-duration: 18s;
  background: radial-gradient(
    ellipse at 40% 70%,
    rgba(0, 255, 255, 0.06) 0%,
    rgba(0, 212, 212, 0.02) 50%,
    transparent 80%
  );
}

@keyframes morphBlob {
  0% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  25% {
    border-radius: 58% 42% 34% 66% / 63% 68% 32% 37%;
    transform: translate(15px, -20px) rotate(45deg) scale(1.05);
  }
  50% {
    border-radius: 40% 60% 66% 34% / 46% 36% 64% 54%;
    transform: translate(-10px, 15px) rotate(90deg) scale(0.95);
  }
  75% {
    border-radius: 67% 33% 42% 58% / 38% 62% 38% 62%;
    transform: translate(20px, 10px) rotate(135deg) scale(1.08);
  }
  100% {
    border-radius: 45% 55% 62% 38% / 53% 45% 55% 47%;
    transform: translate(-5px, -15px) rotate(180deg) scale(1);
  }
}


/* ─────────────────────────────────────────────────────
   4. MORPH SECTION DIVIDER — Liquid/wavy SVG divider
      between sections
   ───────────────────────────────────────────────────── */
.morph-divider {
  position: relative;
  width: 100%;
  height: 60px;
  overflow: hidden;
  pointer-events: none;
}

.morph-divider svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.morph-divider path {
  fill: var(--bg-2, #0D1018);
  transition: d 0.6s ease;
}

.morph-divider .wave-1 {
  animation: morphWave1 8s ease-in-out infinite alternate;
  opacity: 0.4;
}

.morph-divider .wave-2 {
  animation: morphWave2 10s ease-in-out infinite alternate;
  opacity: 0.2;
}

@keyframes morphWave1 {
  0%   { d: path("M0,40 C120,10 240,55 360,35 C480,15 600,50 720,40 C840,30 960,55 1080,35 C1200,15 1320,45 1440,40 L1440,80 L0,80 Z"); }
  50%  { d: path("M0,30 C100,50 280,20 400,45 C520,70 640,25 760,35 C880,45 1000,15 1200,50 C1300,60 1400,30 1440,35 L1440,80 L0,80 Z"); }
  100% { d: path("M0,45 C160,20 300,60 450,30 C600,0 720,55 840,40 C960,25 1100,50 1250,35 C1350,25 1420,50 1440,45 L1440,80 L0,80 Z"); }
}

@keyframes morphWave2 {
  0%   { d: path("M0,50 C180,25 360,60 540,40 C720,20 900,55 1080,45 C1200,35 1350,55 1440,50 L1440,80 L0,80 Z"); }
  100% { d: path("M0,35 C140,55 320,25 500,50 C680,75 860,30 1040,40 C1220,50 1380,25 1440,35 L1440,80 L0,80 Z"); }
}


/* ─────────────────────────────────────────────────────
   5. MORPH BUTTON — Buttons morph shape on hover
   ───────────────────────────────────────────────────── */
.morph-btn {
  position: relative;
  border-radius: 8px;
  transition:
    border-radius 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease,
    background 0.3s ease;
  overflow: hidden;
}

.morph-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.12) 0%,
    transparent 50%,
    rgba(0,212,212,0.08) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.morph-btn:hover {
  border-radius: 22px;
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 8px 28px rgba(0, 212, 212, 0.2),
    0 0 0 1px rgba(0, 212, 212, 0.15);
}

.morph-btn:hover::before {
  opacity: 1;
}

.morph-btn:active {
  border-radius: 12px;
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}


/* ─────────────────────────────────────────────────────
   6. MORPH CARD — Cards with morphing border + glow
   ───────────────────────────────────────────────────── */
.morph-card {
  position: relative;
  transition:
    border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease;
}

.morph-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(0, 212, 212, 0.3) 15%,
    transparent 30%,
    rgba(0, 212, 212, 0.15) 45%,
    transparent 60%,
    rgba(0, 212, 212, 0.2) 75%,
    transparent 90%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: morphCardGlow 6s linear infinite;
}

.morph-card:hover {
  border-radius: 20px;
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.morph-card:hover::after {
  opacity: 1;
}

@keyframes morphCardGlow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ─────────────────────────────────────────────────────
   7. MORPH TEXT — Text with morphing gradient mask
   ───────────────────────────────────────────────────── */
.morph-text {
  background: linear-gradient(
    120deg,
    #00D4D4 0%,
    #00FFFF 20%,
    #00B4D8 40%,
    #00D4D4 60%,
    #00FFFF 80%,
    #00B4D8 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: morphTextGradient 6s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(0, 212, 212, 0.35));
}

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


/* ─────────────────────────────────────────────────────
   8. MORPH CATEGORY ICON — Icon container morphs shape
   ───────────────────────────────────────────────────── */
.morph-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transition:
    border-radius 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.4s ease,
    box-shadow 0.4s ease;
  animation: morphIconIdle 8s ease-in-out infinite alternate;
}

.morph-icon:hover {
  border-radius: 50%;
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 30px rgba(0, 212, 212, 0.25);
  animation-play-state: paused;
}

@keyframes morphIconIdle {
  0%   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  25%  { border-radius: 58% 42% 50% 50% / 63% 43% 57% 37%; }
  50%  { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; }
  75%  { border-radius: 42% 58% 60% 40% / 34% 50% 50% 66%; }
  100% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; }
}


/* ─────────────────────────────────────────────────────
   9. MORPH PARALLAX IMAGE — Hero/Featured images
      with organic shape clip-path animation
   ───────────────────────────────────────────────────── */
.morph-frame {
  clip-path: polygon(
    2% 0%, 98% 0%, 100% 2%, 100% 98%,
    98% 100%, 2% 100%, 0% 98%, 0% 2%
  );
  transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.morph-frame:hover {
  clip-path: polygon(
    5% 2%, 95% 3%, 98% 8%, 97% 92%,
    93% 97%, 7% 95%, 2% 90%, 3% 8%
  );
}


/* ─────────────────────────────────────────────────────
   10. MORPH LOADING — Morphing loader blob
   ───────────────────────────────────────────────────── */
.morph-loader {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #00D4D4, #00B4D8);
  animation: morphLoader 2s ease-in-out infinite;
}

@keyframes morphLoader {
  0%   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(0deg); }
  33%  { border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%; transform: rotate(120deg); }
  66%  { border-radius: 70% 30% 50% 50% / 40% 60% 40% 60%; transform: rotate(240deg); }
  100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(360deg); }
}


/* ─────────────────────────────────────────────────────
   11. MORPH FEATURE COVER — Featured product cover
       with breathing organic shape
   ───────────────────────────────────────────────────── */
.morph-cover {
  position: relative;
  overflow: visible;
}

.morph-cover::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: linear-gradient(
    135deg,
    rgba(0, 212, 212, 0.15) 0%,
    rgba(0, 180, 216, 0.08) 50%,
    rgba(0, 100, 180, 0.05) 100%
  );
  animation: morphCoverGlow 8s ease-in-out infinite alternate;
  z-index: -1;
  filter: blur(12px);
}

@keyframes morphCoverGlow {
  0%   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; opacity: 0.6; }
  50%  { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; opacity: 1; }
  100% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; opacity: 0.7; }
}


/* ─────────────────────────────────────────────────────
   12. MORPH STAGGER — Sequential morph for grids
   ───────────────────────────────────────────────────── */
.morph-stagger > *:nth-child(1)  { transition-delay: 0.00s; }
.morph-stagger > *:nth-child(2)  { transition-delay: 0.06s; }
.morph-stagger > *:nth-child(3)  { transition-delay: 0.12s; }
.morph-stagger > *:nth-child(4)  { transition-delay: 0.18s; }
.morph-stagger > *:nth-child(5)  { transition-delay: 0.24s; }
.morph-stagger > *:nth-child(6)  { transition-delay: 0.30s; }
.morph-stagger > *:nth-child(7)  { transition-delay: 0.36s; }
.morph-stagger > *:nth-child(8)  { transition-delay: 0.42s; }
.morph-stagger > *:nth-child(9)  { transition-delay: 0.48s; }
.morph-stagger > *:nth-child(10) { transition-delay: 0.54s; }


/* ─────────────────────────────────────────────────────
   13. REDUCE MOTION — Respect user preferences
   ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .morph-blob,
  .morph-blob-2,
  .morph-blob-3,
  .morph-icon,
  .morph-loader,
  .morph-cover::before,
  .morph-divider .wave-1,
  .morph-divider .wave-2,
  .morph-text,
  .morph-card::after {
    animation: none !important;
  }

  .morph-reveal {
    clip-path: none !important;
    transition-duration: 0.3s !important;
  }

  .morph-btn:hover {
    border-radius: 8px;
    transform: translateY(-2px);
  }
}