/* =========================================================
   ADDVIBES — HERO SEAMLESS EXIT V2
   CSS ONLY — direct override, no JS/class dependency.
   Creates a visible 110px melt from the hero into the
   warm ADDVIBES background underneath.
========================================================= */

#addvibesHero .addvibes-hero-sticky::after{
  content:"" !important;
  position:absolute !important;

  left:0 !important;
  right:0 !important;
  bottom:-1px !important;

  width:100% !important;
  height:110px !important;

  transform:none !important;
  pointer-events:none !important;

  /* Above the image/aura, below hero controls */
  z-index:6 !important;

  background:

    /* ADDVIBES warm center glow matching the section below */
    radial-gradient(
      ellipse 34% 155% at 50% 118%,
      rgba(255,145,60,.58) 0%,
      rgba(255,166,88,.38) 28%,
      rgba(224,169,59,.18) 48%,
      transparent 76%
    ),

    /* subtle blue left edge */
    radial-gradient(
      ellipse 24% 150% at 0% 100%,
      rgba(47,168,217,.13) 0%,
      rgba(47,168,217,.04) 46%,
      transparent 74%
    ),

    /* subtle magenta right edge */
    radial-gradient(
      ellipse 24% 150% at 100% 100%,
      rgba(214,62,156,.12) 0%,
      rgba(214,62,156,.038) 46%,
      transparent 74%
    ),

    /* actual vertical melt */
    linear-gradient(
      to bottom,
      rgba(252,249,246,0) 0%,
      rgba(252,249,246,.015) 8%,
      rgba(252,249,246,.06) 22%,
      rgba(252,249,246,.16) 38%,
      rgba(252,249,246,.34) 55%,
      rgba(251,247,242,.58) 72%,
      rgba(250,244,238,.82) 88%,
      #FAF4EE 100%
    ) !important;

  opacity:1 !important;
}

/* Keep the final hero navigation/control bar above the blend */
#addvibesHero .addvibes-hero-ui,
#addvibesHero .addvibes-hero-dots,
#addvibesHero .addvibes-mobile-hero-controller,
#addvibesHero .addvibes-mobile-hero-nav{
  z-index:30 !important;
}

/* Mobile */
@media (max-width:900px), (orientation:portrait){
  #addvibesHero .addvibes-hero-sticky::after{
    height:84px !important;

    background:
      radial-gradient(
        ellipse 44% 160% at 50% 118%,
        rgba(255,145,60,.48) 0%,
        rgba(255,166,88,.28) 30%,
        rgba(224,169,59,.12) 50%,
        transparent 76%
      ),
      radial-gradient(
        ellipse 32% 150% at 0% 100%,
        rgba(47,168,217,.10) 0%,
        transparent 74%
      ),
      radial-gradient(
        ellipse 32% 150% at 100% 100%,
        rgba(214,62,156,.095) 0%,
        transparent 74%
      ),
      linear-gradient(
        to bottom,
        rgba(252,249,246,0) 0%,
        rgba(252,249,246,.05) 24%,
        rgba(252,249,246,.20) 46%,
        rgba(251,247,242,.50) 70%,
        rgba(250,244,238,.82) 90%,
        #FAF4EE 100%
      ) !important;
  }
}