/* Scroll-driven espresso hero. Fonts and tokens come from site.css. */

.hero { position: relative; height: 100svh; background: var(--night); }
.sequence-enhanced.hero { height: 200svh; }
.hero-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.hero-visual, .hero-shade { position: absolute; inset: 0; }
.hero-visual { z-index: -2; background: #000; }
.hero-fallback, .hero-fallback img, .hero-canvas { display: block; width: 100%; height: 100%; }
.hero-fallback img { object-fit: cover; object-position: center; }
.hero-canvas { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.sequence-ready .hero-canvas { opacity: 1; }
.sequence-ready .hero-fallback { opacity: 0; }
.hero-shade { z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 45%, transparent 62%), linear-gradient(0deg, rgba(14, 12, 10, .9) 0%, transparent 26%), linear-gradient(180deg, rgba(14, 12, 10, .6) 0%, transparent 18%); }

.hero-copy { position: absolute; left: var(--gutter); bottom: clamp(10rem, 24vh, 16rem); width: min(64vw, 1180px); }
/* Lower desktop windows keep the earlier offset so the headline never reaches the header. */
@media (min-width: 861px) and (max-height: 760px) {
  .hero-copy { bottom: clamp(6.5rem, 15vh, 10rem); }
}
.hero-copy .eyebrow { margin-bottom: clamp(1.2rem, 2.4vh, 2rem); }
/* A soft dark halo behind the hero text: since cafe-4 the real slat wall, brighter than its old reflection, sits behind the
   eyebrow and headline in the first frames (rendered at 390–2560 px: headline at least 7.1:1, lead 7.2:1). */
.hero-title, .hero-lead { text-shadow: 0 0 1.2em rgba(14, 12, 10, .6), 0 1px 3px rgba(14, 12, 10, .45); }
/* The eyebrow is small text and its end reaches the brightest slats at 1280–1536 px: with this tighter halo oak measures
   3.7:1 and caramel 4.3:1 there, latte 5.9:1 (95th percentile of the background under the rendered glyphs, 1366 and 1536). */
.hero-copy .eyebrow { color: var(--latte); text-shadow: 0 0 .35em rgba(14, 12, 10, .85), 0 0 .9em rgba(14, 12, 10, .75), 0 1px 2px rgba(14, 12, 10, .8); }
.hero-title { font-family: var(--display); font-size: clamp(3.5rem, 8.4vw, 10.6rem); font-weight: 700; line-height: .9; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.hero-title > span { display: block; }
.hero-title .amp { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--glow); letter-spacing: -.01em; }
.hero-lead { max-width: 34rem; margin-top: clamp(1.4rem, 3vh, 2.2rem); color: var(--on-dark-2); font-size: clamp(1.1rem, 1.35vw, 1.3rem); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(1.6rem, 3.4vh, 2.4rem); }
.hero .btn--ghost { background: rgba(14, 12, 10, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Where the copy sits on the picture, it gives way once the camera reaches the cup (keyboard focus brings it back). */
@media (min-width: 861px), (orientation: landscape) and (max-height: 620px) {
  .sequence-enhanced .hero-copy { opacity: clamp(0, calc((.64 - var(--hero-p, 0)) * 5), 1); transform: translateY(calc(var(--hero-p, 0) * -2rem)); }
  .sequence-enhanced .hero-copy:focus-within { opacity: 1; }
}

.hero-foot { position: absolute; right: var(--gutter); bottom: clamp(1.2rem, 3vh, 2rem); left: var(--gutter); display: flex; align-items: center; gap: 1.5rem; padding-top: 1rem; color: var(--on-dark-3); border-top: 1px solid var(--line-dark); font: 500 .85rem/1.2 var(--sans); font-stretch: 105%; }
.hero-foot .sequence-progress { margin-left: auto; }
.sequence-progress { display: none; align-items: center; gap: .8rem; }
.sequence-enhanced .sequence-progress { display: inline-flex; }
.sequence-progress i { position: relative; display: block; width: 88px; height: 1px; overflow: hidden; background: var(--line-dark); }
.sequence-progress b { position: absolute; inset: 0 auto 0 0; width: var(--sequence-progress, 0%); background: var(--spritz); }
.sequence-progress strong { min-width: 2.2ch; color: var(--cream); font: 400 1.05rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }

@media (max-width: 860px) {
  .hero-visual { top: 48%; }
  .hero-shade { background: linear-gradient(180deg, var(--night) 0%, var(--night) 47%, rgba(14, 12, 10, .25) 60%, transparent 72%), linear-gradient(0deg, rgba(14, 12, 10, .85) 0%, transparent 22%); }
  .hero-copy { top: calc(var(--header) + 2.2rem); bottom: auto; width: auto; right: var(--gutter); }
  .hero-title { font-size: clamp(3.1rem, 14.5vw, 6rem); }
  .hero-lead { font-size: 1.05rem; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { min-width: 13rem; }
  .hero-foot > span:first-child { display: none; }
}

@media (max-width: 420px) {
  .hero-lead { display: none; }
}

/* Short landscape screens (phones held sideways, small laptop windows): the copy sits bottom left over the full image
   and scales with the height, so the headline never slides under the header. Overrides the phone portrait layout. */
@media (orientation: landscape) and (max-height: 620px) {
  .hero-visual { top: 0; }
  .hero-shade { background: linear-gradient(180deg, rgba(14, 12, 10, .8) 0%, transparent 34%), linear-gradient(90deg, rgba(14, 12, 10, .92) 0%, rgba(14, 12, 10, .6) 40%, transparent 66%), linear-gradient(0deg, rgba(14, 12, 10, .85) 0%, transparent 32%); }
  .hero-copy { top: auto; right: auto; left: var(--gutter); bottom: calc(3.3rem + env(safe-area-inset-bottom)); width: min(58vw, 760px); }
  .hero-copy .eyebrow { margin-bottom: .55rem; font-size: .9rem; }
  .hero-title { font-size: clamp(2rem, 12.5vh, 5.4rem); }
  .hero-lead { display: none; }
  .hero-actions { flex-direction: row; align-items: center; margin-top: .9rem; }
  .hero-actions .btn { min-width: 0; min-height: 2.6rem; padding: .65rem 1.15rem; font-size: .88rem; }
  .hero-foot { bottom: calc(.8rem + env(safe-area-inset-bottom)); padding-top: .6rem; }
  .hero-foot > span:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { height: 100svh; }
  .hero-sticky { position: relative; }
  .hero-canvas, .sequence-progress { display: none; }
  .hero-fallback { opacity: 1 !important; }
}