/* Stone Collective - Hero Section Styles */

/* ========================================
   HERO SECTION
   ======================================== */

.section-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ========================================
   HERO BACKGROUND
   ======================================== */

.hero_background {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Water caustics image background */
  background-image: url('../assets/images/water.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hide the canvas - using image instead */
.hero_water-canvas {
  display: none;
}

/* Fallback gradient (shows if image fails to load) */
.hero_background-gradient {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    135deg,
    #1a4a52 0%,
    #295a63 25%,
    #2d6b75 50%,
    #1e444a 75%,
    #0f2a30 100%
  );
}

/* Subtle animated light overlay for movement effect */
.hero_background::before {
  content: '';
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(103, 227, 249, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(255, 255, 255, 0.04) 0%, transparent 40%);
  animation: waterMove 25s ease-in-out infinite;
  pointer-events: none;
}

.hero_background::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(103, 227, 249, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
  animation: heroGlow 15s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes waterMove {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(-5%, -3%) scale(1.02);
  }
  50% {
    transform: translate(-2%, -5%) scale(1);
  }
  75% {
    transform: translate(-4%, -1%) scale(1.01);
  }
}

@keyframes heroGlow {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

/* Unicorn Studio embed container */
.hero_background-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero_background-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ========================================
   HERO CONTAINER
   ======================================== */

.hero_container {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-global);
  padding-top: 80px; /* Account for fixed navbar */
}

/* ========================================
   HERO CARD (Inner rounded container)
   ======================================== */

.hero_card {
  position: relative;
  width: 100%;
  max-width: var(--container-large);
  min-height: calc(100vh - 120px);
  min-height: calc(100dvh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xxlarge) var(--spacing-large);
  border-radius: var(--radius-large);
  /* Glass border effect */
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(2px);
}

/* ========================================
   HERO CONTENT
   ======================================== */

.hero_content {
  text-align: center;
  max-width: 800px;
}

.hero_heading {
  font-family: var(--font-heading);
  font-size: clamp(40px, 8vw, 72px);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  color: var(--color-white);
  margin: 0 0 var(--spacing-small) 0;
}

.hero_subheading {
  font-family: var(--font-body);
  font-size: clamp(16px, 2.5vw, 18px);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--spacing-large) 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
   HERO BUTTON GROUP
   ======================================== */

.hero_button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xsmall);
  justify-content: center;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 991px) {
  .hero_card {
    min-height: calc(100vh - 100px);
    min-height: calc(100dvh - 100px);
    padding: var(--spacing-xlarge) var(--spacing-medium);
  }
}

@media (max-width: 767px) {
  .hero_container {
    padding-top: 72px;
  }

  .hero_card {
    min-height: calc(100vh - 90px);
    min-height: calc(100dvh - 90px);
    padding: var(--spacing-large) var(--spacing-small);
    border-radius: var(--radius-medium);
  }

  .hero_heading {
    margin-bottom: var(--spacing-xsmall);
  }

  .hero_subheading {
    margin-bottom: var(--spacing-medium);
  }

  .hero_button-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hero_button-group .button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 479px) {
  .hero_card {
    padding: var(--spacing-medium) var(--spacing-xsmall);
  }
}