/* ============================================================
   VoteMo custom effects — layered over TheGem/Elementor.
   Sections are targeted by the .vm-* classes set in Elementor
   (Advanced → CSS Classes), with data-id fallbacks in the JS.
   ============================================================ */

/* ---- Hero animated blobs ------------------------------------------------ */

/* The hero container needs to clip blobs that spill past its edges,
   and its content must stack above them. */
.vm-hero {
  overflow: hidden;
  position: relative;
}
.vm-hero > .e-con-inner,
.vm-hero > .elementor-element {
  position: relative;
  z-index: 2;
}

.vm-blob {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  transition: transform .3s ease-out;
}
.vm-blob__shape {
  width: 100%;
  height: 100%;
}

.vm-blob--a {
  top: -140px; right: -160px;
  width: 340px; height: 340px;
}
.vm-blob--a .vm-blob__shape {
  background: #FF6B4A;
  opacity: .85;
  filter: blur(1px);
  animation: vmBlobA 14s ease-in-out infinite;
}

.vm-blob--b1 {
  bottom: 40px; left: 60px;
  width: 300px; height: 300px;
}
.vm-blob--b1 .vm-blob__shape {
  background: #2E8B78;
  opacity: .65;
  animation: vmBlobB 11s ease-in-out infinite;
}

.vm-blob--b2 {
  top: 180px; left: -40px;
  width: 220px; height: 220px;
}
.vm-blob--b2 .vm-blob__shape {
  background: #2E8B78;
  opacity: .3;
  animation: vmBlobB 16s ease-in-out infinite;
}

@keyframes vmBlobA {
  0%, 100% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; transform: translate(0,0) scale(1); }
  33%      { border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; transform: translate(10px,-16px) scale(1.04); }
  66%      { border-radius: 35% 65% 55% 45% / 60% 35% 65% 40%; transform: translate(-14px,10px) scale(0.98); }
}
@keyframes vmBlobB {
  0%, 100% { border-radius: 55% 45% 40% 60% / 40% 55% 45% 60%; transform: translate(0,0) rotate(0deg); }
  50%      { border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%; transform: translate(-12px,14px) rotate(8deg); }
}

/* ---- Hero cover: hero pins while the page slides over it -------------- */

/* JS sets the sticky `top` offset inline (negative on short screens so the
   full hero can be seen before it pins). */
.vm-hero.vm-hero--pinned {
  position: sticky;
  z-index: 0;
}

/* The "sheet": every section after the hero, wrapped by JS. Opaque so the
   pinned hero can't show through transparent section backgrounds. */
.vm-sheet {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 150px 0px 0 0;
  box-shadow: 0 -32px 60px rgba(0, 0, 0, .18);
  overflow: hidden;
}

/* Anything below the Elementor content (theme footer etc.) must also paint
   above the pinned hero. */
#footer,
.site-footer,
#page > footer {
  position: relative;
  z-index: 2;
}

/* Hero inner columns get scroll-driven transforms from JS */
.vm-hero .e-con-inner > .e-con {
  will-change: transform, opacity;
}

/* Respect users who turn off motion */
@media (prefers-reduced-motion: reduce) {
  .vm-blob .vm-blob__shape { animation: none; }
  .vm-blob { transition: none; }
}