/* ============================================================
   Dawgs & Paws, House Calls scroll reveal, styles
   Palette and type follow the locked Dawgs & Paws system.
   Rose is reserved as a logo echo, so it is used only on the brand
   dot of the section heading, not on the equipment labels.
   ============================================================ */

/* Scoped to the reveal section (NOT :root) so these do not override the site's locked
   palette in styles.css. Ivory matches the site exactly (#FFFEF0); the frames were
   recolored so their backdrop is this same value, so the section blends into the page. */
.hc-reveal, .hc-cta, .hc-edit-panel {
  --ivory:     #FFFEF0;
  --cocoa:     #211714;
  --teal:      #00747F;
  --deep-teal: #0B3E42;
  --rose:      #DC8495; /* logo echo only */
  --honey:     #F2B84B; /* accent dots only */

  --font-display: "Fraunces", Georgia, serif;  /* display face, swap here if it changes */
  --font-body:    "Figtree", system-ui, sans-serif;

  --site-max: 1500px;
}

/* ---- section shell ------------------------------------------------ */
.hc-reveal {
  position: relative;
  height: 500vh;              /* scroll length, more height = slower reveal */
  background: var(--ivory);
}
.hc-reveal__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* flat site ivory; the frames were recolored so their backdrop is exactly this,
     so the letterbox gutters and the frame read as one continuous colour */
  background: var(--ivory);
}
.hc-reveal__frame {
  position: relative;
  width: 100%;
  max-width: var(--site-max);
  aspect-ratio: 16 / 9;
  max-height: 100vh;
}
.hc-reveal__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- label overlay ------------------------------------------------ */
.hc-reveal__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* labels re-enable pointer events only in edit mode */
}
.hc-reveal__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hc-line {
  stroke: var(--teal);
  stroke-width: 1.25;
  opacity: 0;
  transition: opacity .25s ease;
}

.hc-dot {
  position: absolute;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px; /* center on the coordinate */
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(0, 116, 127, .25);
  opacity: 0;
  transition: opacity .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 800;
  line-height: 1;
  color: var(--ivory);
  font-size: 0;              /* the number is hidden on desktop (leader-line labels are used there); shown on mobile */
}

.hc-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(13px, 1.15vw, 18px);
  line-height: 1.25;
  letter-spacing: .005em;
  color: var(--cocoa);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.hc-label--left   { text-align: left;   }
.hc-label--right  { text-align: right;  }
.hc-label--center { text-align: center; }

/* ---- numbered legend (maps the on-van numbers to short descriptions; lives INSIDE the stage on mobile) ---- */
.hc-legend-wrap { display: none; }   /* desktop uses the leader-line labels; the legend is mobile-only */
.hc-legend-head { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin: 0 0 12px; }
.hc-legend { list-style: none; margin: 0; padding: 0; }
.hc-legend__item { display: flex; align-items: flex-start; gap: 10px; }
.hc-legend__num {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal); color: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 800; font-size: 12px; line-height: 1;
}
.hc-legend__text {
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px; line-height: 1.3;
  color: var(--cocoa); padding-top: 2px;
}

/* ---- intro headline that sits over the closed van ----------------- */
.hc-reveal__intro {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.hc-reveal__intro h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 6vw, 84px);
  line-height: .98;
  color: var(--deep-teal);
  letter-spacing: -.01em;
}
.hc-reveal__intro h2 .dot { color: var(--rose); } /* the brand-noun rose dot */
.hc-reveal__intro p {
  margin: .6rem 0 0;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.4vw, 19px);
  color: var(--cocoa);
  opacity: .8;
}
.hc-reveal__hint {
  position: absolute;
  left: 50%;
  bottom: 5vh;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}

/* ---- closing CTA (sample, drop your real section in its place) ----- */
.hc-cta {
  background: var(--deep-teal);
  color: var(--ivory);
  text-align: center;
  padding: clamp(60px, 10vw, 130px) 24px;
}
.hc-cta h3 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 60px);
  line-height: 1.02;
}
.hc-cta p {
  margin: 0 auto 2rem;
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.5vw, 19px);
  opacity: .85;
}
.hc-book {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  color: var(--ivory);
  background: var(--teal);
  padding: 16px 34px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .15s ease;
}
.hc-book:hover { transform: translateY(-2px); }

/* ---- edit mode ---------------------------------------------------- */
body.hc-edit .hc-reveal__overlay { pointer-events: none; }
body.hc-edit .hc-dot,
body.hc-edit .hc-label {
  pointer-events: auto;
  cursor: grab;
}
body.hc-edit .hc-label { outline: 1px dashed rgba(0, 116, 127, .5); padding: 2px 4px; }
.hc-edit-panel {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 50;
  width: 290px;
  max-height: 60vh;
  overflow: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  color: #222;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
.hc-edit-panel button {
  margin: 8px 0;
  font: inherit;
  cursor: pointer;
  background: var(--teal);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 6px 12px;
}
.hc-edit-panel pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11px;
  background: #f6f6f6;
  padding: 8px;
  border-radius: 6px;
}

/* ---- mobile ------------------------------------------------------- */
@media (max-width: 640px) {
  .hc-reveal { height: 170vh; }                 /* shorter, snappier scrub = far less empty scrolling */
  .hc-reveal__frame { width: 112%; margin-inline: -6%; }   /* whole van, slight bleed wider */
  .hc-reveal__hint { bottom: 2.5vh; }
  /* MOBILE LABELING: the leader-line text labels are placed by percent against a WIDE desktop
     frame and clip on a narrow phone, so hide them and show NUMBERED markers on the van instead;
     the numbered legend below the reveal maps each number to a short description. */
  .hc-line, .hc-label { display: none; }
  .hc-dot {
    width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 12px;
    box-shadow: 0 0 0 3px rgba(0, 116, 127, .3), 0 1px 5px rgba(33, 23, 20, .3);
  }
  /* stack the van + legend INSIDE the pinned stage so they share the screen (no empty gap below the van) */
  .hc-reveal__stage { flex-direction: column; justify-content: center; gap: clamp(10px, 2.5vw, 18px); }
  .hc-legend-wrap { display: block; width: 100%; max-width: 560px; padding: 0 clamp(18px, 5vw, 26px); box-sizing: border-box; }
  .hc-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
}