/* ==========================================================================
   Pages — Hero, section themes, subpage hero for yanjaa.com
   ========================================================================== */

/* ---------- Hero Section ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  background: var(--deep-forest);
  overflow: hidden;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(13, 92, 75, 0.85) 0%,
    rgba(13, 107, 88, 0.7) 50%,
    rgba(13, 92, 75, 0.6) 100%
  );
  z-index: 2;
}

/* Video hero overlay — darker, less green, lets the video show through */
.hero--video .hero__overlay {
  /* Stronger in the middle where the headline sits, lighter at the edges so
     the video still reads. */
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 3;
  padding-top: 0;
}

/* Centered content variant (video hero) */
.hero__content--centered {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 var(--container-padding);
}

/* ---------- Video Hero Background ---------- */
.hero__video-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}

/* True 16:9 "cover" fit — scale the player up only as far as it takes to fill
   the hero, and no further. YouTube picks its quality tier from the rendered
   player size, so an oversized iframe just asks it to stretch the same 1080p
   source over more pixels. */
.hero__video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Viewport-based fallback for browsers without container query units. */
  width: 100vw;
  height: 56.25vw;
  min-width: 177.7778vh;
  min-height: 100vh;
  /* Measured against the hero itself, so it holds even if the hero grows
     taller than the viewport (long content on phones). */
  width: 100cqw;
  height: 56.25cqw;
  min-width: 177.7778cqh;
  min-height: 100cqh;
  /* 1% overscan hides subpixel seams at the edges. */
  transform: translate(-50%, -50%) scale(1.01);
  border: none;
  pointer-events: none;
}

.hero__headline {
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
  max-width: 20ch;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

.btn--hero {
  color: #fff;
  border-color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  padding: 1.1rem 3rem;
}

.btn--hero::after {
  background: transparent;
}

.btn--hero:hover {
  color: #000;
}

.btn--hero:hover::after {
  background: #fff;
}

.btn--hero::before {
  background: var(--turquoise);
}


/* ---------- Hero lead capture ---------- */
.hero__subhead {
  color: #fff;
  max-width: 54ch;
  margin: 0 auto 2rem;
  font-size: 1.15rem;
  line-height: 1.6;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.hero__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  width: 100%;
  max-width: 620px;
}

.hero__input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.94);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--deep-forest);
}

.hero__input::placeholder {
  color: rgba(13, 92, 75, 0.55);
}

.hero__input:focus {
  outline: 2px solid var(--champagne);
  outline-offset: 2px;
  background: #fff;
}

.hero__submit {
  flex: 0 0 auto;
}

.hero__proof {
  color: #fff;
  opacity: 0.85;
  margin-top: 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

@media (max-width: 600px) {
  .hero__form {
    flex-direction: column;
    max-width: 340px;
  }

  .hero__input,
  .hero__submit {
    width: 100%;
  }
}

/* ---------- Say hi (contact, dark stage) ---------- */
.say-hi {
  position: relative;
  background: #04262e;
  padding: var(--section-padding) 0;
  text-align: center;
}

/* ---------- Mist — soft blurred blobs drifting low over the dark stage,
   spilling past the section edge into the footer ---------- */
.mist {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20rem;
  overflow: hidden;
  pointer-events: none;
}

.mist__blob {
  position: absolute;
  bottom: 0;
  width: 46rem;
  height: 13rem;
  border-radius: 50%;
  filter: blur(40px);
  animation: mist-drift 46s ease-in-out infinite alternate;
}

.mist__blob--1 {
  left: -12%;
  background: radial-gradient(ellipse at center, rgba(245, 240, 235, 0.09), transparent 70%);
}

.mist__blob--2 {
  left: 28%;
  bottom: 3rem;
  background: radial-gradient(ellipse at center, rgba(212, 176, 106, 0.1), transparent 70%);
  animation-duration: 62s;
  animation-direction: alternate-reverse;
}

.mist__blob--3 {
  left: 58%;
  background: radial-gradient(ellipse at center, rgba(245, 240, 235, 0.06), transparent 70%);
  animation-duration: 54s;
  animation-delay: -20s;
}

@keyframes mist-drift {
  from {
    transform: translateX(-10%);
  }
  to {
    transform: translateX(14%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mist__blob {
    animation: none;
  }
}

.say-hi__title {
  color: var(--text-on-dark);
  margin-bottom: 0.75rem;
}

.say-hi__text {
  color: var(--text-muted-dark);
  max-width: 44ch;
  margin: 0 auto 4rem;
  line-height: 1.7;
}

.say-hi__form {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  text-align: left;
}

.say-hi__row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.say-hi__label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
}

.say-hi__field {
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text-on-dark);
}

.say-hi__field:focus {
  outline: none;
  border-bottom-color: var(--champagne);
  box-shadow: 0 1px 0 0 var(--champagne);
}

.say-hi__field:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #04262e inset;
  -webkit-text-fill-color: var(--text-on-dark);
}

.say-hi__message {
  resize: vertical;
  min-height: 120px;
}

.say-hi__send {
  position: relative;
  /* Own stacking context, like .btn — keeps z-index:-1 layers (confetti,
     pill) behind the label instead of escaping into the section */
  z-index: 1;
  align-self: flex-start;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--champagne);
  padding: 0 0.1em 0.5rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--champagne);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease,
    border-color 0.25s ease;
}

/* Solid pill revealed on hover so the label stays readable over the confetti */
.say-hi__send::before {
  content: '';
  position: absolute;
  inset: -0.7rem -1.4rem -0.45rem;
  border-radius: 50px;
  background: linear-gradient(135deg, #c9a55a, #e8cc8a);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: -1;
}

/* Invisible hit-area extension below the button: after the -10px lift the
   cursor would land off the element, ending the hover and restarting it in a
   rapid flicker loop. This keeps the original spot inside the button. */
.say-hi__send::after {
  content: '';
  position: absolute;
  inset: -0.8rem -1.5rem -16px;
}

.say-hi__send:hover,
.say-hi__send:focus-visible {
  transform: translateY(-10px);
  color: #3a2c10;
  border-bottom-color: transparent;
}

.say-hi__send:hover::before,
.say-hi__send:focus-visible::before {
  opacity: 1;
}

/* Confetti sits behind the pill too, only peeking out around its edges */
.say-hi__send .btn-squiggles {
  z-index: -2;
}

/* Squiggles stay put while the button lifts, same as .btn */
.say-hi__send:hover .btn-squiggles {
  transform: translate(-50%, calc(-50% + 10px));
}

.say-hi__honey {
  display: none;
}

.say-hi__status {
  text-align: center;
  color: var(--champagne);
}

.say-hi__status--error {
  color: #ffb3a7;
}

/* Social icons row in video hero */
.hero__social {
  display: flex;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.hero__social a {
  color: #fff;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.hero__social a:hover {
  opacity: 1;
  transform: scale(1.15);
}


/* ---------- Section Themes ---------- */
.section--green {
  background: var(--forest-green);
  color: var(--text-on-dark);
}

.section--pink {
  background: linear-gradient(135deg, var(--blush-light) 0%, var(--blush) 100%);
  color: var(--text-on-light);
}

.section--cream {
  background: var(--cream);
  color: var(--text-on-light);
}

.section--gold {
  background: linear-gradient(135deg, var(--amber) 0%, var(--gold) 100%);
  color: #9e4343;
}

.section--lavender {
  background: linear-gradient(135deg, var(--lavender) 0%, var(--lavender-deep) 100%);
  color: #512843;
}

.section--dark {
  background: var(--deep-forest);
  color: var(--text-on-dark);
}

/* ---------- Subpage Hero ---------- */
.subpage-hero {
  padding: 10rem 0 5rem;
  text-align: center;
}

.subpage-hero__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  opacity: 0.7;
}

.subpage-hero__title {
  margin-bottom: 1.5rem;
}

.subpage-hero__description {
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.9;
}