
.hero {
  position: relative;          /* positioning context for overlays */
  overflow: hidden;            /* keep ::before clipped to hero */
  + min-height: clamp(260px, 52vw, 560px);  /* ← critical: restores layout height */
}

/* Decorative background layer that does NOT affect layout */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/images/business-opportunity-show-isle-optimized.webp')
              no-repeat center / contain;
  transform: translateY(clamp(-4rem, -5vw, -5rem));
  -webkit-mask-image: linear-gradient(#000 88%, transparent 100%);
          mask-image: linear-gradient(#000 88%, transparent 100%);
  z-index: 0;                  /* behind all hero content */
  pointer-events: none;
}

/* Optional mobile-specific background behavior */
@media (max-width: 600px){
  .hero::before{
    background-image: url('/images/businessopportunityshows-mobile.webp'); /* portrait asset */
    background-position: center top;
    background-size: cover;
    transform: none;
    -webkit-mask-image: linear-gradient(#000 92%, transparent 100%);
            mask-image: linear-gradient(#000 92%, transparent 100%);
  }
}

/* Animated overlay logo */
.idea-logo {
  position: absolute;
  top: 65%;       /* adjust up/down */
  left: 26%;      /* adjust left/right */
  width: clamp(64px, 12vw, 160px);
  height: auto;          /* preserve intrinsic ratio */
  aspect-ratio: 1 / 1;   /* force a square badge */
  object-fit: contain;   /* never stretch to fill */
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.3);
  transition:
    transform .6s cubic-bezier(.2,.7,.2,1),
    opacity  .6s cubic-bezier(.2,.7,.2,1);
  z-index: 3;                  /* above headings/inline content */
  pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.25));
}

.idea-logo.is-ready {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}


/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .idea-logo { transform: none; }
  .idea-logo.is-ready { transition: none; opacity: 1; }
}

