/* ==========================================================================
   HERO + ANIMATIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — multi-layer parallax
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(620px, 92vh, 980px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--deep-canopy);
  padding-block: var(--sp-8) var(--sp-9);
}


.hero__layer {
  position: absolute;
  inset: -8% 0 -8% 0;
  will-change: transform;
}

/* Layer 1 — background canopy photo (slowest) */
.hero__bg { z-index: 0; }
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Scrim stack for text legibility */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(10,20,16,0.95) 8%, rgba(10,20,16,0.78) 42%, rgba(10,20,16,0.44) 74%, rgba(10,20,16,0.62) 100%),
    linear-gradient(to top, rgba(10,20,16,0.96) 2%, transparent 42%);
}

/* Layer 2 — branch silhouette (mid speed) */
.hero__branches {
  z-index: 2;
  pointer-events: none;
  color: var(--deep-canopy);
  opacity: 0.9;
}
.hero__branches svg {
  position: absolute;
  top: -2px; left: 0;
  width: 100%;
  height: auto;
}

/* Gold mesh glow */
.hero__glow {
  position: absolute;
  z-index: 1;
  top: 8%; right: -6%;
  width: 46vw; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,0.2), rgba(82,183,136,0.09) 44%, transparent 68%);
  filter: blur(46px);
  pointer-events: none;
  animation: glowPulse 11s ease-in-out infinite alternate;
}
@keyframes glowPulse {
  from { opacity: 0.62; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.16); }
}

/* Layer 3 — content (fastest) */
.hero__content {
  position: relative;
  z-index: 4;
  max-width: 830px;
  will-change: transform;
}

.hero__title {
  font-size: var(--fs-hero);
  margin-bottom: var(--sp-5);
  color: #fff;
  text-shadow: 0 2px 30px rgba(5,12,8,0.6);
}
.hero__lede {
  font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.35rem);
  color: rgba(239,243,239,0.86);
  line-height: 1.66;
  max-width: 60ch;
  margin-bottom: var(--sp-6);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.hero__chips { max-width: 700px; }

/* Scroll cue */
.hero__cue {
  position: absolute;
  bottom: var(--sp-6);
  left: 50%;
  translate: -50% 0;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  font-size: 0.688rem;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero__cue-line {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, var(--sap-gold), transparent);
  position: relative;
  overflow: hidden;
}
.hero__cue-line::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 40%;
  background: var(--gold-bright);
  animation: cueSlide 2.1s var(--ease) infinite;
}
@keyframes cueSlide {
  0%   { transform: translateY(-100%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(260%); opacity: 0; }
}
@media (max-width: 767px) { .hero__cue { display: none; } }

/* --------------------------------------------------------------------------
   HERO HEIGHT ADAPTATION
   The headline is deliberately large, but the CTAs and trust chips are the
   conversion path and must stay above the fold on ordinary laptop screens.
   These must come AFTER the base .hero__title rule — same specificity, so
   source order decides the winner.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-height: 1100px) {
  .hero {
    min-height: min(94vh, 840px);
    padding-block: var(--sp-7) var(--sp-8);
  }
  .hero__title { font-size: clamp(2.4rem, 1rem + 3.4vw, 4rem); }
  .hero__lede {
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 56ch;
    margin-bottom: var(--sp-5);
  }
  .hero__actions { margin-bottom: var(--sp-5); }
}

@media (min-width: 768px) and (max-height: 840px) {
  .hero { min-height: min(96vh, 760px); }
  .hero__title { font-size: clamp(2.1rem, 0.9rem + 2.8vw, 3.25rem); }
  .hero__lede { font-size: 1rem; margin-bottom: var(--sp-4); }
  .hero__actions { margin-bottom: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   FLOATING LEAF PARTICLES
   -------------------------------------------------------------------------- */
.leaves {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.leaf {
  position: absolute;
  top: -8%;
  color: var(--fresh-growth);
  opacity: 0;
  animation: leafFall linear infinite;
  will-change: transform, opacity;
}
.leaf svg { width: 100%; height: 100%; }
@keyframes leafFall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg);      opacity: 0; }
  8%   { opacity: 0.5; }
  50%  { transform: translate3d(52px, 52vh, 0) rotate(190deg);  opacity: 0.34; }
  92%  { opacity: 0.14; }
  100% { transform: translate3d(-24px, 108vh, 0) rotate(392deg);opacity: 0; }
}

/* --------------------------------------------------------------------------
   SCROLL REVEAL
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity var(--t-reveal) var(--ease),
    transform var(--t-reveal) var(--ease);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0) scale(1); }

[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="scale"] { transform: translateY(26px) scale(0.955); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible { transform: translateX(0); }

/* Clip-path line reveal for headings */
.reveal-lines > * {
  display: block;
  clip-path: inset(0 0 100% 0);
  transform: translateY(0.4em);
  transition: clip-path 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.reveal-lines.is-visible > * {
  clip-path: inset(0 0 -12% 0);
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   TREE RING BACKDROP
   -------------------------------------------------------------------------- */
.tree-rings {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  color: var(--living-moss);
}
.tree-rings circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  transform-origin: center;
  animation: ringBreathe 9s ease-in-out infinite alternate;
}
.tree-rings circle:nth-child(2) { animation-delay: -1.4s; }
.tree-rings circle:nth-child(3) { animation-delay: -2.8s; }
.tree-rings circle:nth-child(4) { animation-delay: -4.2s; }
.tree-rings circle:nth-child(5) { animation-delay: -5.6s; }
.tree-rings circle:nth-child(6) { animation-delay: -7s; }
@keyframes ringBreathe {
  from { transform: scale(1);    opacity: 0.55; }
  to   { transform: scale(1.04); opacity: 1; }
}

/* --------------------------------------------------------------------------
   ORGANIC SECTION DIVIDERS
   -------------------------------------------------------------------------- */
.divider {
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  pointer-events: none;
  z-index: 2;
}
.divider--top { top: -1px; }
.divider--bottom { bottom: -1px; transform: rotate(180deg); }
.divider svg { width: 100%; height: clamp(40px, 6vw, 88px); display: block; }

/* --------------------------------------------------------------------------
   MISC MOTION
   -------------------------------------------------------------------------- */
.float-slow { animation: floatY 7s ease-in-out infinite alternate; }
@keyframes floatY {
  from { transform: translateY(0); }
  to   { transform: translateY(-16px); }
}

.magnetic { will-change: transform; }

/* Ken Burns on page-hero background */
.kenburns { animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.1) translate(-1.5%, -1.5%); }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION — global kill switch
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .reveal-lines > * { clip-path: none !important; transform: none !important; }

  .leaves,
  .hero__cue-line::after,
  .hero__glow { display: none !important; }

  .hero__layer,
  .hero__content { transform: none !important; }

  .tilt-card { transform: none !important; }
  .tilt-card > * { transform: none !important; }

  .kenburns, .float-slow, .tree-rings circle { animation: none !important; }

  .process__line path { stroke-dashoffset: 0 !important; }

  .btn:hover { transform: none !important; }
  .btn::before { display: none; }
}