/* The home page hero: five lacquered nails, one for each service, painted live by hero.js. */

.hero.hero-live {
  --L: clamp(260px, 24vw, 500px);
  height: min(82vh, 780px);
  min-height: 680px;
  background: radial-gradient(90% 120% at 76% 60%, #2b3c30 0%, #17221c 52%, #101713 100%);
}

/* The sentence under the heading stops short of the first nail. */
.hero-live .hero-copy > p:not(.eyebrow) { max-width: 500px; }

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .7s ease;
}

.hero-live.is-lit .hero-canvas { opacity: 1; }

.hero-fan {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(92px, 7.5vw, 150px);
  transform: translateY(-48%);
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.hero-nail {
  position: relative;
  display: block;
  width: calc(var(--L) * .37);
  height: calc(var(--L) * var(--len) + 38px);
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.hero-nail span {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font: 600 14px/1 var(--font-manrope);
  color: #ffffffd9;
  transition: color .2s ease;
}

.hero-nail:hover span,
.hero-nail:focus-visible span { color: #e8b47a; }

.hero-nail:focus-visible {
  outline: 2px solid #e8b47a;
  outline-offset: 5px;
  border-radius: 60px 60px 14px 14px;
}

.hero-pause {
  position: absolute;
  z-index: 3;
  right: clamp(92px, 7.5vw, 150px);
  bottom: 18px;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  background: none;
  color: #ffffffb8;
  font: 600 13px/1 var(--font-manrope);
  cursor: pointer;
}

.hero-pause:hover { color: #fff; }
.hero-pause:focus-visible { outline: 2px solid #e8b47a; outline-offset: 2px; border-radius: 4px; }

/* These simple nails show until the live painting is ready, and stay if the browser can't paint it. */
.hero-nail::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 0;
  bottom: 38px;
  border-radius: 50% 50% 44% 44% / 74% 74% 26% 26%;
  background: linear-gradient(115deg, #f1dcd2, #d9b6a8);
  box-shadow: 0 18px 34px #0007, inset -8px -6px 18px #0002, inset 8px 8px 16px #fff5;
  transition: opacity .7s ease;
}

.hero-live.is-lit .hero-nail::before { opacity: 0; }

.hero-nail:nth-child(2)::before { background: linear-gradient(115deg, #d4882f, #5b2a0c 58%, #1d0b05); }
.hero-nail:nth-child(3)::before { background: linear-gradient(8deg, #06392b, #0b5f46 72%, #caa053 74%); }
.hero-nail:nth-child(4)::before { background: linear-gradient(115deg, #5a3626, #2c1710); }
.hero-nail:nth-child(5)::before { background: linear-gradient(115deg, #eed8cc, #caa053); }

/* On short screens the nails sit higher, so the floating Reserve bar doesn't cover their names. */
@media (min-width: 1081px) and (max-height: 820px) {
  .hero.hero-live { --L: min(clamp(260px, 24vw, 500px), calc(100vh - 290px)); }
  .hero-fan { top: 36px; transform: none; }
}

/* The nails move below the words when there's no room beside them. */
@media (max-width: 1080px) {
  .hero.hero-live {
    --L: min(calc((100vw - 64px) / 1.95), 300px);
    display: block;
    height: auto;
    min-height: 0;
    padding-bottom: 60px;
    background: radial-gradient(120% 60% at 50% 88%, #2b3c30 0%, #17221c 60%, #101713 100%);
  }

  .hero-live .hero-copy {
    max-width: none;
    padding-bottom: 34px;
  }

  .hero-fan {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    justify-content: center;
    gap: 8px;
  }

  .hero-pause { right: 14px; bottom: 10px; }
  .hero-nail span { font-size: 13px; }
}

/* On phones the site's fixed Menu tab sits at the right edge, so the nails stay clear of it. */
@media (max-width: 640px) {
  .hero.hero-live { --L: calc((100vw - 96px) / 1.95); }
  .hero-fan { justify-content: flex-start; padding-left: 14px; gap: 6px; }
}