/* HUG AppWorks · Mobile Hero Video Enhancer v1.0
   Activates only on screens <= 820px. Desktop is untouched. */

@media (max-width: 820px) {
  .hero-with-video {
    /* Keep the existing brand background as a fallback. */
    background:
      radial-gradient(circle at 82% 15%, rgba(117, 40, 245, .12), transparent 20rem),
      linear-gradient(180deg, #fbfbff 0%, #f3f0ff 100%) !important;
  }

  .hero-with-video .hero-video-layer {
    inset: 0 !important;
    overflow: hidden !important;
  }

  .hero-with-video .hero-background-video {
    /* Portrait asset fits the tall mobile hero instead of cropping a 16:9 clip. */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;

    /* More visible than desktop, but still behind readable content. */
    opacity: .38 !important;
    filter: grayscale(.12) contrast(1.06) brightness(1.16) saturate(.86) !important;
    transform: scale(1.02) !important;
  }

  .hero-with-video .hero-video-overlay {
    /* Preserve dark navy text while allowing the hexagonal motion to show through. */
    background:
      linear-gradient(180deg,
        rgba(250, 251, 255, .80) 0%,
        rgba(249, 249, 255, .70) 26%,
        rgba(247, 245, 255, .72) 58%,
        rgba(242, 239, 255, .82) 100%),
      radial-gradient(circle at 78% 40%,
        rgba(112, 39, 238, .10),
        transparent 40%) !important;
  }

  /* Give the headline area a tiny local readability boost without hiding the video. */
  .hero-with-video .hero-grid > div:first-child {
    position: relative;
  }

  .hero-with-video .hero-grid > div:first-child::before {
    content: "";
    position: absolute;
    inset: -18px -12px;
    z-index: -1;
    border-radius: 28px;
    background: radial-gradient(circle at 28% 42%,
      rgba(250, 251, 255, .34),
      rgba(250, 251, 255, 0) 72%);
    pointer-events: none;
  }

  /* Smaller mobile pause control. */
  .hero-video-control {
    right: 14px !important;
    bottom: 12px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 7px 10px !important;
    background: rgba(255,255,255,.82) !important;
  }
}

/* Extra tuning for phones rather than tablets. */
@media (max-width: 520px) {
  .hero-with-video .hero-background-video {
    opacity: .42 !important;
    object-position: 50% 48% !important;
  }

  .hero-with-video .hero-video-overlay {
    background:
      linear-gradient(180deg,
        rgba(250, 251, 255, .77) 0%,
        rgba(249, 249, 255, .68) 30%,
        rgba(247, 245, 255, .70) 62%,
        rgba(242, 239, 255, .80) 100%),
      radial-gradient(circle at 76% 44%,
        rgba(112, 39, 238, .11),
        transparent 42%) !important;
  }
}

/* Accessibility / battery-conscious fallback. */
@media (prefers-reduced-motion: reduce) {
  .hero-with-video .hero-background-video {
    display: none !important;
  }

  .hero-with-video .hero-video-layer {
    background:
      url("hero-background-mobile-poster.webp") center / cover no-repeat !important;
    opacity: .30 !important;
  }
}