/* Hero “Explore Organizer modules” — liquid gradient CTA (CSS port of Motion liquid button) */

.hero-cta-liquid {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  padding: 0;
  border: none;
  background: transparent;
  text-decoration: none;
  min-height: 46px;
  overflow: visible;
  vertical-align: middle;
}

.hero-cta-liquid:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 4px;
  border-radius: 999px;
}

.hero-cta-liquid__glow {
  position: absolute;
  inset: -22% -10%;
  border-radius: 999px;
  background: linear-gradient(
    100deg,
    #6d28d9 0%,
    #7c3aed 22%,
    #22d3ee 50%,
    #7c3aed 78%,
    #6d28d9 100%
  );
  background-size: 220% 100%;
  filter: blur(16px);
  opacity: 0.55;
  z-index: 0;
  animation: hero-liquid-glow 7s ease-in-out infinite;
  pointer-events: none;
}

.hero-cta-liquid__surface {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  border-radius: 999px;
  overflow: hidden;
  z-index: 1;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 8px 28px rgba(124, 58, 237, 0.35);
}

.hero-cta-liquid__liquid {
  position: absolute;
  inset: -40% -60%;
  border-radius: 50%;
  pointer-events: none;
}

.hero-cta-liquid__liquid--a {
  background: radial-gradient(
    ellipse 80% 55% at 30% 50%,
    rgba(124, 58, 237, 0.95) 0%,
    rgba(124, 58, 237, 0) 70%
  );
  mix-blend-mode: screen;
  animation: hero-liquid-drift-a 9s ease-in-out infinite;
}

.hero-cta-liquid__liquid--b {
  background: radial-gradient(
    ellipse 75% 50% at 70% 50%,
    rgba(34, 211, 238, 0.9) 0%,
    rgba(34, 211, 238, 0) 68%
  );
  mix-blend-mode: screen;
  animation: hero-liquid-drift-b 8s ease-in-out infinite;
}

.hero-cta-liquid__liquid--base {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    95deg,
    #6d28d9 0%,
    #7c3aed 28%,
    #22d3ee 52%,
    #8b5cf6 76%,
    #6d28d9 100%
  );
  background-size: 280% 100%;
  mix-blend-mode: normal;
  animation: hero-liquid-shift 8s ease-in-out infinite;
}

.hero-cta-liquid__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0%,
    transparent 42%,
    transparent 58%,
    rgba(0, 0, 0, 0.12) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.hero-cta-liquid__label {
  position: relative;
  z-index: 3;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.hero-cta-liquid:hover .hero-cta-liquid__glow,
.hero-cta-liquid:focus-visible .hero-cta-liquid__glow {
  opacity: 0.85;
  animation-duration: 2.8s;
}

.hero-cta-liquid:hover .hero-cta-liquid__liquid--base,
.hero-cta-liquid:focus-visible .hero-cta-liquid__liquid--base {
  animation-duration: 2.5s;
}

.hero-cta-liquid:hover .hero-cta-liquid__liquid--a,
.hero-cta-liquid:focus-visible .hero-cta-liquid__liquid--a {
  animation-duration: 3.2s;
}

.hero-cta-liquid:hover .hero-cta-liquid__liquid--b,
.hero-cta-liquid:focus-visible .hero-cta-liquid__liquid--b {
  animation-duration: 2.8s;
}

.hero-cta-liquid:hover .hero-cta-liquid__surface,
.hero-cta-liquid:focus-visible .hero-cta-liquid__surface {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 12px 36px rgba(34, 211, 238, 0.35);
}

@keyframes hero-liquid-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes hero-liquid-glow {
  0%,
  100% {
    background-position: 0% 50%;
    opacity: 0.5;
  }
  50% {
    background-position: 100% 50%;
    opacity: 0.72;
  }
}

@keyframes hero-liquid-drift-a {
  0%,
  100% {
    transform: translate(-8%, -6%) rotate(-12deg) scale(1);
  }
  50% {
    transform: translate(12%, 8%) rotate(8deg) scale(1.08);
  }
}

@keyframes hero-liquid-drift-b {
  0%,
  100% {
    transform: translate(10%, 4%) rotate(10deg) scale(1.02);
  }
  50% {
    transform: translate(-14%, -10%) rotate(-14deg) scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta-liquid__glow,
  .hero-cta-liquid__liquid--a,
  .hero-cta-liquid__liquid--b,
  .hero-cta-liquid__liquid--base {
    animation: none;
  }

  .hero-cta-liquid__glow {
    opacity: 0.45;
    background-position: 50% 50%;
  }

  .hero-cta-liquid__liquid--base {
    background-position: 50% 50%;
  }
}