/* ==========================================================
HOME.CSS
Only loaded on index.html. Everything here is specific to
this page's body content — the hero and its supporting
sections. Nothing in here should ever be selected by
another page.
========================================================== */

/* ----------------------------------------------------------
01. HERO
---------------------------------------------------------- */
.hero-full {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero-full img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 10s ease-out;
}

.hero-full.is-loaded img {
  transform: scale(1.08);
}

/* Darken the photo a touch so white text stays readable
   without needing a flat overlay box */
.hero-full::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Centered on the text, not top-to-bottom — hero-text is
     vertically centered, so a linear gradient darkening only
     the top and bottom was lightest exactly where the words
     actually are. This puts the darkest point where the text
     sits, regardless of what's happening in the photo there. */
  background: radial-gradient(
    ellipse 65% 55% at center,
    rgba(6, 12, 8, 0.6) 0%,
    rgba(6, 12, 8, 0.35) 60%,
    rgba(6, 12, 8, 0.15) 100%
  );
}

.hero-text {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  width: min(900px, 92%);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: rgba(8, 16, 10, 0.5);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.hero-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-light);
  box-shadow: 0 0 10px 3px rgba(123, 171, 92, 0.9);
}

/* Real black outline on the hero text, not just a soft shadow —
   keeps white text readable even where it crosses a bright/white
   part of the photo. paint-order draws the stroke behind the fill
   so thin letter strokes don't get eaten by it. */
.hero-badge,
.hero-text h1,
.hero-text p {
  paint-order: stroke fill;
}

.hero-badge {
  -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.85);
}

.hero-text h1 {
  font-size: clamp(2.1rem, 5vw, 4rem);
  color: #fff;
  margin-bottom: var(--space-2);
  -webkit-text-stroke: 1.25px rgba(0, 0, 0, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.hero-text p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.15rem;
  max-width: 560px;
  margin: 0 auto var(--space-2);
  -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.hero-buttons .btn {
  min-width: 220px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-full img {
    transform: none;
    transition: none;
  }
}