/**
 * Shared Hero Section Component
 *
 * Common patterns used across hero sections:
 * - Gradient orbs (animated blurs)
 * - Background grids
 * - Video overlays
 * - Container patterns
 */

/* Hero Orbs - Animated gradient blurs */
.hero-orb,
.blog-hero-orb,
.portfolio-hero-orb,
.services-hero-orb,
.about-hero-orb,
.contact-hero-orb {
  position: absolute;
  width: 384px;
  height: 384px;
  border-radius: 50%;
  filter: blur(120px);
  background-color: var(--hero-orb-color, #F2B713);
  pointer-events: none;
  z-index: 1;
}

/* Hero Grid Background */
.hero-grid,
.blog-hero-grid,
.portfolio-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(242, 183, 19, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 183, 19, 0.03) 1px, transparent 1px);
  background-size: 100px 100px;
  z-index: 0;
  pointer-events: none;
}

/* Hero Video Overlay */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(30, 29, 27, 0.8) 0%,
    rgba(30, 29, 27, 0.7) 50%,
    rgba(30, 29, 27, 1) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Hero Container Pattern */
.hero-container,
.blog-hero-container,
.portfolio-hero-container,
.services-hero-container,
.about-hero-container,
.contact-hero-container {
  position: relative;
  z-index: 10;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Hero Content Pattern */
.hero-content,
.blog-hero-content,
.portfolio-hero-content {
  position: relative;
  z-index: 10;
}

/* Hero Label Pattern */
.hero-label,
.blog-hero-label,
.portfolio-hero-label {
  display: block;
  color: var(--hero-label-color, #F2B713);
  letter-spacing: 0.3em;
  font-size: 0.875rem;
  margin-bottom: 24px;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  text-transform: uppercase;
}

/* Hero Heading Pattern */
.hero-heading,
.blog-hero-heading,
.portfolio-hero-heading {
  color: #ffffff;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Hero Heading Gradient */
.hero-heading-gradient,
.blog-hero-heading-gradient,
.portfolio-hero-heading-gradient {
  background: linear-gradient(
    to right,
    #ffffff,
    var(--hero-gradient-color, #F2B713)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}