/* =============================================================================
   SECTIONS.CSS — homepage (Claude Design handoff 2026-10-12, variant A)
   Order of the page: hero → manifesto → story (years + stacking cards) →
   parallax band → product strip → visit → footer (style.css).
   Mobile first; the one breakpoint is 860px (= MOBILE in main.js).
   Desktop: .wrap (1440 max, 80px margins) + 12 columns, 32px gap.
   NOTE: no ancestor of .stack-card may get overflow:hidden — it kills
   position:sticky and the scroll-driven animations; use overflow:clip.
   ============================================================================= */


/* --- Hero ------------------------------------------------------------------ */

.home-hero {
  position: relative;
  height: max(35rem, min(51.25rem, 100vh));
  overflow: clip;
  background: var(--color-dark);
}
.home-hero__media { position: absolute; inset: 0; will-change: transform, opacity; }
.home-hero__img,
.home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 45%;
}
.home-hero__img { transform-origin: 55% 60%; }
.home-hero__video { display: none; }   /* main.js shows it once it plays (.is-playing) */
.home-hero.is-playing .home-hero__video { display: block; }
.home-hero.is-playing .home-hero__img { display: none; }

/* light text stands on ≥ 42% black — don't thin these */
.home-hero__shade { position: absolute; inset: 0; }
.home-hero__shade--bottom { background: linear-gradient(to top, rgba(20, 18, 16, 0.82) 0%, rgba(20, 18, 16, 0.42) 30%, rgba(20, 18, 16, 0) 62%); }
.home-hero__shade--top { background: linear-gradient(to bottom, rgba(20, 18, 16, 0.38) 0%, rgba(20, 18, 16, 0) 26%); }

.home-hero__emblem-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 18%;
  pointer-events: none;
}
.home-hero__emblem { width: 12.25rem; height: auto; filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.35)); }

.home-hero__bottom {
  position: absolute;
  inset-inline: 1.25rem;
  bottom: 2.25rem;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.home-hero__title {
  max-width: 17.5rem;
  margin: 0;
  font-size: 3.625rem;
  line-height: 0.96;
  letter-spacing: -0.028em;
  color: var(--color-light);
}
.home-hero__title span { display: inline-block; }
.home-hero__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 1rem;
  color: var(--color-light-muted);
}
.home-hero__meta .mono-label { display: none; }
.scroll-hint {
  display: block;
  width: 1px;
  height: 3.5rem;
  margin-bottom: 0.25rem;
  background: rgba(241, 236, 228, 0.7);
  transform-origin: top;
}

@media (width > 860px) {
  .home-hero { height: max(40rem, min(62.5rem, 100vh)); }
  .home-hero__img,
  .home-hero__video { object-position: center 45%; }
  .home-hero__emblem-wrap { padding-bottom: 11%; }
  .home-hero__emblem { width: 18.75rem; }
  .home-hero__bottom { inset-inline: 3rem; bottom: 3.5rem; gap: 2.5rem; }
  .home-hero__title { max-width: none; font-size: clamp(5rem, 8.333vw, 7.5rem); }
  .home-hero__meta .mono-label { display: block; }
  .scroll-hint { height: 4.5rem; margin-bottom: 0; }
}


/* --- Manifesto: label + year, the paragraph that inks in, a photo ---------- */

.manifest { padding-block: 5.5rem 4.5rem; }
.manifest__grid { display: flex; flex-direction: column; gap: 2.5rem; }
.manifest__aside { display: flex; flex-direction: column; gap: 1.25rem; }
.manifest__aside .big-num { font-size: 7.5rem; line-height: 0.88; letter-spacing: -0.045em; }
.manifest__aside .text-small { max-width: 15rem; font-size: var(--fs-sm); }
.manifest__text {
  margin: 0;
  font-size: 1.9375rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
.manifest__figure { display: flex; flex-direction: column; gap: 0.875rem; margin: 0; padding-left: 2.5rem; }
.manifest__figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (width > 860px) {
  .manifest { padding-block: 10.5rem 9.5rem; }
  .manifest__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: 4.5rem;
  }
  .manifest__aside { grid-column: 1 / span 3; }
  .manifest__aside .big-num { font-size: clamp(6rem, 11.667vw, 10.5rem); }
  .manifest__text {
    grid-column: 5 / span 8;
    font-size: clamp(2.25rem, 3.611vw, 3.25rem);
    line-height: 1.16;
    letter-spacing: -0.015em;
  }
  .manifest__figure { grid-column: 7 / span 5; padding-left: 0; }
  .manifest__figure img { aspect-ratio: 3 / 2; }
}


/* --- Story: three years -------------------------------------------------- */

.story { padding-bottom: 4rem; }
.story .wrap { display: flex; flex-direction: column; gap: 2.5rem; }
.story__years { display: flex; flex-direction: column; gap: 1.75rem; }
.story__year { display: flex; align-items: flex-start; gap: 1.25rem; }
.story__year .big-num { flex: 0 0 9.375rem; }
.story__year .text-small { max-width: 17.5rem; padding-top: 0.375rem; font-size: var(--fs-sm); }

@media (width > 860px) {
  .story { padding-bottom: 6rem; }
  .story .wrap { gap: 3.5rem; }
  .story__years {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: 3rem;
    align-items: start;
  }
  .story__year { flex-direction: column; gap: 1rem; }
  .story__year .big-num { flex: none; }
  .story__year .text-small { padding-top: 0; font-size: 0.9375rem; }
}


/* --- Story: stacking cards (each sticks at the top, the next slides over) --- */

.card-stack { display: flex; flex-direction: column; }
.stack-card {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -1.25rem 2.5rem rgba(20, 18, 16, 0.08);
}
.stack-card__figure { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: clip; }
.stack-card__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-mobile, center);
  transition: transform 1.4s var(--ease);
}
.stack-card__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2.25rem 1.5rem 2.75rem;
}
.stack-card__text { display: flex; flex-direction: column; gap: 1.25rem; }
.stack-card__text p { max-width: 27.5rem; margin: 0; text-wrap: pretty; }

@media (hover: hover) {
  .stack-card:hover .stack-card__figure img { transform: scale(1.04); }
}

@media (width > 860px) {
  .stack-card {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    min-height: 45rem;
    box-shadow: 0 -1.5rem 3rem rgba(20, 18, 16, 0.08);
  }
  .stack-card__figure { grid-column: 1 / span 7; aspect-ratio: auto; }
  .stack-card__figure img { object-position: center; }
  .stack-card__body {
    grid-column: 8 / span 5;
    justify-content: space-between;
    gap: 3rem;
    padding: 5rem 5rem 4.5rem 4.5rem;
  }
  .stack-card__text { gap: 1.75rem; }
  .stack-card--flip .stack-card__figure { grid-column: 6 / span 7; order: 2; }
  .stack-card--flip .stack-card__body { grid-column: 1 / span 5; order: 1; padding: 5rem 4rem 4.5rem 5rem; }
}


/* --- Parallax band: full-bleed photo, one line of italic -------------------- */

.parallax-band {
  position: relative;
  z-index: 1;
  height: 33.75rem;
  overflow: clip;
  background: var(--color-dark);
}
/* the photo is 130% tall, 15% above the band — room for ±11% of travel */
.parallax-band__img {
  position: absolute;
  inset-inline: 0;
  top: -15%;
  width: 100%;
  height: 130%;
  object-fit: cover;
  will-change: transform;
}
.parallax-band__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 18, 16, 0.72) 0%, rgba(110, 31, 31, 0.18) 55%, rgba(20, 18, 16, 0.15) 100%);
}
.parallax-band__text {
  position: absolute;
  inset-inline: 1.5rem;
  bottom: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  color: var(--color-light-muted);
}
.parallax-band__line {
  max-width: 62.5rem;
  margin: 0;
  font-size: 3rem;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-light);
  text-wrap: balance;
}

@media (width > 860px) {
  .parallax-band { height: 51.25rem; }
  .parallax-band__text { inset-inline: 5rem; bottom: 5.5rem; gap: 1.75rem; }
  .parallax-band__line { font-size: clamp(3.5rem, 6.667vw, 6rem); letter-spacing: -0.025em; }
}


/* --- Product strip: horizontal scroll-snap track with counter + arrows ----- */

.product-strip {
  position: relative;
  z-index: 1;
  padding-block: 6rem 5.5rem;
  overflow: clip;
  background: var(--color-bg);
}
.product-strip__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.125rem;
  margin-bottom: 2.75rem;
}
.product-strip__title { display: flex; flex-direction: column; gap: 1.125rem; }
.product-strip__ctl { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.product-strip__counter { min-width: 3.5rem; }
.product-strip__bar { position: relative; display: block; width: 6rem; height: 1px; background: var(--color-border); }
.product-strip__bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 16.67%;
  height: 1px;
  background: var(--color-heading);
  transition: width 0.35s;
}
.product-strip__arrows { display: none; gap: 0.625rem; margin-left: 0.5rem; }

.arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-heading);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.arrow-btn:hover { border-color: var(--color-heading); }
.arrow-btn:active { background: var(--color-bg-alt); }
.arrow-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* wheel is never hijacked: the page keeps scrolling; the track moves by
   swipe/trackpad, mouse drag, the arrows or ← → (main.js initStrip) */
.product-track {
  --card-w: 16.75rem;
  --card-gap: 1.25rem;
  display: flex;
  gap: var(--card-gap);
  padding-inline: var(--gutter);
  scroll-padding-inline-start: var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.product-track::-webkit-scrollbar { display: none; }
.product-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.product-track:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.product-track__end { flex: 0 0 1px; height: 1px; }

.bottle-card {
  display: flex;
  flex: 0 0 var(--card-w);
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  scroll-snap-align: start;
}
.bottle-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18.75rem;
  background: var(--color-bg-alt);
  color: var(--color-heading);
  transition: background-color 0.5s;
}
.bottle-card__outline { width: 3.875rem; height: 13.75rem; opacity: 0.55; transition: transform 0.7s var(--ease); }
.bottle-card__body { display: flex; flex-direction: column; gap: 0.75rem; }
.bottle-card__body p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-2); }

@media (hover: hover) {
  .bottle-card:hover .bottle-card__media { background: var(--color-bg-hover); }
  .bottle-card:hover .bottle-card__outline { transform: translateY(-0.625rem); }
}

@media (width > 860px) {
  .product-strip { padding-block: 10rem 9rem; }
  .product-strip__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2.5rem; margin-bottom: 5rem; }
  .product-strip__title { gap: 1.5rem; }
  .product-strip__ctl { gap: 1.5rem; margin-top: 0; padding-bottom: 0.25rem; }
  .product-strip__counter { min-width: 3.75rem; }
  .product-strip__bar { width: 7.5rem; }
  .product-strip__arrows { display: flex; }
  .product-strip__hint { display: none; }
  .product-track {
    --card-w: 22.5rem;
    --card-gap: 2rem;
    /* first card lines up with the .wrap content edge at any width */
    padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
    padding-right: var(--gutter);
    scroll-padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
    cursor: grab;
    user-select: none;
  }
  .bottle-card { gap: 1.75rem; padding-top: 1.5rem; }
  .bottle-card__media { height: 26.25rem; }
  .bottle-card__outline { width: 5.25rem; height: 18.75rem; }
  .bottle-card__body p { font-size: 1rem; }
}


/* --- Visit: photo + invitation + CTA ---------------------------------------- */

.feature-split { position: relative; z-index: 1; padding-bottom: 6rem; background: var(--color-bg); }
.feature-split__grid { display: flex; flex-direction: column; gap: 2rem; }
.feature-split__figure { margin: 0; }
.feature-split__figure img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.feature-split__body { display: flex; flex-direction: column; gap: 1.5rem; }
.feature-split__body p { margin: 0; text-wrap: pretty; }
.feature-split__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }

@media (width > 860px) {
  .feature-split { padding-bottom: 10.5rem; }
  .feature-split__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: center;
  }
  .feature-split__figure { grid-column: 1 / span 7; }
  .feature-split__body { grid-column: 9 / span 4; gap: 2rem; }
  .feature-split__cta { gap: 1.25rem; }
}


/* --- Homepage motion (on top of the MOTION utilities in style.css) --------- */

@keyframes hint-pulse { 0%, 100% { transform: scaleY(1); opacity: 0.75; } 50% { transform: scaleY(0.35); opacity: 0.3; } }
@keyframes kenburns { from { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes hero-away { from { transform: translateY(0); opacity: 1; } to { transform: translateY(22%); opacity: 0.45; } }
@keyframes parallax-y { from { transform: translateY(-11%); } to { transform: translateY(11%); } }

@media (prefers-reduced-motion: no-preference) {
  .scroll-hint { animation: hint-pulse 2.6s ease-in-out infinite; }
  .kenburns { animation: kenburns 22s cubic-bezier(0.2, 0.5, 0.3, 1) both; }

  @supports (animation-timeline: view()) {
    .home-hero__media { animation: hero-away linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .parallax-band__img { animation: parallax-y linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}