/* AI Fiesta Elementor Effects */

.aifi-btn, .aifi-bg {
  --aifi-a: #3AD6C8;
  --aifi-mid: #000000;
  --aifi-c: #103866;
}

/* BUTTON */
.aifi-btn .elementor-button {
  position: relative;
  overflow: hidden;
  border-radius: 999px !important;

  background: linear-gradient(
    120deg,
    var(--aifi-a) 0%,
    rgba(0,0,0,0.40) var(--aifi-mid-stop, 40%),
    var(--aifi-c) 100%
  );
  background-size: 300% 300%;
  animation: aifiGradient var(--aifi-speed, 4s) linear infinite;

  border: 1px solid rgba(255,255,255,0.12);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform;
}

/* 3D depth */
.aifi-btn[data-aifi-3d="1"] .elementor-button {
  box-shadow:
    0 10px 0 rgba(0,0,0,0.55),
    0 22px 60px rgba(58, 214, 200, 0.45);
}

/* Gloss highlight */
.aifi-btn .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.22), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 2;
}

/* Inner shadow depth */
.aifi-btn .elementor-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-shadow: inset 0 -10px 18px rgba(0,0,0,0.35), inset 0 6px 10px rgba(255,255,255,0.08);
  pointer-events: none;
  z-index: 3;
}

/* Dot layer (inserted via JS) */
.aifi-dot-layer {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  opacity: .26;
  mix-blend-mode: overlay;

  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.35) 1px, rgba(255,255,255,0) 1.7px);
  background-size: var(--aifi-dot-size, 10px) var(--aifi-dot-size, 10px);
  animation: aifiDots var(--aifi-dot-speed, 3.8s) linear infinite;
}

/* Hover glow */
.aifi-btn[data-aifi-glow="1"] .elementor-button:hover {
  filter: brightness(1.15) saturate(1.25);
}

/* SECTION / CONTAINER BACKGROUND */
.aifi-bg {
  position: relative;
  overflow: hidden;
}

.aifi-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    var(--aifi-a) 0%,
    rgba(0,0,0,0.40) var(--aifi-mid-stop, 40%),
    var(--aifi-c) 100%
  );
  background-size: 300% 300%;
  animation: aifiGradient var(--aifi-speed, 6s) linear infinite;
  opacity: .9;
}

.aifi-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: overlay;

  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.35) 1px, rgba(255,255,255,0) 1.7px);
  background-size: var(--aifi-dot-size, 10px) var(--aifi-dot-size, 10px);
  animation: aifiDots var(--aifi-dot-speed, 3.8s) linear infinite;
}

.aifi-bg > * {
  position: relative;
  z-index: 2;
}

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

@keyframes aifiDots {
  0% { background-position: 0px 0px; }
  100% { background-position: 120px 60px; }
}