/* Hide Safari's default play button overlay */
[data-video-hero] video::-webkit-media-controls-start-playback-button,
[data-video-hero] video::-webkit-media-controls-panel,
[data-video-hero] video::-webkit-media-controls {
  display: none !important;
  -webkit-appearance: none;
}

/* Loading spinner — sits behind video and overlay, covered when video fades in */
.video-hero__loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-hero__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: video-hero-spin 0.8s linear infinite;
}

@keyframes video-hero-spin {
  to { transform: rotate(360deg); }
}

/* Text wrapper — inline-block that hugs the text, no padding so the
   heading/subheading stay in their original position. The overlay
   extends past the wrapper via negative insets to create a feather
   zone without pushing the text around. */
.video-hero__text-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.video-hero__text-inner {
  position: relative;
  z-index: 1;
}

/* Dark fill with feathered edges. `filter: blur()` softens the
   rectangle's own edges so the shade fades smoothly into the video.
   Negative insets extend the overlay past the text; the left inset
   pushes far enough to clip the left feather off-screen.
   Figma: rgba(0, 8, 38, 0.6). */
.video-hero__overlay {
  position: absolute;
  top: -1.5rem;
  right: -2rem;
  bottom: -1rem;
  left: -4rem;
  pointer-events: none;
  background: rgba(0, 8, 38, 0.6);
  border-radius: 1.5rem;
  filter: blur(20px);
}

@media (min-width: 1024px) {
  .video-hero__overlay {
    top: -2rem;
    right: -2.5rem;
    bottom: -1.5rem;
    left: -4.5rem;
  }
}

/* Hero CTA white curved shape with inverted border radius */
.hero-cta-shape {
  position: relative;
  background: white;
  border-top-right-radius: 1.5rem;
  /* padding: top right bottom left - left matches header px-4/md:px-6 */
  padding: 1rem 1.5rem 1rem 1rem;
  align-self: flex-start;
}

/* Inverse curve - top left (dark curves down into white) */
.hero-cta-shape::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  background: radial-gradient(circle at 1.5rem 0, transparent 1.5rem, white 1.5rem);
}

/* Inverse curve - bottom right (dark curves left into white) */
.hero-cta-shape::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 1.5rem;
  height: 1.5rem;
  background: radial-gradient(circle at 1.5rem 0, transparent 1.5rem, white 1.5rem);
}

@media (min-width: 768px) {
  .hero-cta-shape::before,
  .hero-cta-shape::after {
    width: 2rem;
    height: 2rem;
    background: radial-gradient(circle at 2rem 0, transparent 2rem, white 2rem);
  }
}

.hero-cta-shape-inner {
  max-width: 1400px;
}

/* Heading - Figma 56px @ 1920 → 42px @ 1440
   Figma drop shadow: X 20 / Y 10 / Blur 50 / rgba(0, 0, 0, 0.7)
   Scaled 0.75 for 1440 viewport → 15 / 7.5 / 37.5 */
.video-hero__heading {
  font-size: 1.75rem; /* 28px mobile */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: white;
  text-shadow: 10px 5px 24px rgba(0, 0, 0, 0.7);
}

@media (min-width: 1024px) {
  .video-hero__heading {
    font-size: 2.625rem; /* 42px desktop */
    text-shadow: 15px 7.5px 37.5px rgba(0, 0, 0, 0.7);
  }
}

/* Subheading - Figma 28px @ 1920 → 21px @ 1440 */
.video-hero__subheading {
  font-size: 1rem; /* 16px mobile */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.9);
  max-width: 48rem;
  text-shadow: 10px 5px 24px rgba(0, 0, 0, 0.7);
}

@media (min-width: 1024px) {
  .video-hero__subheading {
    font-size: 1.3125rem; /* 21px desktop */
    text-shadow: 15px 7.5px 37.5px rgba(0, 0, 0, 0.7);
  }
}