/* Lili & Co. — homepage hero, "The Stitching Line".
   Every class is lh- prefixed: the page already carries .lc-* sections and
   Blocksy owns generic names like .hero-section, .btn and .stage.
   Palette is the live brand palette, nothing invented. */

.lh-hero {
  --lh-pink:    #F2A7BB;
  --lh-coral:   #E8847A;
  --lh-sand:    #F5E6D3;
  --lh-cream:   #FAF6F0;
  --lh-espresso:#3D2B1F;
  --lh-mocha:   #8B6F5E;

  --lh-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --lh-sans:  'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* cream stage — the owner's choice. data-stage="espresso" flips it. */
  --lh-bg:      var(--lh-cream);
  --lh-deep:    var(--lh-sand);
  --lh-ink:     var(--lh-espresso);
  --lh-body:    var(--lh-mocha);
  --lh-eyebrow: var(--lh-coral);
  --lh-dot:     rgba(61,43,31,.26);
  --lh-ghost-border: var(--lh-espresso);
  --lh-ghost-ink:    var(--lh-espresso);
  --lh-raw: grayscale(1) sepia(.34) saturate(.55) brightness(.97) contrast(1.07);
  --lh-needle-a: var(--lh-espresso);
  --lh-needle-b: var(--lh-mocha);
  --lh-dust-op: .5;
  --lh-bloom: .22;

  position: relative;
  background: var(--lh-bg);
  overflow: hidden;
  padding: clamp(20px, 2.4vw, 34px) 0 0;
  box-sizing: border-box;
}
.lh-hero[data-stage="espresso"] {
  --lh-bg:      var(--lh-espresso);
  --lh-deep:    #2C1F16;
  --lh-ink:     var(--lh-cream);
  --lh-body:    var(--lh-sand);
  --lh-eyebrow: var(--lh-pink);
  --lh-dot:     rgba(44,31,22,.58);
  --lh-ghost-border: rgba(250,246,240,.45);
  --lh-ghost-ink:    var(--lh-cream);
  --lh-raw: grayscale(1) sepia(.42) saturate(.6) brightness(.84) contrast(1.14);
  --lh-needle-a: #C9B29A;
  --lh-needle-b: var(--lh-cream);
  --lh-dust-op: .95;
  --lh-bloom: .5;
}
.lh-hero *, .lh-hero *::before, .lh-hero *::after { box-sizing: border-box; }

.lh-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(232,132,122,.13), transparent 62%),
    radial-gradient(90% 60% at 50% -10%, rgba(242,167,187,.07), transparent 60%);
  pointer-events: none;
}

/* ── type ─────────────────────────────────────────────────────────── */
.lh-type {
  position: relative;
  z-index: 5;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}
.lh-eyebrow {
  margin: 0;
  font-family: var(--lh-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lh-eyebrow);
}
.lh-hero h1.lh-h1 {
  margin: 0;
  padding: 0;
  font-family: var(--lh-serif);
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--lh-ink);
}
.lh-h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--lh-eyebrow);
}
.lh-sub {
  margin: 0;
  max-width: 44em;
  font-family: var(--lh-sans);
  font-size: clamp(14px, 1.5vw, 15.5px);
  line-height: 1.62;
  color: var(--lh-body);
  opacity: .9;
}
.lh-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.lh-hero a.lh-btn {
  font-family: var(--lh-sans);
  font-size: 14.5px;
  font-weight: 600;
  padding: 15px 32px;
  border-radius: 30px;
  text-decoration: none;
  display: inline-block;
  border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.lh-hero a.lh-btn-solid {
  background: var(--lh-coral);
  color: #fff;
  box-shadow: 0 8px 26px -10px rgba(232,132,122,.9);
}
.lh-hero a.lh-btn-solid:hover,
.lh-hero a.lh-btn-solid:focus-visible {
  background: var(--lh-coral);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(232,132,122,1);
}
.lh-hero a.lh-btn-ghost {
  background: transparent;
  color: var(--lh-ghost-ink);
  border-color: var(--lh-ghost-border);
}
.lh-hero a.lh-btn-ghost:hover,
.lh-hero a.lh-btn-ghost:focus-visible {
  color: var(--lh-ghost-ink);
  background: rgba(61,43,31,.05);
  transform: translateY(-2px);
}
.lh-hero[data-stage="espresso"] a.lh-btn-ghost:hover { background: rgba(245,230,211,.1); }
.lh-hero a.lh-btn:focus-visible { outline: 2px solid var(--lh-coral); outline-offset: 3px; }
.lh-trust {
  margin: 2px 0 0;
  font-family: var(--lh-sans);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--lh-body);
  opacity: .62;
}

/* ── the conveyor ─────────────────────────────────────────────────── */
.lh-stage {
  position: relative;
  height: clamp(268px, min(31vw, 44vh), 430px);
  margin-top: clamp(2px, 0.6vw, 10px);
  --lh-panel-half: 118px;   /* both replaced by JS once the belt is measured */
  --lh-ndl-h: 84px;
  --lh-belt-y: 42%;         /* the belt rides above centre, leaving the needle its band */
  perspective: 1250px;
  perspective-origin: 50% 42%;
  overflow: hidden;
}
.lh-belt { position: absolute; inset: 0; transform-style: preserve-3d; }
.lh-panel {
  position: absolute;
  left: 50%;
  top: var(--lh-belt-y);
  width: 150px;
  height: 188px;
  margin: -94px 0 0 -75px;
  transform-style: preserve-3d;
  will-change: transform;
  --lh-rev: 0;
}
.lh-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  transform-style: flat;
  background: var(--lh-deep);
  box-shadow: 0 22px 40px -24px rgba(61,43,31,.5);
}
.lh-hero[data-stage="espresso"] .lh-card { box-shadow: 0 26px 46px -22px rgba(20,13,8,.85); }
.lh-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(61,43,31,.1);
  pointer-events: none;
}
.lh-hero[data-stage="espresso"] .lh-card::after { box-shadow: inset 0 0 0 1px rgba(245,230,211,.14); }
.lh-card picture { display: contents; }
.lh-hero img.lh-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
}
.lh-ph-raw { filter: var(--lh-raw); }
.lh-ph-fin { clip-path: inset(0 0 0 calc((1 - var(--lh-rev)) * 100%)); }
.lh-screen {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--lh-dot) .85px, transparent 1.45px);
  background-size: 4.2px 4.2px;
  clip-path: inset(0 calc(var(--lh-rev) * 100%) 0 0);
}

/* ── the thread running out of the needle and down through the cloth ── */
.lh-seam {
  position: absolute;
  left: 50%;
  top: calc(var(--lh-belt-y) - var(--lh-panel-half) + 24px);
  bottom: 3%;
  width: 46px;
  margin-left: -23px;
  z-index: 60;
  pointer-events: none;
}
.lh-seam::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  bottom: 0;
  width: 40px;
  margin-left: -20px;
  background: linear-gradient(180deg, rgba(232,132,122,.75), rgba(242,167,187,.28) 55%, transparent);
  filter: blur(13px);
  opacity: var(--lh-bloom);
}
.lh-seam svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lh-sg0 { stop-color: var(--lh-coral); stop-opacity: 1; }
.lh-sg1 { stop-color: var(--lh-coral); stop-opacity: .78; }
.lh-sg2 { stop-color: var(--lh-coral); stop-opacity: 0; }
.lh-thread-run {
  fill: none;
  stroke: url(#lh-seam-grad);
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  d: path("M20 0 C26 18 14 34 20 52 C26 70 14 86 20 104 C26 122 14 138 20 156 C25 172 16 187 20 200");
  animation: lh-ripple 4.6s ease-in-out infinite alternate;
}
@keyframes lh-ripple {
  from { d: path("M20 0 C26 18 14 34 20 52 C26 70 14 86 20 104 C26 122 14 138 20 156 C25 172 16 187 20 200"); }
  to   { d: path("M20 0 C14 18 26 34 20 52 C14 70 26 86 20 104 C14 122 26 138 20 156 C15 172 24 187 20 200"); }
}

/* ── the needle ───────────────────────────────────────────────────── */
.lh-needle {
  position: absolute;
  left: 50%;
  bottom: calc(100% - var(--lh-belt-y) + var(--lh-panel-half) - 28px);
  width: calc(var(--lh-ndl-h) * .654);
  height: var(--lh-ndl-h);
  transform: translateX(-50%);
  z-index: 62;
  pointer-events: none;
}
.lh-bob { position: absolute; inset: 0; animation: lh-stitch .85s cubic-bezier(.45,0,.3,1) infinite; }
.lh-needle svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(61,43,31,.3));
}
/* the outline keeps the needle readable when it passes over a dark suit */
.lh-ndl-body {
  fill: url(#lh-ndl-grad);
  stroke: var(--lh-bg);
  stroke-width: 2.6;
  paint-order: stroke fill;
}
.lh-ns1, .lh-ns3 { stop-color: var(--lh-needle-a); }
.lh-ns2 { stop-color: var(--lh-needle-b); }
.lh-t0 { stop-color: var(--lh-coral); stop-opacity: 0; }
.lh-t1 { stop-color: var(--lh-coral); stop-opacity: 1; }
.lh-thread { fill: none; stroke: var(--lh-coral); stroke-width: 3; stroke-linecap: round; }
.lh-thread-feed { stroke: url(#lh-thr-grad); stroke-width: 3.2; }
.lh-thread-groove { stroke-width: 2.2; }
.lh-spark {
  position: absolute;
  left: 50%;
  bottom: 3.7%;
  width: 30px;
  height: 30px;
  margin: 0 0 -15px -15px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,132,122,.6), transparent 66%);
  opacity: 0;
  animation: lh-spark .85s cubic-bezier(.45,0,.3,1) infinite;
}
@keyframes lh-stitch {
  0%   { transform: translateY(-7px); }
  36%  { transform: translateY(8px); }
  50%  { transform: translateY(8px); }
  100% { transform: translateY(-7px); }
}
@keyframes lh-spark {
  0%, 26% { opacity: 0;   transform: scale(.5); }
  40%     { opacity: .85; transform: scale(1.15); }
  70%     { opacity: 0;   transform: scale(1.4); }
  100%    { opacity: 0;   transform: scale(.5); }
}

/* ── lint, thrown off at the needle point ─────────────────────────── */
.lh-dust { position: absolute; inset: 0; z-index: 61; pointer-events: none; }
.lh-dust i {
  position: absolute;
  left: 50%;
  bottom: calc(100% - var(--lh-belt-y) + var(--lh-panel-half) - 22px);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--lh-coral);
  opacity: 0;
  animation: lh-rise linear infinite;
}
.lh-hero[data-stage="espresso"] .lh-dust i { background: var(--lh-sand); }
@keyframes lh-rise {
  0%   { opacity: 0; transform: translate3d(0,0,0) scale(.5); }
  12%  { opacity: var(--lh-dust-op); }
  70%  { opacity: calc(var(--lh-dust-op) * .58); }
  100% { opacity: 0; transform: translate3d(var(--lh-dx), var(--lh-dy), 0) scale(1.15); }
}

/* ── soft exits at the stage edges ────────────────────────────────── */
.lh-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(56px, 13%, 190px);
  z-index: 55;
  pointer-events: none;
}
.lh-fade-l { left: -1px;  background: linear-gradient(90deg,  var(--lh-bg) 12%, transparent); }
.lh-fade-r { right: -1px; background: linear-gradient(270deg, var(--lh-bg) 12%, transparent); }

/* ── what the two halves mean ─────────────────────────────────────── */
.lh-legend {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 24px clamp(40px, 5vw, 68px);
  font-family: var(--lh-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lh-body);
  opacity: .5;
}
.lh-legend span { flex: 1; min-width: 0; }
.lh-legend span:first-child { text-align: right; }
.lh-legend b {
  flex: 0 1 auto;
  font-weight: 600;
  color: var(--lh-eyebrow);
  opacity: .85;
  letter-spacing: .1em;
}
@media (max-width: 620px) {
  /* the two labels alone still map left-of-needle to right-of-needle */
  .lh-legend { font-size: 9px; letter-spacing: .1em; gap: 16px; }
  .lh-legend b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lh-bob, .lh-spark, .lh-thread-run { animation: none; }
  .lh-spark { opacity: 0; }
  .lh-dust { display: none; }
  .lh-hero a.lh-btn { transition: none; }
}