/**
 * 框架 · 液态云层 · 流体形状缓慢变化 (Liquid Clouds & Organic Morphing Engine)
 * 采用无极贝塞尔变形与平滑流体漂移，营造通透、灵动的云层空间
 */

:root {
  --liquid-radius-1: 60% 40% 30% 70% / 60% 30% 70% 40%;
  --liquid-radius-2: 30% 60% 70% 40% / 50% 60% 30% 60%;
  --liquid-radius-3: 50% 50% 30% 70% / 55% 45% 55% 45%;

  --liquid-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --liquid-duration: 22s;
}

/* 背景流动液态云层容器 */
.liquid-cloud-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* 液态云层母体 Blob 1 */
.liquid-blob {
  position: absolute;
  filter: blur(80px);
  opacity: 0.28;
  will-change: transform, border-radius;
}

.liquid-blob-1 {
  top: -10%;
  right: -5%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, #f6d365 0%, #fda085 45%, #ff758c 80%, transparent 100%);
  border-radius: var(--liquid-radius-1);
  animation: fluidMorph1 var(--liquid-duration) infinite alternate ease-in-out,
             fluidDrift1 36s infinite linear;
}

.liquid-blob-2 {
  top: 35%;
  left: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, #ff758c 0%, #7928ca 50%, #4facfe 90%, transparent 100%);
  border-radius: var(--liquid-radius-2);
  animation: fluidMorph2 26s infinite alternate ease-in-out,
             fluidDrift2 42s infinite linear;
}

.liquid-blob-3 {
  bottom: -15%;
  right: 15%;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, #fda085 0%, #ff758c 50%, #7928ca 85%, transparent 100%);
  border-radius: var(--liquid-radius-3);
  animation: fluidMorph1 30s infinite alternate ease-in-out;
}

/* 流体形状缓慢变形动画 */
@keyframes fluidMorph1 {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: rotate(0deg) scale(1);
  }
  34% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    transform: rotate(45deg) scale(1.08);
  }
  67% {
    border-radius: 50% 50% 30% 70% / 55% 45% 55% 45%;
    transform: rotate(-35deg) scale(0.94);
  }
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes fluidMorph2 {
  0% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    transform: rotate(0deg) scale(1);
  }
  50% {
    border-radius: 55% 45% 65% 35% / 40% 65% 35% 60%;
    transform: rotate(-60deg) scale(1.12);
  }
  100% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes fluidDrift1 {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-80px, 60px); }
  100% { transform: translate(0, 0); }
}

@keyframes fluidDrift2 {
  0% { transform: translate(0, 0); }
  50% { transform: translate(70px, -90px); }
  100% { transform: translate(0, 0); }
}

/* 液态毛玻璃卡片 */
.liquid-card {
  position: relative;
  background: rgba(14, 19, 32, 0.72);
  border: 1px solid rgba(253, 160, 133, 0.22);
  border-radius: 22px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  transition: transform 0.4s var(--liquid-easing), 
              border-color 0.4s ease, 
              box-shadow 0.4s ease;
  overflow: hidden;
}

.liquid-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(246, 211, 101, 0.5), transparent, rgba(255, 117, 140, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.4s ease;
}

.liquid-card:hover {
  transform: translateY(-6px);
  border-color: rgba(246, 211, 101, 0.45);
  box-shadow: 0 24px 50px -10px rgba(253, 160, 133, 0.25);
}

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

/* 留白与液态内容显入 (Liquid Reveal) */
.liquid-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.liquid-reveal.is-active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .liquid-blob-1,
  .liquid-blob-2,
  .liquid-blob-3 {
    animation: none !important;
  }
  .liquid-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}