/* ============================================================
   SHGT — Degradês Animados & Elementos Líquidos (W1)
   Arquivo: enhance/liquid-gradients.css
   Prefixo de classes: fx-  |  pointer-events: none em tudo decorativo
   Tokens: usa apenas var(--...) já definidos em styles.css
   ============================================================ */


/* ── 1. AURORA / MESH — HERO ──────────────────────────────── */

.fx-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.fx-aurora-spot {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

/* Spot 1 — violeta vívido, canto superior direito */
.fx-aurora-spot--1 {
  width: 58%;
  height: 68%;
  top: -18%;
  right: -10%;
  background: radial-gradient(circle at 40% 40%, var(--violet-500), transparent 65%);
  opacity: 0.30;
  animation: fx-drift-a 28s ease-in-out infinite;
}

/* Spot 2 — magenta, canto inferior esquerdo */
.fx-aurora-spot--2 {
  width: 48%;
  height: 58%;
  bottom: -15%;
  left: -10%;
  background: radial-gradient(circle at 60% 60%, var(--magenta-500), transparent 65%);
  opacity: 0.24;
  animation: fx-drift-b 22s ease-in-out infinite;
}

/* Spot 3 — violeta médio, centro-esquerda (profundidade) */
.fx-aurora-spot--3 {
  width: 42%;
  height: 50%;
  top: 28%;
  left: 18%;
  background: radial-gradient(circle at 50% 50%, var(--violet-700), transparent 60%);
  opacity: 0.22;
  animation: fx-drift-c 18s ease-in-out infinite reverse;
}

/* Spot 4 — glow magenta claro, topo-centro */
.fx-aurora-spot--4 {
  width: 28%;
  height: 36%;
  top: 6%;
  left: 56%;
  background: radial-gradient(circle at 50% 50%, var(--magenta-glow), transparent 60%);
  opacity: 0.16;
  animation: fx-drift-d 32s ease-in-out infinite;
}

@keyframes fx-drift-a {
  0%, 100% { transform: translate(0,    0)    scale(1);    }
  33%       { transform: translate(-6%,  9%)   scale(1.07); }
  66%       { transform: translate( 7%, -5%)   scale(0.94); }
}

@keyframes fx-drift-b {
  0%, 100% { transform: translate(  0,   0)   scale(1);    }
  40%       { transform: translate(  9%, -7%)  scale(1.09); }
  75%       { transform: translate( -5%,  6%)  scale(0.96); }
}

@keyframes fx-drift-c {
  0%, 100% { transform: translate(  0,   0)   scale(1);    }
  50%       { transform: translate(  5%,  7%)  scale(1.05); }
}

@keyframes fx-drift-d {
  0%, 100% { transform: translate(  0,   0)   scale(1);    }
  35%       { transform: translate( -7%,  5%)  scale(1.04); }
  70%       { transform: translate(  4%, -9%)  scale(0.97); }
}


/* ── 2. BLOBS LÍQUIDOS (GOOEY) ────────────────────────────── */

.fx-liquid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Aplica efeito goo via filtro SVG (id=fx-goo deve existir no DOM) */
.fx-liquid--goo {
  filter: url(#fx-goo);
}

.fx-blob {
  position: absolute;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  will-change: border-radius, transform;
}

/* ·· Hero: blobs individuais com blur suave, sem merge ·· */
.fx-liquid--hero .fx-blob--1 {
  width: 280px;
  height: 280px;
  top: 5%;
  left: 2%;
  background: rgba(124, 58, 237, 0.13);   /* violet-500 */
  filter: blur(48px);
  animation:
    fx-morph-a 16s ease-in-out infinite,
    fx-float-1 22s ease-in-out infinite;
}

.fx-liquid--hero .fx-blob--2 {
  width: 220px;
  height: 220px;
  bottom: 14%;
  right: 4%;
  background: rgba(162, 28, 175, 0.10);   /* magenta-500 */
  filter: blur(40px);
  animation:
    fx-morph-b 20s ease-in-out infinite,
    fx-float-2 26s ease-in-out infinite;
}

/* ·· Seção clara: blur individual (sem goo filter — threshold incompatível com baixa opacidade) ·· */
.fx-liquid--light .fx-blob--1 {
  width: 380px;
  height: 380px;
  top: -60px;
  right: 2%;
  background: rgba(124, 58, 237, 0.22);
  filter: blur(64px);
  animation:
    fx-morph-a 18s ease-in-out infinite,
    fx-float-1 24s ease-in-out infinite;
}

.fx-liquid--light .fx-blob--2 {
  width: 300px;
  height: 300px;
  bottom: -40px;
  left: 3%;
  background: rgba(162, 28, 175, 0.18);
  filter: blur(56px);
  animation:
    fx-morph-b 22s ease-in-out infinite,
    fx-float-2 20s ease-in-out infinite reverse;
}

.fx-liquid--light .fx-blob--3 {
  width: 240px;
  height: 240px;
  top: 35%;
  left: 42%;
  background: rgba(147, 51, 234, 0.13);
  filter: blur(72px);
  animation:
    fx-morph-c 26s ease-in-out infinite,
    fx-float-3 18s ease-in-out infinite;
}

/* Contexto de posição para a seção clara hospedeira */
#diferenciais {
  position: relative;
  overflow: hidden;
}

/* Morphing */
@keyframes fx-morph-a {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  33%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  66%       { border-radius: 50% 50% 40% 60% / 40% 50% 60% 50%; }
}

@keyframes fx-morph-b {
  0%, 100% { border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; }
  50%       { border-radius: 60% 40% 30% 70% / 40% 70% 30% 60%; }
}

@keyframes fx-morph-c {
  0%, 100% { border-radius: 70% 30% 40% 60% / 50% 60% 40% 50%; }
  40%       { border-radius: 30% 70% 60% 40% / 60% 40% 60% 40%; }
  80%       { border-radius: 50% 50% 30% 70% / 70% 30% 50% 50%; }
}

/* Float */
@keyframes fx-float-1 {
  0%, 100% { transform: translate(  0,     0);    }
  50%       { transform: translate( 16px, -22px); }
}

@keyframes fx-float-2 {
  0%, 100% { transform: translate(   0,    0);    }
  50%       { transform: translate(-14px,  18px); }
}

@keyframes fx-float-3 {
  0%, 100% { transform: translate(  0,    0);    }
  50%       { transform: translate( 10px, 14px); }
}


/* ── 3. DEGRADÊ EM MOVIMENTO ──────────────────────────────── */

/* Aplique em .btn-primary ou .card-highlight para gradiente deslizante */
.fx-grad-anim {
  background: linear-gradient(
    135deg,
    var(--violet-600)   0%,
    var(--magenta-500) 34%,
    var(--violet-500)  67%,
    var(--magenta-glow) 100%
  );
  background-size: 300% 300%;
  animation: fx-grad-slide 7s ease infinite;
}

@keyframes fx-grad-slide {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Gradiente animado para textos (ex.: .hero-highlight, headings) */
.fx-grad-text {
  background: linear-gradient(
    90deg,
    var(--magenta-glow) 0%,
    #E879F9            20%,
    var(--magenta-glow) 40%,
    var(--violet-500)  60%,
    var(--magenta-glow) 80%,
    #E879F9            100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fx-text-slide 5s linear infinite;
}

@keyframes fx-text-slide {
  0%   { background-position: 0%   0%; }
  100% { background-position: 300% 0%; }
}


/* ── 4. DIVISOR ONDULADO (opcional) ───────────────────────── */

/* Substituto animado para .hero::after; adicione a class .fx-wave ao .hero */
.fx-wave {
  position: relative;
}

.fx-wave::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -2%;
  width: 104%;
  height: 72px;
  background: var(--bg);
  border-radius: 120% 120% 0 0 / 72px 72px 0 0;
  pointer-events: none;
  animation: fx-wave-rock 7s ease-in-out infinite;
}

@keyframes fx-wave-rock {
  0%, 100% {
    border-radius: 120% 120% 0 0 / 72px 72px 0 0;
    transform: translateX(0);
  }
  50% {
    border-radius: 100% 140% 0 0 / 60px 84px 0 0;
    transform: translateX(-1.5%);
  }
}


/* ── 5. ACESSIBILIDADE — REDUÇÃO DE MOVIMENTO ─────────────── */

@media (prefers-reduced-motion: reduce) {
  .fx-aurora-spot {
    animation: none !important;
  }

  .fx-blob {
    animation: none !important;
    border-radius: 50% !important;
  }

  .fx-grad-anim {
    animation: none !important;
    background-size: 100% 100%;
    background-position: 0% 50%;
  }

  .fx-grad-text {
    animation: none !important;
    background-size: 100% 100%;
    background-position: 0% 0%;
  }

  .fx-wave::after {
    animation: none !important;
  }
}