/* collaboration.flocoffee.id · hero art "Meja bersama".
   Markup contract (BRIEF.md §6, updated 2026-11-12):
     figure#hero-art.hero-art
       canvas.hero-canvas[aria-hidden="true"]
       picture.hero-still (decorative img, alt="")
       nav.hero-labels > a.hero-label[data-hero-label][data-track][href="#roastery|#brand|#riset"] x3
   The older contract (span.hero-label directly in an aria-hidden figure) still works.
   The figure is the first thing on the page: a full-bleed band directly under the top bar, the
   headline below it. hero.js adds .is-live after the first canvas frame; until then (or if WebGL is
   missing) the still image is what people see. */
.hero-art {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(380px, 54vh, 560px);
  height: clamp(380px, 54svh, 560px);
  margin: 0;
  overflow: hidden;
  background: var(--paper, #fff);
  contain: layout paint;
}
@media (max-width: 719px) {
  .hero-art { height: auto; aspect-ratio: 1 / 1; max-height: 60vh; max-height: 60svh; }
}
.hero-still,
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-still img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.hero-canvas {
  display: block;
  z-index: 1;
  background: var(--paper, #fff);
  opacity: 0;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1);
}
.hero-art.is-live .hero-canvas { opacity: 1; }
.hero-art.is-live .hero-still { visibility: hidden; transition: visibility 0s .7s; }

/* Labels sit in the white space beside each group; hero.js sets left/top (%) and data-side.
   The defaults at the end match the stills, for when the canvas never starts. The nav (new
   contract) overlays the figure without taking layout space, so the percentages still resolve
   against the figure. The dash is a background stripe in currentColor, so the text sits exactly
   where it did when the dash was an element: 4 px + 18 px dash + 8 px gap before the text. */
.hero-labels {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.hero-label {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px 3px 30px;
  font: 500 13px/1.2 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .01em;
  color: var(--ink-2, #555);
  background: linear-gradient(currentColor, currentColor) 4px 50% / 18px 1px no-repeat, var(--paper, #fff);
  white-space: nowrap;
  text-decoration: none;
  pointer-events: none;
  user-select: none;
  transform: translate(0, -50%);
  transition: color .3s ease, background-size .3s cubic-bezier(.16, 1, .3, 1), padding .3s cubic-bezier(.16, 1, .3, 1);
}
.hero-label[data-side="l"] {
  padding: 3px 30px 3px 4px;
  background-position: right 4px center, 0 0;
  transform: translate(-100%, -50%);
}
/* links (new contract): clickable, focusable, a 44 px touch target that does not move the text,
   and a small arrow after the text pointing down to the section */
a.hero-label {
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
a.hero-label::before {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  height: 44px;
  min-width: 44px;
  transform: translateY(-50%);
}
a.hero-label::after {
  content: "";
  flex: none;
  width: 7px;
  height: 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M3.5 .7v7.2M.9 5.3l2.6 2.6 2.6-2.6' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 7px 9px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M3.5 .7v7.2M.9 5.3l2.6 2.6 2.6-2.6' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 7px 9px no-repeat;
}
a.hero-label:focus { outline: none; }
a.hero-label:focus-visible { outline: 2px solid var(--ink, #111); outline-offset: 2px; }
/* emphasis: the lamp is on that group (hero.js sets data-focus), or the link is hovered/focused */
.hero-art[data-focus="roastery"] [data-hero-label="roastery"],
.hero-art[data-focus="brand"] [data-hero-label="brand"],
.hero-art[data-focus="riset"] [data-hero-label="riset"],
a.hero-label:hover,
a.hero-label:focus-visible {
  color: var(--ink, #111);
  background-size: 30px 1px, auto;
  padding-left: 42px;
}
.hero-art[data-focus="roastery"] [data-hero-label="roastery"][data-side="l"],
.hero-art[data-focus="brand"] [data-hero-label="brand"][data-side="l"],
.hero-art[data-focus="riset"] [data-hero-label="riset"][data-side="l"],
a.hero-label[data-side="l"]:hover,
a.hero-label[data-side="l"]:focus-visible { padding-left: 4px; padding-right: 42px; }
@media (max-width: 719px) {
  .hero-label,
  .hero-art[data-focus] .hero-label,
  a.hero-label:hover,
  a.hero-label:focus-visible {
    font-size: 12px;
    padding-left: 22px;
    background-size: 12px 1px, auto;
  }
  .hero-label[data-side="l"],
  .hero-art[data-focus] .hero-label[data-side="l"],
  a.hero-label[data-side="l"]:hover,
  a.hero-label[data-side="l"]:focus-visible { padding-left: 4px; padding-right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-canvas, .hero-label { transition: none; }
  .hero-art.is-live .hero-still { transition: none; }
}

/* label positions for the stills (written by tools/hero/render.mjs) */
/* @still-labels:start */
.hero-label[data-hero-label="roastery"]{left:1.49%;top:16.00%}
.hero-label[data-hero-label="brand"]{left:36.16%;top:11.60%}
.hero-label[data-hero-label="riset"]{left:64.9%;top:14.80%}
@media (max-width: 719px) {
  .hero-label[data-hero-label="roastery"]{left:37.6%;top:10.00%}
  .hero-label[data-hero-label="brand"]{left:58%;top:32.00%}
  .hero-label[data-hero-label="riset"]{left:30%;top:63.20%}
}
/* @still-labels:end */