/* Warm Glow hero concept — PR #14
   Uses the working concept asset as an integrated hero background while
   preserving the existing landing-page content and contact flow. */

.hero {
  min-height: clamp(600px, 72vh, 760px);
  background: #211d19;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #211d19;
  background-image:
    linear-gradient(90deg,
      rgba(25, 21, 18, 0.96) 0%,
      rgba(25, 21, 18, 0.88) 28%,
      rgba(25, 21, 18, 0.62) 46%,
      rgba(25, 21, 18, 0.20) 67%,
      rgba(25, 21, 18, 0.12) 100%),
    linear-gradient(180deg,
      rgba(20, 17, 15, 0.26) 0%,
      rgba(20, 17, 15, 0.02) 42%,
      rgba(20, 17, 15, 0.24) 100%),
    url('/brand/webbiecorn/website/hero/catcorn-warm-glow-hero.webp?v=3');
  background-position: center, center, calc(100% - clamp(0px, 1.5vw, 24px)) center;
  background-size: 100% 100%, 100% 100%, auto 100%;
  background-repeat: no-repeat;
}

.hero-grid {
  min-height: clamp(430px, 52vh, 560px);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.30);
}

/* Keep the legacy node in the DOM because landing.js currently uses
   .visual-card as its motion bootstrap before it initializes the contact form.
   The warm-glow artwork itself is now the hero background, so the old visual
   must not render as a second Catcorn. */
.hero-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 760px) {
  .hero {
    min-height: 860px;
    padding-bottom: 5rem;
  }

  .hero::before {
    background-image:
      linear-gradient(180deg,
        rgba(25, 21, 18, 0.92) 0%,
        rgba(25, 21, 18, 0.78) 46%,
        rgba(25, 21, 18, 0.38) 72%,
        rgba(25, 21, 18, 0.28) 100%),
      linear-gradient(90deg,
        rgba(25, 21, 18, 0.58) 0%,
        rgba(25, 21, 18, 0.28) 55%,
        rgba(25, 21, 18, 0.10) 100%),
      url('/brand/webbiecorn/website/hero/catcorn-warm-glow-hero.webp?v=3');
    background-position: center, center, 84% 100%;
    background-size: 100% 100%, 100% 100%, auto 52%;
    background-repeat: no-repeat;
  }

  .hero-grid {
    min-height: 560px;
    align-items: start;
  }

  .hero-copy {
    max-width: 34rem;
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 860px;
  }

  .hero::before {
    background-position: center, center, 84% 100%;
    background-size: 100% 100%, 100% 100%, auto 52%;
  }
}