/* ========================================================================
   DEPLOY PATH: /css/hero-tepuy.44dc48ed.css
   Tepuy Solutions — Home page hero section parallax and animation styles
   Version: 2026-03-31 (headers added)
   Notes: Only load on home/landing pages.
   ======================================================================== */

/* ===== Fade + slide on load ===== */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Core color tokens =====
   Palette redesign (2026-08): the near-black moss-to-ink-to-clay duotone
   is retired site-wide. Hero now sits on --bone with soft --sky/--clay
   tints standing in for the photo's mist and cliff-face — no local
   --text override needed anymore since the section now uses the same
   dark body-copy color as the rest of the page (inherited from :root). */
.hero-tepuy {
  position: relative;
  min-height: clamp(520px, 82vh, 760px);
  overflow: hidden;
  background: var(--bone);
  background-image:
    radial-gradient(1100px 560px at 12% -8%, color-mix(in srgb, var(--sky) 26%, transparent), transparent 62%),
    radial-gradient(900px 520px at 92% 108%, color-mix(in srgb, var(--clay) 16%, transparent), transparent 58%);
  z-index: 0;
  color: var(--text);
  font-family: "Inter Tight", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  animation: heroFadeUp 1.4s ease-out both;
  will-change: transform, opacity;
}

/* Same micro cross-pattern texture as before, recolored for the light
   ground — was a white fleck at 0.02 opacity for a dark hero; a dark
   fleck at a touch higher opacity keeps the same barely-there texture
   visible against --bone instead of disappearing into it. */
.hero-tepuy::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230b1f16' fill-opacity='0.035'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}


@media (max-width: 768px) {
  .hero-tepuy .hero-inner { padding: 8vh 18px 6vh; }
}


/* ===== Canvas background field ===== */
.hero-tepuy canvas#energyField {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .72;
  mix-blend-mode: screen;
  filter: blur(0.2px);
  pointer-events: none;
  z-index: 1;
}

@media (min-width: 769px) {
  .hero-tepuy canvas#energyField {
    opacity: .58;
  }
}



/* ===== Hero content ===== */
.hero-tepuy .hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10vh 24px 8vh;
  text-align: center;
  /* Was an opaque #0b0e13 fill — completely hid the gradient, texture, and
     the contour-line canvas everywhere text actually sits (this box spans
     the full 1100px column almost every visitor sees; the layers behind
     it were only ever visible in the unused side margins beyond that).
     That was the real cause of the hero reading flat/black. No background
     here now, so all three show through under the text. */
}

.hero-tepuy h1 {
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
  animation: heroFadeUp 1.2s ease forwards;
  animation-delay: 0.2s;
}
.hero-tepuy h1 span { color: var(--clay); }

.hero-tepuy .lede {
  margin: 18px auto 28px;
  max-width: 820px;
  font-size: clamp(16px, 1.6vw, 20px);
  opacity: .9;
  animation: heroFadeUp 1.2s ease forwards;
  animation-delay: 0.6s;
}

.hero-tepuy::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  /* Fades into --bone, which is now also the base of the sections below
     (mission/strip in home-scroll.css), keeping the seam invisible. */
  background: linear-gradient(to bottom, rgba(243,241,231,0), var(--bone));
  pointer-events: none;
  z-index: 1; /* above bg, below text (same layer as canvas) */
}


/* ===== CTA Buttons ===== */
.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  animation: heroFadeUp 1.2s ease forwards;
  animation-delay: 1s;
}
/* Marketing-only CTA button — NOT .btn-primary (that name belongs to the
   calculator product's own button, defined separately in tepuy.css and
   left untouched). Clay fill / ink text / 6px radius, per the new
   marketing accent system. */
.btn-clay,
.btn-clay-outline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 12px 18px;
  border-radius: 6px;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-decoration: none;
}
.btn-clay {
  background: var(--clay);
  color: var(--ink);
  border: 0;
}
.btn-clay:hover {
  background: var(--clay);
  box-shadow: 0 0 18px color-mix(in srgb, var(--clay) 40%, transparent);
  transform: translateY(-2px);
}
.hero-cta .btn-clay,
.hero-cta .btn-clay-outline {
  justify-content: center;
}

.btn-clay-outline {
  border: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
  color: var(--text);
}
.btn-clay-outline:hover {
  background: color-mix(in srgb, var(--clay) 8%, transparent);
  border-color: var(--clay);
  color: var(--clay);
  transform: translateY(-2px);
}



/* ===== Motion / accessibility ===== */
@media (prefers-reduced-motion: no-preference) {
  .hero-tepuy { transform: translateZ(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tepuy,
  .hero-tepuy h1,
  .hero-tepuy .lede,
  .hero-cta {
    animation: none;
    transform: none;
  }
}

/* ===== Responsive tweaks ===== */
@media (max-width: 768px) {
  .hero-tepuy h1 { font-size: 2rem; }
  .hero-tepuy .lede { font-size: 1rem; }
  .hero-cta { flex-direction: column; }
}

/* =========================================================
   Trust Strip — Institutional / Analytical Style
   ========================================================= */

.hero-tepuy .trust-strip {
  margin-top: 22px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;

  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  opacity: 0.78;
}

/* Individual items */
.hero-tepuy .trust-strip li {
  list-style: none;
  white-space: nowrap;
  position: relative;
  padding: 0 6px;
}

/* Small-caps style separators */
.hero-tepuy .trust-strip li:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -10px;
  color: color-mix(in srgb, var(--text) 40%, transparent);
  font-weight: 600;
}

/* Slight hover lift for polish (optional but subtle) */
.hero-tepuy .trust-strip li:hover {
  opacity: 0.95;
}

/* Below ~480px the longest item ("See exactly why the numbers say what
   they say", the longest of the four at 47 characters) no longer fits
   on one line and was clipped off the right edge of the viewport with no
   scroll affordance to reach it — measured at 375px: the <li> itself
   rendered ~36px wider than the viewport. Chose to let it wrap rather
   than shorten the copy: a layout fix, not a content change, and this
   item is already the outlier length-wise among the four. The separator
   dot's absolute positioning (::after, right:-10px) assumes a single-line
   box, so it's hidden at this width rather than left floating at the
   wrong line when an item wraps. */
@media (max-width: 480px) {
  .hero-tepuy .trust-strip li {
    white-space: normal;
    text-align: center;
    max-width: 90%;
  }
  .hero-tepuy .trust-strip li:not(:last-child)::after {
    display: none;
  }
}