/* ============================================================
   _hero.css — HERO SECTION

   All hero-specific styling scoped under .bee-hero.
   This includes layout, title styling, and animation initial states.

   Reusable components (buttons, chips, trust badges) live in
   /components/ and are NOT redefined here.
   ============================================================ */

/* ============================================
   HERO WRAPPER
   ============================================ */
div.bee-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ============================================
   HERO INNER CONTENT
   ============================================ */
.bee-hero .hero-inner {
  position: relative;
  z-index: var(--bee-z-content);
  width: 100%;
  max-width: var(--bee-container-narrow);
  padding: var(--bee-space-lg) var(--bee-space-md) var(--bee-space-xl);
  text-align: center;

  /* Wrapper-level parallax — driven by GSAP via CSS variables */
  transform: translate3d(
    calc(var(--hero-mx, 0) * -10px),
    calc(var(--hero-my, 0) * -6px),
    0
  );
  transition: transform var(--bee-duration-slow) var(--bee-ease-out);
  will-change: transform;
}

/* ============================================
   HERO TITLE — "BeeDivers / Diving"
   ============================================ */
div.bee-hero .hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05em;
  font-size: clamp(4rem, 8vw, 6rem);
  font-weight: 800;
  line-height: var(--bee-leading-tight);
  letter-spacing: var(--bee-tracking-tight);
  color: #fff;
  margin: 0;
  padding: 0;
}

/* Both lines (h1 + span) inherit consistently */
.bee-hero .hero-title__line {
  margin: 0;
  padding: 0;
  display: block;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
  letter-spacing: inherit;
  position: relative;
}

/* Inner span created at runtime by GSAP for mask reveal */
.bee-hero .hero-title__line .line-inner {
  display: block;
}

/* Line 1: "BeeDivers" — gold gradient */
.bee-hero .hero-title__brand {
  background: var(--bee-gradient-gold-rich);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width: fit-content;
}

.bee-hero .hero-title__brand .line-inner {
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Line 2: "Diving" — wavy underline */
.bee-hero .hero-title__diving {
  width: fit-content;
  color: #fff;
  --underline-scale: 1; /* GSAP sets to 0 then animates to 1 */
}

.bee-hero .hero-title__diving::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.05em;
  height: 0.18em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M0,8 Q50,2 100,7 T200,8' fill='none' stroke='%23ffdb1b' stroke-width='3' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: scaleX(var(--underline-scale));
  transform-origin: left center;
  pointer-events: none;
}

/* ============================================
   HERO SUBTITLE
   ============================================ */
div.bee-hero .hero-sub {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: var(--bee-leading-relaxed);
  color: rgba(255, 255, 255, 0.85);
  margin: var(--bee-space-md) auto 0;
  max-width: 560px;
}

/* ============================================
   HERO ACTIONS — layout only (button styling lives in _buttons.css)
   ============================================ */
div.bee-hero .hero-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--bee-space-sm);
  margin-top: var(--bee-space-md);
}

/* ============================================
   HERO ANIMATION — initial states (only when JS marks ready)
   GSAP animates from these to visible.
   If JS fails, [data-anim-ready] is never set and content shows normally.
   ============================================ */
.bee-hero[data-anim-ready] .hero-eyebrow,
.bee-hero[data-anim-ready] .hero-sub,
.bee-hero[data-anim-ready] .hero-trust,
.bee-hero[data-anim-ready] .hero-scroll {
  opacity: 0;
}

.bee-hero[data-anim-ready] .hero-title__line {
  overflow: hidden;
}

.bee-hero[data-anim-ready] .hero-title__line .line-inner {
  transform: translateY(110%);
  will-change: transform;
}

.bee-hero[data-anim-ready] .hero-title__diving {
  --underline-scale: 0;
}

.bee-hero[data-anim-ready] .hero-actions > * {
  opacity: 0;
  transform: translateY(20px);
}

/* Reduced motion — make content visible instantly, skip animations */
@media (prefers-reduced-motion: reduce) {
  .bee-hero[data-anim-ready] .hero-eyebrow,
  .bee-hero[data-anim-ready] .hero-sub,
  .bee-hero[data-anim-ready] .hero-trust,
  .bee-hero[data-anim-ready] .hero-scroll,
  .bee-hero[data-anim-ready] .hero-actions > * {
    opacity: 1;
    transform: none;
  }
  .bee-hero[data-anim-ready] .hero-title__line .line-inner {
    transform: none;
  }
  .bee-hero[data-anim-ready] .hero-title__diving {
    --underline-scale: 1;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .bee-hero .hero-title {
    font-size: clamp(2.5rem, 12vw, 4rem);
    letter-spacing: -0.01em;
  }

  .bee-hero .hero-inner {
    padding: var(--bee-space-xl) var(--bee-space-sm) var(--bee-space-lg);
    /* Disable parallax on mobile — feels jittery on touch scroll */
    transform: none;
  }

  .bee-hero .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .bee-hero .hero-actions > * {
    width: 100%;
  }

  .bee-hero .hero-actions .btn .elementor-button,
  .bee-hero .hero-actions a.btn,
  .bee-hero .hero-actions button.btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .bee-hero .hero-title {
    font-size: clamp(2rem, 14vw, 3rem);
  }

  .bee-hero .hero-title__diving::after {
    bottom: -0.02em;
    height: 0.14em;
  }
}
div.hero-trust {
  display: inline-flex !important;
  align-items: center;
  gap: var(--bee-space-sm);
  padding: 0.625rem 1rem 0.625rem 0.625rem;
  border-radius: var(--bee-radius-pill);
  background: var(--bee-surface-glass);
  border: 1px solid var(--bee-surface-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  width: fit-content;
  margin-top: 1.5rem;
}

.hero-trust .hero-trust-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-trust .hero-trust-logo img {
  width: 100px;
  height: 44px;
  display: block;
  object-fit: contain;
}

.hero-trust .hero-trust-text {
  display: flex !important;
  flex-direction: column;
  gap: var(--bee-space-3xs);
  line-height: var(--bee-leading-snug);
}

.hero-trust .hero-trust-title {
  font-size: var(--bee-text-sm);
  font-weight: 700;
  color: #fff;
  letter-spacing: var(--bee-tracking-wide);
}

.hero-trust .hero-trust-sub {
  font-size: var(--bee-text-xs);
  font-weight: 500;
  color: var(--bee-text-muted);
  letter-spacing: var(--bee-tracking-wider);
}