/* SALTA — hero. Fullscreen aerial speedboat, oversized headline over it. */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: clip;
  background: var(--deep);
  color: var(--white);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* load-in scale 1.06 -> 1.00, then --hero-y drives the scroll parallax */
  scale: var(--hero-scale, 1.06);
  translate: 0 var(--hero-y, 0px);
  transition: scale 1.8s var(--ease-out);
  will-change: scale, translate;
}
/* Legibility without flattening the water. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(5, 43, 69, .88) 0%,
      rgba(5, 43, 69, .58) 34%,
      rgba(5, 43, 69, .34) 58%,
      rgba(5, 43, 69, .30) 100%),
    linear-gradient(to right, rgba(5, 43, 69, .55), rgba(5, 43, 69, .05) 68%);
}

.hero__inner {
  position: relative;
  width: min(100% - var(--gutter) * 2, var(--maxw));
  margin-inline: auto;
  padding-block: clamp(6rem, 14vh, 9rem) clamp(3.5rem, 8vh, 5rem);
  display: grid;
  gap: clamp(1.4rem, 3vh, 2.4rem);
  translate: 0 var(--hero-text-y, 0px);
}

.hero__eyebrow { color: var(--lime); }
.hero__eyebrow::before { background: var(--lime); }

.hero__title {
  font-size: var(--t-mega);
  line-height: .84;
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  text-shadow: 0 8px 40px rgba(5, 43, 69, .45);
}
/* "LIVE IT." is the line that takes over as the visitor scrolls. */
.hero__title .l2 {
  color: var(--turq);
  scale: var(--hero-live-scale, 1);
  transform-origin: left bottom;
  display: inline-block;
  transition: color var(--dur) var(--ease-out);
}
.hero__meta {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white-70);
}
.hero__meta b { color: var(--lime); font-weight: 600; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- scroll indicator -------------------------------------------------- */
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2rem, 6vh, 3.4rem);
  display: grid;
  justify-items: center;
  gap: .8rem;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white-70);
  writing-mode: vertical-rl;
  opacity: var(--hero-scroll-o, 1);
  transition: opacity var(--dur) var(--ease-out);
}
.hero__scroll-line {
  position: relative;
  width: 1px;
  height: 66px;
  background: var(--white-14);
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 40%;
  background: var(--lime);
  animation: salta-dive 2.1s var(--ease-in-out) infinite;
}
@keyframes salta-dive {
  0%   { translate: 0 -100%; }
  60%  { translate: 0 250%; }
  100% { translate: 0 250%; }
}

@media (max-height: 620px) {
  .hero__inner {
    padding-block: clamp(4.5rem, 12vh, 6rem) clamp(1.5rem, 4vh, 2.5rem);
    gap: clamp(.7rem, 1.6vh, 1.2rem);
  }
}
@media (max-width: 900px) {
  .hero__scroll { display: none; }
  .hero__inner { padding-bottom: clamp(2.5rem, 6vh, 3.5rem); }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 390px) {
  .hero__meta { font-size: .62rem; letter-spacing: .14em; }
}