/* ════════════════════════════════════════════════════
   hero.css — Hero section (full-viewport landing)
   Edit this file to change: headline size, blob colours,
   background gradients, hero padding, scroll hint
════════════════════════════════════════════════════ */

.hero {
  min-height:     100vh;
  display:        flex;
  flex-direction: column;
  justify-content: center;
  padding:        100px 52px 40px;
  position:       relative;
  overflow:       hidden;
}

/* Gradient background mesh */
.hero-bg {
  position: absolute;
  inset:    0;
  background:
    radial-gradient(ellipse 80% 70% at 15% 20%, rgba(90,148,112,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 60% 55% at 88% 78%, rgba(192,120,96,0.07) 0%, transparent 58%),
    radial-gradient(ellipse 50% 50% at 55%  5%, rgba(90,148,112,0.05) 0%, transparent 55%);
}

/* Animated organic blobs */
.hero-blob {
  position:      absolute;
  top: 12%; right: 3%;
  width:  480px;
  height: 480px;
  border-radius: 50%;
  background:    url('../images/aarti.jpg') 40% 8% / cover no-repeat;
  animation:     float 12s ease-in-out infinite,
                 blobReveal 1.2s cubic-bezier(0.16,1,0.3,1) 0.3s both;
  pointer-events: none;
  overflow:      hidden;
  box-shadow:
    0 0 0 6px  rgba(90, 148, 112, 0.50),
    0 0 0 14px rgba(90, 148, 112, 0.25),
    0 0 0 28px rgba(90, 148, 112, 0.12),
    0 0 0 46px rgba(90, 148, 112, 0.05);
}

@keyframes float {
  0%   { transform: translate(0px,  0px); }
  25%  { transform: translate(-4px, 6px); }
  50%  { transform: translate(3px,  10px); }
  75%  { transform: translate(5px,  4px); }
  100% { transform: translate(0px,  0px); }
}

.hero-blob-2 {
  position:      absolute;
  bottom: 12%; left: 4%;
  width:  300px;
  height: 300px;
  border-radius: 42% 58% 32% 68% / 62% 38% 52% 48%;
  background:    rgba(192, 120, 96, 0.055);
  animation:     morph 18s ease-in-out infinite reverse;
  pointer-events: none;
}

/* Content wrapper */
.hero-content {
  position:  relative;
  z-index:   1;
  max-width: 920px;
}

/* Eyebrow label */
.hero-eyebrow {
  display:     inline-flex;
  align-items: center;
  gap:         13px;
  margin-bottom: 42px;
  /* animation defined in animations.css */
}

.eyebrow-line {
  width:      32px;
  height:     1px;
  background: var(--sage);
}

.eyebrow-text {
  font-family:     'DM Mono', monospace;
  font-size:       11px;
  letter-spacing:  0.2em;
  text-transform:  uppercase;
  color:           var(--sage);
}

/* Main headline */
.hero-h1 {
  font-family:    'Newsreader', serif;
  font-size:      clamp(56px, 9.2vw, 112px);
  font-weight:    400;
  line-height:    1.0;
  letter-spacing: -0.04em;
  color:          var(--text);
  margin-bottom:  32px;
}
.hero-h1 em {
  font-style: italic;
  color:      var(--sage);
}

/* Subtitle */
.hero-sub {
  font-size:     clamp(16px, 1.9vw, 19px);
  color:         var(--text-muted);
  line-height:   1.85;
  max-width:     510px;
  margin-bottom: 52px;
  font-weight:   300;
  /* animation defined in animations.css */
}

/* Button row */
.hero-btns {
  display:   flex;
  gap:       14px;
  flex-wrap: wrap;
  /* animation defined in animations.css */
}

/* Scroll hint (bottom-left) */
.hero-scroll-hint {
  position:    absolute;
  bottom: 44px; left: 52px;
  display:     flex;
  align-items: center;
  gap:         14px;
  /* animation defined in animations.css */
}

.scroll-line {
  width:      36px;
  height:     1px;
  background: var(--text-light);
}

.scroll-text {
  font-size:      10px;
  color:          var(--text-light);
  font-family:    'DM Mono', monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@keyframes blobReveal {
  from {
    opacity:   0;
    transform: scale(0.88) translateY(24px);
  }
  to {
    opacity:   1;
    transform: scale(1) translateY(0);
  }
}