/* ============================================================
   The Butcher Shoppe — Homepage Hero v2
   Editorial Butcher Brand (Concept C) + clarity/CTAs from Concept A
   ============================================================ */

.hero-editorial {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--charcoal);
  color: var(--bone);
}

.hero-editorial__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
  opacity: 0.55;
}

.hero-editorial__light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 75% 25%,
    rgba(212, 160, 86, 0.12) 0%,
    transparent 55%
  );
}

.hero-editorial__grid {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: calc(var(--header-height) + var(--space-2xl)) var(--space-xl) var(--space-2xl);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-2xl);
  align-items: center;
}

/* ---------- Copy ---------- */
.hero-editorial__copy {
  position: relative;
  z-index: 2;
}

.hero-editorial__stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--space-md);
}

.hero-editorial__stamp::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--amber);
}

.hero-editorial__eyebrow {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--space-md);
}

.hero-editorial__headline {
  font-family: var(--font-display);
  /* Client 2026-09-18: "the tag line doesn't need to be so big" — was 8vw / 7.5rem. */
  font-size: clamp(2.8rem, 6.2vw, 5.8rem);
  font-weight: 700;
  line-height: 0.93;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: var(--space-md);
}

.hero-editorial__headline span {
  display: block;
}

/* Amber payoff: two deliberately stacked lines at ~55% of the headline
   ("Better Cuts," / "Better Flavor.") so the break is the same at every
   width. The highlight bar (.slash) sits on "Better Flavor." only. */
.hero-editorial__headline .payoff {
  color: var(--amber);
  font-size: 0.55em;
  letter-spacing: -0.01em;
  margin-top: 0.28em;
  line-height: 1;
}

.hero-editorial__headline .payoff + .payoff {
  margin-top: 0.08em;
}

.hero-editorial__headline .slash {
  position: relative;
  display: inline-block;
  color: var(--amber);
}

.hero-editorial__headline .slash::after {
  content: '';
  position: absolute;
  left: -4%;
  bottom: 10%;
  width: 108%;
  height: 20%;
  background: var(--oxblood);
  z-index: -1;
  transform: skewX(-10deg);
}

/* Three no-wrap phrases joined by amber dots, so the line only ever breaks
   between phrases ("Premium Cuts · Local Service" / "Serious Barbecue"). */
.hero-editorial__supporting {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.92;
  margin-bottom: var(--space-lg);
}

.hero-editorial__supporting span {
  white-space: nowrap;
}

.hero-editorial__supporting span + span::before {
  content: '\2022';
  color: var(--amber);
  margin: 0 0.45em 0 0.3em;
}

/* main.js adds .starts-line to a phrase that wrapped onto a new line:
   drop its leading dot and pin it to its own line so the break is stable. */
.hero-editorial__supporting span.starts-line {
  display: block;
}

.hero-editorial__supporting span.starts-line::before {
  display: none;
}

.hero-editorial__body {
  max-width: 520px;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.75;
  color: rgba(250, 248, 245, 0.7);
  margin-bottom: var(--space-xl);
}

.hero-editorial__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.hero-editorial__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.55);
}

.hero-editorial__trust svg {
  width: 14px;
  height: 14px;
  color: var(--amber);
}

/* ---------- Visual ---------- */
.hero-editorial__visual {
  position: relative;
  min-height: 560px;
  height: 100%;
}

.hero-editorial__image {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 1.1s var(--ease-out-expo),
              opacity 1.1s var(--ease-out);
}

.hero-editorial.is-loaded .hero-editorial__image {
  transform: translateY(0);
  opacity: 1;
}

.hero-editorial__parallax {
  width: 100%;
  height: 100%;
  will-change: transform;
}

.hero-editorial__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Storefront hero: keep the sign and entrance in frame. The old 65% offset
     was tuned for the filet photo and pushed the view down into the parking lot. */
  object-position: center 38%;
  /* Client 2026-09-18 asked for the brighter daylight storefront — so no
     dimming here any more (was brightness 0.86 with a dark bottom gradient). */
  filter: saturate(1) contrast(1.03);
  transform: scale(1.08);
  transition: transform 10s var(--ease-out);
}

.hero-editorial.is-loaded .hero-editorial__image img {
  transform: scale(1);
}

/* Faint warm cast at the top only — the daylight photo needs no correction */
.hero-editorial__image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(122, 22, 22, 0.08) 0%,
    transparent 35%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-editorial__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 70%,
    rgba(12, 12, 12, 0.18) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.hero-editorial__vignette {
  position: absolute;
  inset: -2%;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 90px rgba(12, 12, 12, 0.28);
  pointer-events: none;
  z-index: 3;
}

.hero-editorial__accent {
  position: absolute;
  left: -48px;
  bottom: 48px;
  width: 190px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 3px solid var(--bone);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  z-index: 3;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 1s var(--ease-out) 0.2s,
              opacity 1s var(--ease-out) 0.2s;
}

.hero-editorial.is-loaded .hero-editorial__accent {
  transform: translateY(0);
  opacity: 1;
}

.hero-editorial__accent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.08);
}

/* ---------- Reveal Motion ---------- */
.hero-editorial__copy .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease-out),
              transform 0.85s var(--ease-out);
}

.hero-editorial__copy .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-editorial__copy .reveal:nth-child(1) { transition-delay: 0ms; }
.hero-editorial__copy .reveal:nth-child(2) { transition-delay: 90ms; }
.hero-editorial__copy .reveal:nth-child(3) { transition-delay: 180ms; }
.hero-editorial__copy .reveal:nth-child(4) { transition-delay: 270ms; }
.hero-editorial__copy .reveal:nth-child(5) { transition-delay: 360ms; }
.hero-editorial__copy .reveal:nth-child(6) { transition-delay: 450ms; }
.hero-editorial__copy .reveal:nth-child(7) { transition-delay: 540ms; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .hero-editorial__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
  }

  .hero-editorial__copy {
    order: 2;
  }

  .hero-editorial__visual {
    order: 1;
    min-height: 420px;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }

  .hero-editorial__headline,
  .hero-editorial__supporting,
  .hero-editorial__body {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-editorial__actions,
  .hero-editorial__trust {
    justify-content: center;
  }

  .hero-editorial__accent {
    left: var(--space-md);
    bottom: var(--space-md);
    width: 150px;
  }
}

@media (max-width: 768px) {
  .hero-editorial__grid {
    padding: calc(var(--header-height) + var(--space-xl)) var(--space-md) var(--space-xl);
    gap: var(--space-lg);
  }

  .hero-editorial__headline {
    font-size: clamp(2.6rem, 12vw, 4.2rem);
  }

  .hero-editorial__supporting {
    font-size: clamp(1rem, 4.2vw, 1.3rem);
  }

  .hero-editorial__visual {
    min-height: 340px;
  }

  .hero-editorial__actions .btn {
    flex: 1 1 100%;
  }

  .hero-editorial__trust {
    justify-content: center;
    font-size: 0.7rem;
  }

  .hero-editorial__accent {
    width: 120px;
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-editorial__image,
  .hero-editorial__image img,
  .hero-editorial__accent,
  .hero-editorial__copy .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}