/* Veer Green Logistics: home hero, "the road that is coming".
   One variable, --t, runs from 0 (today's road) to 1 (tomorrow's road).
   hero.js animates it; the slider lets visitors move it themselves. */

.vista {
  --t: 1;
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(620px, calc(100vh - 76px), 840px);
  min-height: clamp(620px, calc(100svh - 76px), 840px);
  background: linear-gradient(#BDDCEB, #FBF1D0 64%);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .vista {
    background: linear-gradient(
      color-mix(in srgb, #BDDCEB calc(var(--t) * 100%), #CDBF9E),
      color-mix(in srgb, #FBF1D0 calc(var(--t) * 100%), #E4CD98) 64%);
  }
}
.js .vista { --t: 0; }

/* ---- Headline block ---- */
.vista-text { position: relative; z-index: 3; text-align: center; padding-top: clamp(1.5rem, 4.5vh, 3.5rem); }
.vista h1 {
  font-family: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 700; font-size: clamp(2.3rem, min(5.3vw, 7.8vh), 4.5rem); line-height: 1.04;
  letter-spacing: -0.015em; max-width: 22ch; margin: 0 auto;
  text-wrap: balance;
}
.vista h1 span { display: inline-block; }
.vista .lead { margin: 1rem auto 0; max-width: 60ch; color: #23402F; font-size: clamp(1.02rem, 1.5vw, 1.2rem); }
.vista .btn-row { justify-content: center; margin-top: 1.25rem; }

/* ---- Scene ---- */
.vista-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vista-scene svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; max-width: none; display: block; }

.vista .fade { opacity: clamp(0, calc((var(--t) - var(--from, 0)) * var(--rate, 4)), 1); }
.vista .haze { opacity: calc((1 - var(--t)) * .85); }
.vista .smoke, .vista .noise { opacity: clamp(0, calc((1 - var(--t)) * 2.3), 1); }
.vista .grass { fill: #2F7348; fill: color-mix(in srgb, #2F7348 calc(var(--t) * 100%), #6F7F56); }
.vista .tuft { fill: #3C8A57; fill: color-mix(in srgb, #3C8A57 calc(var(--t) * 100%), #7C8A5E); }
.vista .brand-mark { opacity: clamp(0, calc((var(--t) - .35) * 2.6), 1); }
.vista .box  { fill: #F6F1E2; fill: color-mix(in srgb, #F6F1E2 calc(var(--t) * 100%), #B8AE93); }
.vista .cab  { fill: #1D5A40; fill: color-mix(in srgb, #1D5A40 calc(var(--t) * 100%), #8C846F); }
.vista .fol  { fill: #3F9B45; fill: color-mix(in srgb, #3F9B45 calc(var(--t) * 100%), #8E9A5E); }
.vista .fol2 { fill: #4BA850; fill: color-mix(in srgb, #4BA850 calc(var(--t) * 100%), #98A466); }
.vista .sun-disk { fill: #F4B942; fill: color-mix(in srgb, #F4B942 calc(var(--t) * 100%), #D9A65A); }
.vista .sun-glow { opacity: var(--t); }
.vista .sun-rays { opacity: calc(var(--t) * .55); }
.vista .tree { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(calc(.82 + .18 * var(--t))); }
.vista .blades { transform-origin: 0 0; animation: vista-spin 20s linear infinite; }
@keyframes vista-spin { to { transform: rotate(360deg); } }

/* ---- Slider ---- */
.vista-control {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 1rem;
  display: flex; justify-content: center; padding-inline: 1rem;
}
.vista-pill {
  width: min(560px, 100%);
  background: rgba(251, 247, 235, .96); border: 1px solid var(--line); border-radius: 16px;
  padding: .55rem 1rem .6rem; box-shadow: 0 8px 26px rgba(18, 63, 44, .22);
}
.vista-caption { margin: 0 0 .15rem; max-width: none; text-align: center; font-size: .95rem; color: var(--forest); font-weight: 500; }
.vista-slider { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; }
.vista-slider button {
  background: none; border: 0; padding: .35rem .25rem; cursor: pointer;
  font: 600 .98rem/1 var(--font-body); color: var(--forest);
}
.vista-slider button:hover { text-decoration: underline; text-underline-offset: 4px; }

.vista-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 10px; margin: 0; padding: 0;
  border: 0; border-radius: 99px; cursor: pointer;
  background: linear-gradient(to right, #A79A78, #4E9A34);
}
.vista-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--forest); border: 3px solid var(--cream); box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.vista-range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--forest); border: 3px solid var(--cream); box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.vista-range::-moz-range-track { background: transparent; height: 10px; }
.vista-range:focus-visible { outline: 3px solid var(--river); outline-offset: 6px; }



/* ---- Small screens: text above, scene below, slider under the scene ---- */
@media (max-width: 820px) {
  .vista { min-height: 0; }
  .vista-text { padding-top: 1.75rem; }
  .vista-scene { --k: 1.72; position: relative; inset: auto; height: 0; padding-bottom: calc(var(--k) * 31.25%); overflow: hidden; margin-top: 1rem; }
  .vista-scene svg { left: 50%; width: calc(var(--k) * 100%); height: auto; transform: translate(-51%, 7.8%); }
  .vista-control { position: static; padding: 0 1rem 1.25rem; margin-top: -1px; background: #2F7348; background: color-mix(in srgb, #2F7348 calc(var(--t) * 100%), #6F7F56); }
  .vista-pill { box-shadow: none; }
}
@media (min-width: 561px) and (max-width: 820px) {
  .vista-scene { --k: 1.25; }
}

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