/* ==========================================================================
   Le Croise — hero field (index only)
   Drifting bicolor-croissant lanes behind the existing hero copy, ported
   from outputs/website/experiments/animated-landing/version-02. Loaded only on index.html;
   everything is scoped to .hero[data-hero-field] so site.css stays intact.
   Motion lives in js/hero-field.js (GSAP); without JS or with reduced
   motion the field renders as a static composition.
   ========================================================================== */

.hero[data-hero-field] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* the lanes need vertical air above and below the copy; padding alone
     (site.css) leaves no room for them on laptop viewports */
  min-height: clamp(34rem, calc(100svh - 11rem), 56rem);
}

/* The bottom lane clips at the hero's edge; giving the following block the
   site's band surface (plus the standard hairline) turns that clip into a
   deliberate stage edge instead of croissants vanishing mid-ground. */
.hero[data-hero-field] + .section {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}

.hero[data-hero-field] .wrap {
  position: relative;
  z-index: 10;
  width: 100%;
}

.hf-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  --lane-gap: clamp(48px, 6vw, 104px);
}

.hf-lane {
  position: absolute;
  left: 50%;
  width: max-content;
  /* with the -25% anchor, the lane's 25% mark sits at viewport center;
     pivoting the rotation there keeps the visible band at its offset
     height instead of tilting it into the copy */
  transform-origin: 25% 50%;
}

/* translateX(-25%) anchors each lane so that sliding its track by one full
   set width keeps the viewport covered edge to edge at every phase of the
   loop (translateX(-50%) leaves one side empty for part of the cycle). */
.hf-lane--top {
  top: clamp(2px, 1.6vh, 22px);
  transform: translateX(-25%) rotate(-7deg);
}

/* slightly negative: the selected cocido cutouts are taller, so the lane
   bleeds a little off the bottom edge instead of crowding the buttons */
.hf-lane--bottom {
  bottom: clamp(-18px, -1.6vh, -10px);
  transform: translateX(-25%) rotate(-7deg);
}

/* The track holds the item set twice; sliding it by exactly half its width
   makes the drift loop seamless. Each set carries the gap as padding-right
   so the seam spacing matches the internal gaps. */
.hf-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.hf-set {
  display: flex;
  align-items: center;
  gap: var(--lane-gap);
  padding-right: var(--lane-gap);
}

.hf-item {
  display: block;
  height: auto;
  max-width: none;
  filter: saturate(1.04) contrast(1.04);
  will-change: transform, opacity;
}

.hf-item--raw {
  width: clamp(130px, 12vw, 190px);
}

.hf-item--baked {
  width: clamp(220px, 20vw, 310px);
}

/* Ingredient accents: small satellites around the croissants. Vertical
   offsets use margins (not transforms) because GSAP owns item transforms
   for the float. Negative side margins tuck them into the croissant gaps. */
.hf-item--accent {
  width: clamp(34px, 3.4vw, 58px);
  margin-right: calc(var(--lane-gap) * -0.4);
  margin-left: calc(var(--lane-gap) * -0.4);
}

/* frambuesas render a size down */
.hf-item--accent-sm {
  width: clamp(26px, 2.6vw, 44px);
}

/* Offsets stay below the croissant heights so the accents never define the
   flex line height (which would sink the croissants toward the copy). */
.hf-item--lift {
  margin-bottom: clamp(48px, 6.5vh, 78px);
}

.hf-item--drop {
  margin-top: clamp(40px, 5.5vh, 66px);
}

/* On very short viewports the centered copy and the lanes cannot coexist;
   the field steps back and the copy stands alone. */
@media (max-height: 540px) {
  .hf-field {
    display: none;
  }
}

@media (max-width: 900px) {
  .hf-field {
    --lane-gap: clamp(30px, 9vw, 44px);
  }

  .hf-lane--top {
    top: clamp(6px, 1.5vh, 18px);
  }

  .hf-lane--bottom {
    bottom: clamp(4px, 1.2vh, 14px);
  }

  /* Small screens keep the first seven pieces per set (two croissants and
     five accent images) so the field stays airy but the loop stays wider
     than the viewport. */
  .hf-set .hf-item:nth-child(n + 8) {
    display: none;
  }

  .hf-item--raw {
    width: clamp(96px, 24vw, 130px);
  }

  .hf-item--baked {
    width: clamp(150px, 40vw, 210px);
  }

  .hf-item--accent {
    width: clamp(24px, 6vw, 34px);
    margin-right: calc(var(--lane-gap) * -0.3);
    margin-left: calc(var(--lane-gap) * -0.3);
  }

  .hf-item--accent-sm {
    width: clamp(18px, 4.5vw, 26px);
  }

  .hf-item--lift {
    margin-bottom: clamp(30px, 5vh, 46px);
  }

  .hf-item--drop {
    margin-top: clamp(26px, 4.5vh, 40px);
  }
}